/* Switchyard: a transit authority's graphic standard applied to scheduled work.
   The chrome is the station: a black sign band with a thin white rule, the sections strung along one line as
   stations, the work on white enamel panels over platform concrete. Launches are lines (a colour plus a lettered
   bullet); tasks are stops; dependencies are transfers; a late job is a signal failure. Colour means one thing
   each: line colours = which launch, vermilion = something observed failed, ultramarine dashes = projected
   ("planned service"), violet = an opinion. Nothing eases: every change is a split-flap step.
   Every page relies on these class names. */
:root {
  /* The station: sign bands, platform ground, enamel panels. */
  --sign: #111111;
  --on-sign: #ffffff;
  --ground: #e6e5e0;         /* platform concrete */
  /* Legacy "board" names: the accent every page's controls use is now the sign black, in every section. */
  --board: var(--sign);
  --on-board: var(--on-sign);

  /* The network: one colour per launch line (data-line 1–6). Red, amber, green, ultramarine and violet are held
     out: they already mean down, late, up, projected and opinion. Each line also has a lettered bullet. */
  --line-1: #e3651d;  --on-line-1: #111111;  /* Orange */
  --line-2: #f2b705;  --on-line-2: #111111;  /* Yellow */
  --line-3: #00857d;  --on-line-3: #ffffff;  /* Teal */
  --line-4: #b52c7e;  --on-line-4: #ffffff;  /* Magenta */
  --line-5: #8b5a2b;  --on-line-5: #ffffff;  /* Brown */
  --line-6: #5e6b78;  --on-line-6: #ffffff;  /* Slate */
  --transit: var(--sign);       /* set by [data-line]; the main line (navigation, unlined work) is black */
  --on-transit: var(--on-sign);

  --paper: #ffffff;          /* enamel */
  --paper-2: #f3f2ee;
  --ink: #111111;
  --ink-2: #3a3a38;
  --ink-3: #5f5e5a;
  --rule: #111111;
  --line: #d3d1cb;
  --line-soft: #e7e5e0;

  /* Observed state. Vermilion is held out of the section wheel: it only ever means an observed failure. */
  --up: #2c7a33;
  --late: #94600c;
  --down: #d42e1c;
  --paused: #85847f;
  --new: #a09f9a;
  /* Projected: marker on acetate. Opinion: a violet slip, always signed. */
  --projected: #2640b8;
  --projected-soft: #eaedfa;
  --opinion: #5b3ba6;

  /* Legacy names the page stylesheets use. */
  --bg: var(--paper-2);
  --surface: var(--paper);
  --surface-2: var(--paper-2);
  --signal: #151515;
  --signal-hover: #000000;
  --signal-ink: #fcfcfa;
  --code-bg: #f2f1ed;
  /* Porcelain enamel signs have rounded corners; nothing casts a shadow. */
  --radius-s: 3px;
  --radius-m: 5px;
  --radius-l: 8px;
  --shadow-pop: 0 0 0 2px var(--ink);
  --ring: 0 0 0 3px rgba(17, 17, 17, .28);
  --cut: none;
  --hinge: 90ms steps(2, jump-end);                   /* nothing eases: a flap falls */

  /* The Live wall's monitor screens stay dark: they are devices sitting on the board. */
  --screen: #0b1018;
  --screen-line: #1b2533;
  --screen-ink: #dde3ec;
  --screen-ink-2: #8591a3;
  --trace-up: #86cc62;           /* grass, lit for a dark screen */
  --trace-late: #f5b83d;
  --trace-down: #ff5a4a;
  --trace-idle: #66748d;
  /* The departure board: flap faces on the dark screen. Amber is the board's own lamp colour, not "late". */
  --flap: #1a1d22;
  --flap-ink: #f4f1e8;
  --flap-lamp: #ffc233;

  /* One grotesk for every sign and every sentence, as a transit standard sets it; mono for what machines say. */
  --font: "Archivo", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --serif: var(--font);
  --mono: "Martian Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
/* A launch's line. Put data-line on anything that belongs to one: its bullet, its track, its row. */
[data-line="1"] { --transit: var(--line-1); --on-transit: var(--on-line-1); }
[data-line="2"] { --transit: var(--line-2); --on-transit: var(--on-line-2); }
[data-line="3"] { --transit: var(--line-3); --on-transit: var(--on-line-3); }
[data-line="4"] { --transit: var(--line-4); --on-transit: var(--on-line-4); }
[data-line="5"] { --transit: var(--line-5); --on-transit: var(--on-line-5); }
[data-line="6"] { --transit: var(--line-6); --on-transit: var(--on-line-6); }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
::selection { background: var(--line-2); color: var(--ink); }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  caret-color: var(--ink);
}
body > main { flex: 1; }

a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--ink) 45%, transparent); }
a:hover { text-decoration-thickness: 2px; text-decoration-color: currentColor; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 0; }

/* Type: sign lettering. One grotesk at its normal width, set tight and bold like a station name; prose in the
   same face at book weight; mono for what machines say. Condensed widths are for departure-board figures only. */
h1, h2, h3 { line-height: 1.08; margin: 0 0 .5rem; font-stretch: 100%; letter-spacing: -0.015em; }
h1 { font-size: 2.75rem; font-weight: 750; letter-spacing: -0.025em; text-wrap: balance; }
h2 { font-size: 1.375rem; font-weight: 700; }
h3 { font-size: 1.0625rem; font-weight: 700; }
p { margin: 0 0 1rem; }
.lede, .prose, .page-head p { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.55; }

code, pre, .mono { font-family: var(--mono); font-size: .8em; font-stretch: 87%; }
kbd {
  font-family: var(--mono); font-size: .6875rem; font-weight: 600; color: var(--ink);
  border: 1.5px solid var(--ink); border-radius: 2px; padding: 0 5px; line-height: 1.6; background: var(--paper);
}

.wrap { max-width: 1160px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; left: 16px; top: -120px; z-index: 100; background: var(--paper); padding: 8px 12px; border: 2px solid var(--ink); border-radius: var(--radius-s); }
.skip-link:focus { top: 8px; }

/* ---------- The station: sign band, the line of sections, enamel panel ---------- */
/* The sign band: black, with the thin white rule a transit sign carries along its top. */
.sign, .topbar {
  background: linear-gradient(var(--sign) 0 6px, var(--on-sign) 6px 8px, var(--sign) 8px) var(--sign);
  color: var(--on-sign);
}
.topbar .wrap { display: flex; align-items: center; gap: 20px; min-height: 72px; padding-top: 8px; }
.brand {
  display: flex; align-items: center; gap: 11px; flex: none; color: var(--on-sign); text-decoration: none;
  font-weight: 750; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1;
}
.brand svg { width: 30px; height: 30px; flex: none; }
.brand:hover { text-decoration: none; }
.topbar :focus-visible { outline-color: var(--on-sign); }

.nav { display: flex; flex: 1; min-width: 0; }
.who { display: flex; align-items: center; gap: 14px; color: var(--on-sign); font-size: .8125rem; flex: none; }
.who form { margin: 0; }
.who .email { max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: .6875rem; color: #c9c9c4; }
.who .btn.link { color: var(--on-sign); }
.who .btn.small { background: var(--on-sign); color: var(--sign); border-color: var(--on-sign); }

/* The line of sections: the app's sections are stations on one black line. "You are here" is the big white
   station with the heavy ring, its name set bold. Markup stays .tab-rail > a[data-tab]. */
.tab-row { display: flex; justify-content: flex-start; width: 100%; }
.tab-rail {
  display: flex; align-items: flex-start; gap: 0; margin: 18px 0 20px; padding: 0 2px 4px;
  overflow-x: auto; scrollbar-width: none; position: relative;
}
.tab-rail::-webkit-scrollbar { display: none; }
.tab-rail a {
  position: relative; display: block; flex: none; min-width: 96px; padding: 30px 12px 2px; text-align: center;
  color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: .875rem; letter-spacing: -0.005em; white-space: nowrap;
}
.tab-rail a::after {   /* the track segment */
  content: ""; position: absolute; left: 0; right: 0; top: 10px; height: 6px; background: var(--transit);
}
.tab-rail a:first-child::after { left: 50%; }
.tab-rail a:last-child::after { right: 50%; }
.tab-rail a::before {  /* the station */
  content: ""; position: absolute; left: 50%; top: 5px; width: 16px; height: 16px; margin-left: -8px; z-index: 1;
  background: var(--paper); border: 3px solid var(--transit); border-radius: 50%;
}
.tab-rail a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; }
.tab-rail a:hover::before { background: var(--line-2); }
.tab-rail a[aria-current="page"] { color: var(--ink); font-weight: 800; }
.tab-rail a[aria-current="page"]::before { top: 1px; width: 24px; height: 24px; margin-left: -12px; border-width: 6px; }
.tab-rail a:focus-visible { outline: 3px solid var(--ink); outline-offset: -2px; border-radius: var(--radius-s); }

/* The panel: white enamel over platform concrete. No holes, no shadow; a hairline edge and rounded corners. */
main { padding: 0 0 56px; }
main > .wrap { position: relative; }
.leaf {
  position: relative; background: var(--paper); border: 1px solid #cfcdc6; border-radius: var(--radius-l);
  padding: 36px 44px 56px; min-height: 60vh;
}
main.full-bleed { padding: 0; }

/* The command-palette trigger. palette.css styles the dialog itself. */
.palette-trigger {
  display: inline-flex; align-items: center; gap: 8px;
  font: inherit; font-size: .8125rem; font-weight: 600; color: var(--on-sign);
  background: #26272a; border: 1px solid #4a4b4f; border-radius: var(--radius-m);
  padding: 6px 6px 6px 10px; min-width: 230px; cursor: pointer; text-align: left;
}
.palette-trigger:hover { background: #333438; border-color: #6a6b70; }
.palette-trigger kbd { background: transparent; color: #c9c9c4; border-color: #6a6b70; }
.palette-trigger svg { flex: none; }
.palette-trigger .label { flex: 1; }
.palette-trigger kbd { margin-left: auto; }

/* ---------- Buttons & forms ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 700; font-size: .9375rem; letter-spacing: -0.005em;
  padding: 8px 15px; border-radius: var(--radius-m);
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  cursor: pointer; text-decoration: none; line-height: 1.2;
  transition: transform var(--hinge);
}
.btn:hover { background: var(--paper-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.btn.primary { background: var(--board); color: var(--on-board); }
.btn.primary:hover { background: color-mix(in srgb, var(--board) 88%, #000); }
.btn.danger { color: var(--down); }
.btn.danger:hover { background: color-mix(in srgb, var(--down) 8%, var(--paper)); }
.btn.small { padding: 4px 10px; font-size: .8125rem; }
.btn.large { padding: 12px 22px; font-size: 1.0625rem; }
.btn.link { border: none; background: none; padding: 0; color: var(--ink-2); font-weight: 600; font-stretch: 100%; box-shadow: none; text-decoration: underline; text-underline-offset: 3px; }
.btn.link:hover { color: var(--ink); background: none; }
.btn.link:active { transform: none; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

.field { display: grid; gap: 6px; margin-bottom: 18px; }
.field label, .label { font-weight: 750; font-size: .875rem; }
.field .hint { color: var(--ink-3); font-size: .8125rem; font-family: var(--serif); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], input[type=date], select, textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 2px solid var(--ink); border-radius: var(--radius-s);
  padding: 8px 10px; width: 100%;
}
input:hover, select:hover, textarea:hover { background: #fff; }
input:focus, select:focus, textarea:focus { outline: 3px solid var(--line-2); outline-offset: 0; }
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:disabled, select:disabled, textarea:disabled { background: var(--paper-2); color: var(--ink-3); cursor: not-allowed; border-style: dashed; }
input[type=checkbox], input[type=radio] { accent-color: var(--ink); width: 17px; height: 17px; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(-45deg, transparent 50%, var(--ink) 50%); background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }

.segmented { display: inline-flex; border: 2px solid var(--ink); background: var(--paper); border-radius: var(--radius-m); overflow: hidden; }
.segmented label { padding: 6px 14px; cursor: pointer; font-weight: 700; font-size: .875rem; color: var(--ink-2); }
.segmented label + label { border-left: 2px solid var(--ink); }
.segmented input { position: absolute; opacity: 0; pointer-events: none; }
.segmented label:has(input:checked) { background: var(--ink); color: var(--paper); }
.segmented label:has(input:focus-visible) { outline: 3px solid var(--line-2); outline-offset: -5px; }

/* Errata: the only place vermilion fills a surface. */
.error-box { border: 2px solid var(--down); background: color-mix(in srgb, var(--down) 7%, var(--paper)); padding: 10px 14px; margin-bottom: 18px; font-weight: 600; }
.notice { border: 2px solid var(--ink); background: var(--paper-2); padding: 10px 14px; margin-bottom: 18px; }

/* A panel is a ruled section of the leaf, never a card on it. */
.panel { background: transparent; border-top: 2px solid var(--rule); padding: 18px 0 8px; }
.panel + .panel, .section + .section { margin-top: 36px; }
.muted { color: var(--ink-3); }
.small { font-size: .8125rem; }

/* ---------- Page head ---------- */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; margin-bottom: 32px; flex-wrap: wrap; }
.page-head h1 { margin: 0; }
.page-head p { margin: 6px 0 0; color: var(--ink-2); max-width: 60ch; }
.page-head .actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* ---------- State marks: shape first, colour second ---------- */
.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; flex: none; background: transparent; border: 2px dashed var(--new); }
.s-up .dot, .dot.s-up { background: var(--up); border: 0; }
.s-late .dot, .dot.s-late { background: linear-gradient(90deg, var(--late) 50%, transparent 50%); border: 2px solid var(--late); }
.s-down .dot, .dot.s-down { background: var(--down); border: 0; border-radius: 1px; transform: rotate(45deg) scale(.9); }
.s-paused .dot, .dot.s-paused { background: transparent; border: 2px solid var(--paused); }
.status-word { font-weight: 800; font-size: .8125rem; }
.s-up .status-word { color: var(--up); }
.s-late .status-word { color: var(--late); }
.s-down .status-word { color: var(--down); }
.s-paused .status-word, .s-new .status-word { color: var(--ink-3); }

.tally { display: flex; gap: 20px; flex-wrap: wrap; font-size: .9375rem; color: var(--ink-2); }
.tally span { display: inline-flex; align-items: center; gap: 8px; }
.tally b { color: var(--ink); font-variant-numeric: tabular-nums; }

.live-state { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: .6875rem; color: var(--ink-3); }
.live-state::before { content: ""; width: 8px; height: 8px; background: var(--paused); }
.live-state[data-state="live"]::before { background: var(--up); animation: live-blink 1.6s steps(2, jump-none) infinite; }
.live-state[data-state="reconnecting"]::before, .live-state[data-state="connecting"]::before { background: var(--late); }
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .2; } }

/* ---------- Pulse strip: the last 30 runs, printed as a bar code ---------- */
.pulse { display: flex; align-items: flex-end; gap: 2px; height: 26px; }
.pulse i { display: block; width: 3px; height: calc(6px + var(--h, .3) * 20px); background: var(--ink); }
.pulse i.fail { background: var(--down); height: 26px; width: 4px; }
.pulse i.slow { background: var(--late); }
.pulse i.gap { background: var(--line); height: 3px; }
.pulse.big { height: 56px; gap: 3px; }
.pulse.big i { width: 6px; height: calc(10px + var(--h, .3) * 46px); }
.pulse.big i.fail { height: 56px; width: 7px; }
.pulse.big i.gap { height: 5px; }

/* ---------- Checks ledger ---------- */
.checks { width: 100%; border-collapse: collapse; background: transparent; border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); }
.checks th { text-align: left; font-weight: 800; font-size: .75rem; color: var(--ink); padding: 10px 14px; border-bottom: 1px solid var(--rule); }
.checks td { padding: 13px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.checks tr:last-child td { border-bottom: none; }
.checks tbody tr { cursor: pointer; }
.checks tbody tr:hover { background: color-mix(in srgb, var(--board) 12%, var(--paper)); }
.checks .name { display: flex; align-items: center; gap: 12px; min-width: 0; }
.checks .name a { color: var(--ink); font-weight: 750; text-decoration: none; }
.checks .name a:hover { text-decoration: underline; }
.checks .sub { color: var(--ink-3); font-size: .8125rem; }
.checks .num { font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--mono); font-size: .75rem; }
.checks tr.s-down { background: color-mix(in srgb, var(--down) 6%, var(--paper)); }
.checks tr.s-paused td:not(:first-child) { opacity: .55; }
.checks tr.just-pinged td { animation: row-ping 1.2s steps(3, jump-none); }
@keyframes row-ping { 0% { background: color-mix(in srgb, var(--board) 30%, transparent); } 100% { background: transparent; } }
.checks tr.s-down.just-pinged td { animation-name: row-ping-down; }
@keyframes row-ping-down { 0% { background: color-mix(in srgb, var(--down) 20%, transparent); } 100% { background: transparent; } }
.checks .row-down-since { color: var(--down); font-weight: 700; }

.tag { display: inline-block; font-family: var(--mono); font-size: .625rem; font-stretch: 87%; color: var(--ink-2); border: 1px solid var(--ink-3); padding: 0 5px; margin-right: 4px; text-transform: lowercase; }
a.tag { text-decoration: none; }
a.tag:hover, a.tag[aria-current] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.empty { text-align: left; padding: 40px 0; border-top: 2px solid var(--rule); }
.empty h2 { margin-bottom: 8px; }
.empty p { max-width: 60ch; color: var(--ink-2); font-family: var(--serif); font-size: 1.0625rem; }
.empty .btn { margin-top: 8px; }

/* ---------- Detail page ---------- */
.detail-head { display: grid; grid-template-columns: 1fr auto; gap: 16px 24px; align-items: start; margin-bottom: 28px; }
.detail-head h1 { display: flex; align-items: center; gap: 14px; }
.detail-head .dot { width: 16px; height: 16px; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 0; border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 28px; }
.facts div { padding: 12px 16px 12px 0; }
.facts div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.facts dt { font-size: .75rem; font-weight: 800; color: var(--ink-3); margin-bottom: 2px; }
.facts dd { margin: 0; font-weight: 700; }

.grid-2 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 36px; align-items: start; }

.copybox { display: flex; align-items: stretch; border: 2px solid var(--ink); background: var(--code-bg); overflow: hidden; }
.copybox code { flex: 1; padding: 10px 12px; overflow-x: auto; white-space: nowrap; }
.copybox button { border: none; border-left: 2px solid var(--ink); background: var(--board); color: var(--on-board); font: inherit; font-size: .8125rem; font-weight: 800; padding: 0 14px; cursor: pointer; }
.copybox button:focus-visible { outline-offset: -5px; }

pre.snippet { background: var(--code-bg); border: 1px solid var(--ink); padding: 12px 14px; overflow-x: auto; margin: 0 0 12px; line-height: 1.7; font-size: .75rem; }
pre.snippet .c { color: var(--ink-3); }

.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--rule); margin-bottom: 12px; }
.tabs button { font: inherit; font-size: .8125rem; font-weight: 800; background: none; border: 2px solid transparent; border-bottom: 0; padding: 7px 12px; cursor: pointer; color: var(--ink-3); margin-bottom: -2px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { color: var(--on-board); background: var(--board); border-color: var(--ink); }

.log { width: 100%; border-collapse: collapse; font-size: .875rem; }
.log th { text-align: left; font-weight: 800; font-size: .75rem; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.log td { padding: 8px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.log .num { font-variant-numeric: tabular-nums; white-space: nowrap; font-family: var(--mono); font-size: .6875rem; }
.log details summary { cursor: pointer; color: var(--ink-3); }
.log details pre { white-space: pre-wrap; margin: 6px 0 0; }
.kind { font-weight: 800; font-size: .75rem; }
.kind.k-success { color: var(--up); }
.kind.k-fail { color: var(--down); }
.kind.k-start { color: var(--ink-3); }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line-soft); font-size: .875rem; }
.timeline li:last-child { border-bottom: none; }
.timeline .dot { margin-top: 4px; }

.danger-zone { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Dashboard summary: numbers set by stakes ---------- */
.summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 2px solid var(--rule); border-bottom: 2px solid var(--rule); margin-bottom: 24px; }
.summary-cell { padding: 14px 16px 12px 0; position: relative; min-width: 0; }
.summary-cell + .summary-cell { padding-left: 16px; border-left: 1px solid var(--line); }
.summary-cell b { display: block; font-size: 3rem; font-weight: 900; font-stretch: 62%; line-height: 1; font-variant-numeric: tabular-nums; }
.summary-cell span { font-size: .75rem; font-weight: 800; color: var(--ink-3); }
.summary-cell.s-late.is-active b { color: var(--late); }
.summary-cell.s-down.is-active b { color: var(--down); }
.summary-cell.s-down.is-active { background: color-mix(in srgb, var(--down) 7%, var(--paper)); }
.summary-cell b.bump { animation: summary-bump 180ms steps(2, jump-none); }
@keyframes summary-bump { 0% { transform: translateY(-4px); } 100% { transform: none; } }

.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; margin-bottom: 14px; }
.tag-filter { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font-size: .8125rem; }
.tag-filter .muted { margin-right: 4px; font-weight: 700; }
.tag-filter .tag { font-size: .6875rem; padding: 2px 7px; }

/* ---------- Auth ---------- */
.auth { max-width: 420px; margin: 40px auto 0; }
.auth h1 { margin-bottom: 20px; }
.auth-page { min-height: 52vh; display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 440px; }
.auth-card .panel { padding: 20px 0 0; }
.auth-card h1 { font-size: 2.5rem; margin-bottom: 8px; }
.auth-card .lede { color: var(--ink-2); margin-bottom: 24px; }
.auth-card .btn.primary { width: 100%; padding: 11px 14px; }
.auth-card .alt { margin: 22px 0 0; font-size: .875rem; color: var(--ink-3); text-align: center; }

/* ---------- Error ---------- */
.error-page { max-width: 600px; margin: 24px 0 0; }
.error-page h1 { font-size: 3rem; }
.error-page p { color: var(--ink-2); font-family: var(--serif); font-size: 1.0625rem; }

footer.site { padding: 20px 0 32px; color: var(--ink-3); font-size: .8125rem; font-family: var(--mono); }

/* ---------- Legacy landing classes (kept for compatibility) ---------- */
.hero { padding: 56px 0 40px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); max-width: 14ch; }
.hero p { font-family: var(--serif); font-size: 1.1875rem; color: var(--ink-2); max-width: 46ch; }
.hero .ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.monitor { background: var(--paper); border: 2px solid var(--ink); padding: 20px; }
.monitor .trace { width: 100%; height: 90px; display: block; margin-bottom: 16px; }
.monitor .trace path { fill: none; stroke: var(--ink); stroke-width: 2; }
.monitor .trace path.flat { stroke: var(--down); }
.monitor pre { margin: 0; }
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; padding: 40px 0; border-top: 2px solid var(--rule); }
.how h3 { display: flex; gap: 10px; align-items: baseline; }
.how h3 span { color: var(--ink-3); font-variant-numeric: tabular-nums; font-weight: 500; }
.how p { color: var(--ink-2); margin: 0; font-family: var(--serif); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 40px 0; border-top: 2px solid var(--rule); }
.plans ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-2); }
.plans .price { font-size: 1.5rem; font-weight: 800; }

/* ---------- Accounts ---------- */
.field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field-aside { font-size: .8125rem; }
.verify-banner { background: var(--line-2); color: var(--ink); font-size: .8125rem; }
.verify-banner .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding-top: 9px; padding-bottom: 9px; }
.verify-banner span { font-size: .9375rem; }
.verify-banner .verify-short { display: none; }
.verify-banner form { margin: 0; }
.verify-banner .btn.link { color: var(--ink); font-weight: 800; }
.set-billing-note { margin: 12px 0 0; font-size: .875rem; color: var(--ink-2); }
.set-billing-note.is-warn { color: var(--late); font-weight: 700; }
.set-sub { font-size: 1rem; font-weight: 800; margin: 0 0 10px; }
.set-danger { border-top: 2px solid var(--rule); padding-top: 18px; margin-top: 26px; }

/* ---------- Responsive ---------- */
@media (max-width: 1060px) {
  .topbar .wrap { gap: 10px 14px; }
  .palette-trigger { min-width: 0; }
  .palette-trigger .label { display: none; }
  .who .email { display: none; }
}
@media (max-width: 860px) {
  .hero, .grid-2, .how, .plans { grid-template-columns: 1fr; }
  .hero { padding-top: 24px; gap: 32px; }
  .detail-head { grid-template-columns: 1fr; }
  .checks .hide-sm, .checks th.hide-sm { display: none; }
  .leaf { padding: 28px 24px 44px; }
  h1 { font-size: 2.375rem; }
}
@media (max-width: 720px) {
  .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .summary-cell:nth-child(3) { padding-left: 0; border-left: 0; }
  .summary-cell:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .brand { font-size: 1.5rem; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 10px; }
  .leaf { padding: 22px 16px 36px; border-radius: var(--radius-m); }
  .tab-rail { margin: 12px 0 14px; }
  .tab-rail a { min-width: 0; padding: 30px 10px 2px; font-size: .8125rem; }
  h1 { font-size: 2rem; }
  .who span { display: none; }
  .checks .hide-xs, .hide-xs-inline { display: none; }
  .checks td, .checks th { padding: 11px 8px; }
  .page-head .actions { gap: 8px; }
  .page-head .actions .btn { padding: 7px 10px; font-size: .875rem; }
    .facts div + div { padding-left: 0; border-left: 0; }
  .facts div { border-bottom: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  }

/* Condensed faces close their word spaces; open them wherever the heads are set narrow. */
h1, h2, h3, .brand, .btn, .tab-rail a, .ov-cover-line, .lp-part > h2, .lp-wall-head h2, .launch-state,
.lr-name strong, .att-name, .att-head h2, .tile-name, .slip-title, .wall-id h1, .cal-month-nav h2, .sp-banner h1, .pv-desc,
.launch-section-head h2, .rehearse-head h2, .chain-head h2, .cd-panel-head h2, .set-intro h2, .lp-plan h3, .lp-demo h3 { word-spacing: .16em; }
.btn.danger { color: var(--ink); }
.btn.danger:hover { background: var(--paper-2); }

/* ==========================================================================
   The network: shared metro components. Pages compose these; they do not restyle them.
   ========================================================================== */

/* Line bullet: a launch's disc with its letter (TransitLine.Letter). Put data-line on it or an ancestor.
   <span class="bullet" data-line="3" title="Teal line">Q</span>. .bullet.large for heads. */
.bullet {
  display: inline-grid; place-items: center; flex: none; width: 1.6em; height: 1.6em; border-radius: 50%;
  background: var(--transit); color: var(--on-transit); font-weight: 800; font-size: .875rem; line-height: 1;
  letter-spacing: 0; font-stretch: 100%; font-variant-numeric: tabular-nums;
}
.bullet.large { font-size: 1.5rem; }
.bullet.small { font-size: .6875rem; }

/* Track: a horizontal run of a line with stops on it. The track is the line colour; a stop is a white station
   with a ring in the line colour; a done stop is filled; the terminus is a wide white capsule (the launch).
   A transfer (a stop other lines or jobs feed) is a capsule with an ink ring.
   <ol class="track" data-line="1"><li class="stop is-done">…</li><li class="stop">…</li><li class="stop terminus">…</li></ol> */
.track { --track-h: 8px; list-style: none; margin: 0; padding: 0; display: flex; position: relative; }
.track > .stop { position: relative; flex: 1 1 0; min-width: 0; padding-top: 30px; }
.track > .stop::after {
  content: ""; position: absolute; left: 0; right: 0; top: 11px; height: var(--track-h); background: var(--transit);
}
.track > .stop:first-child::after { left: 9px; }
.track > .stop:last-child::after { right: auto; width: 9px; }
.track > .stop::before {
  content: ""; position: absolute; left: 0; top: 6px; width: 18px; height: 18px; z-index: 1; box-sizing: border-box;
  background: var(--paper); border: 4px solid var(--transit); border-radius: 50%;
}
.track > .stop.is-done::before { background: var(--transit); }
.track > .stop.transfer::before { width: 30px; border-radius: 9px; border-color: var(--ink); }
.track > .stop.terminus::before { width: 34px; height: 24px; top: 3px; border-radius: 12px; border-color: var(--ink); border-width: 5px; }
/* Planned service: the projected part of a line is dashed ultramarine, never the line colour. */
.track > .stop.is-projected::after { background: repeating-linear-gradient(90deg, var(--projected) 0 8px, transparent 8px 13px); height: 4px; top: 13px; }
/* A signal failure on the line: the stop becomes a vermilion diamond (shape first, colour second). */
.track > .stop.is-failed::before { border-radius: 2px; transform: rotate(45deg) scale(.86); background: var(--down); border-color: var(--down); }
.track.vertical { flex-direction: column; }
.track.vertical > .stop { padding: 0 0 18px 34px; }
.track.vertical > .stop::after { left: 5px; right: auto; top: 0; bottom: 0; width: var(--track-h); height: auto; }
.track.vertical > .stop:first-child::after { top: 9px; left: 5px; }
.track.vertical > .stop:last-child::after { bottom: auto; height: 9px; width: var(--track-h); }
.track.vertical > .stop::before { top: 0; }

/* Station sign: a black band, white rule along its top, the name in white. Titles and section heads use it.
   .sign is defined with .topbar above; .sign-plate adds the padding and type for an in-page sign. */
.sign-plate {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; border-radius: var(--radius-m);
  font-weight: 750; font-size: 1.5rem; letter-spacing: -0.02em; line-height: 1.1;
}
.sign-plate .bullet { font-size: 1rem; }
.sign-plate a { color: inherit; }

/* Signal: an observed state as a signal head, a dark housing with one lamp. Wraps the existing .dot so the
   shapes (filled up, half late, diamond down, ring paused) still carry the state without colour. */
.signal { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--sign); flex: none; }
.signal .dot { width: 10px; height: 10px; }
.signal .dot.s-up, .s-up .signal .dot { background: #5fcf64; }
.signal .dot.s-late, .s-late .signal .dot { border-color: var(--flap-lamp); background: linear-gradient(90deg, var(--flap-lamp) 50%, transparent 50%); }
.signal .dot.s-down, .s-down .signal .dot { background: var(--trace-down); }
.signal .dot.s-paused, .s-paused .signal .dot { border-color: #8b8a85; }

/* Departure board: the dark device (like the old trace screens, it is a thing on the wall, not a theme).
   Rows of flap cells in a condensed face; amber is the board's lamp. .flap is one character-cell run. */
.departures { background: var(--screen); color: var(--flap-ink); border-radius: var(--radius-l); padding: 14px 16px; }
.flap {
  display: inline-block; background: var(--flap); color: var(--flap-ink); padding: 2px 6px; border-radius: 2px;
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .6), inset 0 calc(50% - 0px) 0 rgba(255, 255, 255, .03);
}
.departures .lamp { color: var(--flap-lamp); }
.flap-turn { animation: flap-turn 240ms steps(3, jump-end); }
@keyframes flap-turn { 0% { transform: scaleY(1); } 33% { transform: scaleY(.1); } 66% { transform: scaleY(.6); } 100% { transform: scaleY(1); } }
/* Vertical track: planned service dashes run down the line; the terminus capsule centres on it. */
.track.vertical > .stop.is-projected::after { background: repeating-linear-gradient(180deg, var(--projected) 0 8px, transparent 8px 13px); width: 4px; height: auto; left: 7px; top: 0; }
.track.vertical > .stop.terminus::before { left: -8px; }

/* Phones: the sign band stays one row (search shrinks to its icon), and the line of sections shows that it runs
   on past the edge until you reach its last station. site.js scrolls "you are here" into view. */
@media (max-width: 720px) {
  .tab-rail:not(.at-end) { -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
}
@media (max-width: 560px) {
  .topbar .wrap { gap: 10px; min-height: 64px; }
  .brand { font-size: 1.3125rem; gap: 8px; }
  .brand svg { width: 26px; height: 26px; }
  .palette-trigger { padding: 7px 9px; }
  .palette-trigger kbd { display: none; }
  .who { margin-left: auto; gap: 10px; }
}

/* ---------- Phones: shell-wide floors (mobile audit F3, F4, F5, F11) ---------- */
@media (max-width: 560px) {
  /* F3: the banner is one line; the phone form leaves out the address. Send it again keeps a 44px hit area. */
  .verify-banner .wrap { flex-wrap: nowrap; gap: 12px; padding-top: 9px; padding-bottom: 9px; }
  .verify-banner .verify-long { display: none; }
  .verify-banner .verify-short { display: block; flex: 1 1 auto; min-width: 0; font-size: .875rem; line-height: 1.3; }
  .verify-banner form { flex: none; }
  .verify-banner .btn.link { font-size: .875rem; white-space: nowrap; padding-block: 14px; margin-block: -14px; }

  /* F4: 16px controls, so iOS does not zoom on focus. Same selectors as the base rule, later in the file. */
  input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search],
  input[type=date], input[type=time], input[type=tel], input:not([type]), select, textarea, #lp-delay { font-size: 1rem; }

  /* F5: nothing readable is set under 12px. Sizes above 12px are left as designed. */
  body .tag, body .tag-filter .tag { font-size: .75rem; }
  body code, body time, body small, body dt { font-size: max(.75rem, 1em); }
  /* Where a page sets its own size below the floor, the rule is repeated here with more weight (html body ...). */
  html body .lr-day small, html body .lr-assessment small, html body .face small, html body .ov-strip .track > .stop small,
  html body .ov-xfer, html body .ov-list time, html body .vital dt, html body .vital dd small, html body .board-cols > span,
  html body .tile-assumptions, html body .tile-assumptions li, html body .tile-sched, html body .wall-cap,
  html body .cal-weekday, html body .cal-event .cal-title, html body .cal-event .bullet, html body .cal-agenda time,
  html body .events time, html body .incidents time, html body .incidents .inc-len, html body .pill, html body .v-sub,
  html body .cd-panel-head p, html body .strip-axis, html body .rc-y, html body .rchart-x, html body .pv-hours,
  html body .log td.num, html body .log th.num, html body .channel-url, html body .sp-updated, html body .sp-state .status-word,
  html body .choices-count, html body .chain-scenario-value, html body .node-kind,
  html body .lp-fine, html body .lp-demo-tag, html body .lp-ticks, html body .lp-impact span, html body .lp-lane-sched,
  html body .lp-readout span, html body .lp-board-msg-label, html body .lp-url, html body .lp-uptime-top span, html body .lp-uptime-top span:last-child,
  html body .lp-status-foot, html body .lp-runs-axis, html body .lp-method, html body .lp-request pre code { font-size: .75rem; }

  /* F11: utility links and chrome reach a 44px hit area; padding grows the target, the negative margin keeps the layout. */
  .brand { padding-block: 9px; margin-block: -9px; }
  .who .btn.link { padding-block: 13px; margin-block: -13px; }
  /* Others get a transparent 44px hit area centred on the element, so the look and the layout do not move. */
  .who .btn.small, .palette-trigger, .launch-crumbs a, .cd-crumb, .channel-secret summary, .tile-assumptions summary,
  .auth-card .field-aside, .auth-card .alt a, .sp-foot a { position: relative; }
  .who .btn.small::after, .palette-trigger::after, .launch-crumbs a::after, .cd-crumb::after, .channel-secret summary::after,
  .tile-assumptions summary::after, .auth-card .field-aside::after, .auth-card .alt a::after, .sp-foot a::after {
    content: ""; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%);
  }
}

/* Phones: the whole line fits one screen, a strip map with every station in view instead of a strip that scrolls
   out of sight. Stations share the width evenly; their names alternate below and above the line, as a transit
   map labels crowded stops, so even "Notifications" has room. Each station stays a 64px-tall tap target. */
@media (max-width: 560px) {
  .tab-rail, .tab-rail:not(.at-end) { overflow: visible; -webkit-mask-image: none; mask-image: none; margin: 6px 0 12px; padding: 0; width: 100%; }
  .tab-rail a { flex: 1 1 0; min-width: 0; height: 64px; padding: 0; display: flex; justify-content: center; align-items: flex-end; line-height: 1.1; }
  .tab-rail a:nth-child(even) { align-items: flex-start; }
  .tab-rail a::after { top: 29px; }
  .tab-rail a::before { top: 24px; }
  .tab-rail a[aria-current="page"]::before { top: 20px; }
}