/* ==========================================================================
   NITRATE — THE SCREENER
   Consumes tokens.css.  Never redefines a token.

   Layout: the screener owns exactly one viewport-height block.  The page
   itself never scrolls vertically; the table body does.  That is what makes
   a sticky header row and a sticky first column actually work.
   ========================================================================== */

.scr {
  --rowh: 48px;
  --headh: 34px;
  --railw: 244px;
  --sheetw: min(560px, 100vw);
  --scr-top: 96px;              /* measured from .masthead by screener.js */

  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--scr-top));
  height: calc(100dvh - var(--scr-top));
  overflow: hidden;
  background: var(--ground);
  margin-right: 0;
  transition: margin-right .16s ease;
}
.scr[hidden] { display: none; }

.scr[data-density="condensed"] { --rowh: 40px; }
.scr[data-density="regular"]   { --rowh: 48px; }
.scr[data-density="relaxed"]   { --rowh: 56px; }

/* the detail sheet pushes the table narrower — neighbouring rows stay visible */
.scr.sheet-open { margin-right: var(--sheetw); }

.scr-body { flex: 1 1 auto; min-height: 0; display: flex; }
.scr-spacer { flex: 1 1 auto; }

/* ============================================================ RAIL / FACETS */
.scr-rail {
  flex: 0 0 var(--railw);
  width: var(--railw);
  min-width: 0;
  border-right: var(--hair) solid var(--rule);
  background: var(--panel);
  overflow: hidden;
}
.scr.rail-off .scr-rail { flex-basis: 0; width: 0; border-right: 0; }
.scr-rail-inner { height: 100%; overflow-y: auto; overscroll-behavior: contain; }

.scr-sec + .scr-sec { border-top: var(--hair) solid var(--rule); }

.scr-sec-h {
  display: flex; align-items: center; gap: 7px;
  width: 100%; padding: 7px 10px 6px;
  border: 0; background: transparent; text-align: left;
}
.scr-sec-h:hover { background: var(--panel-2); }
.scr-sec-caret { color: var(--muted); font-size: 9px; width: 8px; }
.scr-sec-l {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2);
}
.scr-sec-badge {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  min-width: 12px; text-align: right;
}
.scr-sec-badge.on { color: var(--accent); }

.scr-sec-b { padding: 2px 10px 9px; }

.scr-opts { display: block; }
.scr-opts-tall { max-height: 232px; overflow-y: auto; overscroll-behavior: contain; }

.scr-opt {
  display: flex; align-items: center; gap: 7px;
  padding: 2px 0; cursor: pointer; min-height: 20px;
}
.scr-opt:hover { outline: var(--hair) solid var(--rule); outline-offset: 0; }
.scr-opt input { flex: 0 0 auto; margin: 0; accent-color: var(--accent); }
.scr-opt-n {
  flex: 1 1 auto; min-width: 0;
  font-size: 12px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-opt-c {
  flex: 0 0 auto;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 10.5px; color: var(--muted);
}
.scr-opt.is-zero { opacity: .38; }
.scr-opt.is-zero:hover { opacity: .7; }
.scr-opt-plain { padding-top: 5px; }

.scr-optsearch,
.scr-select,
.scr-num,
.scr-search input {
  width: 100%;
  padding: 3px 6px;
  background: var(--ground);
  border: var(--hair) solid var(--rule);
  color: var(--ink);
  font-size: 12px;
}
.scr-num, .scr-optsearch { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.scr-optsearch { margin-bottom: 5px; }
.scr-select { margin-bottom: 5px; }

.scr-range { display: flex; align-items: center; gap: 6px; }
.scr-range .scr-num { text-align: right; }
.scr-range-sep { color: var(--muted); font-size: 11px; }

.scr-seg { display: flex; }
.scr-segbtn {
  flex: 1 1 0; min-width: 0;
  padding: 3px 4px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted);
  border: var(--hair) solid var(--rule);
  background: var(--ground);
}
.scr-segbtn + .scr-segbtn { border-left: 0; }
.scr-segbtn:hover { color: var(--ink); }
/* "any" is the no-filter default: selected, but nothing to flag */
.scr-segbtn[aria-pressed="true"] { color: var(--ink); background: var(--panel-2); }
.scr-segbtn[aria-pressed="true"]:not([data-default]) {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
}

/* ================================================================= TOOLBAR */
.scr-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }

.scr-toolbar {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: var(--panel);
  border-bottom: var(--hair) solid var(--rule);
}

.scr-tbbtn {
  padding: 4px 9px 3px;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2);
  border: var(--hair) solid var(--rule);
  background: var(--ground);
  white-space: nowrap;
}
.scr-tbbtn:hover { color: var(--ink); background: var(--panel-2); }
/* a toggled-open panel is a preference, not an alert — orange is reserved for
   the active sort and for filters that are hiding rows from you */
.scr-tbbtn[aria-pressed="true"], .scr-tbbtn.on {
  color: var(--ink); background: var(--panel-2); border-color: var(--rule);
}
.scr-tbbtn:disabled { opacity: .45; cursor: default; }

.scr-search { flex: 0 1 300px; min-width: 130px; }
.scr-search input { padding: 4px 7px; }
.scr-search input::placeholder { color: var(--muted); }

.scr-fcount {
  padding: 4px 9px 3px;
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted);
  border: var(--hair) solid transparent;
  background: transparent;
  white-space: nowrap;
}
.scr-fcount.on { color: var(--accent); border-color: var(--accent); }
.scr-fcount.on:hover { background: var(--accent); color: var(--accent-ink); }
.scr-fcount:disabled { cursor: default; }

.scr-dens { display: flex; }
.scr-densbtn {
  width: 24px; padding: 4px 0 3px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--muted);
  border: var(--hair) solid var(--rule);
  background: var(--ground);
}
.scr-densbtn + .scr-densbtn { border-left: 0; }
.scr-densbtn:hover { color: var(--ink); }
.scr-densbtn[aria-pressed="true"] { color: var(--ink); background: var(--panel-2); }

/* ==================================================== ACTIVE FILTER CHIPS */
.scr-active {
  flex: 0 0 auto;
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 5px 10px;
  background: var(--ground);
  border-bottom: var(--hair) solid var(--rule);
  max-height: 78px; overflow-y: auto;
}
.scr-achip {
  display: inline-flex; align-items: stretch;
  border: var(--hair) solid var(--rule);
  background: var(--panel);
  font-size: 11px; line-height: 1.6;
}
.scr-achip-k {
  padding: 0 5px;
  font-family: var(--font-mono); font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
  background: var(--panel-2);
}
.scr-achip-v {
  padding: 0 6px; color: var(--ink);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-achip-x {
  padding: 0 5px; border: 0; background: transparent;
  color: var(--muted); font-size: 13px; line-height: 1.35;
}
.scr-achip-x:hover { color: var(--accent-ink); background: var(--crit); }

/* ============================================================= SQL CONSOLE */
.scr-sql {
  flex: 0 0 auto;
  display: flex; flex-direction: column;
  height: 320px; max-height: 55%;
  background: var(--panel);
  border-bottom: var(--hair) solid var(--rule);
}
.scr-sql[hidden] { display: none; }
.scr-sql-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px;
  border-bottom: var(--hair) solid var(--rule);
}
.scr-sql-title { font-size: 11px; letter-spacing: .1em; color: var(--ink); }
.scr-sql-hint {
  font-family: var(--font-mono); font-size: 10px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-sql-in {
  flex: 0 0 84px;
  width: 100%; padding: 7px 10px;
  background: var(--ground); color: var(--ink);
  border: 0; border-bottom: var(--hair) solid var(--rule);
  font-family: var(--font-mono); font-size: 12px; line-height: 1.5;
  resize: vertical;
}
.scr-sql-out { flex: 1 1 auto; min-height: 0; overflow: auto; }
.scr-sql-msg {
  padding: 5px 10px;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
}
.scr-sql-tablewrap { overflow-x: auto; }
/* hug the content — a 3-column result stretched across 1600px is unreadable */
.scr-sql-table { border-collapse: separate; border-spacing: 0; width: auto; min-width: 0; }
.scr-sql-table th, .scr-sql-table td {
  border: 0; box-shadow: inset 0 -1px 0 var(--rule);
  padding: 3px 10px; text-align: left; white-space: nowrap;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11.5px;
}
.scr-sql-table th {
  position: sticky; top: 0; z-index: 1;
  background: var(--panel-2); color: var(--ink);
  font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 10px;
}
.scr-sql-table td { color: var(--ink-2); }
.scr-sql-table td.num { text-align: right; }

/* ==================================================================== TABLE */
.scr-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  position: relative;
  background: var(--ground);
}
/* the table is keyboard-navigable; a 2px offset ring around the whole pane is
   too loud, an inset hairline says "arrow keys land here" just as clearly */
.scr-scroll:focus-visible { outline: var(--hair) solid var(--accent); outline-offset: -1px; }

/* border-collapse:separate is not cosmetic — collapsed borders do not stick,
   they scroll away from a position:sticky header.  Hairlines are box-shadows. */
.scr-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  table-layout: fixed;
}
.scr-table[hidden] { display: none; }

.scr-table th, .scr-table td {
  border: 0;
  padding: 0 8px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: inset 0 -1px 0 var(--rule);
}
.scr-table th.num, .scr-table td.num { text-align: right; }
.scr-table td.num, .scr-table td.mono, .scr-table th.num, .scr-table th.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ---- sticky header row ---- */
.scr-table thead th {
  position: sticky; top: 0; z-index: 3;
  height: var(--headh);
  padding: 0;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--rule);
}
/* ---- sticky first column ---- */
.scr-table th.scr-sticky, .scr-table td.scr-sticky {
  position: sticky; left: 0; z-index: 2;
  background: var(--ground);
  box-shadow: inset 0 -1px 0 var(--rule), 1px 0 0 var(--rule);
}
.scr-table thead th.scr-sticky {
  z-index: 4;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--rule), 1px 0 0 var(--rule);
}

.scr-th {
  display: flex; align-items: center; gap: 5px;
  width: 100%; height: var(--headh);
  padding: 0 8px;
  border: 0; background: transparent;
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap; overflow: hidden;
}
.scr-table th.num .scr-th { justify-content: flex-end; }
.scr-th:hover { color: var(--ink); }
.scr-th-l { overflow: hidden; text-overflow: ellipsis; }
.scr-th-u {
  font-family: var(--font-mono); font-weight: 400; font-size: 9px;
  letter-spacing: 0; text-transform: none; color: var(--muted);
}
.scr-th-a { font-size: 8px; line-height: 1; }
.scr-table th.is-sorted .scr-th,
.scr-table th.is-sorted .scr-th-u,
.scr-table th.is-sorted .scr-th-a { color: var(--accent); }
.scr-table th.is-sorted { box-shadow: inset 0 -2px 0 var(--accent); }
.scr-table thead th.is-sorted.scr-sticky {
  box-shadow: inset 0 -2px 0 var(--accent), 1px 0 0 var(--rule);
}

/* ---- rows: hairlines, never zebra stripes ---- */
.scr-table tbody td {
  height: var(--rowh);
  color: var(--ink-2);
  font-size: var(--size-dense);
}
.scr-table tbody td.scr-sticky { color: var(--ink); }
.scr-table tbody tr.scr-row { cursor: pointer; }

.scr-table tbody tr.scr-row:hover > td { background: var(--panel); }
.scr-table tbody tr.scr-row:hover > td.scr-sticky { background: var(--panel); }
.scr-table tbody tr.is-cursor > td { background: var(--panel-2); }
.scr-table tbody tr.is-cursor > td.scr-sticky { background: var(--panel-2); }
.scr-table tbody tr.is-selected > td { background: var(--panel-2); }
.scr-table tbody tr.is-selected > td.scr-sticky {
  background: var(--panel-2);
  box-shadow: inset 3px 0 0 var(--accent), inset 0 -1px 0 var(--rule), 1px 0 0 var(--rule);
}

/* virtual-scroll spacers */
.scr-table tbody tr.scr-pad > td {
  padding: 0; box-shadow: none; background: transparent;
  position: static; height: auto;
}

.scr-t { color: inherit; }
.scr-t-sub { color: var(--muted); font-family: var(--font-mono); font-size: 10.5px; }
.scr-nil { color: var(--muted); }
.scr-kind {
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .04em; color: var(--muted);
}

/* ---- chips ---- */
.scr-chip {
  display: inline-block;
  margin-right: 3px;
  padding: 1px 5px;
  border: var(--hair) solid var(--rule);
  background: transparent;
  font-family: var(--font-mono); font-size: 10px;
  line-height: 1.5;
  letter-spacing: .02em;
  color: var(--ink-2);
  max-width: 100%;
  vertical-align: middle;
}
.scr-chip:hover { color: var(--accent); border-color: var(--accent); }
.scr-chip-grp { color: var(--ink); background: var(--panel-2); border-color: transparent; }
.scr-chip-grp:hover { background: var(--panel-2); }
.scr-chip-drv { color: var(--ink-2); }
/* SINGLE_COPY alone lands on 82% of the library.  If every warn chip were
   outlined in its own colour the table would read as one solid alarm, so only
   crit carries a coloured edge; warn and info carry colour in the text. */
.scr-flag.sev-info { color: var(--muted); }
.scr-flag.sev-warn { color: var(--warn); }
.scr-flag.sev-crit { color: var(--crit); border-color: currentColor; }
.scr-flag:hover { color: var(--accent); border-color: var(--accent); }

/* ================================================================== STATUS */
.scr-status {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 14px;
  padding: 4px 10px 5px;
  background: var(--panel);
  border-top: var(--hair) solid var(--rule);
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden;
}
.scr-count { color: var(--ink); }
.scr-sortnote { color: var(--accent); }

/* ============================================================ EMPTY STATES */
.scr-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 40px 24px; text-align: center;
}
.scr-empty[hidden] { display: none; }
.scr-empty-h { font-size: 17px; color: var(--ink); }
.scr-empty-p { max-width: 46ch; color: var(--muted); font-size: 12.5px; margin: 0; }
.scr-clearbig { margin-top: 4px; color: var(--accent); border-color: var(--accent); }
.scr-clearbig:hover { color: var(--accent-ink); background: var(--accent); }

/* =========================================================== COLUMN PICKER */
.scr-pop {
  position: absolute; z-index: 50;
  width: 296px; max-height: 70vh;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: var(--hair) solid var(--rule);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .3);
}
.scr-pop[hidden] { display: none; }
.scr-pop-h {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px;
  border-bottom: var(--hair) solid var(--rule);
}
.scr-pop-t { font-size: 12px; letter-spacing: .08em; }
.scr-pop-hint {
  margin: 0; padding: 6px 10px;
  font-size: 11px; color: var(--muted);
  border-bottom: var(--hair) solid var(--rule);
}
.scr-collist { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 3px 0; }

.scr-colitem {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 8px;
  min-height: 24px;
  background: var(--panel);
}
.scr-colitem:hover { outline: var(--hair) solid var(--rule); outline-offset: -1px; }
.scr-colitem.dragging { opacity: .45; outline: var(--hair) dashed var(--accent); }
.scr-colitem[draggable="true"] { cursor: grab; }
.scr-grip { color: var(--muted); font-size: 11px; width: 10px; text-align: center; }
.scr-collab { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; cursor: pointer; }
.scr-collab input { margin: 0; accent-color: var(--accent); }
.scr-collab-t {
  font-family: var(--font-display); font-weight: 800; font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scr-collab-u { font-family: var(--font-mono); font-size: 9.5px; color: var(--muted); }
.scr-colmv { display: flex; gap: 2px; }
.scr-mvbtn {
  width: 20px; padding: 1px 0;
  font-size: 8px; color: var(--muted);
  border: var(--hair) solid var(--rule); background: var(--ground);
}
.scr-mvbtn:hover { color: var(--accent); border-color: var(--accent); }

/* ================================================================ RESPONSE */
@media (max-width: 900px) {
  .scr { --railw: 210px; }
  .scr.sheet-open { margin-right: 0; }   /* no room to push — let it overlay */
}
@media (max-width: 640px) {
  .scr-rail { position: absolute; inset: 0 auto 0 0; z-index: 20; }
  .scr.rail-off .scr-rail { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scr { transition: none; }
}

/* series status -- ongoing vs completed replaces risk tier for shows (2026-08-09) */
.scr-chip-st{text-transform:lowercase;letter-spacing:.02em}
.scr-st-ongoing{border-color:color-mix(in srgb,var(--ok) 55%,transparent);color:var(--ok)}
.scr-st-completed{border-color:var(--rule);color:var(--muted)}
.scr-st-unknown{border-color:color-mix(in srgb,var(--warn) 45%,transparent);color:var(--warn)}