/* The client's file. Tokens mirror static/start/index.html and static/index.html: the site's look, not the console's. */
:root {
  --paper:#F4F5F2; --paper-2:#EAECE7; --card:#FFFFFF; --card-2:#F7F8F5;
  --rule:#D6DBE3; --rule-soft:#E4E8EE; --ink:#0F1F3D; --muted:#4B5872;
  --dim:#7E8AA3; --accent:#0F1F3D; --accent-ink:#F4F5F2;
  --mark:#F3E64F; --mark-ink:#0F1F3D; --yes:#1F7A66; --no:#A93B4C;
  --font:'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --radius:3px; --max-w:1080px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:#0E1626; --paper-2:#141E31; --card:#16213A; --card-2:#1B2740;
    --rule:#273349; --rule-soft:#1D2739; --ink:#E9ECF1; --muted:#9AA6BC;
    --dim:#6B7893; --accent:#E9ECF1; --accent-ink:#0E1626;
    --mark:#E2D24B; --mark-ink:#0E1626; --yes:#45B59B; --no:#E07A89;
  }
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--paper); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.55;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased; }
a { color:var(--ink); text-underline-offset:0.16em; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
.wrap { max-width:var(--max-w); margin:0 auto; padding:0 16px; }
nav { background:var(--paper); border-bottom:1px solid var(--rule); }
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:60px; }
.logo { font-stretch:118%; font-weight:700; font-size:1.15rem; letter-spacing:-0.02em; color:var(--ink); text-decoration:none; }
.logo-dot { background:var(--mark); display:inline-block; width:0.42em; height:0.42em; border-radius:50%; margin-left:0.12em; }
.nav-right { display:flex; align-items:center; gap:1rem; color:var(--muted); font-size:0.92rem; }
main { padding-top:2.5rem; padding-bottom:4rem; }
h1, h2, h3 { font-stretch:118%; font-weight:600; letter-spacing:-0.028em; line-height:1.05; text-wrap:balance; }
h1 { font-size:clamp(1.9rem,4vw,2.6rem); margin-bottom:0.6rem; }
h2 { font-size:1.35rem; margin:2rem 0 0.7rem; }
.lede { color:var(--muted); max-width:62ch; margin-bottom:1.5rem; }
.dim { color:var(--dim); font-size:0.9rem; }
button, .btn { font:inherit; font-weight:600; background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
  border-radius:var(--radius); padding:0.5rem 1rem; cursor:pointer; text-decoration:none; display:inline-block; }
button.quiet { background:transparent; color:var(--ink); border-color:var(--rule); }
button[disabled] { opacity:0.45; cursor:not-allowed; }
form { max-width:380px; display:grid; gap:0.9rem; }
label { display:grid; gap:0.3rem; font-weight:600; font-size:0.92rem; }
input { font:inherit; padding:0.55rem 0.7rem; border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); color:var(--ink); }
.msg { padding:0.6rem 0.8rem; border-radius:var(--radius); border:1px solid var(--rule); background:var(--card); margin:0.8rem 0; max-width:62ch; }
.msg.error { border-color:var(--no); color:var(--no); }
.card { background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:1rem 1.2rem; margin-bottom:1rem; }
.jobs { list-style:none; display:grid; gap:0.4rem; margin-top:0.6rem; }
.jobs li { display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; border-top:1px solid var(--rule-soft); padding-top:0.4rem; }
.tabs { display:flex; gap:0.4rem; margin:1.2rem 0 0.8rem; border-bottom:1px solid var(--rule); }
.tabs button { background:transparent; color:var(--muted); border:none; border-bottom:3px solid transparent; border-radius:0; padding:0.5rem 0.9rem; }
.tabs button[aria-selected="true"] { color:var(--ink); border-bottom-color:var(--mark); }
.table-wrap { overflow-x:auto; }
table { border-collapse:collapse; width:100%; font-size:0.93rem; }
th { text-align:left; font-weight:600; color:var(--muted); padding:0.4rem 0.7rem; border-bottom:1px solid var(--rule); white-space:nowrap; }
td { padding:0.45rem 0.7rem; border-bottom:1px solid var(--rule-soft); vertical-align:top; }
tr.open-row { cursor:pointer; }
.badge { display:inline-block; font-size:0.78rem; font-weight:600; padding:0.05rem 0.5rem; border-radius:999px; border:1px solid var(--rule); color:var(--muted); white-space:nowrap; }
.badge.live { background:var(--mark); border-color:var(--mark); color:var(--mark-ink); }
.detail { background:var(--card-2); }
.halves { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.2rem; padding:0.6rem 0.2rem; }
.halves h3 { font-size:0.95rem; margin-bottom:0.4rem; }
.halves dl { display:grid; grid-template-columns:minmax(120px,40%) 1fr; gap:0.2rem 0.8rem; font-size:0.9rem; }
.halves dt { color:var(--muted); }
.halves dd { overflow-wrap:anywhere; }
.context h3 { font-size:0.95rem; margin-bottom:0.4rem; font-weight:600; }
.context h4 { font-size:0.85rem; color:var(--muted); margin:0.7rem 0 0.2rem; font-weight:600; }
.context ul { list-style:none; display:grid; gap:0.3rem; font-size:0.9rem; }
.context li, .context p { overflow-wrap:anywhere; }
.bar { display:flex; gap:0.7rem; align-items:center; flex-wrap:wrap; margin:0.6rem 0; }
.empty { color:var(--dim); padding:1rem 0; }
code { display:block; margin-top:0.4rem; word-break:break-all; font-family:ui-monospace,Menlo,monospace; }

.cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
a.pick { display:block; text-decoration:none; color:var(--ink); }
a.pick:hover { border-color:var(--ink); }
.big { font-stretch:118%; font-weight:700; font-size:2.4rem; line-height:1.1; letter-spacing:-0.03em; margin-top:0.4rem; }
.nav-right a { color:var(--muted); }
.viewing { background:var(--mark); color:var(--mark-ink); border-bottom:1px solid var(--rule); }
.viewing-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:0.55rem; padding-bottom:0.55rem; flex-wrap:wrap; font-weight:600; }
.viewing button { background:transparent; color:var(--mark-ink); border-color:var(--mark-ink); }
.badge.stop { border-color:var(--no); color:var(--no); }
.group { border:1px solid var(--rule); border-radius:var(--radius); background:var(--card); margin-bottom:0.6rem; }
.group summary { cursor:pointer; padding:0.7rem 1rem; font-weight:600; }
.group .table-wrap { padding:0 0.6rem 0.6rem; }
.working { margin-top:1rem; }
@media (max-width:640px) { .nav-right { gap:0.6rem; font-size:0.85rem; } }
.guide-link { margin-top:1.4rem; font-size:0.9rem; }
.entry { margin-bottom:1.6rem; }
.entry dl { display:grid; grid-template-columns:minmax(140px,28%) 1fr; gap:0.5rem 1.2rem; }
.entry dt { color:var(--muted); font-size:0.9rem; }
@media (max-width:640px) { .entry dl { grid-template-columns:1fr; } }