main,body>header,footer{max-width:1040px}main{padding-top:28px}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font:12px 'IBM Plex Mono',monospace;color:var(--accent);margin-bottom:8px}
h1{font-size:clamp(28px,4.4vw,40px);margin:0 0 6px}.lede{max-width:680px;font-size:17px;color:var(--muted);margin:0}
.muted{color:var(--muted)}.small{font-size:13px}
button,select{font:inherit;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:7px 11px}
button{cursor:pointer}button:hover:not(:disabled){border-color:var(--accent)}button:disabled{opacity:.4;cursor:default}

/* the season picker and the tabs stay at the top while reading */
.bar-top{position:sticky;top:0;z-index:5;background:var(--bg,var(--surface));margin:18px 0 0;padding:10px 0 0;border-bottom:1px solid var(--line)}
.picker{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.picker select{max-width:320px}.eprow{display:flex;gap:6px;align-items:center}
.tabs{display:flex;gap:2px;overflow-x:auto;margin-top:10px;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;border-bottom:2px solid transparent;border-radius:0;background:none;padding:8px 12px;color:var(--muted);white-space:nowrap;font-weight:500}
.tabs button[aria-selected=true]{color:var(--ink);border-bottom-color:var(--accent)}
.tabs button:hover{color:var(--ink)}

.pane{padding:18px 0 8px;min-height:40vh}.pane [hidden]{display:none!important}.pane h2{font-size:22px;margin:0 0 4px}.pane h3{font-size:14px;margin:14px 0 6px;color:var(--muted);font-weight:500}
.sub{color:var(--muted);font-size:14px;margin:0 0 8px}
.about{margin-top:18px;font-size:14px;color:var(--muted);max-width:680px}.about summary{cursor:pointer;color:var(--accent);font-size:13px}.about p{margin:8px 0 0}

/* recap */
.lede-box{font:500 19px/1.45 Spectral,Georgia,serif;max-width:720px;margin:10px 0 12px}
.facts{list-style:none;padding:0;margin:8px 0 0;max-width:720px}
.facts li{padding:6px 0 6px 12px;border-left:3px solid var(--line);margin:4px 0;font-size:16px}
.facts .k-boot,.facts .k-exit{border-left-color:var(--accent)}.facts .k-winner{border-left-color:var(--accent2);font-weight:600}
.facts .k-idol,.facts .k-record{border-left-color:var(--accent2)}

/* who goes home */
.odds{list-style:none;padding:0;margin:0;max-width:640px}
.odds.folded .extra{display:none}
.oname{display:grid;grid-template-columns:minmax(90px,150px) 1fr 44px;align-items:center;gap:10px;width:100%;border:0;border-radius:6px;background:none;padding:5px 4px;text-align:left}
.oname:hover{background:var(--surface)}
.nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.track{height:10px;border-radius:5px;background:var(--line);overflow:hidden}.fill{display:block;height:100%;border-radius:5px;background:var(--accent)}
.pc{text-align:right;font-variant-numeric:tabular-nums;font-size:14px}
.orow.gone .oname{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.tag{font:600 11px 'IBM Plex Mono',monospace;color:var(--accent);margin-left:4px}
.why{list-style:none;margin:2px 0 8px;padding:0 4px 0 12px;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 14px}
.why .up{color:var(--accent)}.why .down{color:var(--muted)}
.more,.reveal{font-size:13px;border-radius:999px;padding:5px 12px;margin:8px 8px 0 0}
.council{margin-bottom:6px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin:4px 0 8px}.seg button{border:0;border-radius:0;padding:6px 14px;font-size:14px;background:var(--surface);color:var(--muted)}.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.verdict-line{margin:6px 0 8px;font-size:15px;max-width:640px}
#odds-this{margin-bottom:22px}
.scoreline{margin:18px 0 0;font-size:15px;max-width:640px}
.past{margin-top:14px;max-width:640px}.past summary{cursor:pointer;color:var(--accent);font-size:14px}

/* the edit */
.legend{font-size:13px;color:var(--muted);margin:0 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.key-line{display:inline-block;width:18px;height:2px;background:var(--accent)}
.key-band{display:inline-block;width:18px;height:10px;background:var(--accent2);opacity:.25;border-radius:2px;margin-left:8px}
.edit{max-width:640px}
.erow{display:grid;grid-template-columns:minmax(90px,150px) 40px 1fr;align-items:center;gap:10px;padding:3px 0;border-top:1px solid var(--line)}
.erow.gone{opacity:.55}
.ix{text-align:right;font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted)}.ix.hot{color:var(--ink);font-weight:600}
.spark{display:block;width:100%;height:34px}.spark .band{fill:var(--accent2);opacity:.22}.spark polyline{fill:none;stroke:var(--accent);stroke-width:1.8;vector-effect:non-scaling-stroke}.spark circle{fill:var(--accent)}

/* alliances */
.groups{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}.bloc{border:1px solid var(--accent2);border-radius:999px;padding:4px 11px;font-size:14px}
.matrix-wrap{overflow:auto;max-width:100%}.matrix{font-size:12px;border-collapse:collapse}
.matrix td{width:32px;min-width:32px;height:28px;text-align:center;padding:0;border:1px solid var(--line);background:color-mix(in srgb,var(--accent) calc(var(--f,0)*85%),var(--surface));color:var(--ink);font-variant-numeric:tabular-nums}
.matrix td.hi{color:var(--accent-ink)}.matrix td.self{background:var(--line)}
.matrix tbody th{white-space:nowrap;text-align:right;font:13px 'IBM Plex Sans',sans-serif;color:var(--ink);padding:0 8px 0 0}
.matrix th.rot{height:90px;vertical-align:bottom;padding:0 0 4px}.matrix th.rot span{writing-mode:vertical-rl;transform:rotate(180deg);font:13px 'IBM Plex Sans',sans-serif;color:var(--ink);white-space:nowrap}

/* playing like */
.comps{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.comp{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--surface)}.comp h3{margin:0 0 6px;font-size:17px;color:var(--ink);text-transform:none;font-weight:600}
.comp ul{list-style:none;margin:0 0 4px;padding:0;font-size:14px}.comp li{margin:3px 0}.comp li .muted{font-size:13px}
.comp details{font-size:13px}.comp summary{cursor:pointer;color:var(--accent)}
.comp table{margin-top:6px;font-size:12px;border-collapse:collapse}.comp th{text-align:left;font:600 11px 'IBM Plex Mono',monospace;color:var(--muted);padding:3px 4px}.comp td{padding:3px 4px;border-top:1px solid var(--line)}.comp .num{text-align:right}

.foot{margin-top:28px}
@media (max-width:640px){
  .picker select#season{flex:1 1 100%;max-width:none;min-width:0}.eprow{flex:1 1 100%;min-width:0}.eprow select{flex:1 1 0;min-width:0;width:0}
  .oname,.erow{grid-template-columns:minmax(80px,110px) 1fr 40px}.erow{grid-template-columns:minmax(80px,110px) 34px 1fr}
  .lede-box{font-size:17px}.tabs button{padding:8px 10px}
}