/* Slate V1.1. Tokens and component CSS copied from slate/brand/slate-specimen.html
   (ratified 2026-09-21), extended with the components the sealed mock establishes
   by name: the app bar, the date stack, the day header and the quiet day.
   Night only. Never re-derive this from prose. */

:root{
  --ground:#080707;
  --surface:#0d0707;
  --surface-2:#1b1515;
  --line:#3a2e2b;
  --ink:#f2eeed;
  --ink-strong:#f9f7f6;
  --muted:#d9cbc9;
  --faint:#857d7b;
  --accent:#e53d2e;
  --accent-dim:#ae3024;
  --glow:0 0 22px color-mix(in srgb,var(--accent) 45%,transparent);
  --glow-soft:0 0 18px color-mix(in srgb,var(--accent) 28%,transparent);
  --display:'JetBrains Mono',ui-monospace,Menlo,monospace;   /* 800 */
  --body:'Figtree',-apple-system,'Helvetica Neue',sans-serif; /* 300, strong 500 */
  --mono:'JetBrains Mono',ui-monospace,Menlo,monospace;      /* 400 / 500 */
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--ground);overflow-x:hidden}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--body);font-size:16px;font-weight:300;line-height:1.5;
  padding-block:0 calc(40px + env(safe-area-inset-bottom,0px));
}
a{color:inherit;text-decoration:none}
strong{color:var(--ink-strong);font-weight:500}

/* the phone: one column, edge to edge on a phone, a framed column on a desktop */
.phone{max-width:430px;margin:0 auto;min-height:100vh;background:var(--ground)}
@media (min-width:520px){.phone{border-left:1px solid var(--line);border-right:1px solid var(--line)}}

/* app bar: wordmark and cursor left, the local date and time right, four tabs
   beneath. Installed on the home screen the page runs under the status bar
   (viewport-fit cover, black translucent), so the bar sticks at the very top
   and carries the status bar's height as its own padding. Sticking it BELOW the
   inset instead slid it down over the first rows of every screen (found on
   Paul's phone, 2026-09-21): a sticky element never pushes its neighbours. */
.appbar{
  position:sticky;top:0;z-index:5;background:var(--ground);
  padding:calc(14px + env(safe-area-inset-top,0px)) 16px 0;border-bottom:1px solid var(--line);
}
.appbar .row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.wordmark{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-0.02em;color:var(--ink-strong);line-height:1;display:flex;align-items:center;gap:.08em}
.wordmark .cur{display:inline-block;width:.5em;height:.95em;background:var(--accent);box-shadow:var(--glow);animation:blink 1.1s steps(1) infinite;border-radius:1.5px}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.wordmark .cur{animation:none}}
.now{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--faint);white-space:nowrap}
.now b{color:var(--muted);font-weight:500}
.tabs{display:flex;gap:4px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-right:env(safe-area-inset-right,0px);padding-left:env(safe-area-inset-left,0px)}
.tabs::-webkit-scrollbar{display:none}
.tab{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);padding:8px 10px 10px;border:0;background:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;font-weight:500;
  display:inline-block;
}
.tab[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.tab:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;border-radius:3px}

/* screens */
.screen{padding:0 16px}
.eyebrow{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);font-weight:500;display:flex;align-items:center;gap:10px;
  padding:22px 0 6px;
}
.eyebrow.quiet{color:var(--faint)}
.eyebrow .n{margin-left:auto;color:var(--faint);letter-spacing:.08em}

/* the date stack: weekday small, the day big and red, the month small */
.ds{width:52px;flex:none;text-align:center}
.ds .dw,.ds .dm{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--faint);font-weight:500;line-height:1.2;text-transform:uppercase}
.ds .dn{display:block;font-family:var(--display);font-weight:800;font-size:30px;line-height:1;color:var(--accent);letter-spacing:-0.03em;font-variant-numeric:tabular-nums;margin:2px 0}
.ds.sm{width:44px}
.ds.sm .dn{font-size:22px;margin:1px 0}
.ds.sm .dw,.ds.sm .dm{font-size:9.5px}
.ds.today .dn{text-shadow:var(--glow)}

/* the day header: stack left, the day's name, a count at the right */
.dayhead{display:flex;align-items:center;gap:12px;padding:26px 0 4px}
.dayhead .dname{font-family:var(--display);font-weight:800;font-size:18px;color:var(--ink-strong);letter-spacing:-0.02em}
.dayhead .dcount{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500}

/* the in-row time: hours in mono 500, meridiem small and faint */
.t{font-family:var(--mono);font-size:13px;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums;margin-right:7px;white-space:nowrap}
.t small{font-size:10px;color:var(--faint);letter-spacing:.08em;margin-left:1px}
.t.state{color:var(--muted)}

/* the item: main | channel. dated items get the small stack on the left.
   The row's own link is an overlay that covers it, so the channel chip inside
   can be a link of its own: an anchor inside an anchor is not valid HTML and
   the browser takes the row apart to fix it. */
.item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;align-items:start;padding:13px 0;position:relative}
.rowlink{position:absolute;inset:0;border-radius:4px}
.rowlink:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.item .chips{position:relative;z-index:1}
.item.dated{grid-template-columns:44px minmax(0,1fr) auto}
.item>*{min-width:0}
.item .title,.item .sub{overflow-wrap:anywhere}
.title{font-family:var(--display);font-weight:800;font-size:16.5px;line-height:1.25;color:var(--ink-strong);letter-spacing:-0.02em;text-wrap:balance}
.sub{font-size:14px;color:var(--muted);margin-top:4px;line-height:1.45}
.sub .dim{color:var(--faint)}
.score{font-family:var(--mono);font-size:14.5px;color:var(--ink);margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.score .lead{color:var(--accent);font-weight:500}
.score .sets{display:block;color:var(--faint);font-size:13px;margin-top:2px}
.chip{
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500;
  color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:4px;
  padding:5px 8px;white-space:nowrap;margin-top:1px;display:inline-block;
}
.chip.more{margin-top:6px;color:var(--faint);background:none;border:0;padding:5px 0}
.chip.none{color:var(--faint);background:none;border-style:dashed}
.chips{display:flex;flex-direction:column;align-items:flex-end}

/* the live card (3a): the only box on the slate, the only glow in the list */
.live{display:block;background:var(--surface);border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:8px;box-shadow:var(--glow-soft);margin:0 0 8px}
.live .bar{display:flex;justify-content:space-between;align-items:center;background:var(--accent);color:var(--ground);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:5px 12px;border-radius:7px 7px 0 0}
.live .body{padding:11px 12px 12px}
.live .score .lead{text-shadow:var(--glow)}
.next{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:8px;letter-spacing:.03em;line-height:1.5}
.next b{color:var(--muted);font-weight:500}

/* the quiet day */
.quietday{padding:30px 0 6px}
.quietday .qn{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;color:var(--ink-strong);letter-spacing:-0.02em}
.quietday .qn b{color:var(--accent);font-weight:800}
.quietday .qs{font-size:15px;color:var(--muted);margin-top:8px;line-height:1.5}

/* week */
.day .item{padding:12px 0}
.empty{font-size:14px;color:var(--faint);padding:10px 0 2px}

/* teams: the segmented control, the head, the folds and the tables.
   Copied from the sealed mock, which is the visual contract for this screen. */
.seg{display:flex;gap:6px;padding-top:16px}
.segbtn{flex:1;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;color:var(--faint);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:9px 6px;cursor:pointer}
.segbtn[aria-selected="true"]{color:var(--ground);border-color:var(--accent);background:var(--accent);box-shadow:var(--glow)}
.segbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.team[hidden]{display:none}

/* the fold: the eyebrow is the button; the triangle is CSS borders, never a
   glyph, and turns when open */
button.fold{width:100%;background:none;border:0;cursor:pointer;text-align:left;padding-top:24px}
button.fold:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.tri{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--accent);display:inline-block;transition:transform .15s;flex:none}
.fold[aria-expanded="true"] .tri{transform:rotate(90deg)}
@media (prefers-reduced-motion:reduce){.tri{transition:none}}
.foldbody[hidden]{display:none}

/* the head: the record is the one big red number on the page */
.teamhead{padding-top:20px}
.teamhead .eyebrow{padding:0 0 6px}
.rec{display:flex;align-items:baseline;gap:14px;padding-bottom:6px}
.rec .n{font-family:var(--display);font-weight:800;font-size:44px;line-height:1;color:var(--accent);letter-spacing:-0.02em;font-variant-numeric:tabular-nums;white-space:nowrap;flex:none}
.rec .t{font-size:14px;color:var(--muted);line-height:1.45;white-space:normal;min-width:0;margin:0}
/* a set score never breaks at its hyphen; the line breaks between sets */
.pair{white-space:nowrap}

/* tables: the only place in Slate with rules between rows */
.tablewrap{border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:8px}
table{border-collapse:collapse;width:100%;background:var(--surface)}
th{font-family:var(--mono);text-align:left;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:500;padding:10px 12px 7px;border-bottom:1px solid var(--line)}
td{padding:9px 12px;font-size:15px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:none}
td.num{font-family:var(--mono);font-size:14px;color:var(--accent);white-space:nowrap}
td.mono{font-family:var(--mono);font-size:13px;color:var(--muted)}
th.r,td.r{text-align:right}
tr.me td{color:var(--ink-strong);font-weight:500}
td .pos{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.08em}
caption.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* the season table: date stack | opponent | result */
table.season td{padding:9px 10px;font-size:14.5px;vertical-align:top}
table.season th{padding:9px 10px 6px}
table.season td.res{font-family:var(--mono);font-size:13px;white-space:nowrap;color:var(--faint)}
tr.w td.res{color:var(--accent);font-weight:500}
tr.l td.res{color:var(--ink)}
tr.n td{color:var(--muted)}
tr.x td.res{color:var(--faint);font-style:italic}
table.season td .sets,table td .tvl{font-family:var(--mono);font-size:11.5px;color:var(--faint);margin-top:3px;letter-spacing:.03em;line-height:1.5}
table.season td .tvl{text-transform:uppercase;letter-spacing:.1em;font-size:10.5px}
table.season td.d{white-space:nowrap;padding:8px 4px 8px 8px;width:1%}

/* news: a headline reads in the body face, not the display face */
.news .title{font-family:var(--body);font-weight:500;font-size:15.5px;letter-spacing:0;line-height:1.35}
.news .item{grid-template-columns:1fr}
.news .src{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--faint);margin-top:5px;text-transform:uppercase}

/* follow: one row per source, one switch each. Copied from the sealed mock,
   which is the visual contract for this screen. */
.src-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:13px 0}
.src-row .title{font-family:var(--body);font-weight:500;font-size:15.5px;letter-spacing:0}
.src-row[data-soon="1"] .title,.src-row[data-soon="1"] .sub{color:var(--faint)}
.switch{width:40px;height:24px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);position:relative;cursor:pointer;flex:none;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:var(--faint);transition:transform .15s}
.switch[aria-checked="true"]{background:var(--accent-dim);border-color:var(--accent-dim)}
.switch[aria-checked="true"]::after{background:var(--ink-strong);transform:translateX(16px)}
.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.switch.off{opacity:.45;cursor:default}
.switch.locked{opacity:.4;cursor:default}
.switch.locked[aria-checked="true"]{background:var(--surface-2);border-color:var(--line)}
.switch.locked[aria-checked="true"]::after{background:var(--faint)}
.note.locked{padding:18px 0 0}
@media (prefers-reduced-motion:reduce){.switch::after{transition:none}}

/* the smoke check's chip: a source that came back with nothing where something
   was expected says so on its own rows */
.chip.none.down{color:var(--accent);border-color:var(--accent-dim)}
.sub .chip{margin-left:6px;vertical-align:middle}

/* /health: one row per source, green, amber or red by its name */
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;background:var(--faint);vertical-align:middle;flex:none}
.h-good .dot{background:#3f9a5c}
.h-watch .dot{background:#c99a2e}
.h-down .dot{background:var(--accent);box-shadow:var(--glow-soft)}
#health .src-row{padding:10px 0;align-items:start}
#health .src-row .title{font-family:var(--mono);font-size:13px;letter-spacing:.02em;overflow-wrap:anywhere}
#health .src-row .sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;margin-top:3px}
#health .hnote{font-size:11.5px;color:var(--faint);margin-top:3px;line-height:1.45}
#health .h-good .chip{color:var(--faint)}
#health .h-watch .chip{color:#c99a2e;border-color:#6b5420}
#health .h-down .chip{color:var(--accent);border-color:var(--accent-dim)}
#health .hline{font-size:14px;color:var(--muted);padding-bottom:4px}
#health .empty{padding-bottom:4px}

/* a stub screen, until its arc lands */
.stub{padding:40px 0 6px}
.stub .sn{font-family:var(--display);font-weight:800;font-size:26px;line-height:1.1;color:var(--ink-strong);letter-spacing:-0.02em}
.stub .ss{font-size:15px;color:var(--muted);margin-top:8px;line-height:1.5}

/* source down, when an adapter returns nothing where something is expected */
.down{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);border:1px dashed var(--line);border-radius:4px;padding:5px 8px;display:inline-block;margin-top:14px}

.note{font-family:var(--mono);font-size:11.5px;color:var(--faint);line-height:1.6;letter-spacing:.02em;padding:18px 0 0}
hr{border:none;text-align:center;margin:26px 0 0;color:var(--faint)}
hr::after{content:"· · ·";letter-spacing:.8em;font-size:13px}

/* the footer: the brand line on every screen, and one honest sentence when this
   copy has no key set and the switches are open to whoever is here */
.pbfoot{padding:34px 16px calc(10px + env(safe-area-inset-bottom,0px));font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--faint);line-height:1.6}
.pbfoot .fnote{color:var(--muted);margin-bottom:6px;letter-spacing:.02em}

/* the offline shell: the last good copy of this screen, with its age at the top */
.stale{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  background:var(--surface-2);border-bottom:1px solid var(--line);
  padding:8px 16px;
}