/* Layout: a single ranked sheet. Masthead and market tape on top, then one dense list where each row is a stock and opens in place. */
:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --ink: #121926;
  --muted: #566176;
  --line: #d5dae3;
  --line-soft: #e6e9ef;
  --accent: #0b5d6b;
  --bgscore: #33479f;
  --newsscore: #c9701a;
  --track: #e3e7ee;
  --up: #177245;
  --down: #b3261e;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --font-data: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e131b; --surface: #161d28; --ink: #e8ecf3; --muted: #9aa5b8; --line: #2b3545; --line-soft: #212a38;
    --accent: #5fc3d2; --bgscore: #8496ee; --newsscore: #f0a04b; --track: #263040; --up: #5fcf96; --down: #ff8a80;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e131b; --surface: #161d28; --ink: #e8ecf3; --muted: #9aa5b8; --line: #2b3545; --line-soft: #212a38;
  --accent: #5fc3d2; --bgscore: #8496ee; --newsscore: #f0a04b; --track: #263040; --up: #5fcf96; --down: #ff8a80;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font-body); }
.wrap { max-width: 1120px; margin: 0 auto; padding-inline: 20px; padding-block: 36px 64px; display: flex; flex-direction: column; gap: 36px; }
a { color: var(--accent); text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.label { font: 600 11px/1.3 var(--font-body); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* Masthead */
.mast { display: flex; flex-direction: column; gap: 12px; border-bottom: 3px solid var(--ink); padding-bottom: 20px; }
.mast h1 { margin: 0; font: 800 clamp(40px, 8vw, 76px)/.95 var(--font-display); font-stretch: 78%; letter-spacing: -.015em; text-wrap: balance; }
.mast h1 span { color: var(--accent); }
.mast p { margin: 0; max-width: 66ch; color: var(--muted); }

/* Market tape */
.tape { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.tape div { outline: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tape .v { font: 600 19px/1.2 var(--font-data); font-variant-numeric: tabular-nums; }
.tape .d { font: 500 13px var(--font-data); }
.tape .note { font-size: 12px; color: var(--muted); }
.up { color: var(--up); } .down { color: var(--down); }
.fine { margin: 10px 0 0; font-size: 13px; color: var(--muted); max-width: 80ch; }

section > h2 { margin: 0 0 14px; font: 700 22px/1.2 var(--font-display); font-stretch: 88%; }
.themes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px 28px; }
.themes article { border-top: 1px solid var(--ink); padding-top: 10px; min-width: 0; }
.themes h3 { margin: 0 0 6px; font: 600 15px/1.3 var(--font-body); }
.themes p { margin: 0; font-size: 14px; color: var(--muted); }
.themes a { font-size: 12.5px; }

.method { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px 28px; }
.method p { margin: 0; font-size: 14px; color: var(--muted); }
.method b { color: var(--ink); font-weight: 600; }
.key { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: baseline; }
.key.b { background: var(--bgscore); } .key.n { background: var(--newsscore); }

/* Controls */
.controls { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 2; background: var(--bg); padding-block: 10px; display: flex; flex-wrap: wrap; gap: 10px; align-items: end; border-bottom: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field.grow { flex: 1 1 220px; }
.controls input, .controls select { font: 14px var(--font-body); color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; width: 100%; min-width: 0; }
.count { margin-left: auto; font-size: 13px; color: var(--muted); padding-bottom: 9px; }

/* Ranked list */
.list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--line); border-top: 0; }
.list li { border-top: 1px solid var(--line-soft); }
.list li:first-child { border-top: 0; }
.row { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 44px minmax(150px, 1.3fr) 190px minmax(0, 2fr) 18px; gap: 16px; align-items: center; padding: 12px 14px; }
.row:hover { background: var(--bg); }
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rank { font: 600 15px var(--font-data); font-variant-numeric: tabular-nums; color: var(--muted); text-align: right; }
.top .rank { color: var(--accent); }
.who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tick { font: 700 17px/1.2 var(--font-display); font-stretch: 85%; letter-spacing: .01em; }
.name { font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.score { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.score .nums { display: flex; align-items: baseline; gap: 10px; font: 500 12px var(--font-data); font-variant-numeric: tabular-nums; color: var(--muted); }
.score .tot { font-size: 17px; font-weight: 600; color: var(--ink); margin-right: auto; }
.bar { display: flex; gap: 2px; height: 6px; background: var(--track); }
.bar i { display: block; height: 100%; }
.bar .b { background: var(--bgscore); } .bar .n { background: var(--newsscore); }
.why { font-size: 14px; min-width: 0; }
.why small { display: block; font-size: 12px; color: var(--muted); }
.chev { color: var(--muted); font-size: 12px; transition: transform .15s; }
.row[aria-expanded="true"] .chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .chev { transition: none; } }
.detail { padding: 4px 14px 18px 74px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 16px 32px; }
.detail p { margin: 6px 0 0; font-size: 14px; }
.detail ul { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.detail li { border: 0; font-size: 14px; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
.detail .when { font: 500 12px/1.9 var(--font-data); color: var(--muted); }
.detail .src { display: block; font-size: 12.5px; }
.empty { padding: 28px 14px; color: var(--muted); background: var(--surface); border: 1px solid var(--line); border-top: 0; }
footer { border-top: 1px solid var(--line); padding-top: 16px; font-size: 13px; color: var(--muted); display: flex; flex-direction: column; gap: 8px; max-width: 80ch; }
footer p { margin: 0; }

@media (max-width: 820px) {
  .row { grid-template-columns: 32px minmax(0, 1fr) 130px 14px; gap: 6px 12px; }
  .why { grid-column: 2 / -1; }
  .chev { grid-row: 1; grid-column: 4; }
  .detail { padding: 4px 14px 18px; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 440px) {
  .wrap { padding-inline: 16px; }
  .row { grid-template-columns: 26px minmax(0, 1fr) 14px; }
  .score { grid-column: 2 / -1; }
  .chev { grid-column: 3; }
}