/* needs-you site. Plain CSS, no build step.

   Styled on the owner's shared design tokens: the two-layer split is kept here.
   1. Primitives: the only place a hex appears. Ramps and the type scale.
   2. Semantic: what the rules below reference. Components never use a primitive
      directly, so a colour change is one line in one place.

   Dark-first: :root is the dark theme; the light variant is the same neutral
   ramp inverted, applied only when the reader's system asks for light.
   One accent (amber) spent on the button, link underlines and focus, never on
   decoration. No gradients, no shadows, one border weight. The one exception is the
   demo pill's arrival ring (.pv.is-arriving), which copies the app's own glow.

   The pill preview (.pv) and the live demo (.demo) use the Mac app's priority colours
   and link-button look (mac/Sources/NeedsYou/Views/Theme.swift), always dark. */

/* IBM Plex, bundled (SIL OFL 1.1, fonts/OFL.txt): the Latin1 subsets from IBM's
   @ibm/plex-sans 1.1.0 and @ibm/plex-mono 2.5.0 packages. Characters outside
   the subset (the arrows) fall back to the next font in the stack. */
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}


:root {
  /* ---- Primitives ---- */
  --neutral-0: #ffffff;
  --neutral-50: #f5f6f7;
  --neutral-100: #e3e5e8;
  --neutral-200: #c5c9cf;
  --neutral-300: #9fa4ad;
  --neutral-400: #777c85;
  --neutral-500: #565a62;
  --neutral-600: #3d4047;
  --neutral-700: #292b30;
  --neutral-800: #1a1c20;
  --neutral-900: #141518;
  --neutral-950: #0d0e10;
  --neutral-1000: #07080a;
  --amber-300: #f5cd72;
  --amber-400: #e8b13c;
  --amber-600: #a87513;
  /* The Mac app's priority colours (mac/Sources/NeedsYou/Views/Theme.swift). */
  --red-400: #f87171;
  --yellow-300: #fcd34d;
  --slate-400: #94a3b8;
  --green-400: #4ade80;

  --font-sans: "IBM Plex Sans", "Roboto", "Helvetica", "Arial", sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", ui-monospace, monospace;
  --size-display: 2.75rem;  /* 44px */
  --size-h1: 2rem;          /* 32px */
  --size-h2: 1.5rem;        /* 24px */
  --size-h4: 1.125rem;      /* 18px */
  --size-body: 1rem;        /* 16px */
  --size-h5: 0.9375rem;     /* 15px */
  --size-small: 0.875rem;   /* 14px */
  --size-h6: 0.8125rem;     /* 13px */
  --size-caption: 0.6875rem;/* 11px */
  --size-mono: 0.8125rem;   /* 13px */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --radius: 6px;
  --radius-stage: 12px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --measure: 40rem;         /* the longest a line of body text gets: about 75 characters */
  --tap: 44px;              /* minimum tap target */

  /* ---- Semantic (dark, the default) ---- */
  --surface-default: var(--neutral-1000);
  --surface-raised: var(--neutral-900);
  --surface-hover: var(--neutral-800);
  --surface-sunken: var(--neutral-950);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-strong: var(--neutral-700);
  --text-primary: var(--neutral-50);
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-400);
  --brand-main: var(--amber-400);
  --brand-focus: var(--amber-400);
  --brand-contrast: var(--neutral-1000);

  /* Where screenshots and the demo sit: a quiet "desktop" the dark app reads against. */
  --stage-bg: var(--neutral-900);
  --stage-border: rgba(255, 255, 255, 0.06);
  --desk-bar: var(--neutral-800);
  --desk-text: var(--neutral-300);

  /* The pill is always dark, like the app's HUD panel, in both themes. */
  --hud-surface: var(--neutral-950);
  --hud-fill: var(--neutral-700);
  --hud-idle: var(--neutral-800);
  --hud-border: rgba(255, 255, 255, 0.08);
  --hud-text: var(--neutral-0);
  --hud-secondary: var(--neutral-300);
  --hud-muted: rgba(255, 255, 255, 0.55);
  --hud-faint: rgba(255, 255, 255, 0.35);
  --hud-link-fill: rgba(255, 255, 255, 0.14);
  --hud-link-fill-hover: rgba(255, 255, 255, 0.26);
  --hud-link-stroke: rgba(255, 255, 255, 0.18);
  --hud-link-stroke-hover: rgba(255, 255, 255, 0.5);
  --hud-link-dest: rgba(255, 255, 255, 0.62);
  --prio-urgent: var(--red-400);
  --prio-normal: var(--yellow-300);
  --prio-low: var(--slate-400);
  --ok: var(--green-400);

  color-scheme: dark light;
}

@media (prefers-color-scheme: light) {
  :root {
    --surface-default: var(--neutral-50);
    --surface-raised: var(--neutral-0);
    --surface-hover: var(--neutral-100);
    --surface-sunken: var(--neutral-100);
    --border-subtle: rgba(0, 0, 0, 0.08);
    --border-strong: var(--neutral-200);
    --text-primary: var(--neutral-900);
    --text-secondary: var(--neutral-600);
    --text-muted: var(--neutral-500);
    --brand-focus: var(--amber-600);
    --stage-bg: var(--neutral-200);
    --stage-border: rgba(0, 0, 0, 0.06);
    --desk-bar: var(--neutral-100);
    --desk-text: var(--neutral-600);
  }
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--surface-default);
  color: var(--text-primary);
  font: var(--weight-regular) var(--size-body)/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 44rem; margin: 0 auto; padding: 0 var(--space-4); }

a {
  color: inherit;
  text-decoration-color: var(--brand-focus);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--text-primary); text-decoration-thickness: 2px; }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--space-4); top: -4rem; z-index: 2;
  background: var(--brand-main); color: var(--brand-contrast);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius);
  font-weight: var(--weight-medium); text-decoration: none;
}
.skip:focus { top: var(--space-4); }

/* Header: a sunken bar with a hairline, like the app bars the kit sets. */
.bar {
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-subtle);
}
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  min-height: 3.5rem;
  font-size: var(--size-h6);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap);
  font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap;
}
.dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--brand-main); }
.top nav { display: flex; gap: var(--space-1); }
.top nav a {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 var(--space-3); border-radius: var(--radius);
  color: var(--text-secondary); font-weight: var(--weight-medium); text-decoration: none;
  white-space: nowrap;
}
.top nav a:hover { color: var(--text-primary); background: var(--surface-hover); }

/* Type */
h1 {
  font-size: clamp(var(--size-h1), 1.4rem + 2.4vw, var(--size-display));
  font-weight: var(--weight-semibold);
  line-height: 1.12; letter-spacing: -0.02em;
  margin: var(--space-8) 0 var(--space-4);
  text-wrap: balance;
}
h2 {
  font-size: var(--size-h2); font-weight: var(--weight-semibold);
  line-height: 1.25; letter-spacing: -0.01em;
  margin: 0 0 var(--space-3);
}
h3 { font-size: var(--size-h4); font-weight: var(--weight-semibold); line-height: 1.35; }
p { margin: 0 0 var(--space-3); }
.lede { font-size: var(--size-h4); line-height: 1.55; color: var(--text-secondary); max-width: 34rem; }
.note { color: var(--text-muted); font-size: var(--size-small); line-height: 1.6; }
strong { font-weight: var(--weight-semibold); }

section { padding: var(--space-6) 0; border-top: 1px solid var(--border-subtle); }

code, pre { font-family: var(--font-mono); }
:not(pre) > code {
  font-size: 0.875em;
  background: var(--surface-raised); border: 1px solid var(--border-subtle);
  border-radius: var(--radius); padding: 0.05em 0.35em;
  overflow-wrap: anywhere;
}

/* ---- The landing page ----
   One column of text, at most --measure wide, and on wide screens a rail on the right
   where the live demo stays in view. Every block in a section is spaced by one rule
   (the "flow" margins below), so text, code, figures and notes keep the same rhythm. */
.wrap-home { max-width: 44rem; }
.home > section { padding: var(--space-12) 0; }
.home > section.intro { border-top: 0; padding: var(--space-12) 0 var(--space-8); }
.home section > * { margin-top: 0; margin-bottom: 0; }
.home section > * + * { margin-top: var(--space-4); }
.home section > h2 + * { margin-top: var(--space-4); }
.home section > :is(.code, .shot, .arch, .table-wrap, .see, .works, .how),
.home section > :is(.code, .shot, .arch, .table-wrap, .see, .works, .how) + * { margin-top: var(--space-8); }
.home section > h3 { margin-top: var(--space-12); }
.home section > h3 + * { margin-top: var(--space-3); }
.home section > :is(p, .shot figcaption) { max-width: var(--measure); }
.home .intro h1 { margin: 0; }
@media (min-width: 46rem) { .h1-quote { display: inline-block; } }
.home .intro .lede { margin-top: var(--space-6); }
.home .intro .hero-sub { margin-top: var(--space-3); color: var(--text-muted); }

@media (min-width: 68rem) {
  .wrap-home { max-width: 72rem; }
  .home {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    column-gap: var(--space-16);
    align-items: start;
  }
  .home > section { grid-column: 1; }
  /* The rail: the demo spans every row, so it can stick for the whole page. */
  .home > .demo {
    grid-column: 2; grid-row: 1 / span 12;
    position: sticky; top: var(--space-6);
    margin-top: var(--space-12);
  }
}

/* How it works: three outlined steps, numbered in mono (they happen in this order). */
.how {
  list-style: none; padding: 0;
  display: grid; gap: var(--space-2);
  counter-reset: step;
}
.how li {
  counter-increment: step;
  position: relative;
  padding: var(--space-4) var(--space-4) var(--space-4) 3.25rem;
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  font-size: var(--size-h5);
}
.how li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--size-h6);
  color: var(--text-muted);
  position: absolute; left: var(--space-4); top: calc(var(--space-4) + 0.15em);
}

/* Buttons and code */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--space-6);
  background: var(--brand-main); color: var(--brand-contrast);
  border-radius: var(--radius);
  font-weight: var(--weight-semibold); text-decoration: none;
}
.button:hover { color: var(--brand-contrast); filter: brightness(1.08); }

.code {
  position: relative;
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
}
.code pre {
  margin: 0; padding: var(--space-3) var(--space-4);
  font-size: var(--size-mono); line-height: 1.6;
  white-space: pre; overflow-x: auto;
}
.code.has-copy pre { padding-right: 5.5rem; }
.copy {
  position: absolute; top: 50%; right: var(--space-1); transform: translateY(-50%);
  min-height: var(--tap); min-width: 4.5rem; padding: 0 var(--space-3);
  font: var(--weight-medium) var(--size-caption)/1 var(--font-sans);
  color: var(--text-secondary);
  background: var(--surface-raised); border: 1px solid var(--border-strong);
  border-radius: var(--radius); cursor: pointer;
}
.copy:hover { color: var(--text-primary); background: var(--surface-hover); }

/* Screenshots and figures. A figure is a stage (the screenshot, centred on a quiet
   backdrop with room around it, at a size set here rather than by the PNG) and a caption
   under it, outside the frame, in the page's own text colours. */
.shot { margin: 0; }
.stage {
  display: flex; justify-content: center; align-items: center;
  padding: clamp(var(--space-4), 5vw, var(--space-8));
  background: var(--stage-bg);
  border: 1px solid var(--stage-border);
  border-radius: var(--radius-stage);
}
.stage img { display: block; max-width: 100%; height: auto; }
.shot .stage img { width: 100%; }
.stage-window { padding: clamp(var(--space-2), 4vw, var(--space-8)); }
.stage-window img { border-radius: 10px; outline: 1px solid var(--hud-border); }
.shot figcaption, .arch figcaption, .doc-fig figcaption {
  margin-top: var(--space-3);
  font-size: var(--size-small); line-height: 1.55;
  color: var(--text-secondary);
}

/* What it looks like: the open panel beside the pill's states. */
.see { display: grid; gap: var(--space-8); grid-template-columns: minmax(0, 1fr); }
.see-panel .stage img { max-width: 17rem; }
.states { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6); align-content: start; }
.states li { display: grid; gap: var(--space-3); }
.states p { margin: 0; font-size: var(--size-h5); color: var(--text-secondary); }
.states strong { color: var(--text-primary); }
.state-shot {
  display: flex; align-items: center; justify-content: center; gap: var(--space-4);
  min-height: 5rem; padding: var(--space-4);
  background: var(--stage-bg); border: 1px solid var(--stage-border); border-radius: var(--radius-stage);
}
.state-shot img { display: block; max-width: 100%; height: auto; }
@media (min-width: 46rem) {
  .see { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

/* ---- The pill preview (.pv): the app's arrival card, drawn in HTML. Always dark.
   The live demo animates it; the agents section shows it still. Layout as in the app:
   title and meta on full-width lines, the link button on its own row below them. */
.pv {
  --pv-color: var(--prio-normal);
  position: relative;
  width: 100%; max-width: 22rem;
  color: var(--hud-text);
  background: var(--hud-fill);
  background: color-mix(in srgb, var(--pv-color) 9%, var(--hud-fill));
  border: 1.5px solid var(--pv-color);
  border-radius: 14px;
  font-family: var(--font-sans);
}
.pv-urgent { --pv-color: var(--prio-urgent); }
.pv-normal { --pv-color: var(--prio-normal); }
.pv-low { --pv-color: var(--prio-low); }
.pv p { margin: 0; }
.pv-idle { display: none; }
.pv-body { padding: 10px 14px 12px 12px; }
.pv-head { display: flex; align-items: flex-start; gap: 10px; }
.pv-dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--pv-color); }
.pv-dot-ok { background: var(--ok); margin-top: 0; }
.pv-text { min-width: 0; }
.pv-title { font-size: var(--size-h6); font-weight: var(--weight-semibold); line-height: 1.4; color: var(--hud-text); }
.pv-meta { margin-top: 1px; font-size: var(--size-caption); line-height: 1.45; color: var(--hud-muted); }
.pv-kind { color: var(--pv-color); }
.pv-actions { display: grid; justify-items: start; margin-top: 8px; padding-left: 17px; }
.pv-link, .pv-done { grid-area: 1 / 1; }
.pv-link {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  font-size: var(--size-caption); font-weight: var(--weight-medium); line-height: 1.4;
  white-space: nowrap;
  background: var(--hud-link-fill);
  border: 1px solid var(--hud-link-stroke);
  border-radius: 999px;
  font-family: var(--font-sans); color: var(--hud-text);
}
button.pv-link { margin: 0; cursor: pointer; }
.pv-dest { font-weight: var(--weight-regular); color: var(--hud-link-dest); }
.pv-arrow { width: 8px; height: 8px; margin-left: 1px; }
.pv-arrow path, .pv-done path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pv-done {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 0;
  font-size: var(--size-caption); line-height: 1.4; color: var(--ok);
  visibility: hidden;
}
.pv-done svg { width: 10px; height: 10px; }
.stage-pv .pv { max-width: 21rem; }

/* The mini schematic of an arrival, for the states list. */
.pv-mini {
  display: flex; align-items: flex-start; gap: 7px;
  width: 9.5rem; padding: 7px 9px;
  background: var(--hud-fill);
  border: 1.5px solid var(--prio-urgent); border-radius: 10px;
}
.pv-mini .pv-dot { --pv-color: var(--prio-urgent); width: 5px; height: 5px; margin-top: 2px; }
.pv-mini-lines { flex: 1; display: grid; gap: 4px; justify-items: start; }
.pv-mini-lines span { display: block; height: 5px; width: 92%; border-radius: 3px; background: var(--hud-faint); }
.pv-mini-lines span + span { width: 60%; height: 4px; background: var(--hud-link-fill); }
.pv-mini-lines .pv-mini-chip { width: 45%; height: 9px; margin-top: 2px; border-radius: 999px; border: 1px solid var(--hud-link-stroke); }

/* ---- The live demo. A slice of a Mac screen: the menu bar, and the pill hanging at the
   top right, where the app puts it. site.js adds .is-live and steps it through the
   examples; without that it shows the first one, still. */
.demo { margin: 0 0 var(--space-4); max-width: 26rem; }
.demo-screen {
  position: relative; overflow: hidden;
  height: 10.5rem;
  background: var(--stage-bg);
  border: 1px solid var(--stage-border);
  border-radius: var(--radius-stage);
}
.demo-menubar {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  height: 1.5rem; padding: 0 var(--space-3);
  background: var(--desk-bar);
  font-size: var(--size-caption); font-weight: var(--weight-medium); color: var(--desk-text);
}
.demo-mb-pill { width: 14px; height: 7px; border-radius: 4px; border: 1.5px solid currentColor; opacity: 0.7; }
.demo-slot { position: absolute; top: 2.125rem; left: var(--space-3); right: var(--space-3); }
.demo .pv { max-width: none; }
.demo-cursor, .demo-ripple, .pv-hit, .pv-count { display: none; }
.demo-caption {
  margin: var(--space-3) 0 0;
  min-height: 3.1em;
  font-size: var(--size-small); line-height: 1.55; color: var(--text-secondary);
}
.demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.demo-controls[hidden], .demo-cmd[hidden], .pp[hidden] { display: none; }
/* Send a test alert: the demo's one real control, a quiet outlined button. */
.demo-send {
  min-height: var(--tap); padding: 0 var(--space-4);
  background: var(--surface-raised); color: var(--text-primary);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  font: var(--weight-medium) var(--size-small)/1 var(--font-sans);
  cursor: pointer;
}
.demo-send:hover { background: var(--surface-hover); }
.demo-send:active { translate: 0 1px; }
.demo-toggle {
  min-height: var(--tap); margin: 0; padding: 0 var(--space-2);
  background: none; border: 0; border-radius: var(--radius);
  font: var(--weight-medium) var(--size-h6)/1 var(--font-sans);
  color: var(--text-muted); cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px;
}
.demo-toggle:hover { color: var(--text-primary); }
/* The command that would have posted the alert just sent. To read, not to copy. */
.demo-cmd { margin-top: var(--space-3); }
.demo-cmd p { margin: 0 0 var(--space-1); font-size: var(--size-h6); color: var(--text-muted); }
.demo-cmd pre {
  margin: 0; padding: var(--space-3);
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  font: var(--size-caption)/1.6 var(--font-mono); color: var(--text-secondary);
  white-space: pre; overflow-x: auto;
}

/* Live and interactive. The pill is a button (.pv-hit, the whole card: opens the panel)
   under the card's text; the link button sits above it. */
.demo.is-live .pv-hit {
  display: block; position: absolute; inset: 0; z-index: 1;
  width: 100%; margin: 0; padding: 0;
  background: transparent; border: 0; border-radius: 12px;
  cursor: pointer;
}
.demo.is-live .pv-hit:hover { background: rgba(255, 255, 255, 0.04); }
.demo.is-live .pv-hit:focus-visible { outline-offset: -3px; border-radius: 12px; }
.demo.is-live .pv-body { z-index: 2; pointer-events: none; }
.demo.is-live .pv-link { position: relative; pointer-events: auto; }
/* A bigger target than the chip draws, for fingers. */
.demo.is-live .pv-link::after { content: ""; position: absolute; inset: -6px -4px; }
.demo.is-live .pv-link:hover, .pp-link:hover { background: var(--hud-link-fill-hover); border-color: var(--hud-link-stroke-hover); }
.demo.is-live .pv-link:active { scale: 0.94; }

/* Live: the pill is pinned to the slot's top-right corner and its size comes from its state.
   --slot-w and --pv-h are measured by site.js. */
.demo.is-live .pv {
  position: absolute; top: 0; right: 0;
  width: var(--slot-w, 100%); height: var(--pv-h, 5.5rem);
  overflow: hidden;
  transition:
    width 0.6s cubic-bezier(0.3, 1.4, 0.5, 1),
    height 0.6s cubic-bezier(0.3, 1.4, 0.5, 1),
    border-radius 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}
.demo.is-live .pv-body {
  position: absolute; top: 0; right: 0; width: var(--slot-w, 100%);
  opacity: 0; transition: opacity 0.2s ease;
}
.demo.is-live .pv[data-state="open"] .pv-body,
.demo.is-live .pv[data-state="done"] .pv-body { opacity: 1; transition-delay: 0.15s; }
.demo.is-live .pv-idle {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: var(--size-caption); color: var(--hud-muted); white-space: nowrap;
  opacity: 0; transition: opacity 0.08s ease;
}
.demo.is-live .pv[data-state="idle"] {
  width: 9.25rem; height: 1.625rem; border-radius: 13px;
  background: var(--hud-idle); border-color: var(--hud-border);
  transition-duration: 0.45s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.demo.is-live .pv[data-state="idle"] .pv-idle { opacity: 1; transition-delay: 0.25s; }
/* Waiting, not new: the count, ringed in the top priority's colour. */
.demo.is-live .pv-count {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--size-h6); font-weight: var(--weight-semibold); color: var(--hud-text);
  opacity: 0; transition: opacity 0.08s ease;
}
.demo.is-live .pv[data-state="count"] {
  width: 3.25rem; height: 1.625rem; border-radius: 13px;
  background: var(--hud-idle);
  transition-duration: 0.45s; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.demo.is-live .pv[data-state="count"] .pv-count { opacity: 1; transition-delay: 0.25s; }
.demo.is-live .pv[data-state="done"] { border-color: var(--hud-border); background: var(--hud-fill); }
.demo.is-live .pv[data-state="done"] .pv-kind { color: var(--hud-muted); transition: color 0.3s ease; }
.demo.is-live .pv[data-state="done"] .pv-dot { background: var(--hud-faint); transition: background-color 0.3s ease; }
.demo.is-live .pv-link { transition: background-color 0.12s ease, border-color 0.12s ease, opacity 0.2s ease, scale 0.12s ease; }
.demo.is-live .pv-link.is-hover { background: var(--hud-link-fill-hover); border-color: var(--hud-link-stroke-hover); }
.demo.is-live .pv-link.is-pressed { scale: 0.94; }
.demo.is-live .pv[data-state="done"] .pv-link { opacity: 0; }
.demo.is-live .pv[data-state="done"] .pv-done { visibility: visible; }
.demo.is-live .pv.is-arriving { animation: pv-glow 1.2s ease-out; }
@keyframes pv-glow {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pv-color) 60%, transparent); }
  100% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--pv-color) 0%, transparent); }
}

.demo.is-live .demo-cursor {
  display: block;
  position: absolute; left: 0; top: 0; z-index: 1;
  width: 16px; height: 22px;
  opacity: 0;
  translate: var(--cx, 0) var(--cy, 0);
  transform-origin: 2px 2px;
  transition: translate 0.9s cubic-bezier(0.5, 0, 0.25, 1), opacity 0.3s ease, scale 0.12s ease;
}
.demo-cursor path { fill: var(--neutral-0); stroke: var(--neutral-1000); stroke-width: 1.2; stroke-linejoin: round; }
.demo.is-live .demo-cursor.is-shown { opacity: 1; }
.demo.is-live .demo-cursor.no-move { transition: none; }
.demo.is-live .demo-cursor.is-down { scale: 0.86; }
.demo.is-live .demo-ripple {
  display: block;
  position: absolute; left: 0; top: 0;
  width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; border: 2px solid var(--hud-link-stroke-hover);
  translate: var(--rx, 0) var(--ry, 0);
  opacity: 0; pointer-events: none;
}
.demo.is-live .demo-ripple.is-on { animation: demo-ripple 0.5s ease-out; }
@keyframes demo-ripple {
  from { opacity: 1; scale: 0.3; }
  to { opacity: 0; scale: 1.2; }
}

/* The panel (.pp), as the app draws it: a header, then the waiting cards grouped by
   priority, each with a coloured bar, its link button and Done. Opening it grows the
   screen; the list scrolls past about four cards. */
.demo-screen.has-panel { height: auto; }
.demo-screen.has-panel .demo-slot { position: relative; top: auto; left: auto; right: auto; margin: 0.625rem var(--space-3) var(--space-3); }
.pp {
  color: var(--hud-text);
  background: var(--hud-surface);
  border: 1px solid var(--hud-border);
  border-radius: 14px;
  font-family: var(--font-sans);
  overflow: hidden;
}
.pp p { margin: 0; }
.pp-head {
  display: flex; align-items: center; gap: 6px;
  padding: 4px 4px 4px 12px;
  border-bottom: 1px solid var(--hud-border);
}
.pp-name { font-size: var(--size-h6); font-weight: var(--weight-semibold); }
.pp-tab {
  padding: 1px 8px; border-radius: 999px; background: var(--hud-link-fill);
  font-size: var(--size-caption); font-weight: var(--weight-semibold);
}
.pp-n { color: var(--prio-urgent); }
.pp-n.is-zero { color: var(--hud-muted); }
.pp-close {
  display: grid; place-items: center;
  width: 32px; height: 32px; margin: 0 0 0 auto; padding: 0;
  background: none; border: 0; border-radius: var(--radius);
  color: var(--hud-muted); cursor: pointer;
}
.pp-close:hover { color: var(--hud-text); background: var(--hud-link-fill); }
.pp-close svg, .pp-done svg, .pp-empty svg { width: 10px; height: 10px; }
.pp-close path, .pp-done path, .pp-empty path { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pp-list {
  display: grid; gap: 6px; align-content: start;
  max-height: 19rem; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px;
}
.pp-group { padding: 4px 2px 0; font-size: 0.625rem; font-weight: var(--weight-semibold); letter-spacing: 0.02em; }
.pp-group.pp-urgent { color: var(--prio-urgent); }
.pp-group.pp-normal { color: var(--prio-normal); }
.pp-group.pp-low { color: var(--prio-low); }
.pp-card {
  --pv-color: var(--prio-normal);
  position: relative;
  display: grid; justify-items: start; gap: 2px;
  padding: 8px 10px 4px 18px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--hud-border);
  border-radius: 10px;
}
.pp-card.pp-urgent { --pv-color: var(--prio-urgent); }
.pp-card.pp-low { --pv-color: var(--prio-low); }
.pp-card::before {
  content: ""; position: absolute; left: 8px; top: 9px; bottom: 9px;
  width: 3px; border-radius: 2px; background: var(--pv-color);
}
.pp-card:focus-visible { outline-offset: 1px; }
.pp-card.is-target { animation: pp-target 1.6s ease-out; }
@keyframes pp-target {
  0%, 40% { border-color: var(--pv-color); }
  100% { border-color: var(--hud-border); }
}
.pp-title { font-size: var(--size-h6); font-weight: var(--weight-semibold); line-height: 1.4; }
.pp-meta { font-size: var(--size-caption); line-height: 1.45; color: var(--hud-muted); }
.pp-kind { color: var(--pv-color); }
.pp-link { grid-area: auto; margin-top: 5px; }
.pp-done {
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 28px; margin: 2px 0 0 -6px; padding: 0 6px;
  background: none; border: 0; border-radius: var(--radius);
  font: var(--size-caption) var(--font-sans); color: var(--hud-muted); cursor: pointer;
}
.pp-done:hover { color: var(--hud-text); background: var(--hud-link-fill); }
.pp-empty {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: var(--space-6) 0;
  font-size: var(--size-h6); color: var(--hud-secondary);
}
.pp-empty svg { color: var(--ok); }

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

/* Footer */
.foot { padding-bottom: var(--space-8); color: var(--text-muted); font-size: var(--size-h6); }
.foot p { margin: 0; padding-top: var(--space-6); border-top: 1px solid var(--border-subtle); }

@media (max-width: 30rem) {
  .top nav a { padding: 0 var(--space-2); }
  h1 { margin-top: var(--space-6); }
  .lede { font-size: var(--size-body); }
  .home > section { padding: var(--space-8) 0; }
  .home > section.intro { padding: var(--space-8) 0 var(--space-6); }
  .home section > h3 { margin-top: var(--space-8); }
  .home .intro .lede { margin-top: var(--space-4); }
}

/* Under the hood: the architecture diagram and the "how heavy is it" table.
   Columns left to right on wide screens; stacked, with the arrows turned down, on phones. */
.arch {
  margin: 0;
  padding: var(--space-6);
  background: var(--surface-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-stage);
}
.arch-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
}
.arch-col { min-width: 0; }
.arch-label {
  margin: 0 0 var(--space-2);
  font-size: var(--size-h6); font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.arch-nodes { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.arch-node {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--size-h6); font-weight: var(--weight-medium);
  line-height: 1.35;
}
.arch-node span {
  display: block;
  font-size: var(--size-caption); font-weight: var(--weight-regular);
  color: var(--text-muted);
}
.arch-main { border-color: var(--brand-focus); }
.arch-optional { border-style: dashed; }
.arch-pill { display: flex; align-items: center; gap: var(--space-2); }
.pill-dot { flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--prio-normal); }
.arch-sub {
  margin: var(--space-2) 0 0;
  font-size: var(--size-caption); color: var(--text-muted); line-height: 1.4;
}
.arch-sub code { font-size: var(--size-caption); }
.arch-arrow, .arch-repl {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-family: var(--font-mono); font-size: var(--size-caption);
  color: var(--text-muted); text-align: center;
}
.arch-repl { flex-direction: row; justify-content: center; gap: var(--space-2); padding: 2px 0; }
.arch-arrow { align-self: center; }
.arch-arrow svg { width: 2.5rem; height: 0.75rem; }
.arch-repl svg { width: 0.75rem; height: 1.75rem; }
.arch svg path {
  fill: none; stroke: var(--text-muted); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.arch figcaption {
  margin-top: var(--space-6); padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.table-wrap { overflow-x: auto; }
.weight {
  width: 100%; border-collapse: collapse;
  font-size: var(--size-small);
}
.weight th, .weight td {
  text-align: left; vertical-align: top;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.weight thead th { color: var(--text-muted); font-weight: var(--weight-medium); }
.weight tbody th { font-weight: var(--weight-medium); width: 40%; }
.weight td { color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* Six nav links don't fit a phone header: keep How it works, Install and Guides. */
@media (max-width: 30rem) {
  .top nav a.nav-wide { display: none; }
}

@media (max-width: 40rem) {
  .arch { padding: var(--space-4); }
  .arch-flow { grid-template-columns: minmax(0, 1fr); }
  .arch-arrow { flex-direction: row; justify-content: center; gap: var(--space-2); }
  .arch-arrow svg { transform: rotate(90deg); width: 1.75rem; height: 0.75rem; margin: var(--space-2) 0; }
  .weight tbody th { width: auto; }
}

/* Works with: supported agents as outlined rows, coming-soon ones as faint chips. */
.works { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); }
.works-h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--size-h6); font-weight: var(--weight-medium);
  color: var(--text-muted);
}
.works-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.works-list li {
  padding: var(--space-2) var(--space-3);
  background: var(--surface-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  font-size: var(--size-h6); font-weight: var(--weight-medium);
}
.works-list li span { color: var(--text-muted); font-weight: var(--weight-regular); }
.works-soon { display: flex; flex-wrap: wrap; gap: var(--space-1); align-content: start; }
.works-soon li {
  padding: var(--space-1) var(--space-3);
  background: none; border-style: dashed;
  color: var(--text-secondary); font-weight: var(--weight-regular);
}
@media (max-width: 40rem) {
  .works { grid-template-columns: minmax(0, 1fr); }
}

/* Guides (site/guides/, generated from docs/ by scripts/build_site_guides.py).
   Long-form text: real heading sizes, lists, tables and code that scroll inside
   themselves on a phone instead of widening the page. */
.crumb { margin: var(--space-8) 0 0; font-size: var(--size-h6); color: var(--text-muted); }
.crumb + h1 { margin-top: var(--space-2); }
.doc h1 { margin-bottom: var(--space-6); }
.doc > p, .doc li > p { margin: 0 0 var(--space-4); }
.doc h2, .doc h3, .doc h4, .doc h5, .doc h6 {
  color: var(--text-primary); font-weight: var(--weight-semibold);
  line-height: 1.3; scroll-margin-top: var(--space-4);
}
.doc h2 { font-size: 1.375rem; margin: var(--space-12) 0 var(--space-4); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.doc h3 { font-size: var(--size-h4); margin: var(--space-8) 0 var(--space-3); }
.doc h4, .doc h5, .doc h6 { font-size: var(--size-body); margin: var(--space-6) 0 var(--space-2); }
.anchor {
  color: var(--text-muted); font-weight: var(--weight-regular);
  text-decoration: none; opacity: 0; padding: 0 var(--space-1);
}
.doc :is(h2, h3, h4, h5, h6):hover .anchor, .anchor:focus-visible { opacity: 1; }
@media (hover: none) { .anchor { opacity: 0.5; } }
.doc a { text-decoration-line: underline; }
.doc .lede a { color: var(--text-primary); }
.doc ul, .doc ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.doc li { margin: var(--space-2) 0; }
.doc li > ul, .doc li > ol { margin: var(--space-1) 0 0; }
.doc li > p { margin: 0 0 var(--space-2); }
.doc li > .code, .doc li > .doc-fig { margin: var(--space-3) 0; }
.doc .tasks { list-style: none; padding-left: var(--space-2); }
.doc .task input { margin: 0 var(--space-1) 0 0; accent-color: var(--brand-main); vertical-align: -0.1em; }
.doc hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--space-8) 0; }
.doc blockquote {
  margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border-left: 2px solid var(--brand-focus); background: var(--surface-raised);
  border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-secondary);
}
.doc blockquote p:last-child { margin: 0; }
.doc .code { margin: 0 0 var(--space-4); }
.doc .code pre {
  white-space: pre; overflow-wrap: normal; overflow-x: auto;
  min-height: calc(var(--tap) + var(--space-2));
}
.doc .copy { top: var(--space-1); transform: none; }
/* On a phone a guide's code block scrolls sideways, and its text would slide under the Copy
   button: give the button its own row above the code instead. */
@media (max-width: 40rem) {
  .doc .code.has-copy pre { padding-top: calc(var(--tap) + var(--space-2)); padding-right: var(--space-4); }
}
.doc .table-wrap { margin: 0 0 var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius); }
.doc-table { width: 100%; border-collapse: collapse; font-size: var(--size-small); }
.doc-table th, .doc-table td {
  min-width: 9rem; text-align: left; vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.doc-table tbody tr:last-child td { border-bottom: 0; }
.doc-table thead th { background: var(--surface-raised); color: var(--text-secondary); font-weight: var(--weight-medium); }
.doc-table td { color: var(--text-secondary); }
.doc-table .ta-center { text-align: center; }
.doc-table .ta-right { text-align: right; }
/* A guide's screenshots: the same stage as the landing page, a caption under it. The
   markdown's width attribute is the most it's shown at; a phone shrinks it to fit. */
.doc-fig { margin: var(--space-6) 0; }
.doc-fig .stage { flex-wrap: wrap; gap: var(--space-4); }
.doc-fig figcaption { max-width: var(--measure); }
.toc {
  margin: 0 0 var(--space-8); padding: var(--space-4);
  background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius);
  font-size: var(--size-small);
}
.toc p { margin: 0 0 var(--space-2); font-size: var(--size-h6); font-weight: var(--weight-medium); color: var(--text-muted); }
.toc ul { list-style: none; margin: 0; padding: 0; columns: 2 16rem; column-gap: var(--space-6); }
.toc li { margin: 0; padding: 3px 0; break-inside: avoid; }
.toc a { color: var(--text-secondary); text-decoration: none; }
.toc a:hover { color: var(--text-primary); text-decoration: underline; }
.doc-source { margin-top: var(--space-12); }
.doc .guide-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.guide-list li {
  margin: 0; padding: var(--space-3) var(--space-4);
  background: var(--surface-raised); border: 1px solid var(--border-strong); border-radius: var(--radius);
  font-size: var(--size-small);
}
.guide-list a { font-weight: var(--weight-semibold); }
.guide-list span { display: block; margin-top: 2px; color: var(--text-muted); }
.doc section { padding: var(--space-8) 0 var(--space-2); }
.doc section h2 { margin: 0 0 var(--space-4); padding-top: 0; border-top: 0; font-size: var(--size-h4); }