/* NEET-PG predictor v2. Light mode only (founder's call, 8 Oct 2026). Radius: panels 12px, controls full pill. Tokens are shared with list.css. */
:root {
  --bg:#f5f6f8; --surface:#fff; --ink:#14161a; --muted:#596070; --line:#e2e5ea; --line-strong:#8c94a1;
  --accent:#2446c7; --accent-ink:#fff; --accent-soft:#eaeefc;
  --safe:#0f6e3b; --safe-bg:#e5f4ec; --likely:#875700; --likely-bg:#fbf0d9; --possible:#465166; --possible-bg:#edf0f4;
  --track:#e9ecf1; --r:12px; --mono:"Geist Mono", ui-monospace, monospace;
  color-scheme: light;
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
html:has(dialog[open]) { overflow:hidden }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 Geist, system-ui, sans-serif; }
button, input, select { font:inherit; color:inherit }
button { cursor:pointer }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
h1:focus, h2:focus { outline:none }
[hidden] { display:none !important }
.wrap { max-width:720px; margin:0 auto; padding:0 16px }
.num { font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em }
.muted { color:var(--muted) }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
::placeholder { color:var(--muted); opacity:1 }
::selection { background:var(--accent-soft); color:var(--ink) }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 18px; border-radius:999px;
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); font-weight:600; font-size:15px; text-decoration:none }
.btn.primary { background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.btn.big { min-height:52px; font-size:16px }
.btn.wide { width:100% }
.btn .muted { font-weight:400 }
.link { min-height:44px; padding:0 4px; border:0; background:none; color:var(--accent); font-weight:500; font-size:15px }
.link.strong { font-weight:650 }
.x { min-height:44px; padding:0 8px; border:0; background:none; color:var(--accent); font-weight:600 }

/* Onboarding */
.screen.wrap { padding-top:max(24px, env(safe-area-inset-top)); padding-bottom:24px }
.steps { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; font-size:13px }
.brand { font-weight:600; font-size:15px }
.bar2 { display:flex; gap:6px; margin-top:8px }
.bar2 i { flex:1; height:3px; border-radius:99px; background:var(--track) }
.bar2 i.on { background:var(--accent) }
h1 { margin:28px 0 0; font-size:30px; line-height:1.15; font-weight:600; letter-spacing:-.01em }
.lede { margin:10px 0 0; font-size:15px; color:var(--muted); max-width:46ch }
.lbl { display:block; margin:26px 0 8px; font-size:13px; font-weight:500; color:var(--muted); padding:0 }
.fs { border:0; margin:26px 0 0; padding:0; min-width:0 }
.fs > legend.lbl { margin-top:0; float:left; width:100% }
.fs > legend + * { clear:both }
.rankbox { display:flex; align-items:center; gap:10px; background:var(--surface); border:1.5px solid var(--line-strong); border-radius:var(--r); padding:12px 18px }
.rankbox:focus-within { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft) }
.rankbox input { flex:1; min-width:0; border:0; outline:0; background:none; padding:0; font-family:var(--mono); font-size:40px; font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums; caret-color:var(--accent) }
.rankbox span { font-size:13px }
.hint { margin:6px 0 0; font-size:13px; color:var(--likely); min-height:0 }
.hint:empty { display:none }
.try { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:10px; font-size:13px }
.try button { min-height:44px; padding:0 14px; border-radius:99px; border:1px solid var(--line-strong); background:var(--surface); font-family:var(--mono); font-size:14px }
.seg { display:grid; grid-template-columns:repeat(5, 1fr); gap:4px; background:var(--track); border-radius:99px; padding:4px }
.seg.three { grid-template-columns:repeat(3, 1fr) }
.seg label { position:relative; display:block }
.seg input { position:absolute; opacity:0; inset:0; margin:0; cursor:pointer }
.seg span { display:flex; align-items:center; justify-content:center; text-align:center; min-height:44px; padding:0 6px; border-radius:99px; font-size:14px; line-height:1.2 }
.seg input:checked + span { background:var(--surface); font-weight:600; box-shadow:0 1px 2px rgb(20 22 26 / .12) }
.seg input:focus-visible + span { outline:2px solid var(--accent); outline-offset:1px }
.switch { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:52px; padding:4px 2px; font-size:15px; cursor:pointer; position:relative }
.switch small { display:block; color:var(--muted); font-size:13px }
.switch input { position:absolute; opacity:0; width:44px; height:26px; right:2px; margin:0 }
.switch i { flex:none; width:44px; height:26px; border-radius:99px; background:var(--line-strong); position:relative; transition:background-color .15s }
.switch i::after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform .15s }
.switch input:checked + i { background:var(--accent) }
.switch input:checked + i::after { transform:translateX(18px) }
.switch input:focus-visible + i { outline:2px solid var(--accent); outline-offset:2px }
.cta { display:grid; gap:8px; margin-top:32px }
.fine { margin:6px 0 0; text-align:center; font-size:13px; color:var(--muted) }
.fine.left { text-align:left }
.sticky-cta { position:sticky; bottom:0; padding:12px 0 calc(12px + env(safe-area-inset-bottom)); background:var(--bg); grid-template-columns:1fr 1fr }

/* Preference controls (step 2 and Tune) */
.prefs { display:grid; gap:4px }
.grp-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:22px 0 10px }
.grp-h h2, .grp-h h3 { margin:0; font-size:15px; font-weight:600 }
.grp-h span { font-size:13px; color:var(--muted) }
.chips { display:flex; flex-wrap:wrap; gap:8px }
.chip { min-height:44px; padding:0 14px; border-radius:99px; border:1px solid var(--line-strong); background:var(--surface); font-size:14px; display:inline-flex; align-items:center; gap:6px }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--surface); border-color:var(--ink); font-weight:600 }
.chip.city[aria-pressed="true"] { background:var(--accent-soft); color:var(--ink); border-color:var(--accent) }
.chip.more { color:var(--accent); border-style:dashed }
.chip svg { flex:none }
.field-btn { display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:0 14px; border:1px solid var(--line-strong); border-radius:var(--r); background:var(--surface); color:var(--muted); font-size:15px; text-align:left }
.chips + .field-btn, .field-btn + .chips { margin-top:10px }
.note { margin:8px 0 0; font-size:13px; color:var(--muted) }
.input { width:100%; min-height:48px; padding:10px 14px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r); appearance:none; -webkit-appearance:none }
select.input { background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 19px) 50%, calc(100% - 14px) 50%; background-size:5px 5px; background-repeat:no-repeat; padding-right:36px }
details.elig { border-top:1px solid var(--line); margin-top:14px }
details.elig > summary { list-style:none; display:flex; align-items:center; gap:10px; min-height:56px; cursor:pointer }
details.elig > summary::-webkit-details-marker { display:none }
details.elig > summary::after { content:""; flex:none; width:8px; height:8px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); margin:-4px 4px 0 auto; transition:transform .15s }
details.elig[open] > summary::after { transform:rotate(-135deg); margin-top:4px }
details.elig summary small { display:block; color:var(--muted); font-size:13px; font-weight:400 }
.check { display:flex; align-items:center; gap:12px; min-height:44px; font-size:15px; cursor:pointer }
.check input { width:20px; height:20px; accent-color:var(--accent); margin:0; flex:none }
.round-hint { margin:8px 0 0; font-size:13px; color:var(--muted) }

/* Results header */
.rhead { position:sticky; top:0; z-index:4; background:var(--surface); border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top) }
.rtop { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 0 4px }
.rankchip { display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border-radius:99px; background:var(--bg); border:1px solid var(--line-strong) }
.rankchip .num { font-size:17px; font-weight:500 }
.rankchip .muted { font-size:13px }
.tune { min-height:44px; padding:0 16px; font-size:14px }
.badge-n:not(:empty) { margin-left:2px; min-width:20px; height:20px; padding:0 6px; border-radius:99px; background:var(--accent-ink); color:var(--accent); font-size:12px; display:inline-flex; align-items:center; justify-content:center }
.fchips { display:flex; gap:4px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; margin:0 -16px; padding-left:16px; padding-right:16px }
.fchips::-webkit-scrollbar { display:none }
.fchips:empty { display:none }
.fchip { flex:none; min-height:44px; padding:0; border:0; background:none; display:inline-flex; align-items:center }
.fchip > span { display:inline-flex; align-items:center; gap:6px; height:32px; padding:0 9px 0 12px; border-radius:99px; border:1px solid var(--line-strong); background:var(--surface); font-size:13px; white-space:nowrap }
.fchip:focus-visible { outline:none } .fchip:focus-visible > span { outline:2px solid var(--accent); outline-offset:1px }
.fchip.clear > span { border-style:dashed; color:var(--accent) }

/* Results body */
#results { padding-top:14px; padding-bottom:120px; display:grid; gap:18px }
#results > * { min-width:0 }
.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--r) }
.ctx { padding:14px 16px }
.ctx p { margin:0; font-size:15px }
.ctx strong { font-weight:600 }
.ctx-row { display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; margin:10px -16px 0; padding:0 16px; font-size:13px; color:var(--muted) }
.ctx-row::-webkit-scrollbar { display:none }
.ctx-row > span { flex:none; padding:5px 10px; border-radius:99px; background:var(--bg); white-space:nowrap }
.ctx-row .in { color:var(--ink); font-weight:600; background:var(--safe-bg) }
.ctx-row .num { color:var(--ink) }
.ctx small { display:block; margin-top:8px; font-size:12.5px; color:var(--muted) }
.search { position:relative }
.search svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none }
.search .input { padding-left:40px }
.sec-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap }
.sec-h h2 { margin:0; font-size:17px; font-weight:600 }
.sec-h span { font-size:13px; color:var(--muted) }
.pill { display:inline-block; font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; white-space:nowrap; line-height:1.3 }
.SAFE { color:var(--safe); background:var(--safe-bg) } .LIKELY { color:var(--likely); background:var(--likely-bg) }
.POSSIBLE, .LATER { color:var(--possible); background:var(--possible-bg) } .NO { color:var(--muted); background:var(--bg); border:1px solid var(--line) }
.grp-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 10px; font-size:13px; font-weight:400; color:var(--muted) }
.grp-head .pill { font-size:13px }
.rows { list-style:none; margin:0; padding:0; overflow:hidden }
.rows > li { display:flex; align-items:center; gap:4px; padding-right:10px }
.rows > li + li { border-top:1px solid var(--line) }
.row-main { flex:1; min-width:0; display:flex; align-items:center; gap:12px; padding:12px 6px 12px 14px; border:0; background:none; text-align:left; min-height:64px }
.row-main:hover { background:var(--bg) }
.row-main:focus-visible { outline-offset:-2px }
.row-txt { flex:1; min-width:0 }
.row-txt .crs { display:block; font-size:15px; font-weight:500; line-height:1.3 }
.row-txt .col { display:block; font-size:13px; color:var(--muted); margin-top:2px; overflow-wrap:anywhere }
.row-txt .ev { display:block; font-size:12.5px; color:var(--muted); margin-top:2px }
.row-num { flex:none; text-align:right }
.row-num .num { display:block; font-size:16px }
.row-num small { display:block; font-size:11px; color:var(--muted); white-space:nowrap }
.tag { display:inline-block; margin-left:6px; vertical-align:1px; font-size:11px; font-weight:600; color:var(--accent); border:1px solid var(--accent); border-radius:99px; padding:0 7px; white-space:nowrap }
.add { flex:none; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-strong); background:var(--surface); color:var(--accent); display:inline-flex; align-items:center; justify-content:center }
.add[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.more { display:block; width:100%; min-height:48px; border:0; border-top:1px solid var(--line); background:none; color:var(--accent); font-weight:600 }
.empty { padding:28px 18px; text-align:center; color:var(--muted) }
.empty b { display:block; color:var(--ink); font-size:17px; margin-bottom:6px }
.empty .chips { justify-content:center; margin-top:14px }
.skel { height:84px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); position:relative; overflow:hidden }
.skel::before, .skel::after { content:""; position:absolute; left:16px; height:12px; border-radius:6px; background:var(--line) }
.skel::before { top:22px; width:55% } .skel::after { top:46px; width:35% }
.foot { padding-bottom:120px; color:var(--muted); font-size:14px }
.foot details { border-top:1px solid var(--line); padding:6px 0 }
.foot details:last-of-type { border-bottom:1px solid var(--line) }
.foot summary { cursor:pointer; color:var(--ink); font-weight:550; min-height:44px; display:flex; align-items:center }
.foot p, .foot ul { margin:6px 0 10px; max-width:62ch }
.foot li + li { margin-top:6px }

/* Bottom bar */
.dock { position:fixed; left:0; right:0; bottom:0; z-index:5; background:var(--surface); border-top:1px solid var(--line); padding:10px 0 calc(10px + env(safe-area-inset-bottom)) }
.dock-in { display:flex; gap:10px }
.dock-in > .btn { flex:1 1 auto; min-width:0; white-space:nowrap }
.dock-in > .btn > svg { flex:none }
.dock .btn { min-height:48px }
.pill-n { background:var(--accent); color:var(--accent-ink); border-radius:99px; padding:1px 8px; font-size:13px; font-weight:500 }

/* Sheets: bottom sheet on phones, centred dialog on desktop */
dialog.sheet { margin:auto auto 0; padding:0; border:0; width:100%; max-width:100%; max-height:92dvh; border-radius:16px 16px 0 0;
  background:var(--surface); color:var(--ink); box-shadow:0 -8px 30px rgb(0 0 0 / .18) }
dialog.sheet[open] { display:flex; flex-direction:column }
dialog.sheet::backdrop { background:rgb(0 0 0 / .45) }
@media (min-width:720px) { dialog.sheet { margin:auto; width:min(600px, calc(100vw - 32px)); max-height:min(88dvh, 900px); border-radius:var(--r); border:1px solid var(--line) } }
.sh-head { flex:none; display:flex; align-items:center; gap:8px; padding:10px 12px 6px 20px; border-bottom:1px solid var(--line) }
.sh-head h2 { margin:0; flex:1; font-size:19px; font-weight:600 }
#picker .sh-head { padding-left:12px }
#picker .sh-head h2 { text-align:center; padding-right:60px; font-size:16px }
#detail .sh-head > span { flex:1 }
/* flex:1 1 auto + min-height:0: with only max-height on the sheet, iOS Safari collapses a flex:1 (0 basis) body to zero. */
.sh-body { flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:6px 20px 20px }
.sh-foot { flex:none; padding:12px 20px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--line) }

/* Picker */
#pick-q { margin-bottom:4px }
.chips.sel { margin:8px 0 4px }
.chips.sel:empty { display:none }
.chip.on { background:var(--ink); color:var(--surface); border-color:var(--ink) }
.pick-row { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:8px 4px; border:0; border-bottom:1px solid var(--line); background:none; text-align:left }
.pick-row b { font-weight:500 }
.pick-row small { display:block; color:var(--muted); font-size:13px }
.pick-row .box { margin-left:auto; flex:none; width:22px; height:22px; border-radius:6px; border:1.5px solid var(--line-strong); display:inline-flex; align-items:center; justify-content:center }
.pick-row[aria-pressed="true"] .box { background:var(--accent); border-color:var(--accent); color:var(--accent-ink) }
.pick-h { margin:16px 0 8px; font-size:13px; font-weight:600; color:var(--muted) }

/* Detail */
#det-body h2 { margin:10px 0 4px; font-size:22px; line-height:1.25; font-weight:600 }
.det-col { margin:0; color:var(--muted); font-size:14.5px }
.det-ev { margin:16px 0 0; padding:12px 14px; border-radius:var(--r); background:var(--bg); font-size:14.5px }
.det-note { margin:10px 0 0; font-size:13.5px; color:var(--likely) }
.tbl-h { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:20px 0 8px }
.tbl-h b { font-size:15px; font-weight:600 }
.tbl-h span { font-size:13px; color:var(--muted) }
.tblw { overflow-x:auto; border:1px solid var(--line); border-radius:var(--r) }
table.rounds { width:100%; border-collapse:collapse; font-size:14px }
.rounds th, .rounds td { padding:10px 8px; text-align:right; border-bottom:1px solid var(--line) }
.rounds tr:last-child > * { border-bottom:0 }
.rounds th:first-child { text-align:left; padding-left:12px }
.rounds thead th { font-size:12px; font-weight:600; color:var(--muted) }
.rounds td.past { background:var(--safe-bg); color:var(--safe); font-weight:600 }
.rounds td { font-family:var(--mono); font-variant-numeric:tabular-nums }
.tbl-note { margin:8px 0 0; font-size:12.5px; color:var(--muted) }
dl.facts { margin:20px 0 0; display:grid; grid-template-columns:auto 1fr; gap:0 16px; font-size:14px }
dl.facts dt, dl.facts dd { padding:10px 0; border-top:1px solid var(--line); margin:0 }
dl.facts dt { color:var(--muted) }
dl.facts a { color:var(--accent); display:inline-block; min-height:24px; margin-right:10px }
dl.facts .lab { color:var(--muted) }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition:none !important; animation:none !important; scroll-behavior:auto !important } }
/* Keep visually hidden text inside its scroller, or it widens the page on phones. */
.ctx-row, .fchips, .tblw, .row-main, .pick-main, .fchip, .add { position:relative }
.chip.on.city { background:var(--accent-soft); color:var(--ink); border-color:var(--accent) }
#picker { height:min(92dvh, 820px) }
table.rounds { font-size:13px }
.rounds th, .rounds td { padding:9px 5px; letter-spacing:-.02em }
.rounds th:last-child, .rounds td:last-child { padding-right:10px }
@media (min-width:420px) { table.rounds { font-size:14px } .rounds th, .rounds td { padding:10px 8px; letter-spacing:0 } }
.seg.four { grid-template-columns:repeat(4, 1fr) }
.NEAR { color:var(--muted); background:var(--bg); border:1px solid var(--line-strong) }
.rr { display:inline-block; font-size:13px; color:var(--muted); margin-top:4px }
.rr .num { color:var(--ink) }
.seg input:checked + span { box-shadow:inset 0 0 0 1px var(--line-strong), 0 1px 2px rgb(20 22 26 / .12) }
.sticky-cta .btn { font-size:15px; padding:0 12px; white-space:nowrap }

/* Reviews from residents (Detail sheet) */
.rev { margin-top:24px; padding-top:4px; border-top:1px solid var(--line) }
.rev h3 { margin:16px 0 4px; font-size:17px; font-weight:600 }
.rev .facts { margin-top:8px }
.rev-c { margin:12px 0 0; padding:12px 14px; border-radius:var(--r); background:var(--bg); font-size:14.5px }
.rev-c p { margin:0 0 4px }
.rev-c small { color:var(--muted); font-size:13px }
.rev-form { margin-top:16px }
.rev-form > summary { display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--line-strong); border-radius:99px; font-weight:600; cursor:pointer; list-style:none }
.rev-form > summary::-webkit-details-marker { display:none }
.rev-form[open] > summary { margin-bottom:8px }
.rev-form textarea.input { min-height:96px; resize:vertical }
.rev-form .btn { margin-top:16px }
.hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden }
.privacy a { color:var(--accent) }
.foot .privacy { margin:14px 0 0; font-size:12px; opacity:.85 }

/* Top picks: five stacked cards, bigger than list rows */
.picks .sec-h h2 { font-size:20px }
.pick-list { list-style:none; margin:10px 0 12px; padding:0; display:grid; gap:10px }
.pick { display:flex; align-items:flex-start; gap:4px; padding-right:10px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r) }
.pick-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; padding:14px 6px 14px 16px; border:0; background:none; text-align:left; border-radius:var(--r) 0 0 var(--r); position:relative }
.pick-main:hover { background:var(--bg) }
.pick .top { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-bottom:2px }
.pick .crs { font-size:17px; font-weight:600; line-height:1.3 }
.pick .col { font-size:14px; color:var(--muted); line-height:1.35 }
.pick .basis { font-size:14px; margin-top:4px }
.pick .basis .num { font-size:16px; font-weight:500 }
.pick .ev { font-size:13px; color:var(--muted) }
.pick .add { margin-top:12px }
.qa-btn { min-height:44px; padding:0 14px; font-size:14px; margin-left:auto }
.qa-btn .c-s { display:none }
.rtop .tune { flex:none }
/* Narrow it down */
.nudge { padding:14px 16px }
.nudge h2 { margin:0; font-size:17px; font-weight:600 }
.nudge p { margin:2px 0 12px; font-size:14px; color:var(--muted) }
/* All seats: group summary chips, by subject, collapsed groups */
.all { display:grid; grid-template-columns:minmax(0, 1fr); gap:12px }
.all .sec-h h2 { font-size:20px }
.gsum { display:flex; flex-wrap:wrap; gap:6px }
.gchip { min-height:44px; padding:0 12px; border-radius:99px; border:1px solid var(--line-strong); background:var(--surface); font-size:14px }
.gchip .num { color:var(--muted); margin-left:2px }
.bysubj > summary { min-height:44px; display:flex; align-items:center; gap:8px; cursor:pointer; color:var(--accent); font-weight:600; font-size:15px }
.bysubj > summary .muted { font-weight:400; font-size:13px }
.bysubj .chips { margin:4px 0 6px }
.all section + section { margin-top:10px }
.all .grp-head { scroll-margin-top:120px }
.rows .row-main { min-height:60px; padding-top:10px; padding-bottom:10px }
.all .grp-head { margin:0; color:var(--ink); font-weight:500 }
.grp-line { margin:2px 0 8px; font-size:13px; color:var(--muted) }
.all .row-txt .crs { overflow-wrap:anywhere }
.rating-badge:empty { display:none }
.rating-badge { font-size:13px; font-weight:600; color:var(--ink) }
/* Live strip (real numbers from /api/pulse). The dot marks live activity, the one place a status dot carries meaning. */
.pulse { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:12px 0 0; font-size:13px; color:var(--muted) }
.pulse b { color:var(--ink); font-weight:600 }
.pulse .dot { width:8px; height:8px; border-radius:50%; background:var(--safe); flex:none }
.pulse .recent { flex-basis:100%; font-variant-numeric:tabular-nums }
@media (prefers-reduced-motion: no-preference) { .pulse .dot { animation:pulse 2s ease-in-out infinite } }
@keyframes pulse { 50% { opacity:.35 } }

/* Coffee: always one tap away while Support is enabled. Phones: Chai in the bottom bar and on the start screens. 720px and up: header button + side card. */
.coffee { flex:none; min-height:44px; padding:0 14px; font-size:14px; background:#fff4c7; border-color:#d9a400 }
.coffee .c-l { display:none }
.dock .dock-chai { flex:none; flex-direction:column; gap:0; min-width:60px; padding:0 10px; font-size:12px; line-height:1.15; background:#fff4c7; border-color:#d9a400 }
.rtop .coffee { display:none }
.rtop .rankchip { margin-right:auto }
.steps .coffee { margin-left:auto }
@media (max-width:399px) { .dock-in > .btn:not(.dock-chai) { padding:0 12px; gap:6px } }
@media (max-width:419px) { .rtop { gap:6px } .rankchip { padding:0 10px; min-width:0; overflow:hidden } .rankchip > svg, .rtop .tune > svg { display:none } .qa-btn, .rtop .tune { padding:0 12px } }
@media (max-width:359px) { .dock-in > .btn:not(.dock-chai) > svg:first-child { display:none } .qa-btn .c-l { display:none } .qa-btn .c-s { display:inline } }

/* Side column: below the results from 720px, a sticky right column from 1100px. Hidden on phones. */
.side { display:none }
.card { padding:16px }
.card h2 { margin:0; font-size:17px; font-weight:600 }
.card-h { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap }
.card .pulse { margin-top:8px }
.qa-side { list-style:none; margin:8px 0 0; padding:0 }
.qa-side li { padding:10px 0; border-top:1px solid var(--line) }
.qa-side li:first-child { border-top:0 }
.qa-side a { display:block; color:var(--ink); font-weight:500; text-decoration:none; overflow-wrap:anywhere; line-height:1.35; padding:4px 0 }
.qa-side a:hover { color:var(--accent); text-decoration:underline }
.qa-side small { color:var(--muted); font-size:13px }
.coffee-card { background:#fffaf0 }
.coffee-card h2 { margin-top:12px; font-size:19px; line-height:1.25 }
.coffee-card p { margin:6px 0 14px; font-size:14px; color:var(--muted) }
.coffee-card .cc-rate { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:8px 0 0 }
.sticker { display:inline-block; transform:rotate(-3deg); padding:3px 12px; border:2px solid var(--ink); border-radius:8px; background:#ffd84d; color:var(--ink);
  font-weight:700; font-size:15px; box-shadow:3px 3px 0 var(--ink) }

@media (min-width:720px) {
  .coffee .c-l { display:inline } .coffee .c-s { display:none }
  .rtop .coffee { display:inline-flex }
  .dock .dock-chai { display:none }
  #results { gap:22px; padding-bottom:28px }
  .side { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; align-items:start; padding:4px 0 8px }
  #card-live { display:none }
  .foot { padding-top:12px }
}
@media (min-width:1100px) {
  .layout, .rhead .wrap, .foot, .dock .wrap { max-width:1132px }
  .layout { display:grid; grid-template-columns:minmax(0, 720px) 340px; gap:0 40px; justify-content:space-between; align-items:start }
  .side { grid-template-columns:minmax(0, 1fr); position:sticky; top:72px; padding-top:14px; max-height:calc(100dvh - 72px - 76px); overflow-y:auto; overscroll-behavior:contain }
  body:has(.fchips:not(:empty)) .side { top:118px; max-height:calc(100dvh - 118px - 76px) }
  #card-live:not([hidden]) { display:block }
  #results > .pulse { display:none !important }
  .foot > * { max-width:720px }
  .dock-in > .btn { flex:0 1 340px }
}

/* Chai card (main flow, after top picks): meme sticker look from support.js. About 180px tall on phones. */
.chai { padding:14px 16px; background:#fffaf0; border:2px solid var(--ink); box-shadow:4px 4px 0 var(--ink) }
.chai-top { display:flex; align-items:center; gap:12px }
.chai-art { flex:none; width:96px }
.chai-art svg { display:block; width:100%; height:auto }
.chai h2 { margin:0; font-size:17px; line-height:1.25; font-weight:700 }
.chai-cap { margin:4px 0 0; font-size:14px; font-weight:600; color:var(--accent); min-height:2.6em }
.chai-btns { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px }
.chai-btns .btn { padding:0 10px; white-space:nowrap; font-weight:700 }
.chai-btns .btn:only-child, .chai-btns .btn[hidden] + .btn { grid-column:1 / -1 }
@media (min-width:720px) { .chai-art { width:120px } .chai h2 { font-size:19px } }

/* Question count chip beside each seat, and the latest questions in the Detail sheet */
.qc-slot { display:contents }
.qc { flex:none; display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:44px; height:44px; padding:0 8px; border:0; border-radius:99px; background:none; color:var(--accent); font-size:13px; position:relative }
.qc:hover { background:var(--accent-soft) }
.pick .qc { margin-top:12px }
.det-qas { margin-top:20px }
.det-qh { margin:0 0 6px; font-size:15px; font-weight:600 }
.det-ql { list-style:none; margin:0 0 6px; padding:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden }
.det-ql li + li { border-top:1px solid var(--line) }
.det-qi { display:block; width:100%; min-height:56px; padding:10px 14px; border:0; background:none; text-align:left; overflow-wrap:anywhere }
.det-qi:hover { background:var(--bg) }
.det-qi b { display:block; font-weight:500; line-height:1.35 }
.det-qi small { color:var(--muted); font-size:13px }
.det-qas .det-qa { margin-top:8px }
@media (max-width:359px) { .chai-art { width:64px } .chai h2 { font-size:15px } .chai-cap { font-size:13px; min-height:0 } .rankchip .num { font-size:15px } .rankchip { gap:4px } }

/* Rank placeholder reads as a prompt, not a typed value: lighter, smaller, sans (the typed rank stays big mono). */
.rankbox input::placeholder { color:#9aa1ad; font-family:Geist, system-ui, sans-serif; font-size:22px; font-weight:400; letter-spacing:0 }

/* Closing-rank sequence (docs/rank-display.md): short "2.4k" on phones, exact numbers from 720px. */
.row-num .seq { display:block; font-family:var(--mono); font-size:11px; color:var(--muted); white-space:nowrap; font-variant-numeric:tabular-nums }
.row-num .sq-l { display:none }
@media (min-width:720px) { .row-num .sq-s { display:none } .row-num .sq-l { display:inline } }
/* Empty rank box: shrink the input font itself so the placeholder centres; fixed height stops a jump on first keystroke. */
.rankbox input { height:52px }
.rankbox input:placeholder-shown { font-family:Geist, system-ui, sans-serif; font-size:22px; letter-spacing:0 }
/* Tap affordance: rows and picks open the seat page. */
.pick .more { font-size:13px; font-weight:600; color:var(--accent); margin-top:2px }
.row-num .num::after { content:'›'; margin-left:6px; color:var(--muted); font-family:Geist, system-ui, sans-serif; font-weight:500 }
/* Phones: course gets the full width; the 3-year line drops under the college name. */
@media (max-width:719px) {
  .rows .row-main { display:grid; grid-template-columns:1fr auto; column-gap:12px; row-gap:3px; align-items:start }
  .rows .row-num, .rows .row-num > [aria-hidden] { display:contents }
  .rows .row-txt { grid-column:1; grid-row:1 }
  .rows .row-num .num { grid-column:2; grid-row:1; text-align:right }
  .rows .row-num .seq { grid-column:1 / 3; grid-row:2; text-align:left }
}
.det-ask { margin-bottom:16px }
.det-ask .note { margin:2px 0 10px }
.ask-chips { display:flex; flex-wrap:wrap; gap:8px }