/* /midnight-season-2-stat-priorities/ page styles. Loaded AFTER style.min.css
   via page_open's $extraHeadCss hook, on the FULL site frame (theme engine +
   gutter art + top bar) - so everything here rides the REAL theme tokens
   (--accent / --bg-card / --bg-input / --text-* / --border-* / --c-<class>)
   and follows all 21 themes. Classic site look on purpose, the tier-stats.css
   shape: no bespoke display font, no hardcoded palette. CHROME-NEUTRAL BY
   CONSTRUCTION - every selector is .stp-* prefixed, there is not one token
   declaration, no :root / body / bare-element rule, so nothing here can reach
   the shared header, footer or gutters. The only hardcoded colors on this page
   are the four STAT_COLORS hexes, which live INLINE in stat-priorities.php as
   the site's established data-color convention, not here.
   ASCII-safe source; no em-dashes. */

.stp-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  color: var(--text-primary);
}
.stp-title {
  color: var(--accent);
  font-size: 1.4em;
  font-weight: 700;
  margin: 0 0 10px;
}

/* -- explanatory copy -- */
.stp-lead {
  color: var(--text-primary);
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0 0 10px;
  max-width: 880px;
}
.stp-lead b { color: var(--accent); }
.stp-howto {
  color: var(--text-secondary);
  font-size: 0.88em;
  line-height: 1.6;
  margin: 0 0 14px;
  max-width: 880px;
}
.stp-howto b { color: var(--text-primary); }
.stp-howto em { font-style: italic; color: var(--text-primary); }
.stp-howto p { margin: 9px 0 0; }

/* Collapsed "how to read this": zero visual weight until opened, no JS.
   House tokens only - follows every theme like the rest of this page. */
.stp-howto > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.stp-howto > summary::-webkit-details-marker { display: none; }
.stp-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;
}
.stp-howto[open] > summary::before { transform: rotate(90deg); }
.stp-howto > summary:hover { color: var(--text-primary); }
/* The one inline example of a cap token in the prose - deliberately styled
   like the real thing in the table so the sentence and the data match. */
.stp-inline-cap {
  display: inline-block;
  padding: 0 5px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg-input);
  font-weight: 600;
  font-size: 0.94em;
  white-space: nowrap;
}

/* -- operator legend -- */
.stp-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 0.8em;
  color: var(--text-muted);
  margin: 0 0 14px;
}
.stp-legend-label { color: var(--text-secondary); font-weight: 700; }
.stp-legend-item { white-space: nowrap; }

/* -- provenance chips -- */
.stp-prov {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin: 0 0 16px;
}
.stp-prov-chip {
  border: 1px solid var(--border-primary);
  border-radius: 20px;
  background: var(--bg-card);
  color: var(--text-muted);
  font-size: 0.76em;
  padding: 3px 11px;
  white-space: nowrap;
}
.stp-prov-chip b { color: var(--text-secondary); font-weight: 700; }

/* -- the game-wide DR knees block. Deliberately visually SEPARATE from the
   per-spec cap language above it (its own card, its own label) because the two
   are constantly confused: a cap is one spec's guide pick, a knee is a combat
   constant every character in the game shares. -- */
.stp-knees {
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  background: var(--bg-card);
  padding: 12px 16px;
  margin: 0 0 18px;
  max-width: 880px;
}
.stp-knees-title {
  color: var(--text-secondary);
  font-size: 0.86em;
  font-weight: 700;
  margin-bottom: 4px;
}
.stp-knees-sub {
  color: var(--text-muted);
  font-size: 0.78em;
  line-height: 1.55;
  margin-bottom: 10px;
}
.stp-knees-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.stp-knee {
  border: 1px solid var(--border-secondary);
  border-radius: 5px;
  background: var(--bg-input);
  padding: 6px 14px;
  min-width: 92px;
  text-align: center;
}
.stp-knee-stat {
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.stp-knee-num {
  font-size: 1.06em;
  font-weight: 700;
  color: var(--text-primary);
}

/* -- cross-links to the sibling S2 pages -- */
.stp-crosslinks {
  font-size: 0.82em;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.stp-crosslinks-label { color: var(--text-secondary); font-weight: 600; margin-right: 4px; }
.stp-crosslinks a { color: var(--text-link); text-decoration: none; }
.stp-crosslinks a:hover { text-decoration: underline; }
.stp-crosslinks-sep { color: var(--text-muted); margin: 0 5px; }

/* ==========================================================================
   THE TABLE CARD + THE CSS-ONLY FILTER
   The six radios are the FIRST children of .stp-tablecard and the table
   follows them as a later sibling, which is what makes the `~` rules below
   reach the rows. If the markup order in stat-priorities.php ever changes so
   that the inputs no longer precede .stp-scroll, every filter silently stops
   working with no error anywhere - that ordering is load-bearing, not tidy.
   ========================================================================== */
.stp-tablecard {
  max-width: 1180px;
  margin: 0 0 18px;
  padding: 14px 16px 16px;
}

/* The inputs stay in the accessibility tree and stay focusable - clipped, not
   display:none (which would remove them from tab order and from the a11y tree
   and leave the labels controlling nothing). */
.stp-f {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   THE SOURCE TOGGLE (Wowhead / Icy Veins)
   Same CSS-only radio mechanism as the role filter, and the same load-bearing
   ordering rule: #stp-src-wh / #stp-src-iv are direct children of
   .stp-tablecard and .stp-scroll is a LATER sibling, which is what lets the
   `~` rules below reach every row. The swap is therefore scripting-free;
   stat-priorities.js only PERSISTS the pick.
   ========================================================================== */
.stp-srcbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
}
.stp-srcbar-label {
  color: var(--text-secondary);
  font-size: 0.8em;
  font-weight: 700;
  margin-right: 2px;
}
/* Deliberately a touch heavier than .stp-pill: this switch changes what every
   row SAYS, where the role pills only change which rows are shown. */
.stp-srcpill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-primary);
  border-radius: 5px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.84em;
  font-weight: 700;
  padding: 5px 14px;
  cursor: pointer;
  user-select: none;
}
.stp-srcpill:hover { border-color: var(--accent); color: var(--text-primary); }

#stp-src-wh:checked ~ .stp-srcbar label[for="stp-src-wh"],
#stp-src-iv:checked ~ .stp-srcbar label[for="stp-src-iv"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-hover);
}
#stp-src-wh:checked ~ .stp-srcbar label[for="stp-src-wh"] .stp-pill-n,
#stp-src-iv:checked ~ .stp-srcbar label[for="stp-src-iv"] .stp-pill-n {
  color: var(--accent);
}
#stp-src-wh:focus-visible ~ .stp-srcbar label[for="stp-src-wh"],
#stp-src-iv:focus-visible ~ .stp-srcbar label[for="stp-src-iv"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The honesty line under the switch: what the toggle does and does not do. */
.stp-srcnote {
  color: var(--text-muted);
  font-size: 0.78em;
  line-height: 1.55;
  margin: 0 0 12px;
  max-width: 880px;
}

/* THE SWAP. Wowhead is the server-rendered default, so the Icy Veins cell is
   hidden until its radio is checked - which also means a no-CSS render shows
   BOTH readings rather than neither. */
.stp-src-iv { display: none; }
#stp-src-iv:checked ~ .stp-scroll .stp-src-wh { display: none; }
#stp-src-iv:checked ~ .stp-scroll .stp-src-iv { display: inline-flex; }

/* The Icy Veins cell stacks: the default build's chain, then any named
   alternate builds as their own quieter lines. */
.stp-prio-iv {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.stp-alt {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  opacity: 0.82;
  font-size: 0.94em;
}
/* The build name (hero talent, or a raid-vs-Mythic+ context). Neutral, never
   accent - it is a label on the row, not the answer. */
.stp-build {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--border-secondary);
  border-radius: 3px;
  background: var(--bg-input);
  color: var(--text-muted);
  font-size: 0.74em;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.stp-build[title] { cursor: help; }
/* A spec Icy Veins did not publish keeps the Wowhead reading and says so. */
.stp-noiv {
  color: var(--text-muted);
  font-size: 0.74em;
  font-style: italic;
  cursor: help;
  white-space: nowrap;
}

.stp-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
}
.stp-filters-label {
  color: var(--text-secondary);
  font-size: 0.8em;
  font-weight: 700;
  margin-right: 2px;
}
.stp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-primary);
  border-radius: 20px;
  background: var(--bg-input);
  color: var(--text-secondary);
  font-size: 0.8em;
  font-weight: 600;
  padding: 4px 12px;
  cursor: pointer;
  user-select: none;
}
.stp-pill:hover { border-color: var(--accent); color: var(--text-primary); }
.stp-pill-n {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.92em;
}

/* Active pill. One rule per radio because a label is not adjacent to its own
   input here (all six inputs come first, then the pill row), so the pairing
   has to be spelled out by id. */
#stp-f-all:checked    ~ .stp-filters label[for="stp-f-all"],
#stp-f-tank:checked   ~ .stp-filters label[for="stp-f-tank"],
#stp-f-healer:checked ~ .stp-filters label[for="stp-f-healer"],
#stp-f-melee:checked  ~ .stp-filters label[for="stp-f-melee"],
#stp-f-ranged:checked ~ .stp-filters label[for="stp-f-ranged"],
#stp-f-caps:checked   ~ .stp-filters label[for="stp-f-caps"] {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg-hover);
}
#stp-f-all:checked    ~ .stp-filters label[for="stp-f-all"] .stp-pill-n,
#stp-f-caps:checked   ~ .stp-filters label[for="stp-f-caps"] .stp-pill-n {
  color: var(--accent);
}

/* Keyboard focus ring, same id-pairing reason as above. */
#stp-f-all:focus-visible    ~ .stp-filters label[for="stp-f-all"],
#stp-f-tank:focus-visible   ~ .stp-filters label[for="stp-f-tank"],
#stp-f-healer:focus-visible ~ .stp-filters label[for="stp-f-healer"],
#stp-f-melee:focus-visible  ~ .stp-filters label[for="stp-f-melee"],
#stp-f-ranged:focus-visible ~ .stp-filters label[for="stp-f-ranged"],
#stp-f-caps:focus-visible   ~ .stp-filters label[for="stp-f-caps"] {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* THE FILTER ITSELF. "All" needs no rule - it is the unfiltered state, which
   is also what a no-CSS or print render shows. */
#stp-f-tank:checked   ~ .stp-scroll tbody tr:not([data-role="tank"]),
#stp-f-healer:checked ~ .stp-scroll tbody tr:not([data-role="healer"]),
#stp-f-melee:checked  ~ .stp-scroll tbody tr:not([data-role="melee"]),
#stp-f-ranged:checked ~ .stp-scroll tbody tr:not([data-role="ranged"]),
#stp-f-caps:checked   ~ .stp-scroll tbody tr:not([data-cap="1"]) {
  display: none;
}

/* Empty state. Hidden unless the ACTIVE filter genuinely matches no row - so a
   future patch with (say) no capped specs reads as an answer, not as a broken
   table. */
.stp-empty {
  display: none;
  color: var(--text-muted);
  font-size: 0.84em;
  font-style: italic;
  margin: 12px 0 0;
}
.stp-tablecard:has(#stp-f-tank:checked):not(:has(tbody tr[data-role="tank"])) .stp-empty,
.stp-tablecard:has(#stp-f-healer:checked):not(:has(tbody tr[data-role="healer"])) .stp-empty,
.stp-tablecard:has(#stp-f-melee:checked):not(:has(tbody tr[data-role="melee"])) .stp-empty,
.stp-tablecard:has(#stp-f-ranged:checked):not(:has(tbody tr[data-role="ranged"])) .stp-empty,
.stp-tablecard:has(#stp-f-caps:checked):not(:has(tbody tr[data-cap="1"])) .stp-empty {
  display: block;
}

/* The table scrolls its OWN overflow horizontally on a narrow viewport; the
   page body never scrolls sideways (the .ts-scroll / .cc-scroll idiom). */
.stp-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.stp-table {
  width: 100%;
  min-width: 760px;
}
.stp-table th, .stp-table td {
  vertical-align: middle;
  white-space: nowrap;
}
.stp-col-prio { white-space: nowrap; }
.stp-col-role, .stp-col-prim { color: var(--text-muted); font-size: 0.9em; }
.stp-cell-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.stp-ico {
  border-radius: 3px;
  flex: 0 0 auto;
  vertical-align: middle;
}

/* A row whose spec publishes a cap gets a quiet accent rail - the thing the
   page exists for should be findable by eye in a 40-row scan. */
.stp-row-cap td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Class-group divider, ONLY in the unfiltered view: with a role filter on, the
   class boundaries move and a divider inherited from the full list would sit
   in the wrong place. */
#stp-f-all:checked ~ .stp-scroll tbody tr.stp-row-newclass td {
  border-top: 1px solid var(--border-secondary);
}

/* -- the priority string -- */
.stp-prio {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  font-size: 0.95em;
}
.stp-op {
  color: var(--text-muted);
  font-weight: 700;
  font-size: 0.88em;
  cursor: help;
}
.stp-stat-unknown { color: var(--text-primary); font-weight: 600; }
/* The cap token, INSIDE the priority string. This is the whole point of the
   page, so it is the one thing on the row that reads as a chip. */
.stp-cap-token {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 1px 6px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--bg-input);
  cursor: help;
}
.stp-cap-num { color: var(--accent); font-weight: 700; }

.stp-cap-cell { color: var(--text-primary); font-size: 0.92em; white-space: nowrap; }
.stp-cap-cell b { color: var(--accent); font-weight: 700; }
.stp-dash { color: var(--text-muted); cursor: help; }

/* -- caveats + source notes -- */
.stp-assume {
  border: 1px solid var(--border-primary);
  border-radius: 6px;
  background: var(--bg-card);
  padding: 12px 16px;
  margin: 0 0 16px;
  max-width: 880px;
}
.stp-assume-title {
  color: var(--text-secondary);
  font-size: 0.86em;
  font-weight: 700;
  margin-bottom: 7px;
}
.stp-assume-list {
  margin: 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 0.82em;
  line-height: 1.6;
}
.stp-assume-list li { margin: 0 0 6px; }
.stp-assume-list li:last-child { margin-bottom: 0; }

.stp-sources {
  color: var(--text-muted);
  font-size: 0.78em;
  line-height: 1.6;
  margin: 0;
  max-width: 880px;
}
.stp-sources b { color: var(--text-secondary); }

@media (max-width: 720px) {
  .stp-wrap { padding: 20px 12px 48px; }
  .stp-tablecard { padding: 12px 10px 14px; }
}