/* ═══════════════════════════════════════════════════════════════
   CLAVIX — /stocks: the screener
   The app's Search tab, on the web: a large draggable risk radar
   sets a floor per dimension, four filters (more behind a fold)
   narrow the rest, and the table below is the whole universe,
   filtered live. Expressed
   only in pages.css tokens plus the series colours compare.css
   already declares.
   ═══════════════════════════════════════════════════════════════ */

/* ── top panel: radar left, filters right ─────────────────────── */
.scr-top { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); align-items:stretch; }
.scr-radar-col { padding:18px 22px 18px; border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; gap:14px; min-width:0; }
.scr-intro .eyebrow { margin-bottom:6px; }
.scr-intro h2 { font-size:22px; font-weight:600; letter-spacing:-.01em; line-height:1.15; color:var(--text-1); }
.scr-intro p { margin-top:8px; font-size:13px; line-height:1.5; color:var(--text-3); max-width:44rem; }

/* the radar: a block, never a flex child, with its own aspect ratio so no
   browser can collapse it */
.rf-wrap { width:100%; max-width:420px; margin:0 auto; }
.rf-svg { display:block; width:100%; height:auto; aspect-ratio:360 / 296; overflow:visible;
  touch-action:none; user-select:none; -webkit-user-select:none; }
.rf-ring { fill:none; stroke:var(--border); stroke-width:1; }
.rf-ring.outer { stroke:var(--border-lit); stroke-width:1.5; }
.rf-spoke { stroke:var(--border); stroke-width:.75; }
.rf-spoke.on { stroke:var(--border-lit); stroke-width:1; }
.rf-fill { fill:var(--accent); fill-opacity:.18; stroke:var(--accent); stroke-width:2; stroke-linejoin:round; }
.rf-code { font-family:var(--font-mono); font-size:10.5px; font-weight:700; fill:var(--text-3); letter-spacing:.06em; }
.rf-code.on { fill:var(--text-1); }
.rf-val { font-family:var(--font-mono); font-size:10px; font-weight:700; fill:var(--accent); }
/* one dot per axis: grey at rest, accent once it sets a floor */
.rf-h { cursor:grab; outline:none; }
.rf-h:active { cursor:grabbing; }
.rf-h .hit { fill:transparent; }
.rf-h .o { fill:var(--text-3); stroke:var(--surface-1); stroke-width:2.5; transition:fill .15s ease; }
.rf-h:hover .o { fill:var(--text-1); }
.rf-h.on .o { fill:var(--accent); }
.rf-h:focus-visible .o { stroke:var(--text-1); }

/* preset chips, centred under the radar */
.scr-presets { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; }
.chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  color:var(--text-2); background:var(--surface-1); border:1px solid var(--border); padding:6px 11px 6px 9px;
  border-radius:var(--r-chip); cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease; }
.chip svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.chip:hover { border-color:var(--accent-dim); color:var(--text-1); }
.chip.on { background:var(--text-1); color:var(--void); border-color:var(--text-1); }

.scr-match { text-align:center; font-size:13px; color:var(--text-3); margin:0; line-height:1.4; }
.scr-match b { font-family:var(--font-mono); font-size:17px; font-weight:700; color:var(--text-1); margin-right:5px; }
.scr-fn { text-align:center; margin:-8px 0 0; font-family:var(--font-mono); font-size:10.5px; color:var(--text-3); }

/* ── filters ───────────────────────────────────────────────────── */
.scr-filters { padding:16px 18px 16px; display:flex; flex-direction:column; gap:12px; min-width:0; }
.scr-fhead { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.scr-fhead h3 { font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-3); }
.scr-clear { background:none; border:0; color:var(--text-3); font:inherit; font-size:12px; cursor:pointer; padding:0; }
.scr-clear:hover { color:var(--accent); }
.scr-fgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; }
.f { display:flex; flex-direction:column; gap:5px; min-width:0; }
.f.wide { grid-column:1 / -1; }
.f > span:first-child { font-size:11px; color:var(--text-3); }
.f input, .f select { width:100%; min-width:0; background:var(--void); border:1px solid var(--border); border-radius:var(--r-chip);
  color:var(--text-1); font-family:var(--font-mono); font-size:12.5px; padding:7px 9px; outline:none; -moz-appearance:textfield; }
.f input:focus, .f select:focus { border-color:var(--accent-dim); }
.f input::placeholder { color:var(--text-3); }
.f input::-webkit-outer-spin-button, .f input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.f .rng { display:grid; grid-template-columns:1fr auto 1fr; gap:6px; align-items:center; }
.f .rng i { color:var(--text-3); font-style:normal; font-family:var(--font-mono); }
.f.on > span:first-child { color:var(--text-1); }
.f.on input, .f.on select { border-color:var(--accent-dim); }

/* the rest of the filters, folded away until wanted */
.scr-more { border-top:1px solid var(--border-soft); padding-top:10px; }
.scr-more summary { list-style:none; display:flex; align-items:center; justify-content:space-between; gap:10px;
  cursor:pointer; font-size:12.5px; color:var(--text-2); user-select:none; }
.scr-more summary::-webkit-details-marker { display:none; }
.scr-more summary:hover { color:var(--text-1); }
.scr-more summary b { margin-left:7px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; color:var(--accent); }
.scr-more summary .chev { width:14px; height:14px; position:relative; flex:none; }
.scr-more summary .chev:before { content:""; position:absolute; left:4px; top:2px; width:6px; height:6px;
  border-right:1.5px solid var(--text-3); border-bottom:1.5px solid var(--text-3); transform:rotate(45deg); transition:transform .2s ease; }
.scr-more[open] summary .chev:before { transform:rotate(225deg) translate(-2px,-2px); }
.scr-more .scr-fgrid { margin-top:12px; }

@media (max-width:900px){
  .scr-top { grid-template-columns:1fr; }
  .scr-radar-col { border-right:0; border-bottom:1px solid var(--border-soft); }
}
@media (max-width:480px){
  .scr-radar-col { padding:16px 14px; }
  .scr-filters { padding:14px; }
  .scr-fgrid { grid-template-columns:1fr; }
  .scr-intro h2 { font-size:20px; }
}

/* ── the table ─────────────────────────────────────────────────── */
.scr-wrap { overflow-x:auto; }
.scr { width:100%; border-collapse:collapse; min-width:980px; }
.scr th { position:sticky; top:0; z-index:2; background:var(--surface-2);
  font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-3); text-align:right; padding:8px 10px;
  border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none; }
.scr th:hover { color:var(--text-1); }
.scr th[data-dir]::after { content:"▾"; margin-left:5px; color:var(--accent); }
.scr th[data-dir="1"]::after { content:"▴"; }
.scr th.l, .scr td.l { text-align:left; }
.scr th.ck, .scr td.ck { width:30px; padding-left:12px; padding-right:2px; cursor:default; text-align:left; }
.scr th.dm { color:var(--text-3); }
.scr th.dm.on { color:var(--accent); }
.scr th.dm:first-of-type, .scr td.dm:first-of-type { border-left:1px solid var(--border-soft); }
.scr td { font-size:12px; padding:4.5px 10px; border-top:1px solid var(--border-soft);
  text-align:right; white-space:nowrap; height:26px; }
.scr tbody tr:hover { background:var(--surface-2); }
.scr tbody tr.sel { background:var(--accent-glow); }
.scr td.n { font-family:var(--font-mono); font-variant-numeric:tabular-nums lining-nums; color:var(--text-1); }
.scr td.tk a { font-family:var(--font-mono); font-weight:700; font-size:12.5px; color:var(--accent); }
.scr td.nm { color:var(--text-2); max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.scr td.pos { color:var(--pos); } .scr td.neg { color:var(--neg); }
.scr th.dm, .scr td.dm { padding-left:7px; padding-right:8px; }
.scr td.dm { font-family:var(--font-mono); font-variant-numeric:tabular-nums lining-nums; font-weight:500; }
.scr td.dm.none { color:var(--text-3); font-weight:400; }
.scr td.dm.gate { background:var(--accent-glow); }
.scr .gc { font-family:var(--font-mono); font-weight:700; font-size:11px; padding:2px 6px; border-radius:var(--r-chip); }
.scr input[type=checkbox] { width:14px; height:14px; accent-color:var(--accent); cursor:pointer; vertical-align:middle; }
.scr-foot { font-size:12px; color:var(--text-3); margin:-6px 2px 16px; }
.scr-empty td { text-align:center; padding:28px 10px; color:var(--text-3); font-size:13px; }

/* ── compare bar: appears once a row is ticked ─────────────────── */
.scr-cmpbar { position:sticky; bottom:14px; z-index:20; display:flex; align-items:center; gap:14px;
  width:max-content; max-width:100%; margin:0 auto 16px; padding:9px 10px 9px 16px;
  background:var(--surface-2); border:1px solid var(--border-lit); border-radius:var(--r-card);
  box-shadow:0 14px 34px rgba(0,0,0,.5); font-size:13px; color:var(--text-2); }
.scr-cmpbar[hidden] { display:none; }
.scr-cmpbar b { font-family:var(--font-mono); color:var(--text-1); }
.scr-cmpbar .go { font-family:var(--font-mono); font-weight:700; font-size:12.5px; color:var(--void);
  background:var(--accent); padding:7px 13px; border-radius:var(--r-chip); }
.scr-cmpbar .go[aria-disabled="true"] { opacity:.45; pointer-events:none; }
.scr-cmpbar button { background:none; border:1px solid var(--border); color:var(--text-3); font:inherit; font-size:12px;
  padding:6px 10px; border-radius:var(--r-chip); cursor:pointer; }
.scr-cmpbar button:hover { color:var(--text-1); border-color:var(--border-lit); }