/*
 * Lullops. Shared styles for the home and pricing pages.
 * Night by default at night, dawn paper by day. Every color token is written
 * once with light-dark(); the theme is the color-scheme on <html>.
 */

/* ---------- Fonts ----------
 * Both are variable fonts from Google Fonts (OFL), cut down to the ~140 glyphs
 * and the 400 to 700 weight range these pages use: 28 KB and 11 KB. Anything
 * outside the range falls back to the metric-matched system faces below.
 */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-201D, U+2026, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Red Hat Mono";
  src: url("../fonts/red-hat-mono-latin.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0, U+00A9, U+00B7, U+00D7, U+2013-2014, U+2018-201D, U+2026, U+2190-2193, U+2212;
}
/* Metric-matched fallbacks, so the swap doesn't move a line. */
@font-face {
  font-family: "Schibsted Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 103.5%;
  ascent-override: 94.7%;
  descent-override: 25.1%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Red Hat Mono Fallback";
  src: local("Courier New"), local("Liberation Mono");
  size-adjust: 100%;
  ascent-override: 102%;
  descent-override: 31%;
  line-gap-override: 0%;
}

/* ---------- Tokens ---------- */

:root {
  color-scheme: light dark;

  /* Surfaces */
  --bg: light-dark(#f4f2ec, #090c20);
  --bg-alt: light-dark(#eceae2, #0c1029);
  --surface: light-dark(#ffffff, #10143a);
  --surface-2: light-dark(#f9f8f4, #141943);
  --surface-3: light-dark(#f0eee7, #1b2150);
  --line: light-dark(#e0dccf, #232957);
  --line-2: light-dark(#cbc6b6, #343b73);

  /* Text */
  --text: light-dark(#0d1130, #eceaf6);
  --text-2: light-dark(#42465f, #b4b7d4);
  --text-3: light-dark(#5d6179, #9195b9);

  /* Moonlight: the brand accent. Red, green, amber and blue below are product states only. */
  --moon: #f4d27e;
  --moon-hi: light-dark(#fbf1d6, #fbecc4);
  --moon-lo: light-dark(#efe2bd, #e9c46e);
  --accent: light-dark(#7a5300, #f4d27e);
  --primary: light-dark(#0d1130, #f4d27e);
  --primary-hover: light-dark(#222863, #f8dd98);
  --on-primary: light-dark(#fbf3de, #16110a);

  /* Product states */
  --red: light-dark(#b0232f, #ff9494);
  --green: light-dark(#096841, #79e2b4);
  --amber: light-dark(#8a5600, #f5c66b);
  --blue: light-dark(#3a40c2, #a9b1ff);
  --red-soft: light-dark(#fbe8e8, #3a1631);
  --green-soft: light-dark(#e2f3ea, #0d3136);
  --amber-soft: light-dark(#faefd4, #33291c);
  --blue-soft: light-dark(#e9eafb, #1c2260);

  /* The product window */
  --app: light-dark(#ffffff, #0e1235);
  --app-bar: light-dark(#f7f6f1, #0b0f2c);
  --app-side: light-dark(#fbfaf7, #0c1030);

  --shadow-c: light-dark(rgb(13 17 48 / 0.14), rgb(0 0 0 / 0.55));
  --shadow-c2: light-dark(rgb(13 17 48 / 0.06), rgb(0 0 0 / 0.3));
  --shadow-lg: 0 1px 0 0 var(--shadow-c2), 0 30px 80px -30px var(--shadow-c), 0 12px 24px -12px var(--shadow-c2);
  --focus: light-dark(#3a40c2, #f4d27e);

  /* Type */
  --sans: "Schibsted Grotesk", "Schibsted Fallback", system-ui, sans-serif;
  --mono: "Red Hat Mono", "Red Hat Mono Fallback", ui-monospace, monospace;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: clamp(1rem, 0.97rem + 0.12vw, 1.0625rem);
  --fs-lede: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-h3: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  --fs-h2: clamp(2rem, 1.45rem + 2.3vw, 3.5rem);
  --fs-h1: clamp(2.875rem, 1.7rem + 5.2vw, 6.25rem);

  /* Space (4px base) and shape */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(20px, 4.5vw, 48px);
  --max: 1216px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --section: clamp(80px, 9vw, 136px);
  /* The sticky header: the bar, plus the concept strip on phones. */
  --bar-h: 68px;
  --strip-h: 0px;
  --header-h: calc(var(--bar-h) + var(--strip-h));

  /* Motion */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-io: cubic-bezier(0.6, 0, 0.2, 1);
  --t-fast: 180ms;
  --t-mid: 320ms;
  --t-slow: 600ms;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --is-dark: 1; }
/* A 0/1 switch for the few non-color values that change with the theme. */
:root { --is-dark: 0; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --is-dark: 1; } }

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, pre { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
code, kbd, pre, .mono { font-family: var(--mono); font-size: 0.92em; }
strong { font-weight: 650; }
h1, h2, h3 { font-weight: 620; letter-spacing: -0.02em; line-height: 1.1; text-wrap: balance; }
p, li, dd { text-wrap: pretty; }
::selection { background: var(--moon); color: #16110a; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
[tabindex="-1"]:focus { outline: none; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { width: min(100% - var(--gutter) * 2, var(--max)); margin-inline: auto; }
.icon { width: 18px; height: 18px; flex: none; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 14px; border-radius: var(--r-md);
  background: var(--primary); color: var(--on-primary); font-weight: 600; text-decoration: none;
  transform: translateY(-160%);
}
.skip:focus-visible { transform: none; }

/* ---------- Buttons, chips, keys ---------- */

.btn {
  --btn-h: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--btn-h); padding: 0 18px;
  border-radius: var(--r-md); border: 1px solid transparent;
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: -0.005em; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-sm { --btn-h: 36px; padding: 0 14px; font-size: 0.875rem; border-radius: 9px; }
.btn-lg { --btn-h: 52px; padding: 0 22px; font-size: 1rem; }
.btn-block { width: 100%; }
.btn-primary { background: var(--primary); color: var(--on-primary); }
@media (hover: hover) { .btn-primary:hover { background: var(--primary-hover); } }
.btn-ghost { border-color: var(--line-2); color: var(--text); background: color-mix(in oklab, var(--surface) 50%, transparent); }
@media (hover: hover) { .btn-ghost:hover { border-color: var(--text-3); background: var(--surface); } }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 9px; border-radius: 999px;
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0; white-space: nowrap;
  background: var(--surface-3); color: var(--text-2);
}
.chip svg { width: 14px; height: 14px; }
.chip-ok { background: var(--green-soft); color: var(--green); }
.chip-warn { background: var(--amber-soft); color: var(--amber); }
.chip-no { background: var(--red-soft); color: var(--red); }
.chip-app { height: 18px; padding: 0 6px; border-radius: 4px; font-size: 0.6875rem; }

.kbd {
  display: inline-flex; align-items: center; gap: 1px;
  height: 22px; padding: 0 6px; border-radius: 6px;
  border: 1px solid var(--line-2); background: var(--surface-2);
  font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--text-2); line-height: 1;
}
.kbd-cmd { width: 12px; height: 12px; }
/* The shortcut hint is chosen before first paint (see the <head> script), so it never reflows the header. */
.k-mac { display: inline-flex; align-items: center; gap: 1px; }
.k-pc, .pc .k-mac { display: none; }
.pc .k-pc { display: inline; }

/* ---------- Header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-mid) var(--ease);
}
.site-header.is-stuck { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; gap: var(--s5); height: var(--bar-h); }
/* 44px tall to tap; the negative margin keeps the wordmark where it was. */
.brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; margin-block: -10px; color: var(--text); text-decoration: none; border-radius: 6px; }
.brand-mark { width: 24px; height: 24px; color: var(--accent); transform: rotate(-12deg); }
.brand-word { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1; padding-bottom: 2px; }

.nav { margin-right: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list a:not(.btn) {
  display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 8px;
  color: var(--text-2); font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .nav-list a:not(.btn):hover { color: var(--text); background: var(--surface-3); } }
.nav-list a[aria-current="page"] { color: var(--text); }
.nav-cta { display: none; }

.header-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cmdk-trigger {
  display: none; align-items: center; gap: 8px;
  height: 36px; padding: 0 6px 0 10px; border-radius: 9px;
  border: 1px solid var(--line); background: color-mix(in oklab, var(--surface) 60%, transparent);
  color: var(--text-3); font-size: 0.875rem;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.js .cmdk-trigger { display: inline-flex; }
@media (hover: hover) { .cmdk-trigger:hover { border-color: var(--line-2); color: var(--text-2); } }
.cmdk-trigger-label { margin-right: 18px; }
@media (max-width: 1239px) { .cmdk-trigger-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } }

/* The button is a 44px target; the pill inside it is the 36px switch you see. */
.theme-toggle { display: none; align-items: center; height: 44px; border-radius: 9px; }
.js .theme-toggle { display: inline-flex; }
.theme-track {
  display: inline-flex; align-items: stretch; height: 36px; padding: 3px; gap: 2px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 0.8125rem; font-weight: 600; color: var(--text-3);
}
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible .theme-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.theme-opt { display: grid; place-items: center; padding: 0 9px; border-radius: 6px; }
.theme-toggle[aria-pressed="false"] .theme-day,
.theme-toggle[aria-pressed="true"] .theme-night { background: var(--text); color: var(--bg); }
@media (hover: hover) { .theme-toggle:hover .theme-track { border-color: var(--line-2); color: var(--text-2); } }

.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; color: var(--text); }
@media (hover: hover) { .icon-btn:hover { background: var(--surface-3); } }
.menu-btn { display: none; }
.menu-close { display: none; }
.menu-btn[aria-expanded="true"] .menu-open { display: none; }
.menu-btn[aria-expanded="true"] .menu-close { display: block; }

@media (max-width: 1119px) {
  .cmdk-trigger .kbd { display: none; }
  .cmdk-trigger { width: 44px; height: 44px; padding: 0; justify-content: center; border-color: transparent; background: none; color: var(--text); }
  .cmdk-trigger .icon { width: 20px; height: 20px; }
  .js .menu-btn { display: inline-grid; }
  .header-inner { gap: var(--s3); }
  .header-actions { gap: 4px; }
  .theme-toggle { margin-inline: 4px; }
  /* With JS the nav is a drop-down panel; without it, a plain row under the bar. */
  .nav { order: 5; margin: 0; }
  html:not(.js) .site-header { position: relative; }
  html:not(.js) .header-inner { flex-wrap: wrap; height: auto; padding-block: 12px; }
  html:not(.js) .nav { width: 100%; }
  html:not(.js) .nav-list { flex-wrap: wrap; margin-inline: -12px; }
  html:not(.js) .nav-list a { height: 44px; white-space: nowrap; }
  .js .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    /* A landscape phone is shorter than the menu: it scrolls inside, under the bar. */
    max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px var(--gutter) 20px;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px var(--shadow-c);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
    transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid);
  }
  .js .nav.is-open { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .js .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .js .nav-list a:not(.btn) { display: flex; height: 48px; padding: 0 4px; font-size: 1.0625rem; color: var(--text); border-bottom: 1px solid var(--line); border-radius: 0; }
  @media (hover: hover) { .js .nav-list a:not(.btn):hover { background: none; } }
  .js .nav-cta { display: block; margin-top: 16px; }
  .js .nav-cta .btn { width: 100%; height: 48px; }
}
/* From 600px the bar has its own trial button, so the menu is only links. */
@media (min-width: 600px) and (max-width: 1119px) { .js .nav-cta { display: none; } }
@media (max-width: 599px) {
  .header-cta { display: none; }
  .brand-word { font-size: 1.1875rem; }
}
/* Landscape phones: a shorter bar, and the menu in two columns so it fits the screen. */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --bar-h: 56px; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1119px) {
  .js .nav-list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s6); }
}
/* Touch screens: the small buttons get full-size targets. */
@media (pointer: coarse) {
  .btn-sm { --btn-h: 44px; }
}

/* ---------- Section scaffolding ---------- */

.section { padding-block: var(--section); position: relative; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
/* Only sections that are a moment in the night get a stamp: the time, in plain mono. */
.stamp {
  margin-bottom: 14px; font-family: var(--mono); font-size: 0.9375rem; font-weight: 600;
  color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: 0.01em;
}
.h2 { font-size: var(--fs-h2); font-weight: 620; letter-spacing: -0.035em; line-height: 1.02; }
.section-lede { margin-top: 20px; max-width: 60ch; font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); }

/* ---------- Hero ---------- */

.hero { position: relative; isolation: isolate; padding-top: clamp(36px, 5.5vw, 80px); padding-bottom: clamp(44px, 5vw, 72px); }
.hero-grid { display: grid; gap: 22px; }
.hero-title {
  font-size: var(--fs-h1); font-weight: 640; letter-spacing: -0.052em; line-height: 0.94;
  max-width: 9.5em; padding-bottom: 0.04em;
}
.hero-copy { max-width: 560px; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--text-2); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Small phones: both buttons share one row instead of the second dropping alone. */
@media (max-width: 419px) {
  .cta-row { gap: 10px; }
  .cta-row .btn-lg { flex: 1 1 auto; padding: 0 16px; }
}
.fineprint { margin-top: 16px; font-size: var(--fs-xs); color: var(--text-3); }

@media (min-width: 960px) {
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; row-gap: 28px; align-items: end; }
  .hero-copy { padding-bottom: 8px; }
}

/* ---------- The replay window ---------- */

.replay-section { padding-bottom: clamp(24px, 3vw, 40px); overflow-x: clip; }
.replay-wrap { position: relative; isolation: isolate; }
/* The brand's crescent, the one big moon on the site. It rises once from behind the
   product window's top-right corner; the window hides its lower half. Crisp edges, no glow. */
.moonrise {
  position: absolute; z-index: -1; top: 0; right: calc(var(--gutter) * -0.35);
  width: clamp(112px, 13vw, 196px); aspect-ratio: 1; transform: translateY(-56%);
  pointer-events: none;
}
.moonrise-moon { width: 100%; height: 100%; overflow: visible; animation: moonrise 900ms var(--ease) 200ms both; }
@keyframes moonrise { from { transform: translateY(35%); } }
.moon-lit { fill: var(--moon); }
/* Earthshine at night; by day the unlit side is paper. */
.moon-dark { fill: light-dark(#f4f2ec, #1a1b2e); }
/* A tight ring by night; by day a drawn ink outline, like a daytime moon. */
.moon-rim { fill: none; stroke-width: calc(1.5px - var(--is-dark) * 0.5px); stroke: light-dark(rgb(13 17 48 / 0.45), rgb(244 210 126 / 0.25)); }
.rm .moonrise-moon { animation: none; }
.replay-section:focus { outline: none; }
.replay {
  position: relative; z-index: 1; overflow: hidden;
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: var(--app); box-shadow: var(--shadow-lg);
  font-size: 0.875rem;
}

.app-bar {
  display: flex; align-items: center; gap: 14px;
  height: 54px; padding: 0 14px 0 16px;
  background: var(--app-bar); border-bottom: 1px solid var(--line);
}
.app-crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; overflow: hidden; font-size: 0.8125rem; white-space: nowrap; }
.app-crumbs strong { font-family: var(--mono); font-weight: 600; font-size: 0.8125rem; }
.app-logo { flex: none; width: 18px; height: 18px; color: var(--accent); transform: rotate(-12deg); margin-right: 4px; }
.crumb-muted { color: var(--text-3); }
.crumb-sep { color: var(--line-2); }
.app-status { display: flex; }
.status {
  display: none; align-items: center; gap: 7px; height: 24px; padding: 0 10px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 600;
}
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-busy { background: var(--amber-soft); color: var(--amber); }
.status-busy .status-dot { animation: blink 1.2s steps(2, jump-none) infinite; }
.status-ok { background: var(--green-soft); color: var(--green); }
.replay .status-ok { display: inline-flex; }
.replay:is([data-stage="alert"], [data-stage="logs"], [data-stage="deploys"], [data-stage="diff"]) .status-ok { display: none; }
.replay:is([data-stage="alert"], [data-stage="logs"], [data-stage="deploys"], [data-stage="diff"]) .status-busy { display: inline-flex; }
@keyframes blink { 0% { opacity: 1; } 100% { opacity: 0.25; } }

.app-meta { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.app-clock {
  font-family: var(--mono); font-size: 0.8125rem; font-weight: 500; color: var(--text-2);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}
.app-human { display: flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid var(--line); }
.avatar {
  flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue); font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.02em;
}
.app-human-name { display: flex; flex-direction: column; line-height: 1.2; }
.app-human-who { font-size: 0.75rem; color: var(--text-2); }
.asleep { display: inline-flex; align-items: baseline; gap: 5px; font-size: 0.75rem; font-weight: 600; color: var(--accent); }
/* Three small z's. Once the night is handled they drift, one at a time. */
.zzz { display: inline-flex; gap: 1px; font-family: var(--mono); font-size: 0.5625rem; font-weight: 600; line-height: 1; }
.zzz i { font-style: normal; }
.zzz i:nth-child(2) { translate: 0 -2px; }
.zzz i:nth-child(3) { translate: 0 -4px; }
.replay.is-ended .zzz i { animation: zz 2.4s steps(3, jump-none) infinite; }
.replay.is-ended .zzz i:nth-child(2) { animation-delay: 0.3s; }
.replay.is-ended .zzz i:nth-child(3) { animation-delay: 0.6s; }
@keyframes zz { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }

.app-body { display: grid; grid-template-columns: 284px minmax(0, 1fr); }
.app-side { padding: 18px 12px 18px 14px; background: var(--app-side); border-right: 1px solid var(--line); }
.app-side-title {
  padding: 0 8px 12px; font-family: var(--mono); font-size: 0.6875rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.steps { display: grid; gap: 2px; }
.steps li { position: relative; }
.steps li:not(:last-child)::before {
  content: ""; position: absolute; left: 20px; top: 34px; bottom: -10px; width: 1px; background: var(--line-2);
}
.step {
  position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 1px; align-items: center;
  width: 100%; padding: 8px 9px; border-radius: 10px; text-align: left;
  transition: background-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .step:hover:not(:disabled) { background: var(--surface-3); } }
.step:disabled { cursor: default; }
.step-mark {
  grid-row: 1 / 3; align-self: start; margin-top: 1px;
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: light-dark(#fff, #06231a);
  transition: background-color var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease);
}
.step-mark svg { width: 13px; height: 13px; transition: opacity var(--t-fast) var(--ease), transform var(--t-mid) var(--ease); }
.step-label { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: color var(--t-mid) var(--ease); }
.step-time { grid-column: 3; grid-row: 1; font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.step-sub { grid-column: 2 / 4; font-size: 0.8125rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Driven by the script: todo, current, done. */
/* Steps still to come read quieter by colour, not opacity, so every label keeps AA contrast. */
.replay.is-driven .step:not(.is-done):not(.is-current) .step-label { color: var(--text-3); font-weight: 520; }
.replay.is-driven .step:not(.is-done) .step-mark { background: var(--app); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.replay.is-driven .step:not(.is-done) .step-mark svg { opacity: 0; transform: scale(0.6); }
.replay.is-driven .step.is-current { background: var(--surface-3); }
.replay.is-driven .step.is-current .step-mark { box-shadow: inset 0 0 0 1.5px var(--accent); }
.replay.is-driven .step.is-current .step-mark::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); grid-area: 1 / 1;
  animation: breathe 1.6s var(--ease-io) infinite alternate;
}
.replay.is-driven .step.is-current .step-mark svg { grid-area: 1 / 1; }
.replay:not(.is-playing) .step.is-current .step-mark::after,
.replay:not(.is-playing) .status-busy .status-dot,
.replay:not(.is-playing) .typing-dots i,
.replay:not(.is-playing) .firing-dot,
.replay.is-offscreen .zzz i { animation-play-state: paused; }
@keyframes breathe { from { transform: scale(0.7); opacity: 0.6; } to { transform: scale(1); opacity: 1; } }

.stage { position: relative; display: grid; grid-template-rows: minmax(0, 1fr); height: 452px; overflow: hidden; }
/* Panes switch the way an app's do: at once, the new one settling up into place.
   No cross-fade, so text is never caught half-transparent (and under AA contrast). */
/* position: relative keeps each view the containing block of what's pinned inside it (the typing
   indicator), whether or not it is mid-settle: otherwise that switch counts as a layout shift. */
.view {
  position: relative; grid-area: 1 / 1; min-width: 0; padding: 22px 26px;
  display: flex; flex-direction: column; gap: 14px;
  visibility: hidden; opacity: 0; transform: translateY(8px);
  transition: transform var(--t-slow) var(--ease);
}
.replay[data-stage="alert"] .view-alert,
.replay[data-stage="logs"] .view-logs,
.replay[data-stage="deploys"] .view-deploys,
.replay[data-stage="diff"] .view-diff,
.replay[data-stage="act"] .view-act,
.replay:is([data-stage="summary"], [data-stage="end"]) .view-summary {
  visibility: visible; opacity: 1; transform: none;
}

/* Timed pieces inside a view: hidden until the script reaches them. Text is revealed
   by a wipe (clip-path) at full opacity, so it is always either hidden or fully legible;
   diff lines type in from the left. */
.replay [data-at]:not(.deploy-ring) { clip-path: inset(-16px); transition: transform 450ms var(--ease), clip-path 560ms var(--ease); }
.replay.is-driven [data-at]:not(.on):not([data-at="0"]) { opacity: 0; }
.replay.is-driven [data-at]:not(.on):not([data-at="0"]):not(.deploy-ring) { transform: translateY(6px); clip-path: inset(-16px -16px 100% -16px); }
.replay.is-driven .dl[data-at]:not(.on):not([data-at="0"]) { transform: none; clip-path: inset(-16px 100% -16px -16px); }
.replay.is-driven .gone { display: none; }
.replay:not(.is-driven) [data-until] { display: none; }
/* Charts draw on the replay's clock: the script sets --p from 0 to 1 and the line is
   wiped in from the left, so scrubbing backwards undraws it. */
.replay.is-driven [data-draw] { clip-path: inset(-20% calc((1 - var(--p, 0)) * 100%) -20% -2%); }

.pane-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.pane-title { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; white-space: nowrap; }
.pane-title svg { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.pane-dim { font-weight: 400; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; }
.pane-count { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The line count runs up to 2,418 inside a box already that wide, so nothing beside it moves. */
.pane-count [data-count] { display: inline-block; min-width: 5ch; text-align: right; }

.agent-mark { width: 16px; height: 16px; flex: none; color: var(--accent); }
.agent-line { display: flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 0.8125rem; }
.agent-line-sub .agent-mark { color: var(--green); }
.agent-line-sub { padding-left: 48px; }
.finding {
  display: flex; gap: 10px; align-items: flex-start; margin-top: auto;
  padding: 12px 14px; border-radius: var(--r-md);
  background: color-mix(in oklab, var(--moon) 12%, var(--app)); border: 1px solid color-mix(in oklab, var(--moon) 38%, var(--app));
  font-size: 0.8125rem; line-height: 1.5; color: var(--text);
}
.finding .agent-mark { margin-top: 2px; }
.finding code, .msg code, .act-title code, .page-facts code { padding: 1px 5px; border-radius: 4px; background: var(--surface-3); font-size: 0.85em; }
.finding-ok { background: var(--green-soft); border-color: color-mix(in oklab, var(--green) 30%, var(--app)); }
.finding-ok .agent-mark { color: var(--green); }

/* 1. alert */
.alert-card { padding: 18px 20px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.alert-top { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; }
.alert-top .mono { color: var(--text-2); }
.sev { display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 5px; background: var(--red); color: light-dark(#fff, #2a0710); font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; }
.firing { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--red); text-transform: uppercase; letter-spacing: 0.06em; }
.firing-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in oklab, var(--red) 22%, transparent); }
.replay[data-stage="alert"] .firing-dot { animation: blink 1.2s steps(2, jump-none) infinite; }
.alert-title { margin-top: 14px; font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.01em; }
.alert-metric { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
/* The rate counts up from 0.4 to 14.2: its box is already as wide as "14.2%", so the line beside it never moves (no layout shift). */
.alert-num { min-width: 2.7em; font-size: 2.5rem; font-weight: 640; letter-spacing: -0.04em; line-height: 1.1; color: var(--red); }
.alert-of { color: var(--text-3); font-size: 0.8125rem; }
.spark { width: 100%; height: 110px; margin-top: 8px; overflow: visible; }
.spark path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.spark-limit { stroke: var(--line-2); stroke-dasharray: 4 4; stroke-width: 1; }
.spark-base { stroke: var(--text-3); stroke-width: 1.5; }
.spark-hot { stroke: var(--red); stroke-width: 2; }
.spark .spark-fill { fill: color-mix(in oklab, var(--red) 16%, transparent); stroke: none; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.facts dt { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.facts dd { margin-top: 2px; font-size: 0.8125rem; color: var(--text); }

/* 2. logs: a tail. The list sits at the bottom of a fixed window; while the counter runs,
   the script holds it lower and lets it climb a line at a time, so lines stream past.
   Then the grep: everything but the errors goes quiet, a red bracket runs down the
   errors, and the trace line gets its count. */
.log-win { --rows: 10; display: flex; flex-direction: column; justify-content: flex-end; height: calc(var(--rows) * 26px - 2px); overflow: hidden; }
.log { display: grid; gap: 2px; font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; flex: none; }
.log li { position: relative; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 12px; align-items: baseline; min-height: 24px; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.log-t { color: var(--text-3); font-variant-numeric: tabular-nums; }
.log-m { overflow: hidden; text-overflow: ellipsis; color: var(--text-2); }
.lvl { width: 5ch; font-weight: 600; }
.lvl-info { color: var(--blue); }
.lvl-warn { color: var(--amber); }
.lvl-err { color: var(--red); }
.log-hit { background: var(--red-soft); }
.log-hit .log-m { color: var(--text); }
.log-trace .log-m { padding-left: 2ch; }
.log-tag { font-weight: 700; color: var(--red); transform: scale(0); transition: transform 260ms var(--ease) 240ms; }
.log-err::before {
  content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 2px; background: var(--red);
  transform: scaleY(0); transform-origin: 50% 0; transition: transform 300ms var(--ease);
}
.log-win.is-set li:not(.log-err) :is(.log-m, .lvl) { color: var(--text-3); }
.log-win.is-set .log-err::before,
.replay:not(.is-driven) .log-err::before { transform: none; }
.log-win.is-set .log-tag,
.replay:not(.is-driven) .log-tag { transform: none; }
/* The finding that ends the logs lands with a small overshoot. */
.replay.is-driven .finding-land.on { animation: land 380ms var(--ease); }
@keyframes land { 0% { transform: translateY(10px); } 60% { transform: translateY(-2px); } 100% { transform: none; } }

/* 3. deploys */
.view-deploys { gap: 12px; }
.deploys { display: grid; gap: 6px; }
.deploy {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 1px; align-items: center;
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line);
}
.deploy-id { grid-row: 1 / 3; font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.deploy-msg { font-weight: 600; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.deploy-who { grid-column: 2; font-size: 0.75rem; color: var(--text-3); }
.deploy-flag { grid-column: 3; grid-row: 1 / 3; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; background: var(--red-soft); color: var(--red); font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; white-space: nowrap; }
/* The red ring is drawn around the suspect deploy, not faded in. */
.deploy-ring { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; }
.deploy-ring rect { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 600ms var(--ease); }
.replay.is-driven .deploy-ring:not(.on) rect { stroke-dashoffset: 1; }

/* A trace of one failing request, as a span waterfall. */
.spans { display: grid; gap: 3px; padding: 10px 12px 11px; border: 1px solid var(--line); border-radius: 10px; font-family: var(--mono); font-size: 0.6875rem; line-height: 1.4; }
.spans-h { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 3px; color: var(--text-3); }
.span { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px; align-items: center; }
.span-n { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.span-track { position: relative; height: 12px; }
.span-bar {
  position: absolute; top: 2px; bottom: 2px; left: var(--x); width: var(--w); min-width: 3px; border-radius: 2px;
  background: var(--blue); transform-origin: 0 50%; transition: transform 240ms var(--ease) calc(var(--i) * 80ms);
}
.span-err .span-bar { background: var(--red); }
.span-miss .span-bar { background: none; border: 1px dashed var(--line-2); }
.span-d { position: absolute; top: -1px; left: calc(var(--x) + var(--w) + 6px); color: var(--text-3); white-space: nowrap; }
.span-err .span-d { color: var(--red); font-weight: 600; }
.span-d-left { left: auto; right: calc(100% - var(--x) + 6px); }
.replay.is-driven .spans:not(.on) .span-bar { transform: scaleX(0); }
.deploy-suspect .deploy-id { color: var(--red); }

/* 4. diff */
.diff { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-family: var(--mono); font-size: 0.75rem; line-height: 1.5; background: var(--surface-2); }
.dl { display: grid; grid-template-columns: 40px 20px minmax(0, 1fr); align-items: baseline; padding: 3px 0; }
.dl code { font-size: 1em; white-space: pre; overflow: hidden; text-overflow: ellipsis; color: var(--text); }
.dl-n { padding-right: 10px; text-align: right; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dl-s { text-align: center; color: var(--text-3); }
.dl-del { background: var(--red-soft); }
.dl-del .dl-s, .diff-del { color: var(--red); }
.dl-del code { text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--red) 55%, transparent); }
.dl-add { background: var(--green-soft); }
.dl-add .dl-s, .diff-add { color: var(--green); }
.tk-k { color: var(--tk-k, var(--blue)); }
.tk-f { color: light-dark(#8a4b00, #f4d27e); }
.tk-t { color: light-dark(#0b6c6c, #7fd7d7); }
.tk-s { color: var(--tk-s, var(--green)); }
.tk-n { color: var(--tk-n, light-dark(#a3305a, #ff9fc3)); }
.tk-c { color: var(--text-3); font-style: normal; }

/* 5. act */
.act-card, .pr-card { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
.act-top, .pr-top { display: flex; align-items: center; gap: 10px; }
.act-time, .pr-id { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); }
.act-title { margin-top: 12px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.act-why { margin-top: 4px; font-size: 0.8125rem; color: var(--text-2); }
.recover { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px; margin-top: 12px; }
.recover-chart { width: 100%; height: 64px; overflow: visible; }
.recover-chart path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.recover-hot { stroke: var(--red); stroke-width: 2; }
.recover-cool { stroke: var(--green); stroke-width: 2; }
.recover-label { display: grid; text-align: right; font-size: 0.75rem; color: var(--text-3); }
.recover-label strong { font-size: 1.25rem; font-weight: 640; letter-spacing: -0.02em; color: var(--green); white-space: nowrap; }
.recover-to { font-weight: 400; color: var(--text-3); font-size: 0.875rem; }
.pr-icon { width: 18px; height: 18px; color: var(--green); }
.pr-title { margin-top: 10px; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; }
.pr-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 0.8125rem; color: var(--text-2); }
.pr-meta li { display: inline-flex; align-items: center; gap: 5px; }
.pr-checks { color: var(--green); font-weight: 600; }
.pr-checks svg { width: 15px; height: 15px; }

/* 6. summary */
.view-summary { gap: 12px; }
.chat-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.chat-channel { font-weight: 700; letter-spacing: -0.01em; }
.chat-channel span { color: var(--text-3); font-weight: 500; }
.chat-members { font-size: 0.75rem; color: var(--text-3); }
.chat-typing { position: absolute; top: 76px; left: 26px; display: flex; align-items: center; gap: 8px; font-size: 0.8125rem; color: var(--text-3); }
.typing-dots { display: inline-flex; gap: 3px; }
.typing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: dot 1s var(--ease-io) infinite; }
.typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-3px); opacity: 1; } }
.msg { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.msg-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--text); color: var(--moon); }
.msg-avatar svg { width: 20px; height: 20px; transform: rotate(-12deg); }
.msg-body { display: grid; gap: 4px; font-size: 0.875rem; line-height: 1.5; color: var(--text); }
.msg-head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.msg-time { font-size: 0.75rem; color: var(--text-3); }
.msg-dim { color: var(--text-3); }
.slept {
  display: flex; align-items: center; gap: 14px; margin-top: auto;
  padding: 14px 14px 14px 16px; border-radius: 12px;
  background: var(--text); color: var(--bg);
}
.slept-moon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--moon); color: #16110a; flex: none; }
.slept-moon svg { width: 20px; height: 20px; rotate: -12deg; }
/* The payoff gets its own beat: it lands with a little give, and the mark tips its hat. */
.replay.is-driven .slept.on { animation: slept-land 420ms var(--ease); }
.replay.is-driven .slept.on .slept-moon svg { animation: tip 700ms var(--ease-io) 200ms; }
@keyframes slept-land { 0% { transform: scale(0.96); } 60% { transform: scale(1.02); } 100% { transform: none; } }
@keyframes tip { 0%, 100% { rotate: -12deg; } 45% { rotate: 6deg; } }
.slept-title { font-size: 1.125rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.slept-sub { font-size: 0.8125rem; opacity: 0.78; }
.slept-replay { margin-left: auto; border-color: color-mix(in oklab, var(--bg) 35%, transparent); color: var(--bg); background: transparent; }
@media (hover: hover) { .slept-replay:hover { background: color-mix(in oklab, var(--bg) 12%, transparent); border-color: color-mix(in oklab, var(--bg) 60%, transparent); } }
.slept-replay .icon { width: 16px; height: 16px; }
.js .replay:not(.is-live) .slept-replay { display: none; }
html:not(.js) .slept-replay { display: none; }

/* controls */
.app-controls { display: flex; align-items: center; gap: 8px; height: 56px; padding: 0 14px; border-top: 1px solid var(--line); background: var(--app-bar); }
html:not(.js) .app-controls .ctrl { display: none; }
.ctrl {
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  border: 1px solid var(--line-2); color: var(--text); background: var(--surface);
  transition: border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
@media (hover: hover) { .ctrl:hover { border-color: var(--text-3); } }
.ctrl .icon { width: 16px; height: 16px; }
.ctrl-play { background: var(--primary); color: var(--on-primary); border-color: transparent; }
@media (hover: hover) { .ctrl-play:hover { background: var(--primary-hover); } }
.ctrl-i-pause { display: none; }
.replay.is-playing .ctrl-i-pause { display: block; }
.replay.is-playing .ctrl-i-play { display: none; }
.progress { flex: 1; height: 4px; margin: 0 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.progress-fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); transform-origin: 0 50%; }
.ctrl-meta { display: flex; gap: 18px; font-size: 0.75rem; color: var(--text-3); white-space: nowrap; }
.ctrl-meta strong { margin-left: 4px; font-family: var(--mono); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

.replay-foot { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 24px; margin-top: 16px; }
.replay-note { font-size: var(--fs-xs); color: var(--text-3); }
.transcript { font-size: var(--fs-xs); color: var(--text-2); max-width: 720px; }
.transcript summary {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--text-2); font-weight: 600;
  text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 0.25em; list-style: none;
}
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::after { content: "+"; font-family: var(--mono); color: var(--text-3); }
.transcript[open] summary::after { content: "\2212"; }
@media (hover: hover) { .transcript summary:hover { color: var(--text); } }
.transcript ol { display: grid; gap: 8px; margin-top: 14px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 0.875rem; line-height: 1.55; }
.transcript[open] { flex-basis: 100%; }

@media (max-width: 1099px) {
  .app-body { grid-template-columns: 236px minmax(0, 1fr); }
  .step-sub, .step-time { display: none; }
  .crumb-env { display: none; }
  /* The narrower stage wraps more, so it gets a little more height: at 452 the deploys
     view (with its trace) ran past the window's bottom edge on tablets and landscape phones. */
  .stage { height: 476px; }
}
/* Touch screens keep the window's controls at full finger size. */
@media (pointer: coarse) {
  .app-controls { height: 60px; }
  .ctrl { width: 44px; height: 44px; }
}
/* Tablets keep the desktop composition with a narrower sidebar; the log route and the
   trace go, so the lines keep the part that matters. */
@media (max-width: 819px) {
  .log-route, .spans { display: none; }
  .log li.log-hit { white-space: normal; }
  /* No tail on small screens: just the lines that matter, from the first error. */
  .log-win { height: auto; }
  .log li:nth-child(-n+20) { display: none; }
  .app-body { grid-template-columns: 200px minmax(0, 1fr); }
  .step-label { white-space: normal; line-height: 1.3; }
  .app-status { display: none; }
  .view { padding: 18px 20px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:last-child { display: none; }
}
@media (max-width: 719px) {
  .replay { font-size: 0.8125rem; }
  .app-bar { gap: 10px; padding: 0 12px; }
  .app-human-who, .app-status { display: none; }
  .app-human { padding-left: 10px; }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-side { order: 2; border-right: 0; border-top: 1px solid var(--line); padding: 12px 10px; }
  .app-side-title { padding-bottom: 6px; }
  .steps { gap: 0; }
  .step { padding: 6px 8px; grid-template-columns: 20px minmax(0, 1fr) auto; }
  .step-mark { width: 20px; height: 20px; }
  .steps li:not(:last-child)::before { left: 18px; top: 28px; bottom: -6px; }
  .stage { height: auto; min-height: 400px; } /* as tall as its tallest view: nothing clipped, no jumps */
  .view { padding: 16px; gap: 12px; }
  .chat-typing { left: 16px; top: 66px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts div:last-child { display: none; }
  .alert-num { font-size: 2rem; }
  .spark { height: 84px; }
  .log li { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 3px 6px; }
  .log .log-t { display: none; }
  /* Each view's conclusion (the finding, the "slept" banner) sits on the window's floor,
     as on desktop, so it lands in the same place at every step. */
  /* The deploy message is the clue (formatPrice), so it wraps instead of being cut. */
  .deploy { grid-template-columns: 50px minmax(0, 1fr); }
  .deploy-msg { white-space: normal; line-height: 1.35; }
  .deploy-flag { grid-column: 2; grid-row: auto; justify-self: start; margin-top: 4px; }
  .dl { grid-template-columns: 30px 16px minmax(0, 1fr); }
  /* Long lines soft-wrap with a hanging indent, the way an editor wraps them. */
  .dl code { white-space: pre-wrap; overflow-wrap: anywhere; padding-left: 4ch; text-indent: -4ch; }
  .recover { gap: 12px; }
  .recover-chart { height: 52px; }
  .msg { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .msg-avatar { width: 30px; height: 30px; border-radius: 8px; }
  .msg-body { font-size: 0.8125rem; }
  .msg-dim { display: none; }
  .slept { flex-wrap: wrap; gap: 10px 12px; padding: 12px; }
  .slept-moon { width: 32px; height: 32px; }
  .slept-copy { flex: 1; min-width: 0; }
  .slept-title { font-size: 1rem; }
  .slept-replay { display: none; }
  .agent-line-sub, .dl-ctx { display: none; }
  .ctrl-elapsed { display: none; }
  .progress { margin: 0 4px; }
  .app-controls { height: 60px; }
  .ctrl { width: 44px; height: 44px; }
}
/* Phones: the steps become a row of marks, with the current one captioned. */
.step-caption { display: none; }
@media (max-width: 719px) {
  /* Tight side padding so seven 44px marks fit a 320px window; the text lines up with the views. */
  .replay.is-driven .app-side { padding: 12px 4px 14px; }
  .replay.is-driven .app-side-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 12px; }
  .replay.is-driven .app-side-title { padding-inline: 0; }
  .replay.is-driven .app-side-count { padding-right: 0; }
  .replay.is-driven .steps { display: flex; }
  .replay.is-driven .steps li { flex: 1; display: flex; justify-content: center; min-width: 0; }
  .replay.is-driven .steps li:not(:last-child)::before { left: 50%; right: auto; width: 100%; top: 50%; bottom: auto; height: 1px; }
  .replay.is-driven .step { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; grid-template-columns: 1fr; border-radius: 50%; background: none; }
  .replay.is-driven .step.is-current { background: none; }
  .replay.is-driven .step-mark { grid-row: auto; margin: 0; align-self: center; width: 22px; height: 22px; }
  .replay.is-driven .step.is-current .step-mark { box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in oklab, var(--moon) 22%, transparent); }
  .replay.is-driven :is(.step-label, .step-time, .step-sub) {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .replay.is-driven .step-caption {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 42px; margin-top: 4px; padding: 0 12px;
    font-size: 0.8125rem; color: var(--text-3);
  }
  .step-caption strong { color: var(--text); font-weight: 600; }
  .step-caption .mono { font-size: 0.75rem; }
  .step-caption-sub { flex-basis: 100%; }
}
.app-side-count { display: none; padding-right: 8px; font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
@media (max-width: 719px) { .replay.is-driven .app-side-count { display: block; } }
@media (max-width: 519px) {
  .crumb-org { display: none; }
  .moonrise { right: -30px; width: 104px; }
  .hero { padding-bottom: 64px; }
}
@media (max-width: 419px) {
  .app-clock { font-size: 0.75rem; }
  .slept-sub { font-size: 0.75rem; }
  .act-why { display: none; }
  .finding { padding: 10px 12px; }
}

/* ---------- The night ---------- */

.night { padding-top: clamp(88px, 10vw, 152px); }
.night-card { padding: clamp(20px, 3vw, 40px); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.night-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; }

.seg {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 4px; border: 0;
  border-radius: 12px; background: var(--surface-3); min-width: 0;
}
.seg-input { position: absolute; opacity: 0; pointer-events: none; }
.seg-label {
  position: relative; z-index: 1; display: grid; place-items: center; height: 38px; padding: 0 18px;
  border-radius: 9px; font-size: 0.9375rem; font-weight: 600; color: var(--text-2); cursor: pointer; white-space: nowrap;
  transition: color var(--t-mid) var(--ease);
}
.seg-input:checked + .seg-label { color: var(--text); }
.seg-input:focus-visible + .seg-label { outline: 2px solid var(--focus); outline-offset: 2px; }
.seg-thumb {
  position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc(50% - 4px); border-radius: 9px;
  background: var(--surface); box-shadow: 0 1px 2px var(--shadow-c2), 0 0 0 1px var(--line);
  transition: transform var(--t-mid) var(--ease);
}
.seg:has(.seg-input:nth-of-type(2):checked) .seg-thumb { transform: translateX(100%); }

.night-stats { display: flex; flex-wrap: wrap; gap: 12px 40px; }
.night-stats dt { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); }
.night-stats dd { margin-top: 2px; font-size: 1.5rem; font-weight: 640; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.w-off { display: none; }
.night-card:has(#night-without:checked) .w-on { display: none; }
.night-card:has(#night-without:checked) .w-off { display: revert; }
.night-card:has(#night-without:checked) .night-stats dd { color: var(--red); }

.hypno { margin-top: clamp(28px, 4vw, 48px); }
.hypno-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
.hypno-levels { position: relative; width: 52px; }
.hypno-levels li {
  position: absolute; right: 0; top: var(--y); transform: translateY(-50%);
  font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.06em;
}
.hypno-canvas { position: relative; height: clamp(180px, 20vw, 260px); }
.hypno-svg { width: 100%; height: 100%; overflow: visible; }
.hypno-grid path { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; }
/* One night at a time. Switching draws the other night in from the left, and each
   alert pin changes as the line reaches it. */
.hypno-line {
  fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-width: 2.5;
  clip-path: inset(-10% -2% -10% -2%);
}
.hypno-with { stroke: var(--accent); }
.hypno-without { stroke: var(--red); clip-path: inset(-10% 102% -10% -2%); }
.night-card:has(#night-without:checked) .hypno-with { clip-path: inset(-10% 102% -10% -2%); }
.night-card:has(#night-without:checked) .hypno-without { clip-path: inset(-10% -2% -10% -2%); transition: clip-path 1200ms linear; }
.night-card:not(.is-waiting):has(#night-with:checked) .hypno-with { transition: clip-path 1200ms linear; }
.hypno-awake rect { fill: var(--red-soft); opacity: 0; transition: opacity var(--t-slow) var(--ease); }
.night-card:has(#night-without:checked) .hypno-awake rect { opacity: 1; transition-delay: 400ms; }
.hypno-alert { position: absolute; top: -6px; bottom: 0; left: var(--x); width: 0; border-left: 1px dashed color-mix(in oklab, var(--text-3) 70%, transparent); }
.hypno-pin {
  position: absolute; top: -14px; left: 0; transform: translateX(-50%);
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--surface); border: 1.5px solid var(--text-3);
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 700; color: var(--text-2);
  transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease);
}
.night-card:has(:where(#night-without):checked) .hypno-pin { background: var(--red); border-color: var(--red); color: light-dark(#fff, #2a0710); transition-delay: calc(var(--k) * 1200ms); }
/* Row and pin point at each other. (The Without pins above use :where() so a lit pair wins over them.) */
.hypno-alert.is-hot { border-left-style: solid; border-left-color: var(--accent); }
.hypno-alert.is-hot .hypno-pin { background: var(--accent); border-color: var(--accent); color: var(--bg); transition-delay: 0s; }
.hypno-hours { display: flex; justify-content: space-between; margin: 10px 0 0 66px; font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.hypno-hours li { width: 0; display: flex; justify-content: center; white-space: nowrap; }
.hypno-cap { margin: 14px 0 0 66px; font-size: var(--fs-xs); color: var(--text-3); }

/* The first time the chart comes into view, the night draws itself and the pins drop in
   as the line passes them. Set up by the script, only when the chart starts below the fold. */
.night-card.is-waiting .hypno-with { clip-path: inset(-10% 102% -10% -2%); }
.night-card.is-waiting .hypno-pin { transform: translate(-50%, -6px) scale(0); }
.night-card.is-drawing .hypno-pin { transition: transform 260ms var(--ease) calc(var(--k) * 1200ms); }

/* The night as a log: one row per alert, under the chart that shows it. */
.night-log { margin-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--line); }
.nl {
  display: grid; grid-template-columns: 24px 64px minmax(0, 1fr) minmax(0, 1.25fr); column-gap: 14px; align-items: baseline;
  padding: 14px 8px; border-bottom: 1px solid var(--line); border-radius: 0;
}
.nl-n { justify-self: start; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--text-3); font-family: var(--mono); font-size: 0.625rem; font-weight: 700; color: var(--text-2); transform: translateY(-1px); }
.nl-time { font-family: var(--mono); font-size: 0.875rem; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.nl-title { font-weight: 620; letter-spacing: -0.01em; line-height: 1.35; }
.nl-out { font-size: 0.9375rem; line-height: 1.5; color: var(--text-2); }
.nl-out .w-on { color: var(--green); }
.night-card:has(#night-without:checked) .nl-out .w-off { color: var(--red); }
.night-card:has(:where(#night-without):checked) .nl-n { background: var(--red); border-color: var(--red); color: light-dark(#fff, #2a0710); }
.nl.is-hot { background: var(--surface-2); }
.nl.is-hot .nl-n { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.nl-link { margin-left: 8px; font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--accent); white-space: nowrap; }

@media (max-width: 859px) {
  .nl { grid-template-columns: 24px 56px minmax(0, 1fr); row-gap: 4px; }
  .nl-out { grid-column: 3; }
}
@media (max-width: 599px) {
  .hypno-plot { gap: 10px; }
  .hypno-levels { width: 44px; }
  .hypno-levels li { letter-spacing: 0.02em; }
  .hypno-canvas { height: 220px; }
  .hypno-hours { margin-left: 54px; }
  .hypno-hours li:nth-child(even) { visibility: hidden; }
  .hypno-cap { margin-left: 0; }
  .night-stats { gap: 12px 28px; }
  .night-stats dd { font-size: 1.25rem; }
  .seg { width: 100%; }
  .seg-label { height: 44px; }
  .hypno-pin { width: 22px; height: 22px; top: -13px; }
  .nl-n { width: 22px; height: 22px; }
  .nl { grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; padding-inline: 0; }
  .nl-time { grid-column: 2; }
  .nl-title, .nl-out { grid-column: 2; }
  .nl-n { grid-row: 1; }
  /* The link always wraps under the title on a phone, so it gets its own line and a full-size target. */
  .nl-link { display: flex; align-items: center; width: fit-content; min-height: 44px; margin: -8px 0 -10px; }
  .nl.is-hot { box-shadow: -8px 0 0 var(--surface-2), 8px 0 0 var(--surface-2); }
}
/* On touch, a row and its pin light each other up on a tap (see home.js); the pins get a finger-size target. */
@media (pointer: coarse) {
  .hypno-pin::after { content: ""; position: absolute; inset: -11px; }
  .seg-label { height: 44px; }
  .nl-link { padding-block: 14px; }
}

/* ---------- Escalation ---------- */

.escalate { background: var(--bg-alt); border-block: 1px solid var(--line); }
.esc-grid { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
/* Side by side from 800px, so a landscape phone or small tablet doesn't strand the phone in a wide band. */
@media (min-width: 800px) { .esc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }
@media (min-width: 960px) { .esc-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); } }
.esc-rules { margin-top: 28px; max-width: 52ch; border-top: 1px solid var(--line-2); }
.esc-rules li { padding: 12px 0; border-bottom: 1px solid var(--line-2); font-weight: 500; }

/* The page itself, as Jonas gets it: a notification on a phone's lock screen at 04:47.
   A phone at night is dark whatever the site's theme. */
.lock {
  color-scheme: dark; position: relative; overflow: hidden; justify-self: center; width: min(100%, 400px);
  padding: 34px 12px 14px; border-radius: 40px; border: 1px solid #343b73;
  background: #070a1b; color: var(--text);
}
.lock-clock { display: grid; justify-items: center; gap: 2px; margin-bottom: 26px; color: #d9dbef; }
.lock-time { font-size: 4.25rem; font-weight: 500; letter-spacing: -0.03em; line-height: 1; }
.lock-date { font-size: 0.875rem; font-weight: 500; color: #a9acd0; }
.page-card { padding: 14px 16px 12px; border-radius: 22px; background: #151a44; }
.page-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 0.8125rem; color: var(--text-3); }
.page-app { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-2); letter-spacing: 0.01em; }
.page-app-icon { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--moon); color: #16110a; }
.page-app-icon svg { width: 14px; height: 14px; rotate: -12deg; }
.page-time { font-size: 0.8125rem; }
.page-state { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 12px; }
.page-to { font-size: 0.8125rem; color: var(--text-3); }
.page-title { margin-top: 8px; font-size: 1.125rem; font-weight: 640; letter-spacing: -0.02em; line-height: 1.25; }
.page-why { margin-top: 6px; color: var(--text-2); font-size: 0.875rem; }
.page-facts { display: grid; gap: 8px; margin-top: 12px; padding: 10px 0; border-block: 1px solid var(--line); font-size: 0.8125rem; line-height: 1.45; }
.page-facts div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; }
.page-facts dt { font-family: var(--mono); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-3); padding-top: 2px; }
.page-options { display: grid; gap: 8px; margin-top: 12px; }
.page-opt { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 8px; font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); }
.page-opt-k { font-family: var(--mono); font-weight: 700; color: var(--text); }
.page-opt-pick { color: var(--text); }
.page-opt-tag { margin-left: 4px; font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; color: var(--moon); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
/* Notification actions: a row of plain buttons under a hairline, like the phone's own. */
.page-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 12px -16px 0; border-top: 1px solid var(--line); }
.page-act { min-height: 46px; padding: 0 6px; font-size: 0.875rem; font-weight: 600; color: var(--text-2); }
.page-act + .page-act { border-left: 1px solid var(--line); }
.page-act-main { color: var(--moon); }
@media (hover: hover) { .page-act:hover:not(:disabled) { background: var(--surface-3); color: var(--text); } }
.page-act:focus-visible { outline-offset: -3px; }
.page-act:disabled { cursor: default; }
.page-act.is-chosen { background: var(--surface-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--moon); }
.page-actions .page-act:last-child { border-bottom-right-radius: 22px; }
.page-actions .page-act:first-child { border-bottom-left-radius: 22px; }
.page-reply { min-height: 1.5em; margin-top: 10px; font-size: 0.8125rem; color: var(--green); font-weight: 500; }
.page-reply:empty { margin-top: 0; min-height: 0; }

/* It arrives like a notification: in from the side, a short buzz, then the tag. Set up by
   the script only when the phone starts below the fold. Transform only, so text is never
   caught half-transparent. */
.lock.is-waiting .page-card { transform: translateX(calc(100% + 24px)); }
.lock.is-waiting [data-page-ask] { transform: scale(0); }
.lock.is-arriving .page-card { animation: arrive 320ms var(--ease) both, buzz 180ms linear 380ms 2; }
.lock.is-arriving [data-page-ask] { animation: pop 240ms var(--ease) 760ms both; }
@keyframes arrive { from { transform: translateX(calc(100% + 24px)); } }
@keyframes buzz { 0%, 100% { transform: none; } 33% { transform: translateX(3px); } 66% { transform: translateX(-3px); } }
@keyframes pop { from { transform: scale(0); } }

@media (max-width: 419px) {
  .lock { padding: 26px 8px 10px; border-radius: 32px; }
  .lock-time { font-size: 3.5rem; }
  .page-card { padding: 12px 14px 10px; }
  .page-actions { margin-inline: -14px; }
  .page-facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- How it works ---------- */

.how-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) {
  .how-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .code-card { position: sticky; top: 108px; }
}
.how-steps { display: grid; }
.how-step {
  display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 8px; row-gap: 6px;
  padding: 28px 0; border-top: 1px solid var(--line);
}
.how-step :is(.how-title, p, .how-n) { transition: color var(--t-slow) var(--ease); }
.how-step:last-child { border-bottom: 1px solid var(--line); }
.how-n { grid-row: 1 / 3; font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--accent); padding-top: 6px; white-space: nowrap; }
.how-title { font-size: var(--fs-h3); font-weight: 640; letter-spacing: -0.025em; }
.how-step p { color: var(--text-2); max-width: 46ch; }
@media (max-width: 599px) {
  .how-step { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
  .how-n { grid-row: auto; padding: 0; }
}
@media (min-width: 960px) {
  .js .how-steps.is-tracking:has(.is-active) .how-step:not(.is-active) :is(.how-title, p, .how-n) { color: var(--text-3); }
}

/* The file as an editor pane: square, flush, a tab for the file name. */
.code-card { overflow: hidden; border: 1px solid var(--line-2); border-radius: 3px; background: var(--app); }
.code-top { display: flex; align-items: stretch; justify-content: space-between; height: 40px; padding-right: 14px; border-bottom: 1px solid var(--line); background: var(--app-bar); font-size: 0.8125rem; }
.code-top > * { display: flex; align-items: center; }
.code-file { display: flex; align-items: center; gap: 8px; padding: 0 16px; font-family: var(--mono); font-weight: 600; background: var(--app); border-right: 1px solid var(--line); box-shadow: inset 0 2px 0 var(--accent); margin-bottom: -1px; }
.code-file svg { width: 16px; height: 16px; color: var(--text-3); }
.code-dim { font-family: var(--mono); color: var(--text-3); }
.code { padding: 18px 0; overflow-x: auto; font-size: 0.8125rem; line-height: 1.75; counter-reset: ln; }
.code:focus-visible { outline-offset: -3px; }
.code code { display: grid; font-size: 1em; }
.cl { display: block; padding: 0 20px 0 12px; white-space: pre; counter-increment: ln; border-left: 2px solid transparent; transition: background-color var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease), color var(--t-mid) var(--ease); }
.cl::before { content: counter(ln); display: inline-block; width: 2.4ch; margin-right: 18px; text-align: right; color: var(--text-3); opacity: 0.7; }
/* Lines outside the step you're reading go quiet and monochrome (still AA); the step's own lines keep their colour. */
.code-card[data-active] .cl { color: var(--text-3); --tk-k: var(--text-3); --tk-s: var(--text-3); --tk-n: var(--text-3); }
.code-card[data-active="1"] .cl[data-block="1"],
.code-card[data-active="2"] .cl[data-block="2"],
.code-card[data-active="3"] .cl[data-block="3"],
.code-card[data-active="4"] .cl[data-block="4"] {
  color: var(--text); --tk-k: initial; --tk-s: initial; --tk-n: initial;
  border-left-color: var(--accent); background: color-mix(in oklab, var(--moon) 11%, transparent);
}

/* Phones: the file soft-wraps like an editor instead of hiding its line ends off the side.
   The number sits in its own gutter, and a wrapped line hangs 4ch in, so line 6 still reads as line 6. */
@media (max-width: 599px) {
  .code { font-size: 0.75rem; padding: 14px 0; }
  .cl { position: relative; white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 14px 0 calc(8px + 2.4ch + 12px + 4ch); text-indent: -4ch; }
  .cl::before { position: absolute; left: 8px; margin: 0; text-indent: 0; }
}

/* ---------- Integrations ---------- */

.integ-head { display: grid; gap: 0 56px; margin-bottom: clamp(36px, 5vw, 56px); }
.integ-head .section-lede { max-width: 56ch; }
@media (min-width: 1100px) {
  .integ-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .integ-head .section-lede { margin-top: 0; }
}

/* Every connected tool as a row on INC-2291's clock, 03:12:00 to 03:14:10 (130 s). A mark
   is when Lullops touched it; tools it didn't need that night stay on the list, empty. */
.route { --name: 150px; }
.route-cap { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-bottom: 14px; font-size: 0.9375rem; color: var(--text-2); }
.route-cap strong { font-family: var(--mono); font-size: 0.875rem; color: var(--text); }
.route-axis {
  position: relative; height: 22px; margin-left: calc(var(--name) + 16px); margin-right: 16px;
  font-family: var(--mono); font-size: 0.6875rem; color: var(--text-3); font-variant-numeric: tabular-nums;
}
.route-axis span { position: absolute; left: calc(var(--t) / 130 * 100%); transform: translateX(-50%); }
.route-axis span:first-child { transform: none; }
.route-body { position: relative; border-top: 1px solid var(--line-2); }
.route-group ul { display: grid; }
.route-h {
  display: flex; align-items: center; gap: 8px; padding: 18px 0 8px;
  font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3);
}
.route-h::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kind); }
.route-listen { --kind: var(--red); }
.route-read { --kind: var(--blue); }
.route-act { --kind: var(--green); }
.route-row {
  display: grid; grid-template-columns: var(--name) minmax(0, 1fr); column-gap: 16px; align-items: center;
  min-height: 34px; padding-right: 16px; border-bottom: 1px solid var(--line);
}
@media (hover: hover) { .route-row:hover { background: var(--surface-2); } }
.route-name { font-weight: 560; font-size: 0.9375rem; }
.route-row.is-idle .route-name { color: var(--text-3); font-weight: 500; }
.route-track {
  position: relative; height: 34px;
  background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / calc(30 / 130 * 100%) 100% repeat-x;
}
.route-mark {
  position: absolute; top: 50%; left: calc(var(--t) / 130 * 100%); width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--kind);
}
.route-bar { width: calc(var(--d) / 130 * 100%); min-width: 10px; height: 6px; margin: -3px 0 0; border-radius: 3px; transform-origin: 0 50%; }
.route-mark-none { background: var(--bg); box-shadow: inset 0 0 0 2px var(--kind); }
.route-note {
  position: absolute; top: 50%; left: calc(var(--t) / 130 * 100%); transform: translate(12px, -50%);
  font-size: 0.8125rem; color: var(--text); white-space: nowrap;
}
.route-note time { font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); margin-right: 4px; }
.route-note-flip { left: auto; right: calc(100% - var(--t) / 130 * 100%); transform: translate(-12px, -50%); }
.route-note-flip time { margin: 0 0 0 4px; }
.route-note-idle { left: 0; transform: translateY(-50%); padding-left: 10px; font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); }

/* The first time it's seen, a cursor runs the incident's two minutes left to right and
   each mark lands as it passes. Only when it starts below the fold. */
.route-sweep { display: none; }
.route .route-note:not(.route-note-idle) { clip-path: inset(-4px -4px -4px -4px); }
.route.is-waiting .route-mark { scale: 0; }
.route.is-waiting .route-note:not(.route-note-idle) { clip-path: inset(-4px 100% -4px -4px); }
/* A note left of its mark unrolls away from the mark, after the mark lands. */
.route.is-waiting .route-note-flip { clip-path: inset(-4px -4px -4px 100%); }
.route.is-playing .route-mark { transition: scale 220ms var(--ease) calc(var(--t) / 130 * 1600ms); }
.route.is-playing .route-note { transition: clip-path 360ms var(--ease) calc(var(--t) / 130 * 1600ms + 120ms); }
.route.is-playing .route-sweep {
  display: block; position: absolute; z-index: 1; top: 0; bottom: 0; left: calc(var(--name) + 16px); width: 2px;
  background: var(--accent); pointer-events: none;
  animation: sweep 1600ms linear both;
}
@keyframes sweep { from { translate: 0 0; } to { translate: var(--sweep, 0px) 0; } }

@media (max-width: 859px) {
  .route { --name: 120px; }
  .route-note { font-size: 0.75rem; }
  .route-note time { display: none; }
}
/* Phones: no clock to draw on, so each row reads as a line of the log. */
@media (max-width: 639px) {
  .route-axis, .route-sweep { display: none !important; }
  .route-row { grid-template-columns: 1fr; row-gap: 2px; padding: 8px 0; min-height: 0; }
  @media (hover: hover) { .route-row:hover { background: none; } }
  .route-track { height: auto; background: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .route-mark { position: static; margin: 0; flex: none; scale: 1 !important; }
  .route-bar { width: 16px; height: 6px; }
  .route-mark ~ .route-mark { display: none; }
  .route-note { position: static; transform: none; white-space: normal; order: 2; clip-path: none !important; font-size: 0.8125rem; }
  .route-note time { display: inline; margin: 0 6px 0 0; }
  .route-note-flip { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; }
  .route-note-flip time { margin: 0; }
  .route-row.is-idle .route-track { display: none; }
  .route-row.is-idle .route-name::after { content: ", not needed tonight"; font-family: var(--mono); font-size: 0.75rem; }
}

/* ---------- Security ---------- */

.sec { background: var(--bg-alt); border-block: 1px solid var(--line); }
.sec-grid { display: grid; gap: clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 1100px) { .sec-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 72px; } .sec-copy { position: sticky; top: 108px; } }
.fine { margin-top: 32px; border-top: 1px solid var(--line-2); font-size: 0.9375rem; }
.fine div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.fine dt { font-family: var(--mono); font-size: 0.75rem; font-weight: 600; color: var(--text-3); padding-top: 2px; }
.fine dd { color: var(--text-2); }

/* The permissions screen, as a plain ruled table on the page. */
.perm { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.perm caption { padding: 0 0 12px; text-align: left; border-bottom: 2px solid var(--text); }
.perm-cap { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.perm-cap-title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.875rem; font-weight: 600; }
.perm-cap-title svg { width: 16px; height: 16px; color: var(--text-3); align-self: center; }
.perm-cap-dim { font-size: 0.75rem; color: var(--text-3); }
.perm th, .perm td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.perm th { font-weight: 500; padding-right: 16px; }
.perm td { text-align: right; white-space: nowrap; }

/* The audit log from the replay's incident. */
.audit { margin-top: clamp(36px, 4vw, 48px); }
.audit-cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-bottom: 10px; border-bottom: 2px solid var(--text); font-size: 0.75rem; color: var(--text-3); }
.audit-cap .mono { font-size: 0.875rem; font-weight: 600; color: var(--text); }
.audit-rows { font-family: var(--mono); font-size: 0.8125rem; line-height: 1.45; }
.audit-rows li { display: grid; grid-template-columns: 76px 100px minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.audit-rows time { color: var(--text-3); font-variant-numeric: tabular-nums; }
.audit-act { font-weight: 600; color: var(--blue); }
.audit-ok { color: var(--green); }
.audit-no { color: var(--red); }
.audit-what { color: var(--text-2); }
@media (max-width: 519px) {
  .audit-rows li { grid-template-columns: 70px minmax(0, 1fr); row-gap: 0; }
  .audit-what { grid-column: 2; }
  .perm th, .perm td { padding-block: 10px; }
  .perm th { font-size: 0.875rem; }
}

/* ---------- Postmortem ---------- */

.pm-layout { display: grid; gap: 16px; align-items: end; }
@media (min-width: 1100px) { .pm-layout { grid-template-columns: minmax(0, 760px) 260px; column-gap: 24px; } }
.doc {
  padding: clamp(24px, 4vw, 48px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 48px);
  border: 1px solid var(--line); border-radius: 4px; background: var(--surface); max-width: 760px;
}
.doc-path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-family: var(--mono); font-size: 0.75rem; color: var(--text-2); }
.doc-crumbs { color: var(--text-3); }
.doc-title { margin-top: 22px; font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1.15; }
.doc-meta { margin-top: 10px; font-size: 0.875rem; color: var(--text-3); }
.doc-h { margin-top: 28px; font-size: 1rem; font-weight: 650; letter-spacing: -0.01em; }
.doc-h + p, .doc-h + ol, .doc-h + ul { margin-top: 6px; }
.doc p { color: var(--text-2); max-width: 64ch; }
.doc p.doc-meta { color: var(--text-3); }
.doc p.doc-path { color: var(--text-2); }
.doc code { padding: 1px 5px; border-radius: 4px; background: var(--surface-3); font-size: 0.85em; }
.doc-timeline li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--text-2); }
.doc-timeline li:last-child { border-bottom: 0; }
.doc-timeline time { font-family: var(--mono); font-size: 0.8125rem; color: var(--text-3); padding-top: 2px; }
.doc-todo li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 7px 0; color: var(--text-2); }
.doc-box { width: 14px; height: 14px; border: 1.5px solid var(--text-3); border-radius: 3px; transform: translateY(2px); }
.doc-who { font-family: var(--mono); font-size: 0.8125rem; color: var(--text-3); }
.doc mark { background: light-dark(#fbeec6, #3a3524); color: var(--text); padding: 0 2px; border-bottom: 2px solid var(--moon); }
/* One comment in the margin, next to the line it's about. */
.doc-comment { position: relative; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--surface); font-size: 0.9375rem; max-width: 320px; margin-bottom: clamp(28px, 4vw, 48px); }
.doc-comment::before { content: ""; position: absolute; left: -25px; top: 24px; width: 24px; border-top: 1px dashed var(--line-2); }
.doc-c-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.875rem; }
.doc-c-head time { margin-left: auto; font-family: var(--mono); font-size: 0.75rem; color: var(--text-3); }
.doc-c-av { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--green-soft); color: var(--green); font-size: 0.75rem; font-weight: 700; }
.pm-note { margin-top: 16px; font-size: var(--fs-xs); color: var(--text-3); }
@media (max-width: 1099px) {
  .doc-comment { margin: 0 0 0 clamp(16px, 6vw, 64px); }
  .doc-comment::before { left: 24px; top: -17px; width: 0; height: 16px; border-top: 0; border-left: 1px dashed var(--line-2); }
}
@media (max-width: 519px) {
  .doc-todo li { grid-template-columns: 18px minmax(0, 1fr); }
  .doc-who { grid-column: 2; }
  .doc-timeline li { grid-template-columns: 64px minmax(0, 1fr); }
}

/* ---------- Changelog ---------- */

.changelog { border-top: 1px solid var(--line); padding-block: clamp(64px, 7vw, 104px); }
.log-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-bottom: 14px; border-bottom: 2px solid var(--text); }
.log-h { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.02em; }
.log-note { font-size: 0.875rem; color: var(--text-3); }
.release { display: grid; grid-template-columns: 120px 56px minmax(0, 220px) minmax(0, 1fr); column-gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); }
.release-meta { display: contents; }
.release-meta time { font-family: var(--mono); font-size: 0.8125rem; color: var(--text-3); }
.release-v { font-family: var(--mono); font-size: 0.8125rem; font-weight: 600; color: var(--text-2); }
.release:first-child .release-v { color: var(--accent); }
.release h3 { font-size: 1rem; font-weight: 640; letter-spacing: -0.01em; }
.release p:not(.release-meta) { color: var(--text-2); max-width: 60ch; }
@media (max-width: 859px) {
  .release { grid-template-columns: 110px 48px minmax(0, 1fr); row-gap: 2px; }
  .release p:not(.release-meta) { grid-column: 3; }
}
@media (max-width: 519px) {
  .release { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; }
  .release h3, .release p:not(.release-meta) { grid-column: 1 / -1; }
}

/* ---------- Trial ---------- */

.trial { border-top: 1px solid var(--line); }
.trial-grid { display: grid; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (min-width: 960px) { .trial-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
/* The last thing on the page is the product again: the first screen of a new workspace. */
.trial-form { border: 1px solid var(--line-2); border-radius: 10px; background: var(--app); color: var(--text); overflow: hidden; }
.ws-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 44px; padding: 0 18px; border-bottom: 1px solid var(--line); background: var(--app-bar); font-size: 0.875rem; font-weight: 600; }
.ws-step { font-family: var(--mono); font-size: 0.75rem; font-weight: 500; color: var(--text-3); }
.ws-body { display: grid; gap: 16px; padding: clamp(18px, 2.4vw, 24px); }
.field { display: grid; gap: 6px; }
.field label { font-size: 0.875rem; font-weight: 600; }
.field input, .field select {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 1rem;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.field input::placeholder { color: var(--text-3); opacity: 1; }
@media (hover: hover) { .field input:hover, .field select:hover { border-color: var(--text-3); } }
.field input:focus-visible, .field select:focus-visible { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in oklab, var(--focus) 28%, transparent); }
.field [aria-invalid="true"] { border-color: var(--red); }
.select { position: relative; }
.select select { appearance: none; padding-right: 40px; }
.select::after {
  content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; margin-top: -6px;
  border-right: 1.5px solid var(--text-2); border-bottom: 1.5px solid var(--text-2); transform: rotate(45deg); pointer-events: none;
}
.field-err { font-size: 0.8125rem; font-weight: 500; color: var(--red); }
.field-err:empty { display: none; }
.form-note { font-size: var(--fs-xs); color: var(--text-3); }
.form-done { display: grid; gap: 8px; padding: 16px; border-radius: var(--r-md); background: var(--green-soft); color: var(--text); font-size: 0.9375rem; }
.form-done strong { color: var(--green); font-size: 1rem; }
.form-done:focus { outline: none; }
.form-done .btn { justify-self: start; margin-top: 4px; }
.trial-form.is-done .ws-body > :not([data-done]) { display: none; }

/* ---------- Footer ---------- */

.site-footer { padding: clamp(40px, 5vw, 64px) 0 40px; border-top: 1px solid var(--line); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.footer-status { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--mono); font-size: 0.8125rem; color: var(--text-2); }
.footer-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--green); transform: translateY(-1px); }
.footer-nav { margin-left: auto; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.footer-nav a { display: inline-block; padding: 6px 0; color: var(--text-2); font-size: 0.9375rem; text-decoration: none; }
@media (hover: hover) { .footer-nav a:hover { color: var(--text); text-decoration: underline; } }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--text-3); }
.footer-base a { color: var(--text-2); padding-block: 14px; }
@media (max-width: 859px) { .footer-nav { margin-left: 0; width: 100%; } }

/* ---------- Concept badge ---------- */

/* A narrow tab on the right edge: it sits in the page gutter, so it never covers content. */
.concept-badge {
  position: fixed; right: 0; bottom: 96px; z-index: 30;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: inline-flex; align-items: center; width: 24px; padding: 12px 0; border-radius: 0 6px 6px 0;
  border: 1px solid var(--line-2); border-left: 0; background: var(--surface-3); color: var(--text-2);
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap;
}
@media (hover: hover) { .concept-badge:hover { color: var(--text); border-color: var(--text-3); } }
.concept-badge:focus-visible { outline-offset: 2px; }
/* On touch screens the 24px tab gets a finger-sized hit area; the part past the screen edge does nothing. */
@media (pointer: coarse) { .concept-badge::before { content: ""; position: absolute; inset: -4px -20px; } }
.concept-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--moon); }
.capture .concept-badge { display: none; }

/* On phones the badge rides in the sticky header instead, so it never sits on the page. */
.concept-strip { display: none; }
/* It spans the screen, so a 32px band is an easy tap without adding to the sticky header:
   the bar under it gives up the same 6px. */
@media (max-width: 599px) {
  :root { --bar-h: 62px; }
  :root:not(.capture) { --strip-h: 32px; }
  .concept-badge { display: none; }
  .concept-strip {
    display: flex; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 var(--gutter);
    background: var(--surface-3); color: var(--text-2); font-size: 0.75rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  }
  .concept-strip:focus-visible { outline-offset: -3px; }
  .concept-strip .concept-dot { width: 6px; height: 6px; background: var(--accent); }
  .concept-strip-more { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; color: var(--text); }
  .concept-strip-more svg { width: 12px; height: 12px; }
  .capture .concept-strip { display: none; }
}

/* ---------- Command palette ---------- */

.cmdk {
  width: min(640px, calc(100vw - 24px)); max-height: min(520px, calc(100dvh - 120px));
  margin: 12vh auto auto; padding: 0; border: 1px solid var(--line-2); border-radius: 16px;
  background: var(--surface); color: var(--text); box-shadow: 0 40px 100px -20px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(0 0 0 / 0.02);
  overflow: hidden;
}
.cmdk[open] { display: flex; flex-direction: column; animation: cmdk-in 220ms var(--ease); }
.cmdk::backdrop { background: light-dark(rgb(13 17 48 / 0.34), rgb(3 5 18 / 0.66)); animation: fade-in 220ms var(--ease); }
@keyframes cmdk-in { from { opacity: 0; transform: translateY(-8px) scale(0.985); } }
@keyframes fade-in { from { opacity: 0; } }
.cmdk-field { display: flex; align-items: center; gap: 12px; height: 60px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); flex: none; }
.cmdk-field > svg { width: 20px; height: 20px; color: var(--text-3); flex: none; }
.cmdk-input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 1.0625rem; outline: none; }
.cmdk-input::placeholder { color: var(--text-3); }
.cmdk-esc { height: 26px; padding: 0 8px; border-radius: 6px; border: 1px solid var(--line-2); font-family: var(--mono); font-size: 0.75rem; color: var(--text-2); }
@media (hover: hover) { .cmdk-esc:hover { border-color: var(--text-3); color: var(--text); } }
.cmdk-list { overflow-y: auto; overscroll-behavior: contain; padding: 8px; scroll-padding: 8px; }
.cmdk-group + .cmdk-group { margin-top: 6px; }
.cmdk-group-h { padding: 8px 10px 6px; font-family: var(--mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.cmdk-opt { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 10px; border-radius: 10px; cursor: pointer; font-size: 0.9375rem; }
.cmdk-opt svg { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.cmdk-opt[aria-selected="true"] { background: var(--surface-3); }
.cmdk-opt[aria-selected="true"] svg { color: var(--accent); }
.cmdk-opt-hint { margin-left: auto; font-size: 0.8125rem; color: var(--text-3); }
.cmdk-empty { padding: 28px 12px; text-align: center; color: var(--text-3); }
.cmdk-empty:empty { display: none; }
.cmdk-foot { display: flex; gap: 16px; align-items: center; height: 42px; padding: 0 16px; border-top: 1px solid var(--line); background: var(--surface-2); font-size: 0.75rem; color: var(--text-3); flex: none; }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 6px; }
.cmdk-esc-x { display: none; width: 20px; height: 20px; }
@media (max-width: 599px) {
  .cmdk { margin-top: 12px; }
  .cmdk-foot { display: none; }
}
/* Touch: no keyboard to hint at. The Esc key becomes a close button you can hit. */
@media (hover: none) and (pointer: coarse) {
  .cmdk-foot { display: none; }
  .cmdk-field { padding-right: 6px; }
  .cmdk-esc { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; color: var(--text-2); }
  .cmdk-esc-key { display: none; }
  .cmdk-esc-x { display: block; }
  .cmdk-opt { height: 48px; }
}
/* Landscape phones: the palette uses the height there is. */
@media (max-height: 500px) {
  .cmdk { margin-top: 12px; max-height: calc(100dvh - 24px); }
}

/* ---------- Phones and touch screens: nothing you read is under 12px ---------- */

@media (max-width: 719px), (pointer: coarse) {
  :is(.chip-app, .sev, .avatar, .facts dt, .step-time, .deploy-flag, .spans, .app-side-title, .app-side-count,
      .night-stats dt, .hypno-levels li, .hypno-pin, .hypno-hours, .nl-n, .page-facts dt, .page-opt-tag,
      .route-axis, .route-h, .cmdk-group-h, .concept-badge) { font-size: 0.75rem; }
  .chip-app { height: 20px; }
  .alert-top .mono { font-size: 0.75rem; }
  :is(.finding, .msg, .page-facts) code { font-size: 0.92em; }
  /* Full-size targets for the small text links. */
  .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  .transcript summary { min-height: 44px; margin-block: -12px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
  .moonrise-moon, .typing-dots i, .status-busy .status-dot, .firing-dot, .zzz i { animation: none !important; }
}