/* catalyst-conversions.css - the /midnight-season-2-catalyst-conversion-list/
   standalone page.

   RESTYLED 2026-08-14 to the v3 "fire on slate" Styka language, matching
   bis-convergence.css and loot-db.css. The Ula'tek venom identity (serpent-scale
   texture, fang dividers, Fraunces display faces, ember-on-green) is GONE. Base
   palette is the M+ tracker's (mplus-push/index.html :root), cross-checked
   against the tool's Dark tokens: slate/near-black surfaces, quiet borders,
   Figtree, one restrained gold accent. THE PAGE NOW FOLLOWS THE VIEWER'S THEME (owner directive
   2026-08-14 + the same-day ruling "just follow styka sheets theme", lane
   s2-polish): those surface/text/border literals are var() ALIASES of the
   tool's own theme tokens, and so is the ACCENT - that fixed gold pair happened
   to equal the DEFAULT theme's accent pair, so Dark is unchanged and every
   other theme now moves the accents with it too.

   THIS PAGE IS THE MOST VISUAL OF THE SET. The default view is a scannable card
   per spec: class-colored identity, the stat priority, and ONE hero row per tier
   slot (icon + the rank-1 pick + source + confidence). Everything else - the
   rank 2/3 alternatives, every "why", the slot notes, the hot take - is one
   click away in native <details>. NOTHING was deleted; the depth moved.

   NO HEAT RAMP HERE - that scale encodes contest count and belongs to the
   contested page. Fire appears as brand accents (hero) and on the spicy picks,
   which are a genuine item property, not a fabricated ranking. CLASS colors
   carry identity on class + spec names, exactly as before.

   CHROME NEUTRALITY (2026-08-14, the framed-chrome conversion): every page token
   is declared on .s2page - the page's own content wrapper inside .shell-scroll -
   and NOWHERE on :root / body / html. That is load-bearing: the shared top bar
   and its Battle.net auth chrome read --accent / --bg-* / --text-* from
   style.min.css's own :root, so a token re-declared on body would tint the SHARED
   header. Scoping to .s2page keeps this page's full identity INSIDE the shell and
   the site chrome standard. Same rule for the bare element selectors below
   (* / a / :focus-visible): all are .s2page-prefixed so they cannot reach the
   header or the footer chrome. The old THEME ARMOR + SCROLL ARMOR blocks are
   RETIRED with that conversion - the page now lives inside the app shell, so
   there is no body overflow to fight and the standard theme gutters outside the
   1400px shell are correct. */
.s2page{
  /* SURFACES / TEXT / BORDERS ALIAS THE SITE THEME (owner directive 2026-08-14,
     lane s2-polish). Each of these used to be a hardcoded slate literal that
     happened to equal the DEFAULT Dark theme's value, so the page looked right
     on Dark and ignored every other theme. They are now var() aliases into
     style.min.css's own :root tokens (style-parts/01-themes.css), which makes
     the page follow the viewer's theme; the token NAMES are unchanged, so every
     rule below this block is untouched. */
  --bg:var(--bg-body);
  --bg2:var(--bg-input);
  --panel:var(--bg-card);
  --panel2:var(--bg-input);
  --hover:var(--bg-hover);
  --line:var(--border-primary);
  --line2:var(--border-secondary);
  --ink:var(--text-primary);
  --muted:var(--text-secondary);
  --faint:var(--text-muted);
  --link:var(--text-link);
  /* THE ACCENT LAYER FOLLOWS THE THEME TOO (owner ruling 2026-08-14: "just
     follow styka sheets theme" - it SUPERSEDES the earlier "controls stay"
     rule). The page's fixed gold pair happened to equal the DEFAULT theme's
     accent pair, so Dark is unchanged and every other theme now moves the
     chips, pills, rails, active states and focus rings with it. Tints with no
     site token are derived via color-mix, never pinned to a hex. --accent /
     --accent2 are NOT redeclared here: the page INHERITS them from :root, and a
     self-referential "--accent:var(--accent)" would be an invalid CSS cycle. */
  --accentdim:color-mix(in srgb, var(--accent) 13%, transparent);

  /* Brand fire - accents and the spicy marker only. */
  --ember:#ffa869;
  --ember2:#eb8a3e;
  --ember3:#bd6a24;
  --ember-glow:rgba(255,168,105,.40);

  --confirmed:#5f9b70;
  --datamined:#4f93a6;
  --estimated:#c39a55;

  /* Class colors - mirrors data.js CLASS_COLORS exactly (no data.js here). */
  --cc-death-knight:#C41E3A;
  --cc-demon-hunter:#A330C9;
  --cc-druid:#FF7C0A;
  --cc-evoker:#33937F;
  --cc-hunter:#AAD372;
  --cc-mage:#3FC7EB;
  --cc-monk:#00FF98;
  --cc-paladin:#F48CBA;
  --cc-priest:#FFFFFF;
  --cc-rogue:#FFF468;
  --cc-shaman:#0070DD;
  --cc-warlock:#8788EE;
  --cc-warrior:#C69B6D;

  --radius:10px;
}
.s2page,
.s2page *{box-sizing:border-box;}
.s2page{
  position:relative;
  min-height:100%;
  background:var(--bg);
  color:var(--ink);
  font-family:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.s2page a{color:var(--link); text-decoration:none;}
.s2page :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px;}
/* Smooth in-page anchor jumps now belong to the shell scroller, not <html>. */
.shell-scroll:has(.s2page){scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){.shell-scroll:has(.s2page){scroll-behavior:auto;}}

/* ---------- footer chrome ---------- */
/* The static .pin header block is GONE (framed-chrome conversion, 2026-08-14) -
   the shared includes/header.php top bar is this page's only header now. */

.wrap{max-width:1180px; margin:0 auto; padding:24px 22px 56px;}

/* ---------- kept-current banner ---------- */
.kept{max-width:1180px; margin:20px auto 0; padding:0 22px;}
.kept-inner{
  display:flex; align-items:flex-start; gap:11px;
  background:var(--panel);
  border:1px solid var(--line);
  border-left:2px solid var(--accent2);
  border-radius:var(--radius);
  padding:12px 16px;
}
.pulse{flex-shrink:0; margin-top:6px; width:7px; height:7px; border-radius:50%; background:var(--accent2);}
.kept p{margin:0; font-size:13.5px; color:var(--muted); line-height:1.55;}
.kept p b{color:var(--ink); font-weight:600;}

/* ---------- hero ---------- */
.titleblock{
  position:relative; margin:0 0 20px; padding:22px 24px 20px;
  border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(255,168,105,.11), transparent 58%),
    var(--panel);
}
.titleblock::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--ember),var(--ember2) 34%,var(--ember3) 62%,transparent);
}
.eyebrow{font-size:12px; color:var(--faint); margin:0 0 8px;}
.titleblock h1{
  margin:0;
  font-size:clamp(26px,3.4vw,36px);
  font-weight:700; letter-spacing:-.2px; line-height:1.2;
  background:linear-gradient(96deg,#fff4e8 6%,var(--ember) 42%,var(--ember2) 78%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .titleblock h1{color:#e2e8f0; background:none;}
}
.titleblock .sub{margin:11px 0 0; color:var(--muted); font-size:15.5px; max-width:78ch; line-height:1.6;}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin:15px 0 0;}
.chip{
  font-size:12px; color:var(--faint);
  border:1px solid var(--line); border-radius:6px; padding:4px 10px;
  background:var(--panel2);
}
.chip b{color:var(--muted); font-weight:600;}
a.chip-link{color:var(--muted);}
a.chip-link:hover{color:var(--accent); border-color:var(--line2);}
.provnote{margin:13px 0 0; font-size:12.5px; color:var(--faint); max-width:88ch; line-height:1.6;}

/* ---------- compact confidence legend ---------- */
.conflegend{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 12px; padding:9px 13px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel);
  font-size:12.5px; color:var(--faint);
}
.cl{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.cl .dot{width:8px; height:8px; border-radius:50%; flex-shrink:0;}
.cl-confirmed .dot{background:var(--confirmed);}
.cl-datamined .dot{background:var(--datamined);}
.cl-estimated .dot{background:var(--estimated);}
.cl b{font-weight:600; color:var(--muted);}

/* ---------- top-matter disclosures ---------- */
.topdet{
  margin:0 0 12px; padding:0;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel);
  font-size:13px;
}
.topdet > summary{
  list-style:none; cursor:pointer;
  padding:11px 14px; color:var(--muted); font-weight:600;
  display:flex; align-items:center; gap:8px;
}
.topdet > summary::-webkit-details-marker{display:none;}
.topdet > summary::before{
  content:""; width:0; height:0; flex-shrink:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .12s;
}
.topdet[open] > summary::before{transform:rotate(90deg);}
.topdet > summary:hover{color:var(--ink);}
.topdet .dbody{padding:2px 16px 14px; border-top:1px solid var(--line);}
.topdet h4{
  margin:14px 0 7px; font-size:12.5px; font-weight:600; color:var(--ink);
  letter-spacing:.2px;
}
.topdet ul{margin:0; padding-left:22px;}
.topdet li{margin:0 0 6px; color:var(--muted); line-height:1.6;}
.topdet li:last-child{margin-bottom:0;}
.dnote{margin:8px 0 0; font-size:12.5px; color:var(--faint); line-height:1.6;}

/* ---------- token drop table ---------- */
.tscroll{overflow-x:auto;}
.tokentable{width:100%; border-collapse:collapse; min-width:620px; margin-top:6px;}
.tokentable th{
  text-align:left; font-size:11.5px; font-weight:600; color:var(--faint);
  padding:8px 10px; border-bottom:1px solid var(--line2); white-space:nowrap;
}
.tokentable td{
  padding:8px 10px; font-size:12.5px; color:var(--muted);
  border-bottom:1px solid var(--line); vertical-align:top;
}
.tokentable tr:last-child td{border-bottom:none;}
.tokentable .c-slot b{color:var(--ink); font-weight:600;}
.tokentable .c-boss{color:var(--muted); white-space:nowrap;}
.gpos{font-size:11px; color:var(--faint);}

/* ---------- sticky jump / filter bar ---------- */
/* Sticky offset was 44px to clear the deleted .pin bar; inside the app shell the
   scroller top IS the content top, so it is 0. */
.jump{
  position:sticky; top:0; z-index:30;
  background:rgba(13,18,32,.96);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 12px; margin:0 0 22px;
}
.jump-row{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.jump-row2{margin-top:9px; padding-top:9px; border-top:1px solid var(--line);}
.jlabel{font-size:12px; color:var(--faint); flex-shrink:0;}
.jchips{display:flex; flex-wrap:wrap; gap:6px;}
.jchip{
  font-size:12.5px; font-weight:500;
  color:var(--cc,var(--muted));
  border:1px solid var(--line); border-radius:6px;
  padding:5px 10px; background:var(--panel2); white-space:nowrap;
  transition:border-color .12s,background .12s;
}
.jchip:hover,.jchip.is-active{border-color:var(--cc,var(--line2)); background:var(--hover);}
.jchip.is-dim{opacity:.35;}
.jump select{
  background:var(--panel2); color:var(--ink);
  border:1px solid var(--line2); border-radius:6px;
  font:inherit; font-size:12.5px; padding:6px 9px; outline:none;
  cursor:pointer; max-width:200px;
}
.jump select:focus{border-color:var(--accent2);}
.jroles{display:flex; gap:5px; flex-wrap:wrap;}
.rbtn{
  background:var(--panel2); color:var(--muted);
  border:1px solid var(--line2); border-radius:6px;
  font:inherit; font-size:12.5px; font-weight:500;
  padding:5px 11px; cursor:pointer;
  transition:color .12s,border-color .12s,background .12s;
}
.rbtn:hover{color:var(--ink); background:var(--hover);}
.rbtn.is-on{color:var(--accent); border-color:var(--accent2); background:var(--accentdim);}
.jcount{margin-left:auto; font-size:12.5px; color:var(--faint); white-space:nowrap; font-variant-numeric:tabular-nums;}
@media(max-width:760px){.jcount{margin-left:0; width:100%; text-align:right;}}

/* ---------- class sections ---------- */
.cls{margin:0 0 30px; scroll-margin-top:120px;}
.cls.is-hidden{display:none;}
.clshead{
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  padding-bottom:8px; margin-bottom:14px;
  border-bottom:1px solid var(--line2);
}
.clsname{
  margin:0; font-size:19px; font-weight:700; letter-spacing:-.1px;
  color:var(--cc,var(--ink));
}
.armorpill{font-size:11.5px; color:var(--faint);}
.clscount{margin-left:auto; font-size:12px; color:var(--faint);}

/* ---------- THE SPEC CARD - the scannable default ---------- */
.specgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(430px,1fr)); gap:12px;}
@media(max-width:900px){.specgrid{grid-template-columns:1fr;}}
.spec{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:2px solid color-mix(in srgb,var(--cc,var(--line2)) 70%,transparent);
  border-radius:var(--radius);
  overflow:hidden;
  scroll-margin-top:126px;
}
.spec.is-hidden{display:none;}
.spechead{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding:12px 15px 10px;
  border-bottom:1px solid var(--line);
}
.specname{margin:0; font-size:16px; font-weight:700; color:var(--cc,var(--ink)); letter-spacing:-.1px;}
.rolepill{
  font-size:11px; font-weight:600; color:var(--faint);
  border:1px solid var(--line); border-radius:5px; padding:1px 7px;
  background:var(--panel2); white-space:nowrap;
}
.prio{
  width:100%; margin-top:5px;
  font-size:12px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.prio .k{color:var(--faint); margin-right:5px;}

/* ---------- the hero row: ONE per tier slot ---------- */
.slots{padding:4px 0 0;}
.slotrow{border-bottom:1px solid var(--line);}
.slotrow:last-child{border-bottom:none;}
.hero{display:flex; align-items:center; gap:9px; padding:8px 15px;}
.slotname{
  flex-shrink:0; width:66px;
  font-size:11px; font-weight:600; letter-spacing:.3px;
  color:var(--faint); text-transform:uppercase;
}
.iico{
  flex-shrink:0; width:28px; height:28px;
  border-radius:4px; border:1px solid #000; background:var(--panel2);
}
.pname{
  min-width:0; flex:1 1 auto;
  font-size:13.5px; font-weight:600; color:#e2e8f0;
}
a.whl{color:inherit;}
a.whl:hover{color:var(--accent);}
.psrc{
  flex-shrink:0; max-width:34%;
  font-size:12px; color:var(--faint);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* confidence as a quiet dot + label, matching the legend */
.cdot{flex-shrink:0; width:8px; height:8px; border-radius:50%;}
.cdot-confirmed{background:var(--confirmed);}
.cdot-datamined{background:var(--datamined);}
.cdot-estimated{background:var(--estimated);}
/* spicy = a genuine item property, so it earns the ember */
.spice{
  flex-shrink:0; display:inline-block; width:11px; height:11px;
  color:var(--ember);
  filter:drop-shadow(0 0 5px var(--ember-glow));
}
.spice svg{width:100%; height:100%; display:block;}

/* ---------- the depth, one click away ---------- */
.altbox{border-top:1px dashed var(--line); margin:0 15px;}
.altbox > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  padding:7px 0; font-size:11.5px; color:var(--faint);
}
.altbox > summary::-webkit-details-marker{display:none;}
.altbox > summary::before{
  content:""; width:0; height:0; flex-shrink:0;
  border-left:4px solid currentColor;
  border-top:3.5px solid transparent; border-bottom:3.5px solid transparent;
  transition:transform .12s;
}
.altbox[open] > summary::before{transform:rotate(90deg);}
.altbox > summary:hover{color:var(--ink);}
.altbody{padding:2px 0 11px;}
.why{
  margin:0 0 9px; font-size:12.5px; color:var(--muted); line-height:1.6;
  padding-left:11px; border-left:1px solid var(--line2);
}
.alt{display:flex; align-items:center; gap:8px; margin:0 0 5px;}
.arank{
  flex-shrink:0; font-size:10.5px; font-weight:600; color:var(--faint);
  border:1px solid var(--line); border-radius:4px; padding:0 5px;
  background:var(--panel2);
}
.alt .iico{width:22px; height:22px;}
.alt .pname{font-size:12.5px; font-weight:500; color:var(--muted);}
.altwhy{
  margin:0 0 9px 30px; font-size:12px; color:var(--faint); line-height:1.55;
}
.snote{
  margin:9px 0 0; font-size:12px; color:var(--accent2); line-height:1.55;
  padding-left:11px; border-left:1px solid color-mix(in srgb, var(--accent2) 35%, transparent);
}
.pstats{font-size:11.5px; color:var(--accent2);}

/* per-spec hot take */
.hotbox{margin:0 15px; border-top:1px dashed var(--line);}
.hotbox > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:7px;
  padding:8px 0; font-size:11.5px; color:var(--faint);
}
.hotbox > summary::-webkit-details-marker{display:none;}
.hotbox > summary .spice{width:12px; height:12px;}
.hotbox > summary:hover{color:var(--ink);}
.hotbox p{
  margin:0 0 11px; font-size:12.5px; color:var(--muted); line-height:1.6;
  padding-left:11px; border-left:1px solid rgba(255,168,105,.3);
}

/* ---------- confidence key ---------- */
.ckeypanel{
  max-width:820px; margin:6px 0 0; scroll-margin-top:120px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
}
.ckeypanel .panel-h{padding:12px 15px; border-bottom:1px solid var(--line);}
.ckeypanel .title{font-size:13.5px; font-weight:600; color:var(--ink);}
.ckey{padding:12px 15px;}
.ckey-row{display:flex; align-items:flex-start; gap:11px; padding:7px 0;}
.ckey-row .txt{font-size:13px; color:var(--muted); line-height:1.6;}
.pill-s{
  flex-shrink:0; min-width:76px; text-align:center;
  font-size:11px; font-weight:600;
  border:1px solid var(--line); border-radius:5px; padding:1px 7px;
  background:var(--panel2); color:var(--faint);
}
.pill-s.pc-confirmed{color:var(--confirmed); border-color:rgba(95,155,112,.4);}
.pill-s.pc-datamined{color:var(--datamined); border-color:rgba(79,147,166,.4);}
.pill-s.pc-estimated{color:var(--estimated); border-color:rgba(195,154,85,.4);}

/* ---------- in-content related-tools strip ---------- */
/* One quiet row of sibling Season 2 sheets - the cross-link home now that the
   page ends on the shared includes/footer.php (which carries only the standard
   site links, never per-page cross-links). */
.s2rel{max-width:1180px; margin:26px auto 0; padding:0 22px 6px; text-align:center; font-size:13px; line-height:1.9;}
.s2rel-label{color:var(--muted); margin-right:6px;}
.s2rel a{color:var(--accent2); text-decoration:none;}
.s2rel a:hover{color:var(--accent); text-decoration:underline;}
.s2rel-sep{color:var(--faint); margin:0 7px;}

@media (max-width:700px){
  .wrap{padding:20px 14px 44px;}
  .kept{padding:0 14px;}
  .jump{top:40px;}
  .cls{scroll-margin-top:170px;}
  .spec{scroll-margin-top:176px;}
  .jump select{max-width:none; flex:1 1 140px;}
  .hero{flex-wrap:wrap; gap:7px;}
  .slotname{width:100%;}
  .psrc{max-width:100%;}
}