/* YAOI — "cold aisle"
 *
 * Ground is a cold, blue-biased slate: the colour of a datacenter cold aisle,
 * not the near-black of a terminal. Display type is condensed and uppercase,
 * borrowing the vernacular of rack asset tags; data is mono with tabular figures
 * because plan codes are part numbers and delays are measurements.
 *
 * Availability is carried by ONE ORDERED RAMP, because the underlying variable
 * is ordered: time to delivery. The interactive accent sits outside that ramp so
 * a control can never be misread as a stock reading.
 */

:root {
  --ink:      #0d1218;
  --slab:     #161e27;
  --slab-2:   #1e2833;
  --slab-3:   #263242;
  --rule:     #2c3a48;
  --rule-2:   #3a4b5c;

  --text:      #dde5ec;   /* cool — data */
  --text-warm: #ece7de;   /* warm — display voice */
  --dim:       #8ba0b0;
  --mute:      #5c7383;

  /* the ladder: ordered by time to delivery */
  --t-now:  #55e0a0;
  --t-h24:  #a8dc5c;
  --t-h72:  #f2c744;
  --t-long: #f0913f;
  --t-soon: #6ba4d8;
  --t-none: #313e4b;

  --act:     #8c7cf0;     /* interactive only — never in the ramp */
  --act-dim: #463d80;
  --act-on:  #ffffff;
  --bad:     #f2686b;

  --shadow: 0 10px 34px rgb(0 0 0 / .45);
  --r: 3px;

  --display: "Roboto Condensed", "Archivo Narrow", "Liberation Sans Narrow", "Arial Narrow", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --cell: 26px;
  --topbar-h: 46px;
}

/* "Day shift" — a second full design, not an inversion. The ramp is darkened so
 * every rung keeps its contrast against a light ground. */
@media (prefers-color-scheme: light) {
  :root {
    --ink: #e7edf3; --slab: #fbfcfd; --slab-2: #f1f5f8; --slab-3: #e4ebf1;
    --rule: #cfdae3; --rule-2: #b6c5d2;
    --text: #16222e; --text-warm: #241f18; --dim: #4e6373; --mute: #74889a;
    --t-now: #0d9a61; --t-h24: #5c8a1c; --t-h72: #a37608; --t-long: #b3540d;
    --t-soon: #2769a3; --t-none: #c6d1da;
    --act: #5b48d4; --act-dim: #cdc5f5; --bad: #c9302f;
    --shadow: 0 10px 30px rgb(24 44 66 / .13);
  }
}
:root[data-theme="light"] {
  --ink: #e7edf3; --slab: #fbfcfd; --slab-2: #f1f5f8; --slab-3: #e4ebf1;
  --rule: #cfdae3; --rule-2: #b6c5d2;
  --text: #16222e; --text-warm: #241f18; --dim: #4e6373; --mute: #74889a;
  --t-now: #0d9a61; --t-h24: #5c8a1c; --t-h72: #a37608; --t-long: #b3540d;
  --t-soon: #2769a3; --t-none: #c6d1da;
  --act: #5b48d4; --act-dim: #cdc5f5; --bad: #c9302f;
  --shadow: 0 10px 30px rgb(24 44 66 / .13);
}
:root[data-theme="dark"] {
  --ink: #0d1218; --slab: #161e27; --slab-2: #1e2833; --slab-3: #263242;
  --rule: #2c3a48; --rule-2: #3a4b5c;
  --text: #dde5ec; --text-warm: #ece7de; --dim: #8ba0b0; --mute: #5c7383;
  --t-now: #55e0a0; --t-h24: #a8dc5c; --t-h72: #f2c744; --t-long: #f0913f;
  --t-soon: #6ba4d8; --t-none: #313e4b;
  --act: #8c7cf0; --act-dim: #463d80; --bad: #f2686b;
  --shadow: 0 10px 34px rgb(0 0 0 / .45);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--ink);
  color: var(--text);
  font: 14px/1.5 var(--body);
  -webkit-font-smoothing: antialiased;
}
:focus-visible { outline: 2px solid var(--act); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.lab {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .13em;
  font-size: 9.5px; font-weight: 700; color: var(--mute);
}

/* ========================================================================
   Instrument rail
   ======================================================================== */
.rail {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--slab-2);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
}
.rail .mark {
  font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: 13px; color: var(--text-warm);
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
}
.rail .mark .led { width: 7px; height: 7px; border-radius: 50%; background: var(--t-none); flex: none; }
/* The acronym carries the mark; the expansion rides along quietly so the name
   explains itself once without competing with the readings beside it. */
.rail .mark .expand {
  font-family: var(--mono); text-transform: none; letter-spacing: 0;
  font-size: 10px; font-weight: 400; color: var(--mute); margin-left: 8px;
}
.rail .mark .led.live { background: var(--t-now); animation: pulse 2.6s ease-in-out infinite; }
.rail .mark .led.bad { background: var(--bad); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.stat { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.stat b { color: var(--text); font-weight: 500; }
.stat.warn, .stat.warn b { color: var(--t-h72); }
.stat.bad, .stat.bad b { color: var(--bad); }
.rail .spacer { flex: 1 1 auto; }
.iconbtn {
  background: transparent; border: 1px solid var(--rule-2); color: var(--dim);
  min-width: 26px; height: 26px; border-radius: 2px; cursor: pointer;
  display: inline-grid; place-items: center; padding: 0 6px;
  font-size: 12px; font-family: var(--body);
}
.iconbtn:hover { color: var(--text); border-color: var(--act); }
.iconbtn.on { color: var(--act); border-color: var(--act-dim); }

/* ========================================================================
   Delivery ladder — the signature
   ======================================================================== */
.ladder { padding: 16px 14px 13px; border-bottom: 1px solid var(--rule); background: var(--slab); }
.ladder-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; margin-bottom: 11px; flex-wrap: wrap;
}
.ladder-top h2 {
  margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; font-size: 15px; color: var(--text-warm);
}
.ladder-top .hint { font-family: var(--mono); font-size: 11px; color: var(--mute); }
.bar { display: flex; height: 28px; border-radius: 2px; overflow: hidden; gap: 1px; background: var(--rule); }
.bar button { border: 0; padding: 0; cursor: pointer; opacity: .9; min-width: 3px; transition: opacity .15s, filter .15s; }
.bar button:hover { opacity: 1; filter: brightness(1.2); }
.bar button[aria-pressed="true"] { opacity: 1; box-shadow: inset 0 0 0 2px var(--text); }
.rungs { margin-top: 10px; display: grid; gap: 9px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.rung {
  display: grid; grid-template-columns: 4px 1fr; gap: 9px;
  background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
  font-family: var(--mono); font-size: 11px;
}
.rung .stripe { border-radius: 2px; }
.rung .v { display: block; font-size: 17px; color: var(--text); letter-spacing: -.02em; }
.rung .k { color: var(--mute); display: block; }
.rung .s { color: var(--dim); font-size: 10.5px; display: block; }
.rung[aria-pressed="true"] .k { color: var(--text); }
.rung[aria-pressed="true"] .stripe { box-shadow: 0 0 0 1px var(--text); }

/* ========================================================================
   Watch cards
   ======================================================================== */
.watches {
  padding: 14px; border-bottom: 1px solid var(--rule); background: var(--slab);
  display: grid; gap: 11px; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
}
.watch {
  background: var(--slab-2); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 12px 13px; display: flex; flex-direction: column; gap: 10px;
}
.watch.hit { border-color: color-mix(in srgb, var(--t-now) 44%, var(--rule)); }
.watch.off { opacity: .55; }
.watch-head { display: flex; align-items: flex-start; gap: 8px; }
.watch-head h3 {
  flex: 1; margin: 0; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; font-size: 14px; color: var(--text);
}
.watch .crit { font-family: var(--mono); font-size: 10.5px; color: var(--mute); line-height: 1.6; word-break: break-word; }
.watch .counts { display: flex; gap: 18px; align-items: flex-end; }
.watch .fig { display: flex; flex-direction: column; }
.watch .fig .v {
  font-family: var(--mono); font-variant-numeric: tabular-nums;
  font-size: 26px; line-height: 1; letter-spacing: -.03em; color: var(--text);
}
.watch .fig .v.hot { color: var(--t-now); }
.watch .fig .v.zero { color: var(--mute); }
.watch .fig .k { margin-top: 5px; }
.chans { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.chip-ch {
  font-family: var(--mono); font-size: 9.5px; padding: 2px 5px; border-radius: 2px;
  border: 1px solid var(--rule-2); color: var(--mute); background: var(--slab);
}
.chip-ch.on { color: var(--act); border-color: var(--act-dim); }
.peek { display: flex; flex-direction: column; gap: 3px; }
.peek .row { font-family: var(--mono); font-size: 10.5px; color: var(--dim); display: flex; gap: 7px; align-items: center; }
.peek .row i { width: 6px; height: 6px; border-radius: 1px; flex: none; display: block; }
.peek .row b { color: var(--text); font-weight: 500; }
.peek .more { color: var(--mute); font-family: var(--mono); font-size: 10.5px; }

/* ========================================================================
   Filters
   ======================================================================== */
.filters {
  position: sticky; top: var(--topbar-h); z-index: 30;
  padding: 10px 14px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  border-bottom: 1px solid var(--rule); background: var(--slab-2);
}
.fgroup { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.chip {
  font-family: var(--mono); font-size: 11px; padding: 4px 9px; border-radius: 2px;
  border: 1px solid var(--rule-2); background: var(--slab); color: var(--dim); cursor: pointer;
  transition: color .14s, border-color .14s, background .14s;
}
.chip:hover { color: var(--text); }
.chip[aria-pressed="true"] {
  background: color-mix(in srgb, var(--act) 17%, var(--slab));
  border-color: var(--act); color: var(--text);
}
.search {
  flex: 1 1 180px; min-width: 140px; background: var(--slab); color: var(--text);
  border: 1px solid var(--rule-2); border-radius: 2px; padding: 5px 9px;
  font-family: var(--mono); font-size: 11.5px;
}
.search::placeholder { color: var(--mute); }
.search:focus { outline: 2px solid var(--act); outline-offset: -1px; }
.tog { font-family: var(--mono); font-size: 11px; color: var(--dim); display: flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; }
.tog input { accent-color: var(--act); }

/* ========================================================================
   The matrix
   ======================================================================== */
/* The grid is its own scroll area, vertically and horizontally.
 *
 * This is not decoration. `overflow` makes an element the containing block for
 * sticky descendants, so a sticky <th> inside a horizontally-scrolling wrapper
 * sticks to the WRAPPER, not the viewport — a viewport-style `top` offset then
 * pushes the header *down* inside the box and rows render above it. Making the
 * wrapper the vertical scroller too resolves it: the header sticks to the top of
 * the grid, which is where you want the datacenter labels anyway when scrolling
 * thousands of rows. */
.tscroll { overflow: auto; max-height: 74vh; }
table.matrix { width: 100%; border-collapse: collapse; }
.matrix thead th {
  position: sticky; top: 0; z-index: 20;
  background: var(--slab-3); color: var(--dim);
  font-family: var(--display); text-transform: uppercase; letter-spacing: .12em;
  font-size: 9.5px; font-weight: 700; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--rule-2); white-space: nowrap;
}
.matrix thead th.sortable { cursor: pointer; user-select: none; }
.matrix thead th.sortable:hover { color: var(--text); }
.matrix thead th.r { text-align: right; }
.matrix thead th .arrow { color: var(--act); font-size: 8px; }
.dcgrid { display: grid; grid-auto-flow: column; grid-auto-columns: var(--cell); gap: 3px; }
.dchead span {
  font-family: var(--mono); font-size: 9px; text-align: center; color: var(--mute);
  letter-spacing: 0; text-transform: none; line-height: 1.25;
  /* Codes like ca-east-tor-a and eu-west-par-a are far wider than a 26px column
     and collided into unreadable mush; they are shortened at the source and
     clipped here as a backstop. */
  overflow: hidden; white-space: nowrap;
}
.dchead span i { display: block; font-style: normal; font-size: 8.5px; color: var(--rule-2); }
.dchead span.dim { opacity: .32; }

.matrix tbody td {
  padding: 7px 10px; font-size: 12.5px; vertical-align: middle;
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 60%, transparent);
}
.matrix tbody tr:hover { background: var(--slab-2); }
.matrix tbody tr.starred { box-shadow: inset 2px 0 0 var(--act); }
.rangecell { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em; font-size: 10px; color: var(--dim); white-space: nowrap; }
.rangecell::before {
  content: ""; display: inline-block; width: 3px; height: 11px; border-radius: 1px;
  margin-right: 7px; vertical-align: -1px; background: var(--rule-2);
}
.rangecell.r-kimsufi::before    { background: var(--t-now); }
.rangecell.r-rise::before       { background: var(--t-soon); }
.rangecell.r-soyoustart::before { background: var(--act); }
.rangecell.r-advance::before    { background: var(--t-h72); }
.model { color: var(--text); font-weight: 600; font-size: 13px; }
.cpu { color: var(--mute); font-size: 11px; }
.pcode { font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.spec { font-family: var(--mono); font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.spec b { color: var(--text); font-weight: 500; }
.price { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.price b { color: var(--text); font-weight: 500; font-size: 13px; }
.price .per { color: var(--mute); font-size: 10px; }
.price .none { color: var(--mute); font-size: 10px; border-bottom: 1px dotted var(--rule-2); cursor: help; }

/* ladder cells */
.cell {
  height: 22px; border-radius: 2px; background: var(--t-none);
  display: grid; place-items: center; position: relative;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
}
.cell.t-now  { background: var(--t-now); }
.cell.t-h24  { background: var(--t-h24); }
.cell.t-h72  { background: var(--t-h72); }
.cell.t-long { background: var(--t-long); }
.cell.t-soon { background: var(--t-soon); }
.cell.t-none { background: var(--t-none); color: transparent; }
/* "not sold here" — a fact the data always carried and the old UI could not
   express: this datacenter does not offer this configuration at all. */
.cell.t-notSold { background: transparent; box-shadow: inset 0 0 0 1px var(--rule); color: transparent; }
.cell.dim { opacity: .22; }
.cell.match::after {
  content: ""; position: absolute; inset: -3px; border-radius: 3px;
  box-shadow: 0 0 0 1px var(--act);
}
.rowact { display: flex; gap: 5px; justify-content: flex-end; }
.linkbtn {
  font-family: var(--mono); font-size: 10px; text-decoration: none;
  border: 1px solid var(--rule-2); color: var(--dim); padding: 3px 7px; border-radius: 2px;
  white-space: nowrap; background: transparent; cursor: pointer;
}
.linkbtn:hover { color: var(--text); border-color: var(--act); }
.linkbtn.go { color: var(--act); border-color: var(--act-dim); }
.linkbtn.go:hover { background: color-mix(in srgb, var(--act) 15%, transparent); }

.tfoot {
  padding: 9px 14px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-family: var(--mono); font-size: 11px; color: var(--mute);
  border-top: 1px solid var(--rule); background: var(--slab-2);
  position: sticky; bottom: 0; z-index: 15;
}
.tfoot b { color: var(--text); font-weight: 500; }
.legend { display: flex; gap: 11px; flex-wrap: wrap; margin-left: auto; }
.legend span { display: flex; gap: 5px; align-items: center; }
.legend i { width: 9px; height: 9px; border-radius: 1px; display: block; }

/* ========================================================================
   Panels (history, notifications)
   ======================================================================== */
.panel { border-bottom: 1px solid var(--rule); background: var(--slab); }
.panel-head {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--slab-2); border-bottom: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11.5px; color: var(--dim);
}
.panel-head h2 {
  margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .1em; font-size: 13px; color: var(--text-warm);
}
.panel-head .spacer { flex: 1; }
.panel-body { max-height: 340px; overflow-y: auto; }

.tl-row {
  display: grid; grid-template-columns: 66px 10px 1fr auto; gap: 12px; align-items: center;
  padding: 8px 14px; border-bottom: 1px solid color-mix(in srgb, var(--rule) 50%, transparent);
}
.tl-row:hover { background: var(--slab-2); }
.tl-t { font-family: var(--mono); font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.tl-m { justify-self: center; width: 8px; height: 8px; border-radius: 50%; }
.tl-m.up { background: var(--t-now); }
.tl-m.down { background: var(--t-none); box-shadow: inset 0 0 0 1px var(--rule-2); }
.tl-m.alert { background: var(--act); }
.tl-b { font-size: 12.5px; color: var(--dim); }
.tl-b b { color: var(--text); font-weight: 600; }
.tl-b .pc { font-family: var(--mono); font-size: 10.5px; color: var(--mute); }
.tl-d { font-family: var(--mono); font-size: 10.5px; color: var(--mute); white-space: nowrap; }
.tl-d.held { color: var(--t-h72); }
.tl-d.open { color: var(--t-now); }

.chan {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 13px; align-items: center;
  padding: 12px 14px; border-bottom: 1px solid color-mix(in srgb, var(--rule) 50%, transparent);
}
.chan:last-child { border-bottom: 0; }
.chan .glyph {
  width: 34px; height: 34px; border-radius: 2px; display: grid; place-items: center;
  background: var(--slab-2); border: 1px solid var(--rule);
  font-family: var(--display); font-weight: 700; font-size: 11px; color: var(--mute);
  text-transform: uppercase;
}
.chan.ok .glyph { color: var(--t-now); border-color: color-mix(in srgb, var(--t-now) 42%, var(--rule)); }
.chan .nm { color: var(--text); font-weight: 600; font-size: 13.5px; }
.chan .st { font-family: var(--mono); font-size: 10.5px; color: var(--mute); margin-top: 2px; }
.chan .st.good { color: var(--t-now); }
.chan .st.bad { color: var(--bad); }

.note { padding: 13px 14px; font-size: 12.5px; color: var(--dim); background: var(--slab-2); border-top: 1px solid var(--rule); }
.note b { color: var(--text); font-weight: 600; }
.note a { color: var(--act); }
.note code { font-family: var(--mono); font-size: 11.5px; color: var(--text); }

/* ========================================================================
   Empty / error states
   ======================================================================== */
.state { padding: 34px 20px; text-align: center; display: flex; flex-direction: column; gap: 9px; align-items: center; }
.state h3 {
  margin: 0; font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 16px; color: var(--text);
}
.state p { margin: 0; max-width: 46ch; color: var(--dim); font-size: 13px; }
.state .fix { margin-top: 6px; }

/* ========================================================================
   Modal
   ======================================================================== */
.backdrop {
  position: fixed; inset: 0; z-index: 100; background: rgb(4 8 12 / .72);
  display: grid; place-items: start center; overflow-y: auto; padding: 26px 14px;
}
.backdrop[hidden] { display: none; }
.sheet {
  background: var(--slab); border: 1px solid var(--rule-2); border-radius: var(--r);
  box-shadow: var(--shadow); width: 100%; max-width: 600px;
}
.sheet-head { padding: 14px 17px; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 12px; }
.sheet-head h3 {
  flex: 1; margin: 0; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; font-size: 15px; color: var(--text-warm);
}
.sheet-body { padding: 17px; display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field .help { font-family: var(--mono); font-size: 10.5px; color: var(--mute); }
.field input[type="text"], .field input[type="number"], .field input[type="time"] {
  background: var(--slab-2); border: 1px solid var(--rule-2); color: var(--text);
  border-radius: 2px; padding: 7px 9px; font-family: var(--mono); font-size: 12px; width: 100%;
}
.field input:focus { outline: 2px solid var(--act); outline-offset: -1px; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.chiprow { display: flex; gap: 4px; flex-wrap: wrap; }
.checks { display: flex; flex-direction: column; gap: 9px; }
.checks label { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; color: var(--dim); cursor: pointer; }
.checks input { margin-top: 3px; accent-color: var(--act); }
.checks b { color: var(--text); font-weight: 500; display: block; }
.checks .cd { font-family: var(--mono); font-size: 10.5px; color: var(--mute); }
.sheet-foot {
  padding: 12px 17px; border-top: 1px solid var(--rule); background: var(--slab-2);
  display: flex; gap: 8px; align-items: center;
}
.btn {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .11em;
  font-size: 11px; font-weight: 700; padding: 8px 14px; border-radius: 2px;
  border: 1px solid var(--rule-2); background: var(--slab); color: var(--text); cursor: pointer;
}
.btn:hover { border-color: var(--act); }
.btn.primary { background: var(--act); border-color: var(--act); color: var(--act-on); }
.btn.primary:hover { filter: brightness(1.1); }
.btn.quiet { background: transparent; color: var(--dim); border-color: transparent; }
.btn.quiet:hover { color: var(--text); border-color: var(--rule-2); }
.btn.danger { color: var(--bad); border-color: transparent; background: transparent; }
.btn.danger:hover { border-color: var(--bad); }
.btn.small { font-size: 10px; padding: 5px 9px; }
.grow { flex: 1; }

/* ========================================================================
   Toasts
   ======================================================================== */
.toasts {
  position: fixed; right: 14px; bottom: 14px; z-index: 200;
  display: flex; flex-direction: column; gap: 9px;
  max-width: min(390px, calc(100vw - 28px));
}
.toast {
  background: var(--slab-2); border: 1px solid var(--rule-2);
  border-left: 3px solid var(--t-now); border-radius: var(--r);
  padding: 11px 13px; box-shadow: var(--shadow); cursor: pointer;
  animation: slidein .22s ease-out;
}
.toast.info { border-left-color: var(--act); }
.toast.bad { border-left-color: var(--bad); }
@keyframes slidein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.toast .tt {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 12.5px; font-weight: 700; color: var(--text);
}
.toast .tb { font-family: var(--mono); font-size: 11px; color: var(--dim); margin-top: 4px; line-height: 1.5; }
.toast .tb b { color: var(--text); font-weight: 500; }
.toast a { color: var(--act); }

@media (max-width: 720px) {
  .two { grid-template-columns: 1fr; }
  .rail { gap: 10px; }
  .rail .stat.hide-sm { display: none; }
  .rail .mark .expand { display: none; }

  /* On a phone the summary chrome above the grid was tall enough to push every
     row below the fold. Keep the readings, drop their explanatory second lines
     and trim the padding so the data starts on the first screen. */
  .ladder { padding: 12px 12px 10px; }
  .ladder-top { margin-bottom: 9px; }
  .rung .s { display: none; }
  .rungs { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 7px; }
  .watches { padding: 10px; gap: 9px; }
  .watch { padding: 10px 11px; gap: 8px; }
  .peek .row:nth-of-type(n + 3) { display: none; }
  .filters { padding: 8px 10px; }
  .tscroll { max-height: 78vh; }
}