/* /stats, WoW Forever by the numbers (scripts/lib/templates/tools/forever-stats.mjs,
   ops/design/templates/tool/forever-stats-contract.md). The strip of six figures is the answer;
   each chart section follows with its finding, its facts, the chart and two disclosures.

   Chart colors: the talent-state hues stepped into the dark band and validated with the
   dataviz palette check against --bg-2 (#1c1a17). The game's own --new and --reworked are too
   light for marks (OKLCH L .87 and .78). New and changed pass the CVD gate (deutan 9.5); the
   second pass raises the unchanged gray above 3:1 against the plot; every row also prints its
   value and the table view holds the numbers. Text never wears a series color. Brand v2.1
   tokens otherwise. */

.st-page {
  /* lint-css-allow: color. The chart palette above is validated for marks on this page's
     plot ground; it is a dataviz scale, not part of the brand tokens. */
  --st-new: #2bb11f;
  --st-changed: #b35800;
  --st-unchanged: #82776c;
  --st-unchanged-hatch: #c2bab0;
  --st-base: #75706a;
  --st-single: #b98c06;
  --st-alliance: var(--alliance);
  --st-horde: var(--horde);
  --st-surface: var(--bg-2);
  padding-bottom: var(--s-6);
}
.st-head .wfg-page-head { padding-bottom: var(--s-2); }
.st-head .wfg-page-meta span + span::before { content: "·"; margin: 0 .45rem; color: var(--ink-3); }
.st-head .wfg-page-meta .st-checks-tip span::before { content: none; }
.st-checks-btn { padding: 0; border: 0; background: none; color: var(--ink-2); font: inherit; text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }
.st-checks-btn:hover { color: var(--ink); }
.st-checks-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-checks-tip { position: fixed; inset: auto; display: grid; gap: .3rem; max-width: 22rem; margin: 0; padding: .6rem .75rem; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--bg-3); color: var(--ink); font: 400 var(--fs-xs)/1.4 var(--font-ui); }
.st-checks-tip:not(:popover-open) { display: none; }

/* ---------- The strip: six figures ---------- */

.st-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Each width also needs the page's width in rem (styles.css, main): under 200% text 1440
   gets three tiles a row and 768 two; under 20rem of page (390 at 200% text) one. */
@media (min-width: 44rem) { @container page (width >= 43rem) { .st-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } } }
@media (min-width: 72rem) { @container page (width >= 71rem) { .st-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); } } }
@container page (width < 20rem) { .st-strip { grid-template-columns: minmax(0, 1fr); } }
.st-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: .55rem .7rem .6rem;
  border: 1px solid var(--edge);
  border-top: 2px solid color-mix(in srgb, var(--accent) var(--mix-line), transparent);
  box-shadow: var(--panel-frame);
  background: var(--bg-2);
  scroll-margin-top: var(--sticky-top);
}
.st-tile:target { box-shadow: var(--panel-frame), 0 0 0 2px var(--accent); }
.st-tile p { margin: 0; }
.st-value { font: 400 clamp(1.75rem, 1.4rem + 1.2vw, 2.35rem)/1 var(--font-display); letter-spacing: .01em; }
.st-value a { color: var(--accent-text); text-decoration: none; }
.st-value a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.st-label { margin-top: .2rem !important; color: var(--ink); font: 400 .88rem/1.25 var(--font-ui); }
.st-label .wfg-ev { vertical-align: -.2em; }
.st-context { margin-top: .2rem !important; color: var(--ink-3); font: 400 .78rem/1.35 var(--font-body); }
.st-cite {
  align-self: flex-start;
  min-height: 1.75rem;
  margin-top: auto;
  padding: .25rem 0 0;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: 400 .76rem/1.2 var(--font-ui);
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: .2em;
  cursor: pointer;
}
.st-cite:hover { color: var(--ink); text-decoration-color: currentColor; }
.st-cite[hidden] { display: none; }
.st-cite[data-state="done"] { color: var(--evidence-confirmed); text-decoration: none; }
.st-strip-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
}
.st-strip-note { flex: 1 1 22rem; display: grid; gap: .35rem; }
.st-strip-note p, .st-strip-note .wfg-intro { max-width: var(--measure); margin: 0; color: var(--ink-3); font: 400 .86rem/1.45 var(--font-body); }
.st-strip-foot code { color: var(--ink-2); font: .82rem ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }

/* ---------- Sections ---------- */

/* Secondary player action follows the complete citation/download answer. */
.st-leveling { margin-top: var(--s-3); }
.st-leveling p { margin: 0; color: var(--ink-2); font: 400 .9rem/1.45 var(--font-body); }
.st-leveling-link { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.75rem; vertical-align: middle; color: var(--accent-text); text-decoration: underline; text-underline-offset: .2em; }
.st-leveling-link:hover { color: var(--ink); }
.st-leveling-link svg { flex: none; width: .85rem; height: .85rem; }
.st-sections > .affiliate-break { width: 100%; margin: 0; }

.st-sections { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.st-section { min-width: 0; scroll-margin-top: var(--sticky-top); }
.st-section h2 {
  margin: 0;
  font: var(--heading-weight) clamp(1.4rem, 1.25rem + .9vw, 1.75rem)/1.2 var(--font-heading);
}
.st-section h2::after { content: ""; display: block; width: 2.5rem; height: 2px; margin-top: .35rem; background: color-mix(in srgb, var(--accent) var(--mix-line), transparent); }
.st-takeaway { max-width: var(--measure); margin: var(--s-2) 0 0; color: var(--ink-2); font: 400 1rem/1.5 var(--font-body); }
.st-facts { max-width: var(--measure); margin: var(--s-2) 0 0; padding: 0; list-style: none; }
.st-facts li {
  position: relative;
  margin: 0;
  padding: .3rem 0 .3rem 1rem;
  color: var(--ink-2);
  font: 400 .92rem/1.45 var(--font-body);
  scroll-margin-top: var(--sticky-top);
}
.st-facts li::before { content: ""; position: absolute; left: .1rem; top: .85em; width: .4rem; height: 2px; background: var(--line-strong); }
.st-facts li:target { background: color-mix(in srgb, var(--accent) var(--mix-wash), transparent); }
.st-facts .wfg-ev { vertical-align: -.2em; }
.st-permalink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75rem;
  min-height: 1.75rem;
  margin-left: .1rem;
  color: var(--ink-3);
  font: 400 .85rem/1 var(--font-ui);
  text-decoration: none;
  vertical-align: middle;
}
.st-permalink:hover, .st-permalink[data-state="done"] { color: var(--accent-text); }

/* ---------- The figure ---------- */

.st-figure {
  margin: var(--s-3) 0 0;
  padding: var(--s-3) var(--s-3) var(--s-2);
  border: 1px solid var(--edge);
  box-shadow: var(--panel-frame);
  background: var(--st-surface);
}
.st-legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: 0 0 var(--s-3); padding: 0; list-style: none; color: var(--ink-2); font: 400 .82rem/1.3 var(--font-ui); }
.st-legend li { display: inline-flex; align-items: center; gap: .4rem; }
.st-key { display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; }
.st-key[data-s="new"], .st-seg[data-s="new"] { background: var(--st-new); }
.st-key[data-s="changed"], .st-seg[data-s="changed"] { background: var(--st-changed); }
.st-key[data-s="unchanged"], .st-seg[data-s="unchanged"] { background: var(--st-unchanged); }
.st-key[data-s="unchanged"], .st-seg[data-s="unchanged"] { background-image: repeating-linear-gradient(135deg, transparent 0, transparent 4px, var(--st-unchanged-hatch) 4px, var(--st-unchanged-hatch) 5px); }
.st-key[data-s="base"], .st-seg[data-s="base"] { background: var(--st-base); }
.st-key[data-s="single"], .st-seg[data-s="single"] { background: var(--st-single); }
.st-key[data-s="alliance"], .st-seg[data-s="alliance"] { background: var(--st-alliance); }
.st-key[data-s="horde"], .st-seg[data-s="horde"] { background: var(--st-horde); }

/* The plot: rows of name, track and end label; a grid layer behind the tracks carries the
   hairline ticks and their labels under the last row. */
/* One label column and one value column for every chart, so the plots line up down the page. */
.st-plot {
  --name-w: 11.5rem;
  --end-w: 8rem;
  --gap: .75rem;
  --axis-h: 1.5rem;
  position: relative;
  padding-bottom: var(--axis-h);
}
.st-grid {
  position: absolute;
  top: 0;
  bottom: var(--axis-h);
  left: calc(var(--name-w) + var(--gap));
  right: calc(var(--end-w) + var(--gap));
  pointer-events: none;
}
.st-tick { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--hairline); }
.st-tick span {
  position: absolute;
  top: calc(100% + .3rem);
  left: 0;
  transform: translateX(-50%);
  color: var(--ink-3);
  font: 400 .72rem/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.st-tick.is-start span { transform: none; }
.st-tick.is-end span { transform: translateX(-100%); }
.st-axis-label { margin: .35rem 0 0; color: var(--ink-3); font: 400 .72rem/1.2 var(--font-ui); text-align: center; }
.st-plot .st-axis-label { position: absolute; left: calc(var(--name-w) + var(--gap)); right: calc(var(--end-w) + var(--gap)); bottom: -1.2rem; }
.st-plot:has(.st-axis-label) { margin-bottom: 1.2rem; }
.st-chart { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; }
.st-row {
  display: grid;
  grid-template-columns: var(--name-w) minmax(0, 1fr) var(--end-w);
  align-items: center;
  gap: var(--gap);
  min-height: 1.9rem;
  border-radius: var(--r-ctl);
  cursor: default;
}
.st-row:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.st-name { color: var(--ink); font: 400 .9rem/1.2 var(--font-ui); overflow-wrap: anywhere; }
.st-end { color: var(--ink); font: 400 .86rem/1.2 var(--font-ui); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.st-track { position: relative; display: block; height: .95rem; }
.st-bar { display: flex; gap: 2px; height: 100%; }
.st-seg { flex-basis: 0; min-width: 0; }
.st-seg:last-child { border-radius: 0 4px 4px 0; }
.st-span { position: absolute; top: 0; height: 100%; border-radius: 3px; background: var(--st-single); }
.st-span.is-point { background: none; }
.st-span.is-point::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--st-single);
  box-shadow: 0 0 0 2px var(--st-surface);
  transform: translate(-50%, -50%);
}
@media (hover: hover) {
  .st-row:hover .st-bar, .st-row:hover .st-span, .st-row.is-active .st-bar, .st-row.is-active .st-span { filter: brightness(1.18); }
  .st-row:hover .st-name, .st-row.is-active .st-name { color: var(--accent-text); }
}
.st-row.is-active .st-name { color: var(--accent-text); }

/* Phones: the name and the end label share a line, the track runs the full width under them. */
@media (max-width: 40rem) {
  .st-plot { --gap: .5rem; }
  .st-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name end" "track track"; row-gap: .2rem; padding: .2rem 0; }
  .st-name { grid-area: name; }
  .st-end { grid-area: end; }
  .st-track { grid-area: track; }
  .st-grid, .st-plot .st-axis-label { left: 0; right: 0; }
}

.st-caption-text { display: block; max-width: 80ch; }
.st-nowrap { white-space: nowrap; }
.st-caption { margin-top: var(--s-3); padding-top: var(--s-2); border-top: 1px solid var(--hairline); color: var(--ink-3); font: 400 .82rem/1.45 var(--font-body); }
.st-caption .wfg-ev { vertical-align: -.2em; }

/* The chart tooltip (public/stats.js): one node, the site's tooltip ground; values lead. */
.st-tip {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  max-width: min(18rem, calc(100vw - 1rem));
  padding: .45rem .6rem .5rem;
  border: 1px solid var(--edge);
  background: var(--tip-ground);
  box-shadow: var(--shadow-inner);
  color: var(--ink);
  font: 400 .84rem/1.35 var(--font-ui);
  pointer-events: none;
}
.st-tip[hidden] { display: none; }
.st-tip p { margin: 0; }
.st-tip-title { margin-bottom: .2rem !important; color: var(--accent-text); font-size: .95rem; }
.st-tip-line { display: flex; align-items: baseline; gap: .45rem; }
.st-tip-line b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }
.st-tip-line span { color: var(--tip-muted); }
.st-tip-key { display: inline-block; flex: none; width: .8rem; height: 2px; transform: translateY(-.2em); }
.st-tip-key[data-s="new"] { background: var(--st-new); }
.st-tip-key[data-s="changed"] { background: var(--st-changed); }
.st-tip-key[data-s="unchanged"] { background: var(--st-unchanged); box-shadow: 0 0 0 1px var(--line-strong); }
.st-tip-key[data-s="base"] { background: var(--st-base); }
.st-tip-key[data-s="single"] { background: var(--st-single); }
.st-tip-key[data-s="alliance"] { background: var(--st-alliance); }
.st-tip-key[data-s="horde"] { background: var(--st-horde); }

/* ---------- Use this chart, table view ---------- */

/* The chart's footer: its two disclosures sit on the figure's frame, not loose under it. */
.st-use {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--edge);
  border-top: 1px solid var(--hairline);
  box-shadow: inset 1px 0 0 var(--edge-inner), inset -1px 0 0 var(--edge-inner), inset 0 -1px 0 var(--edge-inner);
  background: var(--st-surface);
}
.st-figure:has(+ .st-use) { border-bottom: 0; box-shadow: inset 1px 0 0 var(--edge-inner), inset -1px 0 0 var(--edge-inner), inset 0 1px 0 var(--edge-lit); }
.st-details { flex: 0 1 auto; min-width: 0; }
.st-details[open] { flex: 1 1 100%; }
.st-details > summary {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border-radius: var(--r-ctl);
  box-shadow: inset 0 0 0 1px var(--line-control);
  color: var(--ink);
  font: 400 .95rem/1.2 var(--font-ui);
  list-style: none;
  cursor: pointer;
}
.st-details > summary::-webkit-details-marker { display: none; }
.st-details > summary::after { content: ""; width: .45rem; height: .45rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.15rem) rotate(45deg); }
.st-details[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }
.st-details > summary:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }
@media (max-width: 40rem) {
  .st-use { padding: var(--s-2); gap: var(--s-1) var(--s-2); }
  .st-details > summary { padding: .5rem .7rem; font-size: .9rem; }
}
.st-details-body { display: grid; gap: var(--s-3); margin-top: var(--s-2); padding: var(--s-3); border: 1px solid var(--edge); box-shadow: var(--panel-frame); background: var(--bg-2); }
.st-copy-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .5rem; align-items: start; }
.st-copy-field label { grid-column: 1 / -1; color: var(--ink-3); font: 400 .78rem/1.2 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; }
.st-copy-field textarea {
  width: 100%;
  min-height: 3.5rem;
  padding: .45rem .55rem;
  border: 1px solid var(--line-control);
  border-radius: var(--r-ctl);
  background: var(--bg-3);
  color: var(--ink);
  font: .8rem/1.45 ui-monospace, Consolas, monospace;
  resize: vertical;
}
.st-copy-field .st-copy[hidden] { display: none; }
@media (max-width: 40rem) {
  .st-copy-field { grid-template-columns: minmax(0, 1fr); }
  .st-copy-field .st-copy { justify-self: start; }
}
.st-copy-field:has(.st-copy[hidden]) textarea { grid-column: 1 / -1; }
.st-copy[data-state="done"] { box-shadow: inset 0 0 0 1px var(--evidence-confirmed); }
.st-downloads { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: 0; }
.st-download, .st-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-height: 1.75rem;
  color: var(--ink);
  font: 400 .9rem/1.2 var(--font-ui);
}
.st-download small { padding: .05rem .3rem; border: 1px solid var(--line-strong); border-radius: 2px; color: var(--ink-3); font-size: .68rem; letter-spacing: .05em; }
.st-section > .st-downloads { margin-top: var(--s-2); }

.st-table-scroll { max-width: 100%; overflow-x: auto; }
.st-table-scroll + .st-table-scroll { margin-top: var(--s-3); }
.st-section > .st-table-scroll { margin-top: var(--s-3); max-width: 40rem; }
.st-table { width: 100%; }
.st-table caption { caption-side: top; padding: .55rem var(--tbl-pad-x); color: var(--ink-2); font: 400 var(--fs-sm)/1.4 var(--font-body); }
.st-table th, .st-table td { white-space: nowrap; }
.st-table .is-num { text-align: right; }
.st-table .wfg-evidence-word { margin-left: .3rem; }

/* ---------- Lower ---------- */

.st-lower { margin-top: var(--s-7); }
.st-lower #data-sources { max-width: 48rem; }
.st-revisions { padding-left: 1.2em; }
.st-revisions time { color: var(--ink-3); margin-right: .35rem; }

@media (prefers-reduced-motion: reduce) {
  .st-row .st-bar, .st-row .st-span, .st-details > summary::after { transition: none; }
}
@media (forced-colors: active) {
  .st-seg, .st-span, .st-key, .st-span.is-point::after { forced-color-adjust: none; border: 1px solid CanvasText; }
}
.st-article { margin-top: var(--s-6); }

/* The second pass uses the same frames and type tokens as the existing charts. */
.st-page [hidden] { display: none !important; }
.st-jump { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-block: var(--s-3); }
.st-jump a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--ink-2); font: 400 .9rem/1.2 var(--font-ui); }
.st-jump a:hover { color: var(--accent-text); }
.st-scope { max-width: var(--measure); color: var(--ink-2); font: 400 .88rem/1.55 var(--font-body); }
.st-scope a { color: var(--accent-text); }
#coverage .st-table-scroll { max-width: 100%; }
#coverage .st-table th, #coverage .st-table td { white-space: normal; min-width: 8rem; }
#coverage .st-table td:last-child { min-width: 15rem; }
.st-filter, .st-lookup, .st-estimator fieldset { border: 1px solid var(--edge); box-shadow: var(--panel-frame); padding: var(--s-3); background: var(--bg-2); }
.st-filter { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1rem; margin-block: var(--s-3); }
.st-filter label, .st-lookup label, .st-inputs label { display: grid; gap: .4rem; min-width: 0; color: var(--ink); font: 400 .9rem/1.3 var(--font-ui); }
.st-filter-note, .st-lookup [role="status"] { margin: 0; color: var(--ink-2); font: 400 .82rem/1.4 var(--font-body); }
.st-lookup { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; align-items: end; gap: .8rem; margin-block: var(--s-4); }
.st-lookup [role="status"] { grid-column: 1 / -1; }
.st-page .st-lookup input, .st-page .st-inputs input, .st-page select { width: 100%; max-width: 100%; min-height: 2.75rem; padding: .55rem .65rem; border: 1px solid var(--line-control); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font: 400 1rem/1.2 var(--font-ui); }
.st-page input::placeholder { color: var(--ink-3); opacity: 1; }
.st-filter select { width: min(100%, 13rem); }
.st-topic-group { margin-top: var(--s-5); }
.st-topic-group h3, #class-attribute-gains { color: var(--ink); font: var(--heading-weight) 1.4rem/1.25 var(--font-heading); }
.st-topic { max-width: var(--measure); padding-block: var(--s-3); border-top: 1px solid var(--hairline); scroll-margin-top: var(--sticky-top); }
.st-topic h4 { display: flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; color: var(--ink); font: var(--heading-weight) 1.1rem/1.3 var(--font-heading); }
.st-topic p { margin: .45rem 0; color: var(--ink); font: 400 .95rem/1.65 var(--font-body); }
.st-empty { padding: var(--s-3); border: 1px solid var(--line-control); color: var(--ink); }
.st-estimator { margin-block: var(--s-4); container: st-calc / inline-size; }
.st-estimator fieldset { min-width: 0; margin: 0; }
.st-estimator legend { padding: .25rem .5rem; color: var(--ink); font: 400 1rem/1.3 var(--font-ui); }
/* Calculator controls sit side by side and wrap; each box is only as wide as its longest
   valid value (--st-chars digits) or its longest option, never stretched across the row. */
.st-inputs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; margin-bottom: var(--s-3); }
.st-inputs label { flex: 0 1 auto; max-width: 100%; }
.st-page .st-inputs input[type="number"] { width: calc(var(--st-chars, 4) * 1ch + 2.75rem); font-variant-numeric: tabular-nums; }
.st-page .st-inputs select { width: auto; max-width: 100%; }
@media (max-width: 40rem) { .st-lookup { grid-template-columns: minmax(0, 1fr); } }
@container page (width < 39rem) { .st-lookup { grid-template-columns: minmax(0, 1fr); } }

/* Persistent exploration and linked inspection use the existing stone/focus tokens. */
.st-navigator {
  position: sticky; top: var(--st-nav-top, var(--sticky-top)); z-index: 25;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-block: var(--s-4);
  padding: .2rem .55rem; border: 1px solid var(--line-strong); background: var(--bg-2);
  box-shadow: var(--panel-frame), 0 4px 12px rgb(0 0 0 / .3);
}
.st-navigator.is-static { position: relative; top: auto; }
.st-active-class { flex: 0 0 100%; display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; border-top: 1px solid var(--line); color: var(--ink); font: 400 .85rem/1.3 var(--font-ui); }
.st-filter-scope-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-block: var(--s-3); }
.st-clear:disabled { opacity: .5; cursor: default; }
.st-nav-label { flex: none; color: var(--ink-3); font: 400 .78rem/1 var(--font-ui); text-transform: uppercase; letter-spacing: .06em; }
.st-views { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: thin; gap: .15rem; }
.st-views a { display: inline-flex; flex: none; align-items: center; min-height: 2.75rem; padding: .35rem .65rem; border-bottom: 2px solid transparent; color: var(--ink-2); font: 400 .9rem/1.2 var(--font-ui); text-decoration: none; white-space: nowrap; }
.st-views a[aria-current], .st-views a:hover { color: var(--accent-text); border-bottom-color: var(--accent); }
.st-view-short { display: none; }
.st-jump-menu { flex: none; }
.st-jump-menu > summary { display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; max-width: 17rem; padding: .35rem .5rem; color: var(--ink); font: 400 .86rem/1.2 var(--font-ui); cursor: pointer; list-style: none; }
.st-jump-menu > summary::-webkit-details-marker { display: none; }
.st-jump-menu [data-st-current-section] { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-jump-label { color: var(--ink-3); white-space: nowrap; }
.st-jump-arrow { width: .45rem; height: .45rem; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: -.2rem .25rem 0; }
.st-jump-menu[open] .st-jump-arrow { transform: rotate(225deg); margin-top: .2rem; }
.st-jump-panel { position: absolute; right: -.05rem; top: calc(100% + .35rem); width: min(23rem, calc(100vw - 2rem)); max-height: min(40rem, calc(100dvh - var(--st-anchor-offset, 8rem) - 2rem)); overflow-y: auto; overscroll-behavior: contain; padding: .7rem; border: 1px solid var(--line-strong); background: var(--bg-2); box-shadow: var(--panel-frame), 0 8px 24px rgb(0 0 0 / .4); }
.st-jump-group + .st-jump-group { border-top: 1px solid var(--line); margin-top: .45rem; padding-top: .45rem; }
.st-jump-group h3 { margin: .35rem .5rem; color: var(--ink-3); font: 400 .76rem/1.4 var(--font-ui); text-transform: uppercase; letter-spacing: .05em; }
.st-jump-group a { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem .5rem; color: var(--ink); font: 400 .9rem/1.25 var(--font-ui); text-decoration: none; border-left: 2px solid transparent; }
.st-jump-group a:hover, .st-jump-group a[aria-current] { color: var(--accent-text); border-left-color: var(--accent); background: var(--bg-3); }
.st-class-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding: .5rem; margin-bottom: .5rem; background: var(--bg); }
.st-class-tools label { display: grid; gap: .4rem; color: var(--ink-2); font: 400 .8rem/1.3 var(--font-ui); }
.st-class-tools [data-st-class-status] { grid-column: 1 / -1; margin: 0; color: var(--ink-2); font: 400 .8rem/1.4 var(--font-body); }
.st-class-tools > button { align-self: end; }
.st-clear { min-height: 2.75rem; padding: .4rem .55rem; border: 1px solid var(--line-control); border-radius: var(--r-ctl); background: var(--bg); color: var(--ink); font: 400 .8rem/1.2 var(--font-ui); cursor: pointer; }
.st-clear:hover { border-color: var(--accent); color: var(--accent-text); }
.st-section, .st-topic, .st-lower [id], .st-tile, .st-facts li { scroll-margin-top: var(--st-anchor-offset, var(--sticky-top)); }
.st-views a:focus-visible, .st-jump-menu > summary:focus-visible, .st-jump-panel a:focus-visible, .st-clear:focus-visible, .st-topic-index a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.st-row { min-height: 2.75rem; }
.st-row:has(.st-row-action) { display: block; padding: 0; }
.st-row-action { display: grid; grid-column: 1 / -1; grid-template-columns: var(--name-w) minmax(0, 1fr) var(--end-w); align-items: center; gap: var(--gap); width: 100%; min-height: 2.75rem; margin: 0; padding: .25rem 0; border: 0; border-radius: var(--r-ctl); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.st-row-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.st-row-action { scroll-margin-top: var(--st-anchor-offset, var(--sticky-top)); }
.st-row.is-active, .st-row.is-pinned, .st-row.is-linked { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.st-row.is-pinned { box-shadow: inset 2px 0 var(--accent); }
.st-row .st-seg { transition: opacity 140ms ease-out; }
.st-seg.is-muted { opacity: .35; }
.st-legend { margin-bottom: var(--s-2); gap: .15rem .5rem; }
.st-legend li { min-height: 2.75rem; padding: .35rem .45rem; box-sizing: border-box; }
.st-legend li:has(.st-legend-action) { padding: 0; }
.st-legend-action { display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; width: 100%; padding: .35rem .45rem; border: 1px solid transparent; border-radius: var(--r-ctl); background: none; color: var(--ink-2); font: inherit; text-align: left; cursor: pointer; }
.st-legend-action.is-selected { border-color: var(--accent); color: var(--ink); background: var(--bg-3); }
.st-legend-action:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.st-chart-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; align-items: center; gap: .6rem; min-height: 4.5rem; margin-top: .7rem; padding-top: .45rem; border-top: 1px solid var(--line); }
.st-chart-feedback { margin: 0; color: var(--ink-2); font: 400 .8rem/1.4 var(--font-ui); }
.st-guide-track { position: absolute; pointer-events: none; z-index: 2; inset: 0 calc(var(--end-w) + var(--gap)) var(--axis-h) calc(var(--name-w) + var(--gap)); }
.st-guide { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--accent); }
.st-guide-label { position: absolute; bottom: calc(-1 * var(--axis-h)); max-width: min(19rem, 65vw); width: max-content; padding: .2rem .35rem; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: 400 .7rem/1.25 var(--font-ui); }
.st-tip { max-width: min(23rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); }
.st-tip--compare { display: grid; width: min(28rem, calc(100vw - 1rem)); grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: .6rem; max-width: calc(100vw - 1rem); }
.st-tip-title, .st-tip-line span { min-width: 0; overflow-wrap: anywhere; }
.st-tip-line { flex-wrap: wrap; }
.st-tip-guide { grid-column: 1 / -1; margin-top: .3rem !important; padding-top: .3rem; border-top: 1px solid var(--line); color: var(--tip-muted); font-size: .76rem; }
.st-figure-downloads { display: flex; gap: .3rem; margin-left: auto; }
.st-figure-downloads a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .4rem .65rem; color: var(--ink-2); font: 400 .85rem/1.2 var(--font-ui); }
.st-figure-downloads a:hover { color: var(--accent-text); }

.st-topic-index { margin-top: var(--s-3); border: 1px solid var(--line-control); background: var(--bg-2); }
.st-topic-index > summary { min-height: 2.75rem; padding: .6rem .75rem; color: var(--ink); font: 400 1rem/1.3 var(--font-ui); cursor: pointer; }
.st-topic-index small { color: var(--ink-3); font-size: .8rem; }
.st-topic-index nav { padding: 0 .6rem .6rem; }
.st-topic-index h3 { margin: .8rem .35rem .25rem; color: var(--ink-3); font: 400 .76rem/1.4 var(--font-ui); }
.st-topic-index a { display: flex; align-items: center; min-height: 2.75rem; padding: .35rem; color: var(--ink-2); font: 400 .83rem/1.3 var(--font-ui); text-decoration: none; }
.st-topic-index a:hover, .st-topic-index a[aria-current] { color: var(--accent-text); background: var(--bg-3); }
.st-topic-articles { min-width: 0; }
@container page (width >= 63rem) {
  .st-chart-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 10rem; column-gap: 1rem; }
  .st-chart-wrap .st-legend { grid-column: 2; grid-row: 1; flex-direction: column; align-self: start; position: sticky; top: var(--st-anchor-offset, var(--sticky-top)); }
  .st-chart-wrap .st-plot { grid-column: 1; grid-row: 1; }
  .st-chart-wrap .st-chart-toolbar { grid-column: 1 / -1; }
  .st-topic-layout { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 2rem; }
  .st-topic-index { grid-column: 2; grid-row: 1; align-self: start; position: sticky; top: var(--st-anchor-offset, var(--sticky-top)); max-height: calc(100dvh - var(--st-anchor-offset, 8rem) - 1rem); overflow-y: auto; }
  .st-topic-articles { grid-column: 1; grid-row: 1; }
}
@media (max-width: 40rem) {
  .st-navigator { gap: .15rem; padding-inline: .2rem; }
  .st-nav-label, .st-jump-menu [data-st-current-section] { display: none; }
  .st-views a { padding-inline: .4rem; font-size: .8rem; }
  .st-views a { min-width: 2.75rem; justify-content: center; }
  .st-view-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .st-view-short { display: inline; }
  .st-jump-menu > summary { padding-inline: .4rem; }
  .st-jump-label { color: var(--ink); }
  .st-guide-track { left: 0; right: 0; }
  .st-row-action { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name end" "track track"; gap: .2rem .5rem; padding-block: .2rem; }
  .st-chart-toolbar { position: sticky; bottom: 0; z-index: 4; background: var(--bg-2); grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 8rem; padding-bottom: 3rem; }
  .st-chart-toolbar .st-clear { position: absolute; bottom: 0; right: 0; }
}
@container page (width < 39rem) {
  .st-nav-label, .st-jump-menu [data-st-current-section] { display: none; }
  .st-navigator { gap: .15rem; padding-inline: .2rem; }
  .st-views a { padding-inline: .4rem; font-size: .8rem; }
  .st-views a { min-width: 2.75rem; justify-content: center; }
  .st-view-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .st-view-short { display: inline; }
  .st-jump-menu > summary { padding-inline: .4rem; }
  .st-row, .st-row-action { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name end" "track track"; row-gap: .2rem; }
  .st-name { grid-area: name; } .st-end { grid-area: end; } .st-track { grid-area: track; }
  .st-grid, .st-plot .st-axis-label, .st-guide-track { left: 0; right: 0; }
  .st-chart-toolbar { position: sticky; bottom: 0; z-index: 4; background: var(--bg-2); grid-template-columns: minmax(0, 1fr); align-items: start; min-height: 8rem; padding-bottom: 3rem; }
  .st-chart-toolbar .st-clear { position: absolute; bottom: 0; right: 0; }
}
@media (prefers-reduced-motion: reduce) { .st-seg { transition: none !important; } }
@media (hover: none), (pointer: coarse) { .st-chart-toolbar { position: sticky; bottom: 0; z-index: 4; background: var(--bg-2); } }
@media (forced-colors: active) { .st-seg.is-muted { opacity: 1; } .st-row.is-pinned, .st-legend-action.is-selected { outline: 2px solid Highlight; } .st-guide { border-color: Highlight; } }

/* Character mechanics mirror the reference's reading column, stat panels and
   nested effect lists; the dashboard and its chart treatments stay separate. */
.st-mechanics { width: min(100%, 61rem); margin-inline: auto; }
.st-mechanics > .st-takeaway, .st-mechanics > .st-scope, .st-mechanics > .st-lookup { max-width: 42rem; }
.st-mechanics .st-topic-articles { max-width: 42rem; }
.st-mechanics .st-topic-group { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid var(--line); }
.st-mechanics .st-topic-group:first-child { margin-top: 1.5rem; padding-top: 1.5rem; }
.st-mechanics .st-topic-group > h3 { margin: 0 0 .5rem; color: var(--ink); font: var(--heading-weight) 1.6rem/1.25 var(--font-heading); }
.st-mechanics .st-group-intro { margin: 0 0 1rem; color: var(--ink-2); font: 400 1rem/1.5 var(--font-body); }
.st-mechanics .st-topic { max-width: 100%; margin-top: 1.5rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: .5rem; background: var(--bg-2); }
.st-mechanics .st-topic h4 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 .5rem; color: var(--ink); font: var(--heading-weight) 1.375rem/1.3 var(--font-heading); }
.st-mechanics .st-topic-name { min-width: 0; overflow-wrap: anywhere; }
.st-mechanics .st-topic h4 .st-permalink { flex: none; }
.st-mechanics .st-topic p { margin: 0 0 1rem; color: var(--ink); font: 400 1rem/1.5 var(--font-body); }
.st-mechanics .st-topic .st-topic-intro { font-weight: 600; }
.st-mechanics .st-topic-points { margin: 0; padding-left: 1.5rem; color: var(--ink); font: 400 1rem/1.5 var(--font-body); }
.st-mechanics .st-topic-points li { margin: .4rem 0; }
.st-mechanics .st-topic-points a, .st-tech a { color: var(--accent-text); }
.st-mechanics .st-topic .st-calc-link { margin: .25rem 0 0; }
.st-mechanics .st-calc-link a { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--accent-text); font: 400 .9rem/1.4 var(--font-ui); }
.st-mechanics .st-topic .st-estimator { margin: .75rem 0 0; }

/* Technical Notes: builds, code references and caveats, collapsed under each block. */
.st-tech { margin-top: .75rem; }
.st-tech > summary { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; color: var(--ink-2); font: 400 .9rem/1.3 var(--font-ui); cursor: pointer; list-style: none; }
.st-tech > summary::-webkit-details-marker { display: none; }
.st-tech > summary::after { content: ""; width: .4rem; height: .4rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translateY(-.15rem) rotate(45deg); }
.st-tech[open] > summary::after { transform: translateY(.1rem) rotate(-135deg); }
.st-tech > summary:hover { color: var(--ink); }
.st-tech-body { padding: .75rem; border-left: 2px solid var(--line-strong); background: var(--bg); color: var(--ink-2); font: 400 .88rem/1.55 var(--font-body); }
.st-tech-body ul { margin: 0; padding-left: 1.1rem; }
.st-tech-body li { margin: .3rem 0; }
.st-mechanics .st-tech-body p, .st-tech-body p { margin: .5rem 0 0; color: var(--ink-2); font: 400 .88rem/1.55 var(--font-body); }
.st-tech-body code { color: var(--ink); font: 400 .85rem/1.5 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.st-mechanics .st-class-coefficients { max-width: 42rem; margin-top: 3.5rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: .5rem; background: var(--bg-2); }
.st-mechanics #class-attribute-gains { margin: 0 0 .75rem; }
.st-mechanics .st-class-coefficients > p { color: var(--ink); font: 400 1rem/1.5 var(--font-body); }
.st-mechanics .st-table th { white-space: normal; }
.st-mechanics .st-topic-index, .st-mechanics .st-lookup { border-radius: .5rem; box-shadow: none; }
.st-mechanics .st-permalink { color: var(--accent-text); }
.st-inputs label[hidden] { display: none; }

/* One calculator look everywhere (cards, charts, the AP section): a faint accent wash with an
   accent edge, so a tool reads as a tool and not as more prose. --accent follows class pages. */
.st-estimator fieldset {
  padding: .75rem .85rem .85rem; border: 1px solid color-mix(in srgb, var(--accent) var(--mix-line), var(--line));
  border-radius: .5rem; background: color-mix(in srgb, var(--accent) var(--mix-faint), var(--bg));
  box-shadow: inset 3px 0 0 var(--accent), var(--panel-frame);
}
.st-estimator legend {
  display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .5rem; padding: .15rem .55rem .15rem .45rem;
  border: 1px solid color-mix(in srgb, var(--accent) var(--mix-line), transparent); border-radius: var(--r-ctl);
  background: color-mix(in srgb, var(--accent) var(--mix-wash), var(--bg-2));
  color: var(--accent-text); font: 500 .82rem/1.4 var(--font-ui); letter-spacing: .01em;
}
.st-estimator legend::before { content: ""; flex: none; width: .9rem; height: .9rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='1' width='12' height='14' rx='1.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='4.5' y='3.5' width='7' height='3'/%3E%3Ccircle cx='5.5' cy='9.5' r='1'/%3E%3Ccircle cx='8' cy='9.5' r='1'/%3E%3Ccircle cx='10.5' cy='9.5' r='1'/%3E%3Ccircle cx='5.5' cy='12.5' r='1'/%3E%3Ccircle cx='8' cy='12.5' r='1'/%3E%3Ccircle cx='10.5' cy='12.5' r='1'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='2' y='1' width='12' height='14' rx='1.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Crect x='4.5' y='3.5' width='7' height='3'/%3E%3Ccircle cx='5.5' cy='9.5' r='1'/%3E%3Ccircle cx='8' cy='9.5' r='1'/%3E%3Ccircle cx='10.5' cy='9.5' r='1'/%3E%3Ccircle cx='5.5' cy='12.5' r='1'/%3E%3Ccircle cx='8' cy='12.5' r='1'/%3E%3Ccircle cx='10.5' cy='12.5' r='1'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Output: label and value rows, then the formula with the reader's numbers. On a wide card
   it sits beside the inputs instead of under them. */
.st-calc-body { display: grid; gap: .75rem; }
@container st-calc (width >= 34rem) {
  .st-calc-body { grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem); align-items: start; gap: 1rem; }
  .st-calc-body .st-inputs { margin-bottom: 0; }
}
.st-calc-out { padding: .55rem .75rem; border-left: 2px solid var(--accent); background: var(--bg-2); }
.st-calc-rows { display: grid; gap: .3rem; margin: 0; }
.st-calc-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; }
.st-calc-rows dt { color: var(--ink-2); font: 400 .82rem/1.3 var(--font-ui); }
.st-calc-rows dd { margin: 0; color: var(--ink); font: 600 1.1rem/1.25 var(--font-ui); font-variant-numeric: tabular-nums; white-space: nowrap; }
.st-calc-rows > div:first-child dd { color: var(--accent-text); }
.st-estimator p.st-calc-formula { margin: .5rem 0 0; padding-top: .45rem; border-top: 1px solid var(--line); }
.st-calc-formula code { color: var(--ink-2); font: 400 .78rem/1.45 ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
.st-estimator p.st-calc-message { margin: 0; color: var(--ink); font: 400 .9rem/1.4 var(--font-body); }
.st-estimator .st-inputs { gap: .6rem .75rem; margin-bottom: .6rem; }
.st-estimator input:focus-visible, .st-estimator select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }

/* The explore bar stays quiet until it pins under the header, then an accent outline fades in.
   Outline, not border, so its height and the tooltip math don't change. */
.st-navigator { outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .18s ease-out, box-shadow .18s ease-out; }
.st-navigator.is-stuck:not(.is-static) {
  outline-color: color-mix(in srgb, var(--accent) 70%, var(--line-strong));
  box-shadow: var(--panel-frame), 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent), 0 4px 12px rgb(0 0 0 / .3);
}
@media (prefers-reduced-motion: reduce) { .st-navigator { transition: none; } }

/* The All Stats index fits a 1080p desktop without scrolling; links indent under their group. */
@container page (width >= 63rem) {
  .st-topic-index > summary { min-height: 2.25rem; padding: .45rem .75rem; }
  .st-topic-index nav { padding: 0 .5rem .5rem; }
  .st-topic-index h3 { margin: .5rem .35rem .1rem; font-size: .72rem; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }
  .st-topic-index a { min-height: 1.85rem; padding: .2rem .35rem .2rem 1rem; font: 400 .82rem/1.25 var(--font-ui); }
  .st-topic-index a[aria-current] { box-shadow: inset 2px 0 0 var(--accent); }
}

.st-mechanics .st-calc-note { margin: .5rem 0 0; color: var(--ink-2); font: 400 .82rem/1.4 var(--font-ui); }
.st-mechanics .st-calc-note a { display: inline; min-height: 0; margin: 0; font-size: inherit; }
@container page (width >= 63rem) { .st-mechanics .st-topic-layout { grid-template-columns: minmax(0, 42rem) 17rem; } }
@container page (width < 63rem) { .st-mechanics .st-topic-index { max-width: 42rem; } }