/* /midnight-season-2-tier-stats/ 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 / --text-* / --border-* / --c-<class> / --stat-sev-*
   / --quality-legendary) and follows all 21 themes. Classic site look on
   purpose - no bespoke display font, no hardcoded palette, unlike the S2
   venom/gold standalone pages (gearing-chart.css / loot-db.css /
   catalyst-conversions.css). ASCII-safe source; no em-dashes. */

.ts-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 24px 64px;
  color: var(--text-primary);
}
.ts-title {
  color: var(--accent);
  font-size: 1.4em;
  font-weight: 700;
  margin: 0 0 10px;
}
/* -- explanatory copy (round 4, owner: "explain the tier one better") --
   A decision-first lead + one "how to read this" paragraph above the weight
   strip, and a plain-language assumptions card below the counts line. House
   tokens only, like everything else here. */
.ts-lead {
  color: var(--text-primary);
  font-size: 0.95em;
  line-height: 1.6;
  margin: 0 0 10px;
  max-width: 880px;
}
.ts-howto {
  color: var(--text-secondary);
  font-size: 0.88em;
  line-height: 1.6;
  margin: 0 0 12px;
  max-width: 880px;
}
.ts-howto b { color: var(--text-primary); }
.ts-howto p { margin: 9px 0 0; }

.ts-assume {
  margin: 0 0 16px;
  max-width: 880px;
  font-size: 0.88em;
  line-height: 1.6;
}

/* Collapsed "how to read this" / assumptions blocks: zero visual weight until
   opened, no JS. House tokens only - follows every theme like the rest of this
   page. */
.ts-howto > summary,
.ts-assume > summary {
  list-style: none;
  cursor: pointer;
  color: var(--text-muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ts-howto > summary::-webkit-details-marker,
.ts-assume > summary::-webkit-details-marker { display: none; }
.ts-howto > summary::before,
.ts-assume > 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;
}
.ts-howto[open] > summary::before,
.ts-assume[open] > summary::before { transform: rotate(90deg); }
.ts-howto > summary:hover,
.ts-assume > summary:hover { color: var(--text-primary); }
.ts-assume-list {
  margin: 9px 0 0;
  padding-left: 18px;
  color: var(--text-muted);
  font-size: 0.82em;
  line-height: 1.6;
}
.ts-assume-list li { margin: 0 0 6px; }
.ts-assume-list li:last-child { margin-bottom: 0; }
.ts-assume-list b { color: var(--text-secondary); }

/* -- compact stat-weight source strip (round 3) --
   Sits under the lead: the active source's label, a REAL
   <select> that re-ranks the whole page live (tier-stats.js reads this
   page's own tier_stats_12.1.json for per-source weights + per-row
   sharePct), and the active source's snapshot date. Plus one muted,
   source-agnostic explainer line right under it (renders once, never
   per-spec, never rewritten on a source switch). House tokens only - no
   bespoke color, follows every theme like the rest of this page. */
.ts-weightbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 8px;
  font-size: 0.86em;
  color: var(--text-muted);
  margin: 0 0 6px;
}
.ts-weightbar-label { color: var(--text-secondary); font-weight: 600; }
.ts-weightbar-select {
  background: var(--bg-input);
  border: 1px solid var(--border-primary);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 0.95em;
  font-weight: 600;
  padding: 3px 7px;
  cursor: pointer;
}
.ts-weightbar-select:hover { border-color: var(--accent); }
/* "- snapshot <date>" is ONE flex child (never a separate dash span) so
   flex-wrap can only break BEFORE it, not between the dash and the date -
   at narrow widths that used to strand a lone "-" on its own line. */
.ts-weightbar-date { color: var(--text-muted); }
.ts-weightbar-explain {
  font-size: 0.76em;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 14px;
  max-width: 720px;
}

.ts-stat-line {
  color: var(--text-secondary);
  font-size: 0.86em;
  margin: 0 0 14px;
  max-width: 880px;
}
.ts-stat-line b { color: var(--text-primary); }

/* -- cross-links to the sibling S2 pages -- */
.ts-crosslinks {
  font-size: 0.82em;
  color: var(--text-muted);
  margin: 0 0 18px;
}
.ts-crosslinks-label { margin-right: 6px; }
.ts-crosslinks a { color: var(--text-link); text-decoration: none; }
.ts-crosslinks a:hover { text-decoration: underline; }
.ts-crosslinks-sep { margin: 0 6px; opacity: 0.6; }

/* -- view toggle (Per-Spec Detail / Quick-Reference Matrix) -- */
.ts-view-toggle {
  display: flex;
  gap: 3px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  padding: 2px;
  width: max-content;
  margin-bottom: 18px;
}
.ts-toggle-btn {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-muted);
  padding: 6px 14px;
  font-size: 0.82em;
  font-weight: 600;
  letter-spacing: 0.2px;
  cursor: pointer;
  transition: all 0.15s;
}
.ts-toggle-btn:hover { color: var(--text-secondary); }
.ts-toggle-btn.is-active {
  background: var(--bg-card);
  border-color: var(--border-primary);
  color: var(--accent);
}

/* -- the class > spec picker -- */
.ts-picker { margin-bottom: 18px; }
.ts-picker-lead {
  font-size: 0.82em;
  color: var(--text-secondary);
  margin-bottom: 12px;
}
.ts-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 10px 16px;
}
.ts-picker-class { min-width: 0; }
.ts-picker-classhead {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  font-size: 0.88em;
  margin-bottom: 6px;
}
.ts-picker-specs { display: flex; flex-wrap: wrap; gap: 5px; }
.ts-spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--bg-card);
  border: 1px solid var(--border-primary);
  border-radius: 5px;
  padding: 3px 9px 3px 5px;
  font-size: 0.8em;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-primary);
  transition: border-color 0.12s, background 0.12s;
}
.ts-spec-chip:hover { border-color: var(--accent); }
.ts-spec-chip.is-active {
  background: color-mix(in oklab, var(--accent) 14%, var(--bg-card));
  border-color: var(--accent);
}

/* -- icons: uniform 1px black frame (the site's borderless-icon-edge
   convention, docs/frontend-pages.md gotcha "Borderless icon edge
   convention"), box-sizing:border-box means no layout shift. -- */
.ts-cls-ico, .ts-spec-ico, .ts-item-ico {
  border: 1px solid #000;
  border-radius: 3px;
  vertical-align: middle;
  flex-shrink: 0;
}
.ts-item-ico { margin-right: 6px; background: var(--bg-input); }

/* -- empty/prompt state -- */
.ts-prompt {
  color: var(--text-muted);
  font-size: 0.9em;
  text-align: center;
  padding: 34px 12px;
  border: 1px dashed var(--border-primary);
  border-radius: 8px;
}

/* -- per-spec section -- */
.ts-spec-section { margin-bottom: 16px; }
.ts-spec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.ts-spec-head-text { flex: 1 1 auto; min-width: 0; }
.ts-spec-head-text h3 { margin: 0 0 2px; font-size: 1.08em; font-weight: 700; }
.ts-spec-meta { font-size: 0.8em; color: var(--text-muted); }
.ts-spec-quality {
  text-align: right;
  padding: 6px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  flex-shrink: 0;
}
.ts-spec-quality-k { font-size: 0.66em; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.ts-spec-quality-v { font-size: 1.1em; font-weight: 700; color: var(--accent); line-height: 1.2; }
.ts-spec-quality-sub { font-size: 0.68em; color: var(--text-muted); white-space: nowrap; }

.ts-priority {
  font-size: 0.86em;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-subtle);
}
.ts-priority-label { color: var(--text-muted); margin-right: 6px; }

/* -- slot grid, single column always (2026-08-14 round 2) --
   Owner verdict on the round-1 2-column grid, verbatim: "you can go back
   to the longer view i dont liek the hoizontol scroll" - pairing cards to
   ~496px squeezed .ts-table's fixed-width columns into a per-card
   horizontal scroll on desktop, which he rejected. Five slot blocks now
   flow in ONE column at every width; the longer page is the point. Each
   .ts-slot-block is a self-contained card (own header + table) - the grid
   gap replaces the old block margin-bottom uniformly at both widths. */
.ts-slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

/* -- per-slot block (card) + verdict headline chip -- */
.ts-slot-block {
  min-width: 0;
  background: var(--bg-input);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 10px 10px 8px;
}
.ts-slot-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-bottom: 6px;
}
.ts-slot-name { margin: 0; font-size: 0.95em; font-weight: 700; color: var(--text-primary); }

/* One coherent line: the verdict badge + its consequence are ONE flex unit
   (never two independent children of .ts-slot-head), so they can never be
   stranded on separate lines or leave dead space between "feed it" and the
   gain percentage - if the line must wrap at all, it wraps as a whole. */
.ts-verdict-line {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 6px;
  min-width: 0;
}
.ts-verdict {
  display: inline-block;
  font-size: 0.68em;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 3px;
}
.ts-verdict-keep { background: color-mix(in oklab, var(--stat-sev-good) 20%, transparent); color: var(--stat-sev-good); }
.ts-verdict-catalyze { background: color-mix(in oklab, var(--stat-sev-off) 20%, transparent); color: var(--stat-sev-off); }
.ts-verdict-note { font-size: 0.8em; color: var(--text-secondary); }
.ts-verdict-note .ts-item-ico { width: 16px !important; height: 16px !important; margin: 0 3px 0 0; }
.ts-verdict-note a { color: var(--text-link); }

/* -- ranked tables --
   Responsive rule: EVERY table lives inside .ts-scroll so a narrow
   viewport scrolls the table horizontally, never the page body. Row
   density tightened to a ~36px feel (was ~45px): .table-standard's base
   td/th padding is overridden here, same specificity, later in cascade
   order (this file loads after style.min.css) so it wins with no
   !important needed. */
.ts-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* table-layout:fixed is still what prevents the pair-column squeeze: with
   auto layout, giving Item/Source enough room to avoid wrapping starves
   Pair down to its single-word minimum (a few px), which wraps
   "Mastery 63% / Crit 37%" across many lines and grows row height past
   the dense ~36px target. Fixed layout with per-column widths keeps every
   column's width independent of the others' content, so Pair's 2-line
   budget (pair text + split %) stays exactly 2 lines; Item/Source get
   enough room for the large majority of names/sources on one line and
   wrap to at most 2 for the rare long outlier.
   Width flipped from a fixed 646px to 100% + a 560px min-width (2026-08-14
   round 2, the single-column-always revert above): with .ts-slot-grid
   never pairing cards anymore, the table now fills its card at every
   desktop width instead of overflowing a narrow half-width one, so the
   five column widths below are PERCENTAGES converted from the original
   26/230/190/150/50-of-646 px ratio (rank/item/source/pair/score) rather
   than a re-guessed split. The min-width is the phone-viewport floor -
   .ts-scroll (unchanged) is what turns a viewport narrower than it into
   an internal horizontal scroll instead of a column squeeze; a desktop
   card is always wider than 560px, so it never trips that floor. */
.ts-table { table-layout: fixed; width: 100%; min-width: 560px; }
.ts-table th, .ts-table td { padding: 4px 8px; }
.ts-col-rank { width: 4%; text-align: center !important; color: var(--text-muted); font-size: 0.86em; }
.ts-col-item { width: 35.6%; overflow: hidden; }
.ts-col-source { width: 29.4%; color: var(--text-muted); font-size: 0.8em; line-height: 1.3; overflow: hidden; }
.ts-col-pair { width: 23.2%; font-size: 0.88em; line-height: 1.25; }
.ts-col-score { width: 7.8%; text-align: right !important; font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.ts-split { color: var(--text-muted); font-size: 0.86em; }

.ts-row-token td { background: color-mix(in oklab, var(--accent) 8%, transparent); }
.ts-row-vr td { background: color-mix(in oklab, var(--quality-legendary) 10%, transparent); }

/* Item cell = icon + name + badges as ONE inline-flex unit, so a badge is
   always immediately adjacent to the name it describes - never floating
   later in the column's empty space (a badge can never end up alone on a
   wrapped line - it wraps together with the name, as part of the same
   flex line, or not at all). The Item column is PERCENTAGE-based now
   (.ts-col-item, 35.6% of the card - see the .ts-table comment above; the
   fixed-230px-of-646px era ended with the round 2 single-column revert),
   so most icon+name(+badge) combinations fit on one line at a normal card
   width; a long name wraps the WHOLE unit as a block, bounded to roughly
   the Pair column's own 2-line budget. */
.ts-item-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px 5px;
  min-width: 0;
}
.ts-item-cell .ts-item-ico { margin-right: 0; }
.ts-item-cell .ts-badge, .ts-item-cell .ts-note-inline { margin-left: 0; }

.ts-badge {
  display: inline-block;
  font-size: 0.64em;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
}
.ts-badge-token { background: color-mix(in oklab, var(--accent) 30%, transparent); color: var(--accent); }
.ts-badge-vr { background: color-mix(in oklab, var(--quality-legendary) 28%, transparent); color: var(--quality-legendary); cursor: help; }
.ts-badge-keep { background: color-mix(in oklab, var(--stat-sev-good) 22%, transparent); color: var(--stat-sev-good); }
.ts-note-inline {
  font-size: 0.72em;
  font-style: italic;
  color: var(--text-muted);
  margin-left: 5px;
}

/* -- quick-reference matrix -- */
.ts-matrix-card { margin-bottom: 16px; }
.ts-matrix-table { min-width: 760px; }
.ts-mx-spec { width: 210px; text-align: left !important; }
.ts-matrix-spec-link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; font-size: 0.9em; font-weight: 600; }
.ts-matrix-spec-link:hover { text-decoration: underline; }
.ts-matrix-cell { text-align: center !important; }
.ts-matrix-catalyze {
  display: inline-block;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--stat-sev-off);
  font-size: 0.86em;
}

@media (max-width: 760px) {
  .ts-title { font-size: 1.2em; }
  .ts-picker-grid { grid-template-columns: 1fr; }
  .ts-spec-quality { text-align: left; }
  .ts-mx-spec { width: 150px; }
}