/* Cheap Seats palette: warm ivory / warm charcoal, cinema red for primary actions and the icon, cheapseats
   gold for the occasional highlight. Status colors are separate from the brand colors, and every
   text pairing below is at least 4.5:1 on bg, surface and chip; control borders at least 3:1. */
/* Light by default; dark when the OS asks for it, until the header toggle picks one
   (data-theme on <html>, remembered per browser). gold-strong is the in-flight fill, 3:1 on chip;
   series is the one data hue, validated (dataviz) on both surfaces. */
:root{color-scheme:light;
  --pc-bg:#FAF8F5;--pc-surface:#FFFFFF;--pc-border:#E5DFD7;--pc-text:#252321;--pc-muted:#6E6862;
  --pc-primary:#C73532;--pc-primary-hover:#A92B28;--pc-on-primary:#FFFFFF;
  --pc-gold:#F2B544;--pc-gold-strong:#A87500;--pc-gold-bg:#FFF0CB;--pc-gold-text:#765000;
  --pc-chip:#F2EEE8;--pc-control:#8C847B;--pc-series:#2a78d6;
  --pc-success:#2D7A3E;--pc-success-bg:#E3F2E5;--pc-warning:#8F5B00;--pc-warning-bg:#FCEBD0;--pc-error:#B3261E;--pc-error-bg:#FCE4E1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){color-scheme:dark;
  --pc-bg:#1B1917;--pc-surface:#24211E;--pc-border:#3B3631;--pc-text:#F5F1EB;--pc-muted:#ADA59C;
  --pc-primary:#EF7770;--pc-primary-hover:#F38D87;--pc-on-primary:#1B1917;
  --pc-gold:#F2B544;--pc-gold-strong:#F2B544;--pc-gold-bg:#3B2C14;--pc-gold-text:#F2B544;
  --pc-chip:#302C28;--pc-control:#7D756C;--pc-series:#3987e5;
  --pc-success:#7BC98A;--pc-success-bg:#1F3A25;--pc-warning:#F0A35E;--pc-warning-bg:#45301A;--pc-error:#FF9189;--pc-error-bg:#4A2220}}
:root[data-theme="dark"]{color-scheme:dark;
  --pc-bg:#1B1917;--pc-surface:#24211E;--pc-border:#3B3631;--pc-text:#F5F1EB;--pc-muted:#ADA59C;
  --pc-primary:#EF7770;--pc-primary-hover:#F38D87;--pc-on-primary:#1B1917;
  --pc-gold:#F2B544;--pc-gold-strong:#F2B544;--pc-gold-bg:#3B2C14;--pc-gold-text:#F2B544;
  --pc-chip:#302C28;--pc-control:#7D756C;--pc-series:#3987e5;
  --pc-success:#7BC98A;--pc-success-bg:#1F3A25;--pc-warning:#F0A35E;--pc-warning-bg:#45301A;--pc-error:#FF9189;--pc-error-bg:#4A2220}
:root{--mono:ui-monospace,SFMono-Regular,Menlo,monospace}

*{box-sizing:border-box}
body{margin:0;background:var(--pc-bg);color:var(--pc-text);font:15px/1.5 -apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif}
/* Links read as text with an underline; red is kept for actions and the brand. */
a{color:inherit;text-decoration-color:var(--pc-control);text-underline-offset:3px}
a:hover{color:var(--pc-primary);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--pc-primary);outline-offset:2px;border-radius:4px}

header{display:flex;gap:24px;align-items:center;padding:12px 24px;background:var(--pc-surface);border-bottom:1px solid var(--pc-border);flex-wrap:wrap}
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--pc-text);text-decoration:none;font-weight:500;font-size:16px}
.brand svg{color:var(--pc-primary);flex-shrink:0}
header nav{display:flex;gap:18px;flex-wrap:wrap;align-items:center;flex:1}
header nav a{text-decoration:none;color:var(--pc-muted);padding:4px 0;border-bottom:2px solid transparent}
header nav a:hover{color:var(--pc-text)}
header nav a[aria-current="page"]{color:var(--pc-text);border-bottom-color:var(--pc-primary)}
.theme-toggle{background:transparent;color:var(--pc-muted);border:1px solid var(--pc-border);border-radius:8px;padding:5px;display:inline-flex}
.theme-toggle:hover{color:var(--pc-text);background:var(--pc-chip)}
/* The toggle shows the theme it's on: system (a monitor), light (a sun) or dark (a moon). */
.theme-toggle span{display:none}
.theme-toggle:not([data-mode]) .t-system,.theme-toggle[data-mode="system"] .t-system,.theme-toggle[data-mode="light"] .t-light,.theme-toggle[data-mode="dark"] .t-dark{display:inline-flex}

main{max-width:1180px;margin:0 auto;padding:24px 16px 80px}
h1{font-size:24px;letter-spacing:-.02em;margin:0 0 4px}h2{font-size:17px;margin:32px 0 10px}h3{font-size:15px;margin:0 0 6px}
.sub{color:var(--pc-muted);margin:0 0 18px}.muted{color:var(--pc-muted)}.mono{font-family:var(--mono);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.card{background:var(--pc-surface);border:1px solid var(--pc-border);border-radius:10px;padding:16px}
.kpis{display:flex;gap:22px;flex-wrap:wrap;margin:10px 0}.kpi b{display:block;font-size:22px;letter-spacing:-.02em}.kpi small{color:var(--pc-muted)}
table{width:100%;border-collapse:collapse;font-size:14px}th,td{text-align:left;padding:7px 8px;border-bottom:1px solid var(--pc-border);vertical-align:top}
th{color:var(--pc-muted);font-weight:500;font-size:12px;text-transform:uppercase;letter-spacing:.04em}
/* Positioned, so absolutely placed screen-reader text inside stays clipped by it. */
.scroll{overflow-x:auto;position:relative}

.chip{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--pc-chip);font-size:12px;color:var(--pc-muted);white-space:nowrap}
.p-urgent{background:var(--pc-error-bg);color:var(--pc-error);font-weight:600}.p-high{background:var(--pc-warning-bg);color:var(--pc-warning);font-weight:600}
/* Absent is the usual state, not an alarm: muted, told apart by its icon. Errors are red. */
.v-recommended,.v-top-pick,.s-done{color:var(--pc-success)}.v-mentioned,.s-partial,.s-budget{color:var(--pc-warning)}.v-absent{color:var(--pc-muted)}
.s-failed,.s-error,.err{color:var(--pc-error)}
.s-running,.s-queued{color:var(--pc-gold-text)}.s-skipped,.s-cancelled{color:var(--pc-muted)}

.bar{height:8px;background:var(--pc-chip);border-radius:4px;overflow:hidden;min-width:80px}.bar i{display:block;height:100%;background:var(--pc-muted)}.bar i.us{background:var(--pc-series)}
details{border-top:1px solid var(--pc-border);padding:6px 0}summary{cursor:pointer}details:target{outline:2px solid var(--pc-primary);outline-offset:2px;padding:8px}
pre{white-space:pre-wrap;word-break:break-word;background:var(--pc-chip);padding:10px;border-radius:8px;font:12px/1.45 var(--mono);max-height:420px;overflow:auto}
blockquote{margin-left:0;border-left:3px solid var(--pc-border);padding-left:12px;color:var(--pc-muted)}
pre mark{background:var(--pc-gold-bg);color:var(--pc-gold-text);border-radius:3px}blockquote.evidence{margin:6px 0 10px}

/* The most important action in a section is a plain button (red); everything else is .ghost. */
button,.btn{font:inherit;font-weight:500;background:var(--pc-primary);color:var(--pc-on-primary);border:1px solid transparent;border-radius:8px;padding:7px 14px;cursor:pointer}
button:hover,.btn:hover{background:var(--pc-primary-hover)}
button.ghost{background:var(--pc-surface);color:var(--pc-text);border-color:var(--pc-control)}button.ghost:hover{background:var(--pc-chip)}
button:disabled{opacity:.55;cursor:default}
form.inline{display:inline}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.warn{border-left:3px solid var(--pc-warning);padding:8px 12px;background:var(--pc-warning-bg)}

label{display:block;margin:12px 0}
input,select,textarea{display:block;max-width:100%;padding:8px;font:inherit;color:var(--pc-text);background:var(--pc-surface);border:1px solid var(--pc-control);border-radius:8px}
textarea{width:100%}input::placeholder{color:var(--pc-muted)}

/* Live updates and progress: gold marks what's in flight, which is news, not a warning. */
.live{display:inline-block;background:var(--pc-gold-bg);color:var(--pc-gold-text);font-size:12px;font-weight:500;padding:1px 8px;border-radius:999px}
.pbar{display:flex;height:10px;background:var(--pc-chip);border-radius:5px;overflow:hidden;margin-top:10px}.pbar.thin{height:6px;margin:0}
.pbar i{display:block;height:100%;transition:width .4s}.pbar i.done{background:var(--pc-success)}.pbar i.err{background:var(--pc-error)}.pbar i.run{background:var(--pc-gold-strong)}
.ptable{margin-top:8px;font-size:13px}.ptable td{padding:3px 8px 3px 0;border:0}
.progress-card{border-top:3px solid var(--pc-gold)}

/* Icons sit inline before their label. */
.icon{display:inline-block;vertical-align:-3px;flex-shrink:0}
header nav a,button,.btn,.iconlink,.live,span[class^="s-"],a[class^="s-"],span[class^="v-"]{display:inline-flex;align-items:center;gap:6px}
span[class^="v-"] .icon,span[class^="s-"] .icon,a[class^="s-"] .icon,td[class^="s-"] .icon{margin-right:2px}
.brand .icon{vertical-align:middle}
.iconlink{color:var(--pc-muted);text-decoration:none;margin-right:6px}.iconlink:hover{color:var(--pc-primary)}
.live .icon,.s-running .icon,.s-queued .icon{animation:spin 1.6s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.icon{animation:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.card .row h3{flex:1;min-width:0}.card .row .chip{flex-shrink:0}
.brand-name{color:var(--pc-muted);font-size:14px;padding-left:10px;margin-left:-14px;border-left:1px solid var(--pc-border)}

/* Rankings and prompt history. */
tr.new-method td,th.new-method,td.new-method{border-left:2px solid var(--pc-gold)}
tr.new-method td{border-top:2px solid var(--pc-gold);border-left:0}
.history td,.history th{padding:4px 6px;font-size:13px}
.hcell{text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums;min-width:44px}
.h-na{color:var(--pc-muted);background:transparent}
.h-0{background:var(--pc-chip);color:var(--pc-muted)}
.h-1{background:color-mix(in srgb,var(--pc-success) 18%,var(--pc-surface))}
.h-2{background:color-mix(in srgb,var(--pc-success) 35%,var(--pc-surface))}
.h-3{background:color-mix(in srgb,var(--pc-success) 55%,var(--pc-surface));font-weight:600}
tr.retired td{color:var(--pc-muted)}
.chip.on{background:var(--pc-text);color:var(--pc-bg)}
a.chip{text-decoration:none}

/* Narrow screens: long URLs and ids wrap rather than widen the page; the nav keeps its icons. */
/* URLs and ids may break anywhere; ordinary words only between letters' worth of room, so a name
   column isn't squeezed to a few characters. */
.mono,.chip.mono,td a.mono,td.mono a{overflow-wrap:anywhere}
td a{overflow-wrap:break-word}
@media (max-width:560px){
  table.sets th.num{white-space:normal}
  table.sets td,table.sets th{padding:6px 5px}
  header{gap:12px;padding:10px 16px}
  header nav{gap:14px}
  header nav .label,.brand-name{display:none}
  .kpis{gap:14px}
}
.down{color:var(--pc-warning)}

/* Dense tables: numbers right-aligned in tabular figures; sortable headings are buttons. */
.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.num{text-align:right}
table.sortable th[data-sort]{cursor:pointer;user-select:none}
table.sortable th[aria-sort="ascending"]::after{content:" ↑"}
table.sortable th[aria-sort="descending"]::after{content:" ↓"}
table.sets td{vertical-align:middle}
button.small{padding:3px 10px;font-size:13px}

/* Run page. */
.runnav{position:sticky;top:0;z-index:5;display:flex;gap:16px;overflow-x:auto;white-space:nowrap;padding:10px 0;margin:16px 0 0;background:var(--pc-bg);border-bottom:1px solid var(--pc-border);font-size:14px}
.runnav a{text-decoration:none;color:var(--pc-muted)}.runnav a:hover{color:var(--pc-text)}
h2[id]{scroll-margin-top:56px}details[id]{scroll-margin-top:56px}
.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:12px}
.tracks h3{text-transform:capitalize;margin:0}
.small{font-size:13px}
.grid-table td,.grid-table th{padding:5px 6px}
.gcol{text-align:center;font-size:12px;white-space:nowrap}
.gcell{text-align:center;white-space:nowrap}.gcell span{display:inline-flex;margin:0 1px}
.insights h1,.insights h2{font-size:16px;margin:18px 0 6px}.insights h3{font-size:15px}
.insights > :first-child{margin-top:0}
tr.us td{background:color-mix(in srgb,var(--pc-series) 8%,transparent)}
td.barcell{width:35%}
.s-pending{color:var(--pc-muted)}

/* Trend chart: one series in --pc-series; band a 10% wash; days faint; changes in gold. */
.trend-wrap{position:relative;max-width:760px;margin:6px 0 10px}
svg.trend{display:block;width:100%;height:auto;overflow:visible}
svg.trend:focus-visible{outline:2px solid var(--pc-primary);outline-offset:4px}
.trend .grid{stroke:var(--pc-border);stroke-width:1}
.trend .tick{fill:var(--pc-muted);font-size:11px;text-anchor:end;font-variant-numeric:tabular-nums}
.trend .band{fill:var(--pc-series);opacity:.1}
.trend .line{fill:none;stroke:var(--pc-series);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.trend .day{fill:var(--pc-series);opacity:.35;stroke:var(--pc-surface);stroke-width:2}
.trend .end{fill:var(--pc-series);stroke:var(--pc-bg);stroke-width:2}
.trend .endlabel{fill:var(--pc-text);font-size:12px;font-weight:600}
.trend .mark{stroke:var(--pc-gold-strong);stroke-width:1}
.trend .mark.method{stroke:var(--pc-text);stroke-width:1.5}
.trend .cross{stroke:var(--pc-muted);stroke-width:1}
.trend .fixmark{fill:var(--pc-gold-strong);stroke:var(--pc-surface);stroke-width:1}.trend .fixmark.accepted{fill:var(--pc-success)}
.noise{color:var(--pc-muted);opacity:.7}
.trend-tip{position:absolute;top:0;pointer-events:none;background:var(--pc-surface);border:1px solid var(--pc-border);border-radius:8px;padding:8px 10px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.12);min-width:150px;max-width:260px}
.trend-tip b{font-size:16px}.trend-tip .k{display:inline-block;width:12px;height:2px;background:var(--pc-series);vertical-align:middle;margin-right:6px}
.trend-tip ul{margin:4px 0 0;padding-left:16px;color:var(--pc-muted)}
.table-view{border-top:0}
.spread{justify-content:space-between;gap:8px}.tight{margin:4px 0 0}.gap-top{margin-top:8px}.half{width:45%}
input.wide{min-width:min(320px,100%)}input.full{width:100%}
.competitors{columns:2 260px;padding-left:18px;margin:0}.competitors li{break-inside:avoid;margin:2px 0}
table.sets td:first-child{min-width:11rem}
.nowrap{white-space:nowrap}
main a[href^="http"]{overflow-wrap:anywhere}
.filters .row{margin:4px 0;gap:6px}.filter-name{min-width:3.5rem}
/* Work submitted for a fix: proposed (a pull request open), accepted (merged), withdrawn. */
.st-proposed{background:var(--pc-warning-bg);color:var(--pc-warning);font-weight:600}.st-accepted{background:var(--pc-success-bg);color:var(--pc-success);font-weight:600}
.attempt{margin:6px 0}
form.mark{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0}form.mark input[type=url]{flex:1 1 260px}form.mark input[name=note]{flex:1 1 160px}
/* Seat meter (brand kit): filled seats show an answer's grade; outlines, not color alone, tell them apart. */
.seat-meter{--seat-active:#C73532;--seat-inactive:#81786F;--seat-gold:#F2B544;--seat-gold-stroke:#936000;flex-shrink:0;vertical-align:-3px}
:root[data-theme="dark"] .seat-meter{--seat-active:#EF7770;--seat-inactive:#8F877E;--seat-gold-stroke:#F2B544}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .seat-meter{--seat-active:#EF7770;--seat-inactive:#8F877E;--seat-gold-stroke:#F2B544}}
/* A read-only copy (CHEAPSEATS_READONLY): the server refuses every change, so hide the controls. */
.readonly form[method="post"]{display:none}
.demo-banner{margin:0;padding:8px 16px;background:var(--pc-gold-bg);color:var(--pc-gold-text);font-size:14px;text-align:center}
.demo-banner a{color:inherit}