/* ============================================================================
 * Items window — tabbed Inventory / Statistics. (Crafting moved to the NPC trade window.)
 * (The ability tree moved to abilities.css / #abilWin.)
 * Ported from the game-client mockup's #inv overlay. Everything is scoped to
 * #itemsWin so it can never leak into the HUD or other windows.
 * Depends on theme.css for tokens (--ink, --gold, --r-*, …) and for the shared
 * .nw / .ph / .btn / .bar / .rr / .slotcell / .hidden primitives.
 * ========================================================================= */

/* ------------------------------------------------------------ window shell */
/* Non-modal: the overlay never eats clicks meant for the world, only the box does. */
#itemsWin{--cell:62px;position:fixed;inset:0;z-index:120;pointer-events:none}
#itemsWin .box{
  pointer-events:auto;position:absolute;left:50%;top:52px;transform:translateX(-50%);
  width:min(760px,94vw);height:min(680px,88vh);
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(#12172af7,#0b1020f9);
  box-shadow:0 26px 70px -18px #000,0 0 0 1px #ffffff10;
  transition:width .18s ease}

/* title bar — drag grip + close */
#itemsWin .winbar{display:flex;align-items:center;gap:9px;padding:9px 14px;flex:none;
  border-bottom:1px solid var(--edge);cursor:grab;user-select:none;
  background:linear-gradient(#18213a,#0f1526);border-radius:11px 11px 0 0}
#itemsWin .winbar:active{cursor:grabbing}
#itemsWin .winbar .dots{color:var(--faint);font-size:12px;letter-spacing:1px}
#itemsWin .winbar .wt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:800;color:var(--gold2)}
#itemsWin .winbar .wsub{margin-left:auto;font-size:11px;color:var(--faint);letter-spacing:.04em}
#itemsWin .winbar .wx{margin-left:10px;width:24px;height:24px;border-radius:7px;display:grid;
  place-items:center;background:#0c1120;border:1px solid var(--line2);color:var(--dim);
  cursor:pointer;font-size:13px}
#itemsWin .winbar .wx:hover{border-color:var(--gold);color:var(--ink)}

/* ------------------------------------------------------------ tabs (CSS-only) */
#itemsWin .invtabs{display:flex;padding:0 16px;flex:none;border-bottom:1px solid var(--edge);
  background:linear-gradient(#0f1526,#0c1020)}
#itemsWin .invtabs button{padding:11px 20px;background:none;border:none;
  border-bottom:2px solid transparent;color:var(--faint);font-weight:700;font-size:13px;
  cursor:pointer;font-family:inherit}
#itemsWin .invtabs button:hover{color:var(--dim)}
#itemsWin .invtabs button.on{color:var(--mp);border-bottom-color:var(--mp)}

#itemsWin .winbody{flex:1;min-height:0;overflow:hidden}
#itemsWin .tabpane{height:100%;display:none;min-height:0}

/* the whole tab switch is driven by data-tab on .box — no JS class juggling */
/* A 10x4 board is 10 * 62px + 9 * 6px = 674px of grid, so the inventory tab is wider than
   the rest of the window ever needed to be. Diablo's inventory is a wide, shallow tray. */
#itemsWin .box[data-tab="inventory"]{width:min(1160px,97vw);height:min(760px,95vh)}
#itemsWin .box[data-tab="statistics"]{width:min(640px,92vw)}
/* skills is a short list — the narrow footprint its own little window used to have */
#itemsWin .box[data-tab="skills"]{width:min(420px,88vw)}
/* the ability tree wants the room its own window used to have */
#itemsWin .box[data-tab="abilities"]{width:min(1320px,98vw)}
#itemsWin .box[data-tab="inventory"] .tabpane[data-pane="inventory"]{display:flex;flex-direction:column}
#itemsWin .box[data-tab="statistics"] .tabpane[data-pane="statistics"]{display:block}
#itemsWin .box[data-tab="skills"] .tabpane[data-pane="skills"]{display:block;overflow-y:auto;padding:12px 16px}
#itemsWin .box[data-tab="abilities"] .tabpane[data-pane="abilities"]{display:flex;flex-direction:column}

/* the pixel glyph in the title bar — same art as the top-bar plate */
#itemsWin .winbar .wtic,#discoveriesWin .winbar .wtic{
  width:20px;height:20px;image-rendering:pixelated;filter:drop-shadow(0 1px 1px #000)}

/* ------------------------------------------------------------ empty states */
#itemsWin .empty-note{padding:26px 18px;text-align:center;color:var(--faint);font-size:12px;
  line-height:1.6}
#itemsWin .empty-note b{display:block;color:var(--dim);font-size:13px;margin-bottom:4px}

/* ============================================================ TAB 1 — INVENTORY */
#itemsWin .paneinv{padding:18px 20px 16px;gap:14px}
/* the gear column is two sockets wide plus its stat readout — the board takes the rest */
#itemsWin .inv2{flex:1;display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;min-height:0}
/* ------------------------------------------------------------ the gear column
 * Diablo's arrangement: the SOCKETS are the panel, over the numbers you are comparing them
 * against. No character render — the world and the HUD bust already show him, and a mannequin
 * costs a third of this window to a picture you cannot equip from. */
#itemsWin .gearcol{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden;
  border-radius:12px;padding:12px;border:1px solid var(--line2);
  background:radial-gradient(120% 92% at 50% 0%,#16203a,#0a0e18);
  box-shadow:inset 0 0 70px #0b1830cc, inset 0 0 0 1px #ffffff06}
#itemsWin .gearhead{display:flex;align-items:baseline;justify-content:space-between;
  padding-bottom:8px;border-bottom:1px solid var(--edge)}
#itemsWin .gearhead .glvl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  font-weight:800;color:var(--gold2)}
#itemsWin .gearhead .gcls{font-size:11px;color:var(--faint)}
/* the sockets come first and are never clipped — they are what this column is FOR. The stat
   readout below takes whatever is left and scrolls if the window is short. */
#itemsWin .gearstats{display:flex;flex-direction:column;gap:2px;min-height:0;overflow:auto;
  border-top:1px solid var(--edge);padding-top:8px}
#itemsWin .gstat{display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:11.5px;color:var(--faint);padding:1px 2px}
#itemsWin .gstat b{color:var(--ink);font-variant-numeric:tabular-nums}
#itemsWin .gstat.big{font-size:12.5px}
#itemsWin .gstat.big b{color:var(--gold2);font-size:14px}
#itemsWin .gsep{height:1px;background:var(--edge);margin:5px 0}
/* two sockets across, in EQ_LAYOUT's own reading order */
#itemsWin .gearslots{flex:none;display:grid;grid-template-columns:repeat(2,var(--cell));
  gap:8px 14px;justify-content:center;padding-top:6px}
#itemsWin .eq2{position:relative;width:var(--cell);height:var(--cell);aspect-ratio:auto;
  border-radius:10px;background:#0c1120e6;border:1px solid var(--line2);font-size:24px;transition:.12s;
  margin-bottom:12px}
#itemsWin .eq2:hover{border-color:var(--gold);background:#141d31}
#itemsWin .eq2.empty{background:#0a0e1899;border-style:dashed;border-color:#28324e;color:#2c3652}
#itemsWin .eq2 .slab{position:absolute;bottom:-13px;left:0;right:0;text-align:center;font-size:8px;
  letter-spacing:.12em;text-transform:uppercase;color:#59647e;pointer-events:none}

#itemsWin .invgridwrap{display:flex;flex-direction:column;gap:9px;min-height:0;overflow:auto;padding-right:4px}
#itemsWin .bagtitle{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);font-weight:700}
#itemsWin .bagtitle .sp{margin-left:auto;letter-spacing:.04em;color:var(--dim)}
#itemsWin .containertabs{display:flex;gap:5px;min-height:34px;overflow-x:auto;padding-bottom:1px}
#itemsWin .containertab{display:flex;align-items:center;gap:5px;min-width:max-content;padding:4px 7px;
  background:#0a0f1d;border:1px solid var(--edge);border-radius:6px;color:var(--faint);font:700 9px/1 inherit;
  letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
#itemsWin .containertab img{width:20px;height:20px;image-rendering:pixelated}
#itemsWin .containertab em{font-style:normal;color:#59647e;font-size:8px;letter-spacing:0}
#itemsWin .containertab:hover{border-color:#7b6940;color:var(--dim)}
#itemsWin .containertab.on{border-color:var(--gold);background:#201d16;color:var(--gold2);box-shadow:inset 0 0 0 1px #ffffff0a}
/* The Diablo board: a FIXED cols x rows grid, not auto-fill — a bag's geometry is data
 * (--cols comes from the container's own `grid`), and an item spans the cells it deserves.
 * The empty squares are .gridcell background only; the items are laid over them by explicit
 * grid-column/row, so an occupied square still has a cell underneath it to hit-test against. */
/* The board is exactly as tall as it has rows — NEVER a scroll port. A drop is aimed at a
   square, and a square scrolled out of the clip is a square the player cannot aim at; the
   whole right-hand column scrolls instead if the window is too short for it. */
#itemsWin .invgrid2{flex:none;display:grid;grid-template-columns:repeat(var(--cols,6),var(--cell));
  grid-auto-rows:var(--cell);gap:6px;justify-content:start;align-content:start;
  height:calc(var(--rows,4) * var(--cell) + (var(--rows,4) - 1) * 6px)}
#itemsWin .gridcell{background:#0b0f1c;border:1px dashed #26304c;border-radius:9px}
#itemsWin .gridcell.fp-ok{background:#1b2a18;border-style:solid;border-color:#6fbf5a;box-shadow:inset 0 0 0 1px #6fbf5a55}
#itemsWin .gridcell.fp-bad{background:#2a1618;border-style:solid;border-color:#c05a55;box-shadow:inset 0 0 0 1px #c05a5555}
#itemsWin .is2{width:auto;height:auto;aspect-ratio:auto;border-radius:9px;font-size:18px}
/* Phase 1 art: one 32px square sprite letterboxed into whatever footprint it occupies.
 * Regenerating the multi-cell items at their true aspect is phase 2 (see next-steps.md). */
#itemsWin .is2 img{width:100%;height:100%;object-fit:contain;padding:12%}
/* Nothing here is ever dropped or destroyed — a piece a load-time repack could not place
 * waits in this strip until the player drags it onto a square that fits. */
#itemsWin .invoverflow{flex:none;border-top:1px solid #7a4a3a;padding-top:7px;margin-top:6px}
#itemsWin .invoverflow.hidden{display:none}
#itemsWin .ovtitle{display:block;margin-bottom:5px;font-size:9px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:#d0876a}
#itemsWin .ovgrid{display:grid;grid-template-columns:repeat(auto-fill,var(--cell));grid-auto-rows:var(--cell);gap:6px;justify-content:start}
#itemsWin .is2.overflowed{outline:1px solid #c07a55;outline-offset:-1px}
#itemsWin .currencies{display:flex;gap:20px;justify-content:flex-end;align-items:center;padding-top:2px}
#itemsWin .curr{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:800;color:var(--ink)}
#itemsWin .curr .coin{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 -2px 3px #0006}
#itemsWin .curr .cl{font-size:10px;font-weight:600;color:var(--faint);letter-spacing:.1em;
  text-transform:uppercase}
#itemsWin .invinfo{border-top:1px solid var(--edge);padding-top:12px;flex:none}
#itemsWin .ii-title{font-size:13px;font-weight:800;color:var(--gold2);margin-bottom:5px}
#itemsWin .ii-text{font-size:11.5px;color:var(--faint);line-height:1.55}
#itemsWin .ii-text b{color:var(--dim)}
#itemsWin .fieldkit{flex:none;border-top:1px solid var(--edge);padding-top:8px}
#itemsWin .fieldkit-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;color:var(--gold2);
  text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:800}
#itemsWin .fieldkit-title span{color:var(--faint);letter-spacing:0;text-transform:none;font-size:9px;font-weight:500}
/* Tool sockets are the same square cell as the bag grid: they shrink to fit the column
 * but never grow past --cell, and stay 1:1 either way. align-items:start stops the row
 * from stretching the cell past the ratio; min-height:0 stops the grid item's automatic
 * minimum size (icon + baseline gap) from doing the same at narrow widths. */
#itemsWin .fieldkit-grid{display:grid;grid-template-columns:repeat(7,minmax(0,var(--cell)));gap:6px;
  justify-content:start;align-items:start}
#itemsWin .toolslot{min-width:0;min-height:0;height:auto;aspect-ratio:1;border-radius:9px;font-size:18px}
#itemsWin .toolslot .ph-icon img{display:block;width:28px;height:28px;image-rendering:pixelated;opacity:.38;filter:grayscale(1)}
#itemsWin .toolslot .slab{position:absolute;left:1px;right:1px;bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-align:center;font-size:7px;letter-spacing:.02em;color:#65708a}

/* ------------------------------------------------------------ drag & drop
 * The ghost is a child of #itemsWin (which is fixed and full-screen) so these rules can
 * stay scoped like the rest of the file while the ghost still flies over the world. */
#itemsWin .draggable{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:none}
#itemsWin .draggable:active{cursor:grabbing}
#itemsWin .dragsrc{opacity:.32}
#itemsWin .dropok{outline:2px solid var(--gold);outline-offset:-2px}
/* the ghost is a .slotcell too, so it wears the same socket art as the cell it left */
#itemsWin .dragghost{position:fixed;left:0;top:0;z-index:9999;width:var(--cell);height:var(--cell);
  aspect-ratio:auto;margin:calc(var(--cell) / -2) 0 0 calc(var(--cell) / -2);
  pointer-events:none;box-shadow:0 12px 24px -10px #000;opacity:.85;transform:scale(.95);
  transition:opacity .1s,transform .1s}
#itemsWin .dragghost.ondrop{opacity:1;transform:scale(1.04)}
#itemsWin .dragghost .rr{display:none}

/* ============================================================ TAB 2 — STATISTICS */
#itemsWin .panestat{padding:18px 20px;overflow:auto}
#itemsWin .stat2grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
#itemsWin .s2{display:flex;align-items:center;gap:8px;padding:10px 13px;background:#0e1424;
  border:1px solid var(--edge);border-radius:8px;font-size:12.5px}
#itemsWin .s2 .si{opacity:.8}
#itemsWin .s2 span.sl{color:var(--faint)}
#itemsWin .s2 b{margin-left:auto;color:var(--ink)}
#itemsWin .s2h{grid-column:1/-1;font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold2);font-weight:800;border-bottom:1px solid var(--edge);padding-bottom:5px;
  margin-top:6px}

/* ============================================================ context menu
   Gone. This window's `#itemsCtx` was a second implementation of hud.css's `.ctxmenu`, and it
   is what let the two inventory surfaces offer different actions for the same item. Both now
   render through common.js's one popup — style `.ctxmenu` in hud.css, not here. */


@media (max-width: 900px) {
  #itemsWin{--cell:46px}
  #itemsWin .fieldkit-grid{grid-template-columns:repeat(4,minmax(0,var(--cell)))}
}


/* --- attributes block at the head of the Statistics tab ------------------ */
#itemsWin .attrbox{border:1px solid var(--line2);border-radius:10px;padding:10px 12px 8px;margin-bottom:12px;
  background:linear-gradient(#141a2ccc,#0c1020cc)}
#itemsWin .attrhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
#itemsWin .attrhead b{color:var(--gold2);font-weight:600;letter-spacing:.06em}
#itemsWin .attrrow{display:grid;grid-template-columns:38px 1fr auto 78px;align-items:center;gap:8px;
  padding:3px 0;border-top:1px solid #ffffff08}
#itemsWin .attrrow .ak{font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--gold)}
#itemsWin .attrrow .an{color:var(--dim);font-size:12px}
#itemsWin .attrrow .av{font-variant-numeric:tabular-nums;font-weight:600}
#itemsWin .attrrow .av i{color:var(--good);font-style:normal;font-size:11px;margin-left:3px}
/* how much of every level's points this class sends here */
#itemsWin .attrrow .ag{display:flex;align-items:center;gap:6px;justify-content:flex-end}
#itemsWin .attrrow .agbar{flex:1;height:5px;border-radius:3px;background:#ffffff12;overflow:hidden}
#itemsWin .attrrow .agbar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--gold2))}
#itemsWin .attrrow .ag em{font-style:normal;font-size:10px;color:var(--faint);
  font-variant-numeric:tabular-nums;min-width:26px;text-align:right}
#itemsWin .attrnote{margin-top:6px;color:var(--faint);font-size:10px}