/* ============================================================================
   Itemization page (itemization.html)
   In-game item tooltips rebuilt in HTML from assets/itemization-data.js, a
   filterable list of every changed dungeon item, a weapon-speed chart, the
   Tier 0.5 set picker and the raid-token flow. Loaded by this page only.
   ========================================================================= */
:root{
  --q2:#1eff00; --q3:#0070dd; --q3-hi:#3d9bff; --q4:#a335ee; --q4-hi:#c06bff;
  --wt-bg:#070a17; --wt-edge:#5b5d6c; --wt-green:#1eff00; --wt-yellow:#ffd100; --wt-gray:#9d9d9d;
}

/* ---------- header ---------- */
main.items .page-head.has-video{ padding:56px 0 260px; }
main.items .page-head h1{ max-width:none; }
main.items .page-head .lede{ max-width:56ch; }
@media (prefers-reduced-motion:reduce){
  main.items .page-head.has-video{
    background-image:linear-gradient(180deg,rgba(9,11,12,.6),rgba(9,11,12,.6)), url("video/blackrock_poster.jpg");
  }
}

.stat-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:44px; max-width:900px; }
.stat-tile{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-radius:var(--r);
  background:rgba(9,11,12,.55); border:1px solid var(--line-hard);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:var(--text); transition:border-color .18s var(--ease), transform .18s var(--ease);
}
.stat-tile:hover{ border-color:var(--brass-line); transform:translateY(-2px); color:var(--text); }
.stat-tile img{ width:38px; height:38px; border-radius:6px; border:1px solid #000; box-shadow:0 0 0 1px var(--line-soft); flex:none; }
.stat-tile b{ display:block; font-family:var(--display); font-size:26px; line-height:1; color:var(--brass-hi); font-weight:700; }
.stat-tile span{ display:block; font-size:12.5px; line-height:1.35; margin-top:5px; color:var(--text); }

main.items .section h2{ font-size:clamp(28px,3.5vw,42px); font-weight:600; }
main.items .section h2 .gold{ display:block; }
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.sec-head p{ max-width:46ch; margin:0; color:var(--muted); font-size:15px; }

/* ---------- the in-game tooltip ---------- */
.wt{
  position:relative;
  font-family:var(--sans); font-size:13.5px; line-height:1.42; color:#fff;
  background:var(--wt-bg);
  border:1px solid var(--wt-edge); border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.9), inset 0 0 0 2px rgba(255,255,255,.05), 0 20px 50px -18px #000;
  padding:10px 12px 11px;
  text-align:left;
}
.wt-name{ font-size:15.5px; font-weight:600; line-height:1.3; margin-bottom:1px; }
.wt.q2 .wt-name{ color:var(--q2); }
.wt.q3 .wt-name{ color:var(--q3-hi); }
.wt.q4 .wt-name{ color:var(--q4-hi); }
.wt-row{ display:flex; justify-content:space-between; gap:18px; }
.wt-l{ position:relative; }
.wt-g{ color:var(--wt-green); }
.wt-y{ color:var(--wt-yellow); }
.wt-dim{ color:var(--wt-gray); }
.wt-src{ margin-top:8px; padding-top:7px; border-top:1px solid rgba(255,255,255,.08); font-size:12px; color:var(--muted); }
.wt-src b{ color:var(--text); font-weight:500; }

/* changed lines: a brass bar in the gutter, the old value struck beneath */
.wt .is-chg, .wt .is-new{
  margin:0 -12px; padding:0 12px;
  background:linear-gradient(90deg, rgba(217,169,78,.17), rgba(217,169,78,0) 90%);
  box-shadow:inset 2px 0 0 var(--brass);
}
.wt-row > span{ white-space:nowrap; }
.wt .is-new .tag{
  display:inline-block; margin-left:6px; padding:0 5px; border-radius:3px; vertical-align:1px;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:#0c0d0f; background:var(--brass);
}
.wt .was{
  display:block; color:var(--wt-gray); text-decoration:line-through; text-decoration-color:rgba(157,157,157,.6);
  font-size:12px; line-height:1.35; margin:0 0 2px;
}
.wt .is-gone{ color:var(--wt-gray); text-decoration:line-through; text-decoration-color:rgba(157,157,157,.6); font-size:12.5px; }
.wt .is-gone::before{ content:"removed · "; text-decoration:none; font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; }

/* the icon sits outside the tooltip, top-left, as in game */
.wt-wrap{ display:flex; align-items:flex-start; gap:8px; }
.wt-wrap > .wt{ flex:1; min-width:0; }
.wt-icon{
  width:46px; height:46px; flex:none; border-radius:5px;
  border:1px solid #000; box-shadow:0 0 0 1px var(--wt-edge), 0 8px 20px -8px #000;
  background:#111;
}

/* ---------- spotlight ---------- */
.mode-switch{
  display:inline-flex; padding:4px; gap:4px; border-radius:999px;
  background:var(--bg-3); border:1px solid var(--line-hard);
}
.mode-switch button{
  font-family:var(--sans); font-size:13px; font-weight:600; letter-spacing:.04em;
  color:var(--muted); background:transparent; border:0; border-radius:999px;
  padding:8px 18px; cursor:pointer; transition:.15s var(--ease);
}
.mode-switch button:hover{ color:var(--cream); }
.mode-switch button[aria-pressed="true"]{ color:#1d1404; background:linear-gradient(180deg,#eec87d,#cf9c3f); }

.spot-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; align-items:start; }
.spot{ display:flex; flex-direction:column; gap:14px; }
.spot-cap{ font-size:14px; color:var(--muted); line-height:1.5; margin:0; padding-left:54px; }
.spot-cap b{ color:var(--cream); font-weight:600; }
.spot .wt{ transition:opacity .2s var(--ease); }
.spot-grid.is-old .wt .is-chg, .spot-grid.is-old .wt .is-new{ box-shadow:none; background:none; }

/* ---------- item browser ---------- */
.ib-bar{ display:flex; flex-direction:column; gap:14px; margin-bottom:30px; }
.ib-row{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--sans); font-size:13px; font-weight:500; color:var(--text);
  background:transparent; border:1px solid var(--line-soft); border-radius:999px;
  padding:6px 13px; cursor:pointer; transition:.15s var(--ease); white-space:nowrap;
}
.chip:hover{ border-color:var(--line-hard); color:var(--cream); }
.chip[aria-pressed="true"]{ color:var(--brass-hi); border-color:var(--brass-dim); background:var(--brass-wash); }
.chip .n{ font-family:var(--mono); font-size:11px; color:var(--muted); }
.chip[aria-pressed="true"] .n{ color:var(--brass); }
.chip .dot-k{ width:8px; height:8px; border-radius:2px; flex:none; }
.ib-search{
  flex:1 1 220px; max-width:320px; margin-left:auto;
  font:inherit; font-size:14px; color:var(--cream);
  background:var(--bg-3); border:1px solid var(--line-hard); border-radius:999px;
  padding:7px 16px;
}
.ib-search::placeholder{ color:var(--muted); }
.ib-search:focus{ outline:none; border-color:var(--brass-dim); }
.ib-count{ font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.04em; }

.ib-group{ margin-bottom:34px; }
.ib-group h3{
  display:flex; align-items:baseline; gap:12px;
  font-size:19px; font-weight:600; margin:0 0 14px; color:var(--cream);
}
.ib-group h3 span{ font-family:var(--mono); font-size:11.5px; color:var(--muted); font-weight:400; letter-spacing:.06em; }
.ib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:10px; }

.it{
  display:grid; grid-template-columns:44px 1fr; gap:4px 12px; align-items:start;
  width:100%; text-align:left; font:inherit; color:var(--text);
  background:linear-gradient(180deg, rgba(255,255,255,.028), rgba(255,255,255,.006));
  border:1px solid var(--line-soft); border-radius:var(--r);
  padding:12px 12px 11px; cursor:pointer;
  transition:border-color .15s var(--ease), background .15s var(--ease), transform .15s var(--ease);
}
.it:hover, .it.is-open{ border-color:var(--line-hard); background:rgba(255,255,255,.04); transform:translateY(-1px); }
.it-icon{ grid-row:span 3; width:44px; height:44px; border-radius:6px; border:1px solid #000; box-shadow:0 0 0 1px var(--qc, var(--line-hard)); background:#111; }
.it-n{ font-size:14.5px; font-weight:600; line-height:1.3; color:var(--qc); }
.it-k{ font-size:12px; color:var(--muted); line-height:1.3; }
.it-p{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; grid-column:2; }
.pill{
  font-family:var(--mono); font-size:11px; line-height:1.5; letter-spacing:.01em;
  padding:1px 7px; border-radius:4px; white-space:nowrap;
  color:var(--brass-hi); background:var(--brass-wash); border:1px solid var(--brass-line);
}
.pill.dn{ color:var(--text); background:rgba(255,255,255,.04); border-color:var(--line-hard); }
.pill.gone{ color:var(--muted); background:none; border-color:var(--line-soft); text-decoration:line-through; }
.pill.more{ color:var(--muted); background:none; border-color:transparent; }
.q2{ --qc:var(--q2); } .q3{ --qc:var(--q3-hi); } .q4{ --qc:var(--q4-hi); }

/* floating tooltip for the list */
.wt-float{
  position:absolute; z-index:120; width:330px; max-width:calc(100vw - 24px);
  pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .12s var(--ease), transform .12s var(--ease);
}
.wt-float.on{ opacity:1; transform:none; }
.ib-empty{ padding:40px 0; color:var(--muted); text-align:center; }
.ib-more{ display:flex; justify-content:center; padding-top:6px; }

/* ---------- weapon speed chart ---------- */
.spd-legend{ display:flex; gap:22px; flex-wrap:wrap; font-size:13px; color:var(--text); margin-bottom:18px; }
.spd-legend span{ display:inline-flex; align-items:center; gap:8px; }
.spd-key{ width:11px; height:11px; border-radius:50%; flex:none; }
.spd-key.old{ border:2px solid #7d8583; background:var(--bg-2); }
.spd-key.new{ background:var(--brass); box-shadow:0 0 0 2px var(--bg-2); }
.spd{ border-top:1px solid var(--line-soft); }
.spd-axis, .spd-row{ display:grid; grid-template-columns:minmax(150px,230px) 1fr 132px; gap:16px; align-items:center; }
.spd-axis{ padding:10px 0 4px; font-family:var(--mono); font-size:10.5px; color:var(--muted); letter-spacing:.06em; }
.spd-axis .ticks{ position:relative; height:14px; }
.spd-axis .ticks i{ position:absolute; transform:translateX(-50%); font-style:normal; }
.spd-axis .h-dps{ text-align:right; text-transform:uppercase; }
.spd-axis .h-name{ text-transform:uppercase; }
.spd-row{ padding:5px 0; border-radius:4px; cursor:default; }
.spd-row:hover, .spd-row:focus-visible{ background:rgba(255,255,255,.03); outline:none; }
.spd-name{ display:flex; align-items:center; gap:9px; min-width:0; font-size:13.5px; color:var(--cream); }
.spd-name img{ width:22px; height:22px; border-radius:4px; border:1px solid #000; box-shadow:0 0 0 1px var(--qc); flex:none; }
.spd-name span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.track{ position:relative; height:22px; }
.track::before{ /* recessive gridlines at each half second */
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:var(--grid) 100%; background-position:var(--grid0) 0;
}
.track .bar{ position:absolute; top:50%; height:2px; margin-top:-1px; background:linear-gradient(90deg, rgba(125,133,131,.6), var(--brass-dim)); border-radius:2px; }
.track .d{ position:absolute; top:50%; width:11px; height:11px; margin:-5.5px 0 0 -5.5px; border-radius:50%; }
.track .d.old{ border:2px solid #7d8583; background:var(--bg-2); }
.track .d.new{ background:var(--brass); box-shadow:0 0 0 2px var(--bg-2); }
.spd-row:hover .d.new{ box-shadow:0 0 0 2px var(--bg-2), 0 0 0 5px rgba(217,169,78,.25); }
.spd-dps{ text-align:right; font-family:var(--mono); font-size:12px; color:var(--text); white-space:nowrap; }
.spd-dps em{ font-style:normal; color:var(--muted); }
.spd-tip{
  position:absolute; z-index:120; pointer-events:none;
  background:#0b0e10; border:1px solid var(--line-hard); border-radius:var(--r-sm);
  box-shadow:0 18px 40px -18px #000; padding:9px 12px; font-size:12.5px; line-height:1.5; color:var(--text);
  opacity:0; transition:opacity .1s var(--ease); white-space:nowrap;
}
.spd-tip.on{ opacity:1; }
.spd-tip b{ color:var(--cream); font-weight:600; display:block; margin-bottom:2px; }
.spd-tip .mono{ background:none; border:0; padding:0; color:var(--brass-hi); }
.spd-note{ margin-top:18px; font-size:14px; color:var(--muted); }
.spd-note b{ color:var(--text); }
.spd-table{ margin-top:10px; }
.spd-table summary{ cursor:pointer; font-size:13px; color:var(--brass); }

/* ---------- Tier 0.5 picker ---------- */
.t05-classes{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px; }
.t05-specs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; min-height:38px; }
.t05-spec{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--text);
  background:var(--bg-3); border:1px solid var(--line-soft); border-radius:var(--r-sm);
  padding:5px 14px 5px 5px; cursor:pointer; transition:.15s var(--ease);
}
.t05-spec img{ width:26px; height:26px; border-radius:4px; border:1px solid #000; }
.t05-spec:hover{ border-color:var(--line-hard); color:var(--cream); }
.t05-spec[aria-pressed="true"]{ color:var(--c); border-color:var(--c); background:color-mix(in srgb, var(--c) 10%, transparent); }
.t05-stage{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:34px; align-items:start; }
.t05-pieces{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.t05-piece{ display:flex; flex-direction:column; align-items:center; gap:7px; text-align:center; background:none; border:0; padding:4px 2px; margin:0; font:inherit; color:inherit; cursor:default; border-radius:8px; }
.t05-piece:hover img, .t05-piece.is-open img{ box-shadow:0 0 0 1px var(--qc), 0 0 0 4px rgba(217,169,78,.25), 0 10px 22px -12px #000; }
.t05-piece:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.t05-piece:hover span, .t05-piece.is-open span{ color:var(--cream); }
.t05-piece img{ width:56px; height:56px; border-radius:7px; border:1px solid #000; box-shadow:0 0 0 1px var(--qc), 0 10px 22px -12px #000; }
.t05-piece span{ font-size:11.5px; line-height:1.3; color:var(--muted); }
.t05-set-name{ font-family:var(--display); font-size:24px; font-weight:600; color:var(--cream); margin:0 0 4px; }
.t05-set-sub{ font-size:13.5px; color:var(--muted); margin:0 0 22px; }
.t05-stage .wt{ font-size:14px; }
.wt .set-line{ padding:3px 0; }
.wt .set-line + .set-line{ border-top:1px solid rgba(255,255,255,.05); }
.t05-stock{ font-size:14.5px; color:var(--text); }

/* ---------- dungeon sets ---------- */
.dset-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:18px; }
.dset{
  border:1px solid var(--line-soft); border-radius:var(--r);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.008));
  padding:20px 20px 18px; transition:border-color .2s var(--ease);
}
.dset:hover{ border-color:var(--line-hard); }
.dset h3{ font-size:19px; font-weight:600; color:var(--q3-hi); margin:0 0 3px; }
.dset .who{ font-size:12.5px; color:var(--muted); margin:0 0 14px; }
.dset-icons{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:16px; }
.dset-icons img{ width:34px; height:34px; border-radius:5px; border:1px solid #000; box-shadow:0 0 0 1px var(--q3); }
.bonus{ display:grid; grid-template-columns:auto 1fr; gap:4px 10px; font-size:14px; line-height:1.45; padding:8px 0; border-top:1px solid var(--line-soft); }
.bonus .pc{ font-family:var(--mono); font-size:11.5px; color:var(--muted); padding-top:2px; white-space:nowrap; }
.bonus .tx{ color:var(--wt-green); }
.bonus .ws{ grid-column:2; font-size:12.5px; color:var(--wt-gray); text-decoration:line-through; }
.bonus .nw{ font-family:var(--mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:#0c0d0f; background:var(--brass); border-radius:3px; padding:0 5px; margin-left:6px; vertical-align:1px; }

/* ---------- raid tokens: token -> the pieces it hands in for ---------- */
.tk-pair{ display:grid; grid-template-columns:minmax(220px,1fr) auto 2.2fr; gap:20px; align-items:stretch; margin-top:10px; }
.tk-box{
  border:1px solid var(--line-hard); border-radius:var(--r); background:rgba(9,11,12,.5);
  padding:22px 22px 20px; display:flex; flex-direction:column; align-items:center; text-align:center;
}
.tk-box .n{ font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--verd); margin-bottom:16px; }
.tk-box > p{ font-size:13.5px; color:var(--muted); margin:auto 0 0; padding-top:16px; }
.tk-arrow{ align-self:center; font-size:26px; color:var(--brass-dim); }
.tk-token{ flex:1; display:flex; align-items:center; }
.tk-token .tk-piece{ width:auto; }
.tk-token .tk-piece img{ width:68px; height:68px; }
.tk-token .tk-piece span{ font-size:14px; color:var(--q4-hi); font-weight:600; max-width:18ch; }
.tk-rewards{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px 40px; }
.tk-class > p{ display:flex; align-items:center; justify-content:center; gap:7px; margin:0 0 10px; font-size:13px; font-weight:600; }
.tk-class > p img{ width:18px; height:18px; border-radius:50%; border:1px solid #000; }
.tk-pieces{ display:flex; gap:10px; justify-content:center; }
.tk-piece{ display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; background:none; border:0; padding:4px 2px; margin:0; font:inherit; color:inherit; cursor:default; border-radius:8px; width:96px; }
.tk-piece img{ width:56px; height:56px; border-radius:7px; border:1px solid #000; box-shadow:0 0 0 1px var(--qc), 0 10px 22px -12px #000; }
.tk-piece:hover img, .tk-piece.is-open img{ box-shadow:0 0 0 1px var(--qc), 0 0 0 4px rgba(217,169,78,.25), 0 10px 22px -12px #000; }
.tk-piece:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.tk-piece span{ font-size:11.5px; line-height:1.3; color:var(--muted); }
.tk-piece:hover span, .tk-piece.is-open span{ color:var(--cream); }
.tk-piece em{ font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); }
.soon{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ember); border:1px solid rgba(224,118,74,.4); background:rgba(224,118,74,.08); border-radius:999px; padding:4px 12px;
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .spot-grid{ grid-template-columns:repeat(2,1fr); }
  .tk-pair{ grid-template-columns:1fr; }
  .tk-arrow{ transform:rotate(90deg); justify-self:center; }
}
@media (max-width:860px){
  .stat-tiles{ grid-template-columns:repeat(3,1fr); }
  .t05-stage{ grid-template-columns:1fr; }
}
@media (max-width:660px){
  .spot-grid{ grid-template-columns:1fr; }
  .spot-cap{ padding-left:0; }
  .ib-search{ max-width:none; margin-left:0; }
  .spd-axis, .spd-row{ grid-template-columns:1fr 92px; gap:4px 10px; }
  .spd-axis .h-name{ display:none; }
  .spd-name{ grid-column:1 / -1; }
  .spd-axis .ticks{ grid-column:1; }
  .t05-pieces{ grid-template-columns:repeat(4,1fr); gap:8px; }
  .t05-piece img{ width:46px; height:46px; }
  .dset-grid{ grid-template-columns:1fr; }
}
@media (max-width:420px){
  .stat-tiles{ grid-template-columns:1fr; }
}
.t05-review{ margin-top:12px; font-size:13px; }
/* hero is tiles only: the page title stays for screen readers */
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
main.items .page-head .vh + .stat-tiles{ margin-top:0; }