/* bis-convergence.css - the /midnight-season-2-bis-contested-list/ standalone
   page (the FILENAME keeps the original "convergence" name; only the public slug
   was renamed).

   BASIC STYKA SHEETS look. The Ula'tek venom identity that used to live here -
   serpent-scale texture, fang dividers, ember glows, four-hue heat washes,
   Fraunces display faces - is gone. The palette below is lifted from the M+
   Title Push tracker (mplus-push/index.html :root) and cross-checked against the
   tool's own Dark tokens (style-parts/01-themes.css): slate/near-black surfaces,
   ONE restrained gold accent, quiet borders. 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. Figtree is the site default and its
   @font-face already ships in style.min.css, which this page loads.

   THE PAGE IS A BAR CHART WITH FIRE IN IT. Each row's count bar is the primary
   mark and LENGTH carries the magnitude against a fixed 40-spec track; the bar
   FILL, the tier pill and the row accents all take the heat ramp below, so the
   top of the list burns and the tail stays quiet.

   THE RAMP IS ORDINAL, NOT CATEGORICAL - and that distinction is load-bearing.
   Heat is a MAGNITUDE (spec count), so it is a sequential ramp: ONE hue, monotone
   lightness, visible step gaps. Re-validated with --ordinal after the 5-tier
   rescale (2026-08-14) added the universal step on top:
       #ffc79f,#ffa869,#eb8a3e,#bd6a24  -> ALL CHECKS PASS
       (monotone light->dark, all dL gaps >= 0.06, hue spread 2deg,
        dark end #bd6a24 still at 4.44:1 vs this panel)
   #ffc79f is not a hand-picked colour - it is what
   color-mix(in srgb, var(--heat-inferno) 64%, #fff) resolves to, i.e. the ramp's
   own light end taken further toward white-hot. 64% is the TIGHTEST mix that
   still clears the 0.06 dL floor; do not push it closer to inferno.
   A ramp of DISTINCT HUES is still not achievable and was not shipped: red/orange/
   gold is precisely the protan/deutan confusion axis, and every 4-hue warm set
   searched across the whole arc returned CVD separation 1.0-1.5 against a floor
   of 6.0. Mild is therefore NOT another fire hue - it is neutral slate, the "no
   heat" case, deliberately outside the ramp.

   Every heat color always ships beside its WORD (the pill keeps its label), so
   nothing on this page is encoded by color alone.

   Class colors stay on spec chips only - identity, not magnitude.

   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. 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 the page's full identity INSIDE the shell and the site chrome
   standard. Same rule for the bare element selectors below (a / :focus-visible):
   both 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);
  --glow:var(--accent-glow);

  /* Bar chart + the ordinal heat ramp (see the header note - validated). */
  --bar-track:#1a2236;
  /* The 5th step (2026-08-14, the universal tier). DERIVED IN-FAMILY off the
     ramp's own light end rather than picked by hand, so the ramp stays ONE hue:
     color-mix(in srgb, var(--heat-inferno) 64%, #fff) resolves to #ffc79f. That
     exact 4-step ramp was re-run through the dataviz validator in --ordinal mode
     against the #111827 panel and passes every check - monotone light-to-dark,
     all adjacent dL >= 0.06 (the new pair is 0.06+, the tightest in the ramp),
     hue spread 2deg, dark end still 4.44:1. Contrast on the panel climbs to
     ~11.8:1, so the top step is the brightest thing in the ramp - white-hot. */
  --heat-universal:color-mix(in srgb, var(--heat-inferno) 64%, #fff);
  --heat-inferno:#ffa869;
  --heat-hot:#eb8a3e;
  --heat-warm:#bd6a24;
  --heat-mild:#74829a;      /* neutral slate - the "no heat" case, off-ramp */
  --ember-glow:rgba(255,168,105,.42);
  --bar-fill:var(--heat-warm);   /* fallback when a row carries no tier */

  /* Class colors - mirrors data.js CLASS_COLORS exactly (this page does not
     load data.js). Identity only, never magnitude. */
  --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 (structure kept, recolored) ---------- */
/* 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:1120px; margin:0 auto; padding:26px 22px 56px;}

/* ---------- kept-current banner ---------- */
.kept{max-width:1120px; 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%),
    radial-gradient(90% 120% at 12% 8%, rgba(235,138,62,.07), transparent 60%),
    var(--panel);
}
/* a thin ember bar along the hero's top edge - the ramp, left to right */
.titleblock::before{
  content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--heat-inferno),var(--heat-hot) 34%,var(--heat-warm) 62%,transparent);
}
.eyebrow{
  font-size:12px; font-weight:600; letter-spacing:.4px;
  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(--heat-inferno) 42%,var(--heat-hot) 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:76ch; line-height:1.6;
}
.titleblock .sub b{color:var(--ink); font-weight:600;}

.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:14px 0 0; font-size:12.5px; color:var(--faint); max-width:80ch; line-height:1.6;}

/* ---------- headline stat strip ---------- */
.statstrip{margin:0 0 16px;}

.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px;}
.stat{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:14px 15px;
}
.stat .sn{
  display:block; font-size:24px; font-weight:700; line-height:1.15; color:var(--accent);
  font-variant-numeric:tabular-nums;
}
.stat .sl{display:block; margin-top:5px; font-size:12.5px; color:var(--faint); line-height:1.45;}
.stat.is-feature{grid-column:span 2;}
.stat.is-feature .sn{font-size:30px;}
@media(max-width:620px){.stat.is-feature{grid-column:span 1;}}
.stripnote{
  margin:10px 0 0;
  font-size:12.5px; color:var(--faint); line-height:1.55; max-width:88ch;
}

/* ---------- quiet panels (heat key / how to read / confidence key) ---------- */
.panelgrid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:14px; align-items:start; margin:0 0 18px;
}
.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.panel-h{padding:12px 16px; border-bottom:1px solid var(--line);}
.panel-h .title{font-size:13.5px; font-weight:600; color:var(--ink); letter-spacing:.2px;}
.panel-list{margin:0; padding:13px 16px 14px 30px;}
.panel-list li{margin:0 0 8px; font-size:13.5px; color:var(--muted); line-height:1.6;}
.panel-list li:last-child{margin-bottom:0;}
.panel-list li::marker{color:var(--faint);}

.heatrows{padding:12px 16px;}
.heatrow{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:8px 0;
  border-bottom:1px solid var(--line);
}
.heatrow:last-child{border-bottom:none;}
.hrange{font-size:12.5px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums;}
.hdesc{font-size:13px; color:var(--faint); line-height:1.55; flex:1 1 200px;}

/* ---------- heat word: a NEUTRAL label, never a color-coded rank ---------- */
.heat{
  font-size:11.5px; font-weight:600; letter-spacing:.2px;
  color:var(--muted);
  border:1px solid var(--line2);
  background:var(--panel2);
  border-radius:5px; padding:1px 8px;
  white-space:nowrap;
}
/* Tinted, but ALWAYS carrying the word - never color alone. */
.heat-universal .heat,.hl-universal{
  color:var(--heat-universal);
  border-color:color-mix(in srgb, var(--heat-universal) 55%, transparent);
  background:color-mix(in srgb, var(--heat-universal) 12%, transparent);
}
.heat-inferno .heat,.hl-inferno{
  color:var(--heat-inferno); border-color:rgba(255,168,105,.5); background:rgba(255,168,105,.10);
}
.heat-hot .heat,.hl-hot{
  color:var(--heat-hot); border-color:rgba(235,138,62,.45); background:rgba(235,138,62,.09);
}
.heat-warm .heat,.hl-warm{
  color:var(--heat-warm); border-color:rgba(189,106,36,.45); background:rgba(189,106,36,.09);
}
.heat-mild .heat,.hl-mild{color:var(--heat-mild);}

/* the flame mark - leaderboard top 3 only */
.flame{
  display:inline-block; width:12px; height:12px; vertical-align:-1px;
  color:var(--heat-inferno); flex-shrink:0;
  filter:drop-shadow(0 0 5px var(--ember-glow));
}
.flame svg{width:100%; height:100%; display:block;}

/* ---------- small pills (tags + confidence) ---------- */
.pill-s{
  font-size:11px; font-weight:600; letter-spacing:.2px;
  border-radius:5px; padding:1px 7px; white-space:nowrap;
  color:var(--faint); border:1px solid var(--line); background:var(--panel2);
}
.pill-vr{color:var(--muted); border-color:var(--line2);}
.pill-conf-estimated{font-style:italic;}

/* ---------- compact inline heat legend ----------
   Replaces the old four-row explainer panel. Dot + WORD + range, one line. */
.heatlegend{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 14px; padding:9px 13px;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel);
  font-size:12.5px; color:var(--faint);
}
.hl-k{color:var(--faint);}
.hl{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.hl .dot{width:9px; height:9px; border-radius:2px; flex-shrink:0;}
.hl-universal .dot{background:var(--heat-universal); box-shadow:0 0 9px -1px var(--ember-glow);}
.hl-inferno .dot{background:var(--heat-inferno); box-shadow:0 0 7px -1px var(--ember-glow);}
.hl-hot .dot{background:var(--heat-hot);}
.hl-warm .dot{background:var(--heat-warm);}
.hl-mild .dot{background:var(--heat-mild);}
.hl b{font-weight:600;}
.hl .hr{color:var(--faint); font-weight:400; font-variant-numeric:tabular-nums;}
.hl-universal,.hl-inferno,.hl-hot,.hl-warm,.hl-mild{background:none; border:none; padding:0;}

/* ---------- the one-line "how to read" disclosure ---------- */
.howto{margin:0 0 16px; font-size:12.5px;}
.howto > summary{
  list-style:none; cursor:pointer; color:var(--faint);
  display:inline-flex; align-items:center; gap:7px;
}
.howto > summary::-webkit-details-marker{display:none;}
.howto > 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;
}
.howto[open] > summary::before{transform:rotate(90deg);}
.howto > summary:hover{color:var(--ink);}
.howto ul{margin:9px 0 0; padding-left:26px;}
.howto li{margin:0 0 6px; color:var(--muted); line-height:1.6;}

/* ---------- leaderboard: which boss drops it, answerable at a glance ---------- */
.r-src{
  display:inline-flex; align-items:baseline; gap:5px;
  font-size:12.5px; color:var(--muted); white-space:nowrap;
}
.r-src .k{color:var(--faint); font-size:11.5px;}
.r-src b{color:var(--ink); font-weight:600;}

/* ---------- sticky filter / jump bar ---------- */
/* top:0 since the framed-chrome conversion - the sticky offset used to clear the
   44px .pin bar, and the shell's own top bar is outside this scroller. */
.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 24px;
}
.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(--muted);
  border:1px solid var(--line); border-radius:6px;
  padding:5px 11px; background:var(--panel2); white-space:nowrap;
  transition:color .12s,border-color .12s,background .12s;
}
.jchip:hover{color:var(--ink); border-color:var(--line2); background:var(--hover);}
.jchip.is-active{color:var(--accent); border-color:var(--accent2); background:var(--accentdim);}
.jchip.is-dim{opacity:.4;}
.jump input[type="search"],
.jump select{
  background:var(--panel2); color:var(--ink);
  border:1px solid var(--line2); border-radius:6px;
  font:inherit; font-size:13px; padding:6px 10px; outline:none;
}
.jump input[type="search"]{flex:1 1 200px; min-width:150px;}
.jump select{cursor:pointer; max-width:190px;}
.jump input[type="search"]:focus,
.jump select:focus{border-color:var(--accent2);}
.jheat{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:6px 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;}}

/* ---------- section headers: name, count, thin rule ---------- */
.lsec{margin:0 0 34px; scroll-margin-top:120px;}
.lsec.is-hidden{display:none;}
.sechead{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:9px; margin-bottom:6px;
  border-bottom:1px solid var(--line2);
}
.sechead h2{margin:0; font-size:19px; font-weight:600; color:#e2e8f0; letter-spacing:-.1px;}
.seccount{margin-left:auto; font-size:12.5px; color:var(--faint); font-variant-numeric:tabular-nums;}
.secintro{margin:10px 0 14px; color:var(--muted); font-size:13.5px; max-width:80ch; line-height:1.6;}

.lgroup{margin:0 0 4px; border-bottom:1px solid var(--line);}
.lgroup:last-child{border-bottom:none;}
.lgroup.is-hidden{display:none;}
.ghead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding:16px 0 8px;}
.ghead h3{margin:0; font-size:15px; font-weight:600; color:var(--ink);}
.gpos{font-size:11.5px; color:var(--faint);}
.gcount{margin-left:auto; font-size:12px; color:var(--faint); font-variant-numeric:tabular-nums;}
.gilvls{width:100%; margin:2px 0 0; font-size:12.5px; color:var(--faint);}
.gblurb{width:100%; margin:6px 0 0; font-size:13px; color:var(--muted); line-height:1.6; max-width:80ch;}

/* ================= THE ROW - one component everywhere =================
   [rank] [icon] [name + pills] .............. [bar] [N/40] [heat word]
   line 2, muted:   slot . type . stats . source . ilvl
   line 3, quiet:   why
   line 4:          class-colored spec chips (capped, rest behind an expander)
   The leaderboard uses this exact component plus a rank number - it is not a
   louder variant. Squint and the page is a bar chart. */
.rows{display:block;}
.row{
  padding:13px 0 14px;
  border-bottom:1px solid var(--line);
}
.row:last-child{border-bottom:none;}
.row.is-hidden{display:none;}

.r-main{display:flex; align-items:center; gap:11px; flex-wrap:nowrap;}
.r-rank{
  flex-shrink:0; min-width:24px;
  font-size:13px; font-weight:600; color:var(--faint);
  font-variant-numeric:tabular-nums; text-align:right;
}
/* top 3 wear the ember numeral */
.row.top3 .r-rank{
  color:var(--heat-inferno);
  font-size:15px; font-weight:700;
  text-shadow:0 0 12px var(--ember-glow);
}
a.whl{color:inherit;}
.whl{display:inline-flex; line-height:0; flex-shrink:0; cursor:pointer;}
.whl:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:5px;}
.r-ico{
  flex-shrink:0; width:30px; height:30px;
  border-radius:4px; border:1px solid #000;
  background:var(--panel2);
}
.r-id{display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-width:0; flex:1 1 auto;}
.r-name{font-size:15px; font-weight:600; color:#e2e8f0; letter-spacing:-.1px;}

/* the metric cluster: bar, direct label, tier word */
.r-metric{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.bar{
  width:180px; height:7px;
  background:var(--bar-track);
  border-radius:3px;
  overflow:hidden;
}
.bar-fill{
  display:block; height:100%;
  background:var(--bar-fill);
  border-radius:2px 3px 3px 2px;
  min-width:2px;
}
/* The fill takes the row's tier. Redundant with length AND the labeled pill,
   which is legitimate double-encoding - and it is the drama. */
.heat-universal .bar-fill{
  background:var(--heat-universal);
  box-shadow:0 0 13px -1px var(--ember-glow);
}
.heat-inferno .bar-fill{
  background:var(--heat-inferno);
  box-shadow:0 0 10px -1px var(--ember-glow);
}
.heat-hot  .bar-fill{background:var(--heat-hot); box-shadow:0 0 6px -2px rgba(235,138,62,.5);}
.heat-warm .bar-fill{background:var(--heat-warm);}
.heat-mild .bar-fill{background:var(--heat-mild);}

/* The rail is a LADDER, not a switch: universal takes the strongest treatment
   (a 3px rail + a slightly wider wash), inferno keeps exactly what it had, hot
   keeps its whisper, and warm/mild stay completely calm. */
.row.heat-universal{
  box-shadow:inset 3px 0 0 -1px var(--heat-universal);
  background:linear-gradient(90deg,color-mix(in srgb, var(--heat-universal) 7%, transparent),transparent 70%);
}
.row.heat-inferno{
  box-shadow:inset 2px 0 0 -1px var(--heat-inferno);
  background:linear-gradient(90deg,rgba(255,168,105,.045),transparent 62%);
}
.row.heat-hot{box-shadow:inset 2px 0 0 -1px rgba(235,138,62,.45);}
.bar-label{
  font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums; white-space:nowrap;
  min-width:44px;
}
.r-metric .heat{min-width:58px; text-align:center;}

.r-meta{
  margin:7px 0 0; padding-left:41px;
  display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  font-size:12.5px; color:var(--faint);
}
.row.ranked .r-meta,
.row.ranked .r-why,
.row.ranked .r-specs{padding-left:76px;}
.msep{width:2px; height:2px; border-radius:50%; background:var(--faint); opacity:.6; flex-shrink:0;}
.m-slot{color:var(--muted);}
.m-stats{color:var(--muted);}
.m-ilvl{font-variant-numeric:tabular-nums;}

.r-why{
  margin:7px 0 0; padding-left:41px;
  font-size:13px; color:var(--muted); line-height:1.6; max-width:88ch;
}

/* ---------- spec chips: identity colors, minimal weight ---------- */
.r-specs{
  margin:9px 0 0; padding-left:41px;
  display:flex; flex-wrap:wrap; gap:4px; align-items:center;
}
.schip{
  font-size:10.5px; line-height:1.6;
  color:var(--cc,var(--muted));
  border:1px solid color-mix(in srgb,var(--cc,var(--line2)) 26%,transparent);
  background:color-mix(in srgb,var(--cc,var(--line2)) 7%,transparent);
  border-radius:4px; padding:0 6px; white-space:nowrap;
}
.schip .scls{display:none;}
.schip.is-match{
  border-color:var(--cc,var(--accent));
  background:color-mix(in srgb,var(--cc,var(--accent)) 20%,transparent);
}
/* Overflow chips live in a native <details> so the expander needs no JS. */
.chipmore{display:contents;}
.chipmore > summary{
  list-style:none; cursor:pointer;
  font-size:10.5px; line-height:1.6; font-weight:600;
  color:var(--muted);
  border:1px solid var(--line2); background:var(--panel2);
  border-radius:4px; padding:0 7px; white-space:nowrap;
}
.chipmore > summary::-webkit-details-marker{display:none;}
.chipmore > summary:hover{color:var(--ink); background:var(--hover);}
.chipmore[open] > summary{color:var(--faint);}
.chipmore .extra{
  display:flex; flex-wrap:wrap; gap:4px; align-items:center;
  width:100%; margin-top:4px;
}

/* ---------- collapsed single-spec tail ---------- */
.mildbox{margin:0; border-top:1px solid var(--line);}
.mildbox.is-hidden{display:none;}
.mildbox > summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:center; gap:8px;
  padding:10px 0; font-size:12.5px; color:var(--faint);
}
.mildbox > summary::-webkit-details-marker{display:none;}
.mildbox > summary::before{
  content:""; flex-shrink:0;
  width:0; height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent; border-bottom:4px solid transparent;
  transition:transform .12s;
}
.mildbox[open] > summary::before{transform:rotate(90deg);}
.mildbox > summary:hover{color:var(--ink);}
.mtoggle{font-weight:600; color:var(--muted);}
.mildbox > summary:hover .mtoggle{color:var(--ink);}
.mhint{color:var(--faint);}

/* an entire section with no groups at all */
.emptysec{
  padding:16px 0;
  font-size:13.5px; color:var(--faint); line-height:1.6;
}

/* ---------- honest empty group ---------- */
.groupempty{
  padding:14px 0 16px;
  font-size:13.5px; color:var(--faint); line-height:1.6;
}
.groupempty p{margin:0;}

/* ---------- tier-token table: clean and quiet ---------- */
.tscroll{overflow-x:auto;}
.tokentable{width:100%; border-collapse:collapse; min-width:760px;}
.tokentable th{
  text-align:left; font-size:11.5px; font-weight:600;
  color:var(--faint); padding:9px 12px;
  border-bottom:1px solid var(--line2); white-space:nowrap;
}
.tokentable td{
  padding:9px 12px; font-size:13px; color:var(--muted);
  border-bottom:1px solid var(--line); vertical-align:top;
}
.tokentable tr:last-child td{border-bottom:none;}
.tokentable .c-slot{white-space:nowrap;}
.tokentable .c-slot b{color:var(--ink); font-weight:600;}
.tokentable .c-boss{color:var(--muted); white-space:nowrap;}
.tokentable .c-claims{white-space:nowrap; color:var(--muted); font-variant-numeric:tabular-nums;}

/* ---------- confidence key ---------- */
.ckeypanel{max-width:820px; scroll-margin-top:120px;}
.ckey{padding:13px 16px;}
.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;}
.ckey-row .pill-s{flex-shrink:0; min-width:72px; text-align:center;}

/* ---------- 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:1120px; 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;}

/* ---------- responsive: the bar compresses, never disappears ---------- */
@media (max-width:900px){
  .bar{width:120px;}
}
@media (max-width:700px){
  .wrap{padding:20px 14px 44px;}
  .kept{padding:0 14px;}
  .jump{top:40px;}
  .lsec,.ckeypanel{scroll-margin-top:158px;}
  .r-main{flex-wrap:wrap;}
  .r-id{flex:1 1 100%; order:2;}
  .r-metric{order:3; width:100%; padding-left:41px;}
  .bar{flex:1 1 auto; width:auto; min-width:80px;}
  .r-meta,.r-why,.r-specs,
  .row.ranked .r-meta,.row.ranked .r-why,.row.ranked .r-specs{padding-left:0;}
  .r-metric{padding-left:0;}
  .jump select{max-width:none; flex:1 1 130px;}
}