/* =============================================================
   status — AI tool status radar
   Dark instrument panel. Data is monospace; only anomalies glow.
   ============================================================= */

:root {
  --bg: #0b0e14;
  --panel: #11151f;
  --panel-2: #151a26;
  --line: #1e2430;
  --line-soft: #171c27;

  --fg: #e6e9f0;
  --fg-dim: #8b95a8;
  --fg-faint: #818ba0;

  /* Cell scale: healthy stays dim, anomalies light up. */
  --c-nodata: #171d29;
  --c-op: #1b6e33;
  --c-watch: #1f6feb;
  --c-maint: #8957e5;
  --c-degraded: #bb8009;
  --c-partial: #db6d28;
  --c-major: #da3633;

  /* Text-weight variants of the same scale. */
  --t-op: #3fb950;
  --t-watch: #58a6ff;
  --t-maint: #a371f7;
  --t-degraded: #d29922;
  --t-partial: #f0883e;
  --t-major: #f85149;

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", system-ui, sans-serif;

  /* Preferred cell pitch. JS shrinks it per range only as far as needed to
     keep the wall inside the viewport; short ranges always keep this size. */
  --cell-w: 14px;
  --cell-gap: 3px;
  --label-w: 172px;

  --r: 8px;
  --maxw: 1140px;
  /* 12px floor keeps an extra 8px of board on a 320px phone; the layout never
     depends on the wider stops. */
  --gut: clamp(12px, 4vw, 32px);

  /* One shadow recipe for floating layers (suggest list, tooltip). Panels
     and controls stay flat — only an element hovering over content lifts. */
  --card-shadow: 0 3px 8px -4px rgba(0, 0, 0, 0.3), 0 12px 18px -14px rgba(0, 0, 0, 0.45);
  --float-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
  --tip-alpha: 90%;
  --control-h: 36px;
  --control-r: 7px;
  --control-pad-x: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  background-image: radial-gradient(1000px 420px at 50% -200px, rgba(63, 185, 80, 0.08), transparent 70%);
  background-repeat: no-repeat;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--t-watch); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Content links are underlined at rest. The link colour doubles as the watch
   state colour, so the underline — not the blue — is what says "clickable";
   chrome links (nav, brand, card metadata) keep hover-only underline. */
.text-link,
.incident-item a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

:focus-visible {
  outline: 2px solid var(--t-watch);
  outline-offset: 2px;
  border-radius: 4px;
}

main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut) 72px; }

.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.empty {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--line);
  border-radius: var(--r);
  color: var(--fg-faint);
  font-size: 13px;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px var(--gut);
  /* Opaque, not blurred glass: every other surface on the page is a solid
     panel, and a frosted bar is the one material that belongs to a different
     vocabulary. theme-light.css re-colours this via --topbar-bg. */
  background: #0b0e14;
  border-bottom: 1px solid var(--line-soft);
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
}
.brand:hover { text-decoration: none; }

.brand-mark {
  --blink-opacity: 1;
  width: 10px;
  height: 10px;
  border-radius: 0;
  background: var(--c-op);
}

.topbar nav {
  display: flex;
  gap: 16px;
  margin-left: auto;
  font-family: var(--mono);
  font-size: 12px;
}
.topbar nav a { color: var(--fg-dim); }
.topbar nav a:hover { color: var(--fg); text-decoration: none; }

@media (max-width: 620px) {
  :root { --control-h: 44px; }
  .topbar nav { display: none; }
  .topbar { gap: 12px; padding: 10px var(--gut); }
}

/* Anchored sections must clear the single-row sticky bar. */
section[id] { scroll-margin-top: 72px; }

/* Give the cells more room before they are forced to shrink. */
@media (max-width: 820px) {
  :root { --label-w: 124px; }
}

@media (max-width: 520px) {
  :root { --label-w: 92px; }
}

/* ---------- Verdict banner ---------- */

.verdict {
  position: relative;
  overflow: hidden;
  margin: 26px 0 30px;
  padding: 26px 26px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #121826, #0d1119);
}

.verdict::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--verdict-color, var(--t-op));
}

/* The sweep is a one-shot "state is not all-clear" signal, not a looping
   decoration: app.js sets .is-alert only while the verdict is alert-coloured,
   so an operational board plays nothing and the motion keeps its meaning. */
.verdict.is-alert::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(120, 160, 255, 0.09), transparent);
  animation: sweep 1.15s ease-out 0.15s 1 both;
}

@keyframes sweep {
  from { left: -40%; }
  to { left: 115%; }
}

.verdict h1 {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: clamp(21px, 3.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.verdict .lede {
  margin: 10px 0 0;
  max-width: 62ch;
  color: var(--fg-dim);
  font-size: 13.5px;
}

.verdict-counts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 12px;
}

.verdict-counts b {
  font-size: 17px;
  font-weight: 600;
  margin-right: 6px;
  letter-spacing: -0.01em;
}

.verdict-counts span { color: var(--fg-faint); }

/* ---------- Section frame ---------- */

.section { margin: 0 0 44px; }

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.section-heading h2 {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.section-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-faint);
}

.text-link { font-family: var(--mono); font-size: 12px; }

/* =============================================================
   CORRELATION WALL — the signature element.
   Rows are services, columns are days. A vertical band of colour
   means one upstream failure hit several tools on the same day.
   ============================================================= */

.wall-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  padding: 16px 18px 12px;
}

.wall-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wall-vendor { position: relative; display: inline-flex; max-width: 100%; }
.wall-vendor::after {
  content: "";
  position: absolute;
  right: 14px;
  top: calc(50% - 4px);
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--fg-dim);
  border-bottom: 1.5px solid var(--fg-dim);
  transform: rotate(45deg);
  pointer-events: none;
}
.wall-vendor #provider-trigger {
  appearance: none;
  min-width: 164px;
  max-width: 100%;
  min-height: var(--control-h);
  font: 12.5px var(--mono);
  color: var(--fg);
  background: var(--control-fill, var(--panel));
  border: 1px solid var(--control-line, var(--line));
  border-radius: var(--control-r);
  padding: 7px 34px 7px var(--control-pad-x);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.wall-vendor #provider-trigger:hover { border-color: var(--border-hover, var(--fg-faint)); }

:is(#provider-trigger, #service-search, #waitlist-email, .filter-button, .diagnose-form select, .diagnose-form button, .page-card input, .page-card select, .account-link):focus-visible {
  outline: 1px solid var(--t-watch);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--t-watch) 12%, transparent);
}
:is(#service-search, .filter-button, .diagnose-form select, .diagnose-form button) { min-height: var(--control-h); }

#provider-value { display: flex; align-items: center; gap: 8px; text-align: left; }
.provider-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 18px; width: 18px; height: 18px; background: transparent; overflow: visible; }
.provider-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.provider-icon--mono img { filter: brightness(0) invert(var(--provider-icon-invert, 1)); }
.provider-icon--all { background: transparent; color: var(--fg-dim); padding: 1px; }
.provider-menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: max-content; min-width: 100%; max-width: calc(100vw - 48px); max-height: 320px; overflow-y: auto; padding: 4px; border: 1px solid var(--control-line, var(--line)); border-radius: calc(var(--control-r) + 1px); background: var(--control-fill, var(--panel)); box-shadow: var(--float-shadow); }
.provider-menu[hidden] { display: none; }
.provider-menu [role="option"] { display: flex; width: 100%; gap: 9px; align-items: center; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--fg); text-align: left; font: 12.5px var(--mono); cursor: pointer; }
.provider-menu [role="option"]:hover, .provider-menu [role="option"]:focus-visible { outline: none; background: var(--panel-2); }
.provider-menu [aria-selected="true"] { color: var(--t-op); background: color-mix(in srgb, var(--t-op) 8%, transparent); }

.filter-button {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--fg-dim);
  background: var(--control-fill-muted, var(--panel-2));
  border: 1px solid var(--control-line, var(--line));
  border-radius: var(--control-r);
  padding: 5px 11px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.filter-button:hover { color: var(--fg); border-color: var(--border-hover, #2c3545); }

.filter-button.is-active {
  color: var(--fg);
  border-color: var(--active-border, #33507d);
  background: var(--active-bg, rgba(31, 111, 235, 0.16));
}

/* Two panes, one row per service. They are separate columns rather than one
   grid because the history pane has to scroll horizontally on its own while
   staying on the same rows as the labels and the live strip; a shared grid
   would scroll the labels away with it. Alignment comes from every column
   using the same row height and the same gap. */

.wall-panes {
  position: relative;
  margin-top: 16px;
  --pane-head-h: 24px;
  --pane-gap: 34px;
  --axis-h: 15px;
  --row-h: max(18px, var(--cell-w));
  --wall-row-gap: var(--cell-gap);
  display: flex;
  align-items: flex-start;
  /* The two panes are different instruments on different time scales. A tight
     gutter made them read as one grid with an odd seam; the wide one plus the
     rule below says "these are two things" before anything is read. */
  gap: var(--pane-gap);
}

.wall-labels {
  flex: none;
  width: var(--label-w);
  display: flex;
  flex-direction: column;
  gap: var(--cell-gap);
}

/* Spacer standing in for the pane head plus its axis, so row 1 of the labels
   lines up with row 1 of both charts. */
.wall-labels-head {
  position: relative;
  height: calc(var(--pane-head-h) + var(--cell-gap) + var(--axis-h));
  flex: none;
}

/* Per-pane labels start at the pane body, below the head, so their spacer
   only covers the axis row. */
.wall-labels-axis {
  position: relative;
  height: calc(var(--axis-h) + var(--cell-gap));
  flex: none;
}

.wall-labels-caption {
  position: absolute;
  left: 0;
  top: 0;
  height: var(--axis-h);
  font: 10px var(--mono);
  color: var(--fg-faint);
}
.wall-labels-head .wall-labels-caption {
  top: calc(var(--pane-head-h) + var(--cell-gap));
}

.wall-pane {
  display: flex;
  flex-direction: column;
  gap: var(--cell-gap);
  min-width: 0;
}

.wall-pane--live { flex: 0 1 clamp(132px, 26%, 300px); }

/* The pane body wraps the per-pane label column and the viewport. Desktop
   keeps the single shared label column outside the panes, so the wrapper and
   the per-pane labels vanish from the box tree entirely. */
.wall-pane-body { display: contents; }
.wall-labels--pane { display: none; }

.wall-pane--history {
  --history-edge: 18px;
  flex: 1 1 auto;
  position: relative;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}

/* Live is a moving trace; history is a record. The badge blinks like an
   instrument that is receiving, and only the live head carries it. */
.wall-pane-title { display: inline-flex; align-items: center; gap: 6px; }

/* Square-wave blink: an instrument that is receiving, not fading. */
@keyframes fx-blink {
  0%, 49% { opacity: var(--blink-opacity, 0.7); }
  50%, 100% { opacity: 0; }
}

.wall-pane--live .wall-pane-title::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--t-op);
}

.brand-mark,
.wall-pane--live .wall-pane-title::before {
  animation: fx-blink 1.4s steps(2, end) infinite;
}

.wall-pane--live .wall-pane-title { color: var(--t-op); }

/* An affordance that lies is worse than none: the grab cursor, the hint and
   the fade only appear once there is actually something off-screen. */
.wall-pane--history .wall-viewport { cursor: default; }
.wall-pane--history.is-scrollable .wall-viewport { cursor: grab; }
.wall-pane--history.is-scrollable .wall-viewport.is-dragging { cursor: grabbing; user-select: none; }
.wall-pane--history:not(.is-scrollable) .wall-drag-hint { display: none; }

.wall-drag-hint {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--t-watch);
  text-transform: none;
  letter-spacing: 0;
}

.wall-drag-hint::before { content: "↔"; font-size: 12px; }

/* The edge gutters keep the first and latest day outside the fading area.
   A mask follows the viewport on both desktop and stacked mobile layouts. */
#wall-grid { padding-inline: var(--history-edge); }
.wall-pane--history.is-scrollable .wall-viewport {
  mask-image: linear-gradient(to right, transparent, #000 var(--history-edge), #000 calc(100% - var(--history-edge)), transparent);
}

.wall-pane-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  height: var(--pane-head-h);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
}

/* Let the live header span the service-label column on desktop. The body
   stays in its own column, so cells and time ticks keep their alignment. */
@media (min-width: 621px) {
  .wall-panes::before {
    content: "";
    position: absolute;
    top: calc(var(--pane-head-h) - 1px);
    left: 0;
    right: 0;
    border-top: 1px solid var(--line-soft);
    pointer-events: none;
  }
  .wall-pane--live .wall-pane-head {
    margin-left: calc(-1 * (var(--label-w) + var(--pane-gap)));
  }
}

.wall-pane-title { color: var(--fg-dim); }
.wall-pane-note { color: var(--fg-faint); text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; }

.wall-viewport { min-width: 0; }

/* Live: the newest cell is pinned to the right edge and older ones slide out of
   view on the left. No scrollbar — the strip is a now-instrument, and its past
   is what the pane next to it is for. */
.wall-pane--live .wall-viewport { overflow: hidden; }
.wall-pane--live .wall { margin-left: auto; }

/* History: drag, wheel or keyboard. The native scrollbar is hidden — a thin
   gray rounded bar is the one element on the page that speaks neither pixel
   nor bevel, and drag + wheel + arrows + the fade/hint already carry the
   affordance; overflow-x stays auto so wheel and keyboard keep working. */
.wall-pane--history .wall-viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.wall-pane--history .wall-viewport:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--t-watch);
}

/* Chart explanation in the toolbar, available on hover or keyboard focus.
   A real button, so it is tabbable and announced; aria-describedby carries
   the text for screen readers with no tooltip involved. */
.pane-info {
  flex: none;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--panel-2, var(--panel));
  color: var(--fg-faint);
  font: 600 9px var(--mono);
  line-height: 1;
  cursor: help;
}
.pane-info:hover { color: var(--fg-dim); border-color: var(--border-hover, #2c3545); }

/* Screen-reader-only text: visible to AT, invisible to the pixel surface. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.wall {
  display: flex;
  flex-direction: column;
  gap: var(--wall-row-gap, var(--cell-gap));
  width: max-content;
}

.wall-axis {
  display: grid;
  gap: var(--cell-gap);
  height: var(--axis-h);
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-faint);
}
.wall-axis span { grid-row: 1; width: max-content; white-space: nowrap; }

.wall-label.is-upstream b { color: var(--fg-dim); font-weight: 400; }
.wall-label.is-upstream { opacity: 0.82; }

.wall-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: var(--row-h);
  min-width: 0;
  font-size: 12.5px;
  color: var(--fg-dim);
}

.wall-label > .provider-icon { width: 14px; height: 14px; flex-basis: 14px; }
.wall-label b {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wall-row {
  display: grid;
  align-items: center;
  gap: var(--cell-gap);
  height: var(--row-h);
}

/* The row is as tall as its label so the three columns stay in step, but the
   cell itself keeps the pitch it was measured for — a square, not a slab. */
.wall-row .cell { height: var(--cell-w); }

/* A new interval arrived: the strip steps left by exactly one cell. */
@keyframes fx-live-advance {
  from { transform: translateX(calc(var(--cell-w) + var(--cell-gap))); }
  to { transform: translateX(0); }
}

.wall-pane--live .wall.is-advancing { animation: fx-live-advance 0.36s steps(4, end); }

@media (max-width: 620px) {
  /* Phones stack the two walls: live on one full-width row, the 30-day wall
     on the next. Side by side at 375px the day wall got under 100px, which is
     where drag sideways stopped being a consolation and started being the
     only way to read anything. Each stacked pane carries its own label column
     (app.js fills it only while this query matches) because the shared column
     cannot align with two tables at once. */
  /* Row direction used flex-start for the cross (vertical) axis. Stacked, the
     cross axis is horizontal and flex-start sizes each pane to its content —
     the 30-day wall is ~430px of cells, the pane overflows the card, and the
     viewport ends up exactly as wide as its content, so nothing is scrollable
     and the drag affordance switches itself off. Stretch puts the pane back
     at card width and the overflow back inside the viewport. */
  .wall-panes { flex-direction: column; align-items: stretch; gap: 20px; }
  .wall-pane-head { border-bottom: 1px solid var(--line-soft); }
  #wall-labels { display: none; }
  .wall-pane { flex: none; }
  .wall-pane-body { display: flex; gap: 8px; align-items: flex-start; }
  .wall-pane-body .wall-viewport { flex: 1 1 auto; min-width: 0; }
  .wall-labels--pane { display: flex; }
  /* The live strip bleeds edge to edge on a phone: dead space beside a
     "now" instrument reads as missing data. The 1fr track comes from app.js;
     these two lines give it a full-width box and undo the desktop right pin. */
  .wall-pane--live .wall { width: 100%; margin-left: 0; }
  /* The rule between the panes separated columns; stacked, it would be a
     border running down the middle of a table. */
  .wall-pane--history { padding-left: 0; border-left: 0; }
  /* The pane heads carry their explanation in the readout and the foot line
     too, so on a phone they give their width to the cells instead of showing
     half a truncated sentence. */
  .wall-pane-note { display: none; }
  /* Every pixel reclaimed from chrome is a pixel of scrollable day wall. */
  .wall-card { padding: 14px 14px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .wall-pane--live .wall.is-advancing { animation: none; }
}

.cell {
  height: 100%;
  min-height: 8px;
  border-radius: 2px;
  background: var(--c-nodata);
  transition: transform 0.1s ease, filter 0.1s ease;
}

.cell[data-state="operational"] { background: var(--c-op); }
.cell[data-state="watch"] { background: var(--c-watch); }
.cell[data-state="maintenance"] { background: var(--c-maint); }
.cell[data-state="degraded"] { background: var(--c-degraded); }
.cell[data-state="partial_outage"] { background: var(--c-partial); }
.cell[data-state="major_outage"] {
  background: var(--c-major);
  box-shadow: 0 0 6px rgba(218, 54, 51, 0.45);
}
.cell[data-state="unknown"],
.cell[data-state="no_data"] {
  background: var(--c-nodata);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

/* Bloom belongs to the states that mean something is wrong. Two cells pulsing
   on an otherwise still wall is a pointer; a wall where everything pulses is
   wallpaper. */
@keyframes fx-alarm {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}

.cell[data-state="major_outage"],
.cell[data-state="partial_outage"] {
  animation: fx-alarm 1.9s steps(6, end) infinite;
}

.cell.is-col {
  filter: brightness(1.65);
}

.cell.is-now { box-shadow: inset 0 0 0 1px rgba(230, 233, 240, 0.6); }

.wall-legend {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
}

.wall-legend .swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--c-nodata);
}

/* Entries are swatch + label pairs, so each one wraps as a unit and can't
   shed its swatch onto another line. Separation between entries stays at the
   old 8px on top of the container gap; inside, the 7px gap is unchanged. */
.wall-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.wall-legend .legend-item + .legend-item { margin-left: 8px; }

/* ---------- Controls ---------- */

.controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.search-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The suggestion list hangs off the box, not off .controls, so the input can
   keep its flex behaviour while the list anchors to its edges. */
.search-box {
  position: relative;
  flex: 1 1 220px;
  min-width: 180px;
  display: flex;
}
.search-box #service-search { flex: 1; min-width: 0; padding-left: 34px; }
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--fg-faint); pointer-events: none; }

.search-suggest {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  z-index: 25;
  max-height: 224px;
  overflow-y: auto;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg-dim);
  background: var(--control-fill, var(--panel));
  border: 1px solid var(--control-line, var(--line));
  border-radius: calc(var(--control-r) + 1px);
  /* The one floating layer in the controls row. */
  box-shadow: var(--float-shadow);
}
.suggest-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.suggest-item:last-child { border-bottom: 0; }
.suggest-item:hover,
.suggest-item.is-active,
.suggest-item:focus-visible { color: var(--fg); background: var(--panel); outline: none; }

#service-search {
  flex: 1 1 220px;
  min-width: 180px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg);
  background: var(--control-fill, var(--panel));
  border: 1px solid var(--control-line, var(--line));
  border-radius: var(--control-r);
  padding: 8px var(--control-pad-x);
}
#service-search::placeholder { color: var(--fg-faint); }

.filter-group { display: flex; gap: 6px; }

/* ---------- Service cards ---------- */

.service-grid {
  display: grid;
  /* min() caps the floor at the container's own width: under 300px of usable
     space (a 320px phone minus gutters) the card must shrink, not overflow. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 12px;
}

/* Sits between live and seed cards as a full-width row in the auto-fill grid.
   Cancels the h3 default weight so it reads at the same volume as .eyebrow. */
.service-group-head {
  grid-column: 1 / -1;
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  padding: 15px 16px;
  transition: border-color 0.15s, background 0.15s;
}

.service-card:hover { border-color: #2c3545; background: var(--panel-2); }

.card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.provider-name {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Link to the provider's own status page. Muted affordance, not a button: it
   carries the card's metadata colour until pointed at, same voice as the name. */
.provider-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  vertical-align: middle;
  margin-left: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  text-decoration: none;
}
.external-link-icon { flex: none; }
.provider-status:hover {
  color: var(--fg);
  text-decoration: underline;
}

.service-name { display: flex; align-items: center; gap: 8px; }
.service-name .provider-icon { width: 22px; height: 22px; flex-basis: 22px; }
.service-card h3 {
  margin: 2px 0 0;
  font-size: 16px;
  font-weight: 600;
}

.service-card p {
  margin: 0;
  font-size: 12.5px;
  color: var(--fg-dim);
}

.spark {
  display: grid;
  gap: 2px;
  height: 20px;
}
.service-card > .spark { margin-top: auto; flex-shrink: 0; }
.spark .cell { height: 100%; min-width: 0; padding: 0; border: 0; border-radius: 2px; cursor: pointer; }
/* A quiet inset edge and diffuse halo keep the small cells from looking like
   raised buttons. Only unobserved cells get a translucent fill. */
.spark .cell:hover, .spark .cell:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg-dim) 40%, transparent),
    0 0 8px color-mix(in srgb, var(--fg-dim) 20%, transparent);
}
.spark .cell:focus-visible {
  outline: 1px solid color-mix(in srgb, var(--fg-dim) 55%, transparent);
  outline-offset: 1px;
}
.spark .cell:is([data-state="unknown"], [data-state="no_data"]):is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--c-nodata) 70%, var(--fg-dim) 16%);
}

.spark-caption {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--fg-faint);
}

/* The two evidence rows on each card: official word and independent probes,
   never merged into one colour. Plain mono rows like the spark caption;
   state words carry the existing state colours, no new palette. */
.card-sources {
  display: grid;
  gap: 4px;
  margin: 4px 0 2px;
}
.source-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--fg-dim);
}
.source-line small { font-family: var(--mono); font-variant-numeric: tabular-nums; margin-left: auto; font-size: 11px; line-height: 1.5; color: var(--fg-faint); }
.source-tag {
  min-width: 34px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.source-line b { font-weight: 600; }

.probe-lede {
  margin-top: 10px;
  color: var(--dim);
  font: 12px/1.7 var(--mono);
}
.probe-lede[data-tone="warn"] { color: var(--fg); font-weight: 600; }
.probe-lede[data-tone="warn"]::before { content: "! "; color: var(--t-partial); }
.probe-countries { display: grid; gap: 6px; padding: 2px 0 6px; font-size: 12px; line-height: 1.6; }
.probe-country { display: grid; grid-template-columns: 20px 16px 64px 16px minmax(0, 1fr); gap: 2px 8px; align-items: center; min-height: 24px; }
.probe-country-flag { font-size: 16px; line-height: 1; }
.probe-detail-icon { width: 16px; height: 16px; color: var(--fg-dim); }
.probe-country-count, .probe-country-latency { white-space: nowrap; font-variant-numeric: tabular-nums; }
.probe-country-count { color: var(--fg-dim); }
.probe-country-count b { color: var(--t-op); font-weight: 600; }
.probe-country-latency b { font-weight: 500; }
.probe-country-latency { color: var(--fg-dim); font-family: var(--mono); }
.probe-country-warning { grid-column: 2 / -1; }
.probe-tone--op { color: var(--t-op); }
.probe-tone--degraded { color: var(--t-degraded); }
.probe-tone--partial { color: var(--t-partial); }
.probe-tone--major { color: var(--t-major); }
.probe-tone--faint { color: var(--fg-dim); font-weight: 400 !important; }

.card-note {
  margin-top: 4px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.5;
}
.card-note--warn { color: var(--fg); background: rgba(210, 153, 34, 0.08); border-color: rgba(210, 153, 34, 0.3); }
.card-note--info { color: var(--fg); background: rgba(88, 166, 255, 0.08); border-color: rgba(88, 166, 255, 0.28); }

/* ---------- Status pills ---------- */

.pill {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
}

.pill.operational { color: var(--t-op); background: rgba(63, 185, 80, 0.1); border-color: rgba(63, 185, 80, 0.28); }
.pill.watch { color: var(--t-watch); background: rgba(88, 166, 255, 0.1); border-color: rgba(88, 166, 255, 0.28); }
.pill.maintenance { color: var(--t-maint); background: rgba(163, 113, 247, 0.1); border-color: rgba(163, 113, 247, 0.28); }
.pill.degraded { color: var(--t-degraded); background: rgba(210, 153, 34, 0.1); border-color: rgba(210, 153, 34, 0.3); }
.pill.partial_outage { color: var(--t-partial); background: rgba(240, 136, 62, 0.1); border-color: rgba(240, 136, 62, 0.3); }
.pill.major_outage { color: var(--t-major); background: rgba(248, 81, 73, 0.1); border-color: rgba(248, 81, 73, 0.3); }
.pill.unknown { color: var(--fg-faint); background: rgba(139, 149, 168, 0.08); border-color: var(--line); }

/* ---------- Incidents + insights ---------- */

.timeline {
  --incident-rail-width: 64px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--incident-rail-width) + 16px);
  border-left: 1px solid var(--line);
}
.incident-row { position: relative; display: grid; grid-template-columns: var(--incident-rail-width) minmax(0, 1fr); gap: 32px; align-items: start; }
.incident-side { display: grid; justify-items: end; gap: 10px; padding-top: 14px; text-align: right; }
.incident-date { display: flex; justify-content: flex-end; align-items: center; gap: 6px; font: 12px/1.6 var(--mono); color: var(--fg-dim); white-space: nowrap; }
.incident-products { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
.incident-product { display: inline-flex; }
.incident-item { position: relative; min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 14px 16px; }
.incident-marker { position: absolute; left: calc(var(--incident-rail-width) + 11.5px); top: 19px; width: 10px; height: 10px; border-radius: 2px; background: var(--c-nodata); box-shadow: 0 0 0 3px var(--bg); }
.incident-marker[data-state="operational"] { background: var(--c-op); }
.incident-marker[data-state="watch"] { background: var(--c-maint); }
.incident-marker[data-state="maintenance"] { background: var(--c-maint); }
.incident-marker[data-state="degraded"] { background: var(--c-degraded); }
.incident-marker[data-state="partial_outage"] { background: var(--c-partial); }
.incident-marker[data-state="major_outage"] { background: var(--c-major); }
@media (max-width: 620px) {
  .timeline { --incident-rail-width: 56px; }
  .incident-date { font-size: 11px; }
  .incident-item { padding: 12px; }
}

.incident-item h3 { margin: 0; font-size: 14px; font-weight: 500; }

.incident-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
  font-family: var(--mono);
  font-size: 10.5px;
}

.incident-meta span {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 8px;
  color: var(--fg-dim);
}

.incident-item p { margin: 0 0 8px; font-size: 12.5px; color: var(--fg-dim); }
.incident-item p strong { color: var(--fg); font-weight: 600; }
.incident-item a { font-family: var(--mono); font-size: 11.5px; }

/* ---------- Diagnose ---------- */

.diagnose {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, var(--panel), #0e1219);
  padding: 20px 22px;
}

.diagnose > div > p {
  margin: 8px 0 0;
  max-width: 62ch;
  color: var(--fg-dim);
  font-size: 13px;
}

.diagnose h2 {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.diagnose-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  align-items: end;
  margin: 18px 0 0;
}

.diagnose-form label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.diagnose-form select {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--fg);
  background: var(--control-fill-muted, var(--panel-2));
  border: 1px solid var(--control-line, var(--line));
  border-radius: var(--control-r);
  padding: 9px var(--control-pad-x);
  text-transform: none;
  letter-spacing: 0;
}

.diagnose-form button {
  font-family: var(--mono);
  font-size: 12.5px;
  color: #06110a;
  background: var(--t-op);
  border: 0;
  border-radius: var(--control-r);
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.diagnose-form button:hover { filter: brightness(1.12); }

.diagnose-result {
  display: block;
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--t-watch);
  border-radius: 8px;
  background: rgba(31, 111, 235, 0.07);
  font-size: 13px;
  color: var(--fg-dim);
}

.diagnose-result strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: var(--fg);
  font-weight: 600;
}

.diagnose-result small {
  display: block;
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--fg-faint);
}

.diagnose-result small a { color: var(--t-watch); }

/* ---------- Footer + tooltip ---------- */

footer {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 20px var(--gut) 40px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--fg-faint);
}

.footer-credit { text-align: center; line-height: 1.8; }
.footer-credit a { white-space: nowrap; color: var(--fg-dim); text-underline-offset: 3px; }
.footer-credit a:hover { color: var(--fg); }

#tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%);
  width: max-content;
  background: rgb(27 33 48 / var(--tip-alpha));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--tip-border, #2c3545);
  border-radius: var(--control-r);
  padding: 7px 10px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--fg);
  box-shadow: var(--float-shadow);
  /* Long explanations (the live info marker) wrap; short cell tooltips are
     unaffected. The cap keeps the box inside any viewport, which the old
     nowrap made impossible. */
  max-width: min(420px, calc(100vw - 24px));
  transition: opacity 0.1s;
}

#tip[data-kind="wall"] { max-width: min(680px, calc(100vw - 24px)); }
#tip[data-kind="wall"] u + u { margin-top: 4px; }
#tip.on { opacity: 1; }
#tip u { display: block; text-decoration: none; color: var(--fg-dim); }

noscript {
  display: block;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--gut);
  color: var(--t-degraded);
  font-size: 13px;
}

/* =============================================================
   Phone pass (≤620px). Only what a 320–414px viewport actually
   breaks or cheapens: crowded controls, iOS focus zoom, and tap
   targets sized for a mouse.
   ============================================================= */
@media (max-width: 620px) {
  /* The 180px search box plus three filter chips exceeded 375px and cut the
     last chip off; stacking the row costs one line and loses nothing. */
  .search-box { flex: 1 1 100%; min-width: 0; }
  .filter-group { flex-wrap: wrap; }

  /* iOS Safari zooms the page when a focused field is under 16px and never
     zooms back — the one reflex that makes a dense dashboard feel broken.
     Text-size-adjust alone does not stop it; the font size does. */
  #service-search,
  .wall-vendor #provider-trigger,
  .diagnose-form select { font-size: 16px; }

  /* Fingers, not cursors. */
    .filter-button { padding: 8px 12px; }
  .suggest-item { padding: 10px 12px; }
  .wall-vendor #provider-trigger { padding: 8px 34px 8px 12px; }

  .verdict { padding: 20px 18px 18px; }
  .diagnose { padding: 18px 16px; }

  /* The stacked controls row is taller, so let the box breathe. */
  .controls { gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

#overall-detail:empty { display: none; }

.incident-pagination { display: grid; justify-items: center; gap: 8px; margin-top: 16px; }
.incident-pagination button { min-height: var(--control-h); padding: 8px 20px; }
.incident-pagination button:disabled { cursor: wait; opacity: .65; }
#incidents-load-status { margin: 0; color: var(--fg-dim); font-size: 12px; }
#incidents-load-status:empty { display: none; }

.waitlist-dialog { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--fg); box-shadow: var(--float-shadow); }
.waitlist-dialog::backdrop { background: rgb(0 0 0 / 38%); backdrop-filter: blur(4px); }
.waitlist-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.waitlist-heading h2 { margin: 0; font-size: 18px; font-weight: 600; }
.waitlist-close { width: 28px; height: 28px; flex: none; border: 0; border-radius: var(--control-r); background: transparent; color: var(--fg-dim); font-size: 24px; cursor: pointer; }
.waitlist-close:hover { background: var(--panel-2); color: var(--fg); }
#waitlist-description { margin: 12px 0 20px; color: var(--fg-dim); font-size: 13px; }
.waitlist-dialog label { display: block; margin-bottom: 6px; font-size: 12px; color: var(--fg-dim); }
#waitlist-email { width: 100%; min-height: var(--control-h); padding: 9px var(--control-pad-x); border: 1px solid var(--control-line); border-radius: var(--control-r); background: var(--control-fill); color: var(--fg); font: 14px var(--mono); }
#waitlist-feedback { min-height: 20px; margin: 10px 0; font-size: 12px; color: var(--fg-dim); }
#waitlist-feedback[data-tone="success"] { color: var(--t-op); }
#waitlist-feedback[data-tone="error"] { color: var(--t-major); }
.waitlist-actions { display: flex; justify-content: flex-end; gap: 8px; }
.waitlist-confirm { color: var(--t-op); border-color: var(--t-op); }
.waitlist-confirm:disabled { cursor: wait; opacity: .65; }
@media (max-width: 620px) { #waitlist-email { font-size: 16px; } }

.diagnose-form select:disabled { opacity: .65; cursor: not-allowed; }

/* Soft bottom falloff shared by the site and native card surfaces. */
:is(.verdict, .wall-card, .service-card, .incident-item, .diagnose) {
  box-shadow: var(--card-shadow);
}

.incident-item .incident-title-link { color: inherit; font: inherit; text-decoration: none; }
.incident-item .incident-title-link:hover, .incident-item .incident-title-link:focus-visible { color: var(--t-watch); text-decoration: underline; text-underline-offset: 3px; }
.incident-title-link .external-link-icon { display: inline-block; vertical-align: -1px; }

/* ---------- Account navigation and focused task pages ---------- */
/* The chips (.lang-toggle/.theme-toggle/.account-link) keep the sizing from
   theme-light.css: 22px tall, 10.5px mono, uppercase. The account-page polish
   once overrode them to 44px here and moved the primary nav onto its own row
   between 621 and 980px; both were rejected by the owner, so the header lays
   out exactly as before: brand, nav pushed right, then the chips. */
.topbar--page .brand { margin-right: auto; }
.account-nav { display: flex; align-items: center; gap: 6px; flex: none; }
/* Session visibility is invariant: theme chips and mobile secondary-link
   display rules must never bring a hidden signed-out link back. */
.account-nav [hidden] { display: none !important; }
.topbar .account-link { text-decoration: none; color: var(--fg); }
.topbar .account-link:hover { text-decoration: none; border-color: var(--border-hover); }
.topbar .account-link.is-secondary { color: var(--fg-dim); }
.topbar .account-link[aria-current="page"] {
  color: var(--fg);
  background: var(--active-bg);
  border-color: var(--active-border);
}
/* A nickname is wider than a masked address and is not monospaced; the chip
   grows to fit one but is capped so it can never push the brand out of the bar. */
.account-identity { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px var(--mono); color: var(--fg-dim); }
.settings-name { display: grid; gap: 6px; margin-top: 20px; }
.settings-name-label { font-size: 13px; color: var(--fg-dim); }
.settings-name-input { width: 100%; max-width: 320px; padding: 10px 12px; font: inherit; color: var(--fg); background: var(--control-fill, var(--panel)); border: 1px solid var(--line); border-radius: var(--control-r); }
.settings-name-input[aria-invalid="true"] { border-color: var(--t-major); }
.settings-name .page-actions { align-items: center; gap: 12px; margin-top: 4px; }

body[data-page] { --account-control-line: color-mix(in srgb, var(--fg-dim) 75%, var(--control-fill)); min-height: 100svh; display: flex; flex-direction: column; }
body[data-page] .topbar { width: 100%; }
.skip-link { position: fixed; top: 8px; left: 12px; z-index: 100; padding: 12px 16px; background: var(--panel); color: var(--fg); border: 1px solid var(--t-watch); border-radius: var(--control-r); transform: translateY(-180%); }
.skip-link:focus { transform: none; }
.page { display: grid; align-content: start; gap: 24px; width: 100%; max-width: 620px; flex: 1; margin: 0 auto; padding: 40px var(--gut) 64px; }
.page--wide { max-width: 900px; }
.page-back { justify-self: start; font-size: 13px; color: var(--fg-dim); text-underline-offset: 4px; padding: 4px 0; }
.page-card { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 28px; }
.auth-card { padding: 32px; }
.page-heading { padding: 0 2px 4px; }
.page-title { margin: 0; font-size: clamp(26px, 4vw, 32px); line-height: 1.2; font-weight: 650; letter-spacing: -.025em; text-wrap: balance; }
.page-subtitle { margin: 0 0 18px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.page-lede { margin: 12px 0 0; color: var(--fg-dim); font-size: 15px; line-height: 1.65; overflow-wrap: anywhere; text-wrap: pretty; }
.page-note { margin: 8px 0 0; color: var(--fg-dim); font-size: 13px; line-height: 1.6; }
.page-switch { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--line); color: var(--fg-dim); font-size: 14px; }
.page-switch a { font-weight: 500; }
.auth-progress { display: flex; gap: 24px; margin: 0 0 28px; padding: 0; list-style: none; }
.auth-progress li { display: flex; align-items: center; gap: 8px; color: var(--fg-dim); font-size: 13px; }
.auth-step-index { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; font: 12px var(--mono); }
.auth-progress [aria-current="step"] { color: var(--fg); font-weight: 600; }
.auth-progress [aria-current="step"] .auth-step-index { color: var(--t-watch); border-color: var(--t-watch); background: var(--active-bg); }
.auth-progress [data-complete="true"] .auth-step-index { color: var(--t-op); border-color: var(--t-op); }

.page-card .field { margin: 24px 0 0; }
.page-card .field label { display: block; margin-bottom: 8px; color: var(--fg); font-size: 14px; font-weight: 500; }
.page-card input:is([type="email"], [type="text"], [type="time"]), .page-card select {
  width: 100%; min-width: 0; min-height: 48px; padding: 11px 14px;
  border: 1px solid var(--account-control-line); border-radius: var(--control-r);
  background: var(--control-fill); color: var(--fg); font: 16px/1.5 var(--sans);
  caret-color: var(--t-watch); scroll-margin-top: 120px;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}
.page-card input::placeholder { color: var(--fg-faint); opacity: 1; }
.page-card input:read-only { color: var(--fg-dim); background: var(--control-fill-muted); }
.page-card input[aria-invalid="true"], .page-card select[aria-invalid="true"] { border-color: var(--t-major); }
.page-card #auth-code { min-height: 64px; font: 500 clamp(24px, 5vw, 32px)/1.4 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .42em; text-indent: .42em; text-align: center; }
.field-hint { margin: 10px 0 0; color: var(--fg-dim); font-size: 13px; line-height: 1.6; }
#auth-feedback, #notify-status, #notify-save-feedback { margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--fg-dim); overflow-wrap: anywhere; }
#auth-feedback:empty, #notify-status:empty { margin: 0; }
:is(#auth-feedback, #notify-status, #notify-save-feedback)[data-tone="success"] { color: var(--t-op); }
:is(#auth-feedback, #notify-status, #notify-save-feedback)[data-tone="error"] { color: var(--t-major); }
.page-countdown { margin: 8px 0 0; color: var(--fg); font: 13px/1.6 var(--mono); font-variant-numeric: tabular-nums; }
.page-countdown[hidden] { display: none; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 20px; }
.page-actions button, .page-card .filter-button { min-height: 44px; padding: 10px 16px; font: 500 14px/1.4 var(--sans); text-transform: none; letter-spacing: 0; white-space: normal; }
.page-actions button { transition: background-color 160ms ease-out, border-color 160ms ease-out; }
.page-actions button:disabled, .page-card button:disabled { cursor: not-allowed; opacity: .6; }
.page-card .filter-button:not(.waitlist-confirm) { border-color: var(--account-control-line); }
.page-card button[aria-busy="true"] { opacity: 1; cursor: progress; }
.page-actions .waitlist-confirm { background: var(--t-op); border-color: var(--t-op); color: var(--btn-fg); font-weight: 650; }
.page-actions .waitlist-confirm:not(:disabled):hover { filter: brightness(1.08); }
.auth-actions #auth-submit { width: 100%; min-height: 48px; justify-content: center; }
.auth-secondary-actions { gap: 8px; margin-top: 12px; }
.auth-secondary-actions button { flex: 1 1 140px; padding: 10px 8px; font-size: 13px; }
.auth-secondary-actions button[hidden] { display: none; }
.auth-secondary-actions:not(:has(button:not([hidden]))) { display: none; }
.page-card button[aria-busy="true"]::before { content: ""; display: inline-block; width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; margin-right: 8px; vertical-align: -2px; animation: account-spin .8s linear infinite; }
@keyframes account-spin { to { transform: rotate(360deg); } }

.settings-account { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 24px; }
.settings-account .page-subtitle { grid-column: 1 / -1; margin: 0; }
.settings-facts { grid-column: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 20px; margin: 0; }
.settings-facts dt { color: var(--fg-dim); font-size: 13px; align-self: baseline; }
.settings-facts dd { margin: 0; font: 13px/1.65 var(--mono); color: var(--fg); overflow-wrap: anywhere; }
.settings-account .notify-hint { grid-column: 1; margin: 0; }
.settings-account .page-actions { grid-column: 2; grid-row: 2 / span 2; margin: 0; align-self: center; }
.notify-fields { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.notify-fields[hidden] { display: none; }
.notify-group { min-inline-size: 0; margin: 24px 0 0; padding: 0 0 24px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.notify-fields > .notify-group:first-child { margin-top: 8px; }
#notify-error-services:not(:empty) { margin: 0 0 12px; }
.notify-group legend { margin-bottom: 12px; padding: 0; color: var(--fg); font-size: 14px; font-weight: 600; }
.notify-bulk { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.notify-services { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; max-height: 340px; padding: 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.notify-vendor { min-width: 0; }
.notify-vendor-name { margin: 0 0 8px; color: var(--fg-dim); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.page-card label.notify-check { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 4px 0 0; padding: 9px 10px; border: 1px solid transparent; border-radius: var(--control-r); color: var(--fg); font-size: 14px; line-height: 1.5; cursor: pointer; }
.notify-check:has(input:checked) { background: var(--active-bg); border-color: var(--active-border); }
.notify-check:hover { background: var(--control-fill-muted); }
.notify-check input { width: 18px; height: 18px; margin: 0; flex: none; accent-color: var(--t-watch); }
.notify-check:has(input:disabled) { cursor: not-allowed; color: var(--fg-dim); }
.notify-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.notify-options--channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.notify-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.notify-time-field { min-width: 0; }
.page-card .notify-row label, .page-card label[for="notify-quiet-timezone"] { display: block; margin-bottom: 8px; color: var(--fg-dim); font-size: 13px; }
.notify-hint { margin: 10px 0 0; color: var(--fg-dim); font-size: 13px; line-height: 1.6; }
.notify-error { margin: 10px 0 0; color: var(--t-major); font-size: 13px; line-height: 1.6; }
.notify-error:empty { margin: 0; }
#notify-retry { margin-top: 16px; }
.settings-save { justify-content: space-between; gap: 16px; margin-top: 24px; }
.settings-save .notify-hint { margin: 0; }
#notify-save-feedback { flex: 1 1 200px; margin: 0; }
#notify-save-feedback:empty, #notify-save-note[hidden] { display: none; }
#notify-save { min-width: 140px; }
body[data-page] footer { width: 100%; margin-top: auto; padding-bottom: max(28px, env(safe-area-inset-bottom)); }
body[data-page] .footer-credit { line-height: 1.8; text-wrap: balance; }
.waitlist-actions { flex-wrap: wrap; }

@media (max-width: 980px) and (min-width: 621px) {
  .account-identity { display: none; }
  section[id] { scroll-margin-top: 124px; }
}
@media (max-width: 620px) {
  .topbar { gap: 8px; }
  .account-nav { margin-left: auto; gap: 4px; }
  .account-nav .is-secondary, .account-identity { display: none; }
  body[data-page="auth"] .account-nav .is-secondary { display: inline-flex; }
  body[data-page="auth"] .account-nav [aria-current="page"] { display: none; }
  .page { padding-top: 24px; padding-bottom: 40px; gap: 20px; }
  .page-card { padding: 22px 18px; }
  .auth-progress { gap: 20px; margin-bottom: 24px; }
  .page-title { font-size: 28px; }
  .page-lede { font-size: 14px; }
  .settings-account { display: block; }
  .settings-account .page-subtitle { margin-bottom: 16px; }
  .settings-account .notify-hint { margin-top: 12px; }
  .settings-account .page-actions { margin-top: 16px; }
  .settings-facts { gap: 8px 14px; }
  .notify-services { grid-template-columns: 1fr; max-height: 310px; }
  .notify-options, .notify-row { grid-template-columns: 1fr; }
  .settings-save { align-items: stretch; }
  .settings-save #notify-save { width: 100%; }
  .settings-save .notify-hint { width: 100%; }
  section[id] { scroll-margin-top: 124px; }
}
@media (prefers-reduced-motion: reduce) {
  .page-card button[aria-busy="true"]::before { animation: none; }
  .page-card input, .page-actions button { transition: none; }
}


/* Settings uses the dashboard's flat panel and compact metadata language.
   Scoped below the top bar: its chip sizing and layout remain independent. */
.settings-page { gap: 16px; padding-top: 24px; }
.settings-page .page-card { padding: 16px 18px; border-radius: 12px; box-shadow: var(--card-shadow); }
.settings-heading-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.settings-page .page-title { font: 600 20px/1.4 var(--sans); letter-spacing: -.01em; }
.settings-page .page-back { margin: 0; font: 11px/1.5 var(--mono); letter-spacing: .04em; }
.settings-page .page-lede { margin-top: 8px; font-size: 13px; }
.settings-page .page-subtitle { margin-bottom: 16px; font: 500 12px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-dim); }
.settings-page .notify-group legend { font: 500 12px/1.5 var(--mono); letter-spacing: .04em; }
.settings-page .notify-vendor-name { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font: 500 11px/1.5 var(--mono); letter-spacing: .04em; color: var(--fg-dim); }
.settings-page .notify-vendor-name > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.settings-page .notify-services { gap: 20px 24px; padding: 4px; }
.settings-page label.notify-check { border: 0; border-radius: 0; margin: 0; padding: 7px 4px; font-size: 13px; }
.settings-page .notify-check:has(input:checked) { background: transparent; }
.settings-page .notify-check:hover { background: var(--panel-2); }
.settings-page .notify-check:focus-within { outline: 2px solid var(--t-watch); outline-offset: -2px; }
.settings-page .notify-check input { width: 16px; height: 16px; accent-color: var(--fg-dim); }
.settings-page .notify-check > span { min-width: 0; overflow-wrap: anywhere; }
.settings-page .notify-bulk { gap: 6px; margin-bottom: 12px; }
.settings-page .notify-bulk .filter-button { min-height: 32px; padding: 6px 10px; border-color: var(--line); font: 11px/1.5 var(--mono); }
@media (max-width: 620px) {
  .settings-page .page-card { padding: 14px; }
  .settings-page .notify-options { gap: 0; }
}