/* The stash window takes as much room as the page and screen allow: as wide
   as the content area, but no taller than the screen, since the 10 by 10
   grid is square. */
.stash-window {
  width: 100%; /* its column (below) sets the size */
  margin-bottom: 12px;
}

/* The stash, and beside it (on wide screens) the selected item, adding and
   hints; below it on narrower ones. */
.stash-layout {
  display: grid;
  /* The stash: as tall as the screen allows, leaving room for the details. */
  grid-template-columns: min(calc(100% - 20rem), max(20rem, calc(100dvh - 13rem))) minmax(18rem, 1fr);
  gap: 20px 28px;
  align-items: start;
}
@media (max-width: 1250px) {
  .stash-layout { grid-template-columns: minmax(0, 1fr); }
  .stash-window { width: min(100%, max(20rem, calc(100dvh - 13rem))); }
}
.stash-detail > * { margin-top: 0; }
.stash-detail .grid-selected:first-child, .stash-detail .inv-status:first-child { margin-top: 0; }

/* Less space above the stash than other pages: it's the whole page. */
.stash-content { padding-top: 20px; }

/* Title bar: the title, and the game type picker on the right. */
.stash-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-bottom: 10px;
}
.stash-head .stash-title { margin: 0; text-align: left; }
.segmented.compact label { padding: 3px 10px; font-size: var(--step--1); }

/* Tabs like the game's: a row of carved buttons over the grid. */
.stash-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 8px; }
.stash-tabs [role="tab"] {
  flex: 1 1 auto;
  padding: 5px 10px;
  white-space: nowrap;
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--text-dim);
  background: linear-gradient(#1d1a17, #0f0e0d);
  border: 1px solid #2e2c2a;
  box-shadow: var(--bevel);
  text-shadow: var(--engrave);
  cursor: pointer;
}
.stash-tabs [role="tab"]:hover { color: var(--text); background: linear-gradient(#26221e, #141210); }
/* The open tab is lit and sits forward of the others. */
.stash-tabs [role="tab"][aria-selected="true"] {
  color: var(--q-unique);
  background: linear-gradient(#36302a, #1f1c19);
  border-color: #6a6056;
  box-shadow: inset 0 1px 0 rgb(255 240 210 / 0.12), inset 0 -2px 0 var(--q-unique), 0 2px 6px rgb(0 0 0 / 0.7);
  text-shadow: var(--engrave-gilt);
}

.stash-summary { margin: 0 0 8px; font-size: var(--step--1); color: var(--q-crafted); }
.stash-foot { max-width: 46rem; }
kbd {
  padding: 0 5px;
  font: inherit;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
}

/* The Runes and Gems boards grow with the window here. */
.stash-window .rune-board { grid-template-columns: repeat(var(--columns, 9), minmax(0, 1fr)); gap: 4px; }
.stash-window .rune-count, .stash-window .rune-amount { font-size: 0.8rem; }
.stash-window .rune-amount { height: 20px; }

/* ---- Personal and Shared tabs: the game's 10 by 10 grid ---- */

.stash-grid {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #0d0d0f;
  /* The cells: bronze lines every tenth of the grid, each cell shaded at
     its edges so it reads as its own small pocket. */
  background-image:
    linear-gradient(to right, #3a3229 1px, transparent 1px),
    linear-gradient(to bottom, #3a3229 1px, transparent 1px),
    radial-gradient(ellipse at 50% 45%, rgb(255 240 210 / 0.035), transparent 50%, rgb(0 0 0 / 0.55));
  background-size: 10% 10%;
  border: 1px solid #5a4c38;
  /* Sunk into the slab, with a thin gilt lip like the game's. */
  box-shadow: inset 0 0 18px rgb(0 0 0 / 0.95), 0 0 0 3px #0e0c0b, 0 0 0 4px #4a3f30, 0 1px 0 4px rgb(255 240 210 / 0.05);
}

/* An item covers its cells: --x, --y from the top left, --w by --h. */
.grid-item {
  position: absolute;
  left: calc(var(--x) * 10%);
  top: calc(var(--y) * 10%);
  width: calc(var(--w) * 10%);
  height: calc(var(--h) * 10%);
  padding: 1px; /* fixed: a % here is of the whole grid's width */
  font: inherit;
  background: rgb(30 45 85 / 0.28);
  border: 1px solid rgb(90 110 160 / 0.35);
  cursor: pointer;
  --qc: var(--q-normal);
}
.grid-item[data-quality="unique"] { --qc: var(--q-unique); }
.grid-item[data-quality="set"] { --qc: var(--q-set); }
.grid-item[data-quality="rare"] { --qc: var(--q-rare); }
.grid-item[data-quality="magic"] { --qc: var(--q-magic); }
.grid-item[data-quality="crafted"] { --qc: var(--q-crafted); }
.grid-item:hover, .grid-item:focus-visible { border-color: var(--qc); background: rgb(30 45 85 / 0.45); outline: none; }
.grid-item[aria-pressed="true"] { border-color: var(--qc); box-shadow: inset 0 0 0 1px var(--qc), 0 0 10px rgb(0 0 0 / 0.8); }
.grid-item .footprint { width: 100%; height: 100%; background: none; }
.grid-count {
  position: absolute;
  right: 4px;
  bottom: 1px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--q-normal);
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  font-variant-numeric: lining-nums tabular-nums;
}

/* Items that don't fit in the tab, below it at the grid's cell size. */
.grid-left { margin-top: 10px; }
.grid-left-list { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.grid-left-list .grid-item { position: relative; left: auto; top: auto; width: calc(var(--w) * 40px); height: calc(var(--h) * 40px); }

.grid-selected { margin: 0 0 10px; }
.grid-selected .inv-table { max-width: none; }
.grid-pick { margin: 0 0 10px; }
.stash-empty { color: var(--text-dim); margin: 12px 0; }

.stash-tab-add { margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.stash-tab-add summary { cursor: pointer; color: var(--text-dim); font-size: var(--step--1); margin-bottom: 8px; }
.stash-tab-add[open] summary { color: var(--text); }
.grid-selected .inv-table { table-layout: auto; }

/* The selected item, stacked to fit beside the grid: art, name and count on
   one line, its actions below. */
.stash-detail .inv-table, .stash-detail .inv-table tbody { display: block; table-layout: auto; }
.stash-detail .inv-table thead { display: none; }
.stash-detail .inv-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-top: 1px solid var(--line); }
.stash-detail .inv-table td { border: 0; padding: 0; }
.stash-detail .inv-table td:nth-child(3) { display: none; }
.stash-detail .inv-table td:nth-child(5) { grid-column: 1 / -1; }