/* Shared tokens and pieces, the console (/console: top bar, sidebar, one scrolling view, status bar),
   and the site (/, /docs, legal pages). The hero stays night side in both themes. */
:root {
  --bg: #f4f4f1;
  --surface: #ffffff;
  --surface-2: #eeeee9;
  --shell: #fbfbf8;
  --text: #16181b;
  --muted: #5d636b;
  --line: #d8d8d0;
  --line-strong: #c2c2b9;
  --input-border: #8e9097;   /* 3:1 against the surface, as form fields need */
  --accent: #c03c11;         /* 4.5:1 or more on surface, background and accent-soft */
  --accent-text: #ffffff;
  --accent-soft: #fef0e9;
  --code-bg: #121316;
  --code-text: #e9e9e6;
  --code-muted: #8d929a;
  --code-key: #ffb38f;
  --code-string: #a8e6b8;
  --ok: #17734a;
  --error: #b42318;
  --focus: #f05a1e;          /* the brand orange, as close to the signal (#ff6a33) as a ring can be and keep 3:1 on white */
  --grid-dot: rgb(0 0 0 / 0.045);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 8px 28px rgb(0 0 0 / 0.18);
  --code-chip: rgb(255 255 255 / 0.08);
  --brand-signal: #ff6a33;   /* the logo's signal, the same in both themes */

  --space-bg: #060609;
  --space-bg-2: #0d0c14;
  --space-text: #f3f1ed;
  --space-muted: #9c97a6;
  --space-line: rgb(255 255 255 / 0.09);
  --space-card: rgb(255 255 255 / 0.035);
  --space-accent: #ff6a33;
  --space-glow: rgb(255 106 51 / 0.16);
  --space-glow-2: rgb(90 120 255 / 0.12);
  --globe-dot: #b9b3c4;
  --globe-ocean: #0e0c16;
  --globe-glow: #ff6a33;
  --globe-signal: #ff7a45;

  --l3: #17734a;
  --l2: #8a5f00;
  --l1: #6f55bd;
  --l0: #c4c8cc;

  --radius: 10px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0e10; --surface: #15171a; --surface-2: #1c1f23; --shell: #111316; --text: #eceef0; --muted: #9aa1aa;
    --line: #2b3035; --line-strong: #3d434a; --input-border: #5f666e; --accent: #ff6a33; --accent-text: #1a0a03; --accent-soft: #3a1a0d;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-lg: 0 8px 28px rgb(0 0 0 / 0.5);
    --code-bg: #0a0b0d; --ok: #3ec486; --error: #ff7b72; --focus: #ff6a33; --grid-dot: rgb(255 255 255 / 0.04);
    --l3: #3ec486; --l2: #e2a93b; --l1: #a48bf0; --l0: #4a5058; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0d0e10; --surface: #15171a; --surface-2: #1c1f23; --shell: #111316; --text: #eceef0; --muted: #9aa1aa;
  --line: #2b3035; --line-strong: #3d434a; --input-border: #5f666e; --accent: #ff6a33; --accent-text: #1a0a03; --accent-soft: #3a1a0d;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4); --shadow-lg: 0 8px 28px rgb(0 0 0 / 0.5);
  --code-bg: #0a0b0d; --ok: #3ec486; --error: #ff7b72; --focus: #ff6a33; --grid-dot: rgb(255 255 255 / 0.04);
  --l3: #3ec486; --l2: #e2a93b; --l1: #a48bf0; --l0: #4a5058; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.5 var(--font); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Native controls in the brand, not the browser's blue: checkboxes, radios and ranges, the text cursor, selected
   text and scrollbars. The night-side hero uses its own signal colour for focus. */
:root { accent-color: var(--focus); scrollbar-color: var(--line-strong) transparent; }
::selection { background: color-mix(in srgb, var(--brand-signal) 28%, transparent); color: inherit; }
input, textarea { caret-color: var(--focus); }
html { -webkit-tap-highlight-color: color-mix(in srgb, var(--brand-signal) 18%, transparent); }
/* Autofilled fields keep the page's colours instead of the browser's tint. */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-text-fill-color: var(--text); box-shadow: 0 0 0 40px var(--surface) inset; transition: background-color 9999s; }
.hero :focus-visible { outline-color: var(--space-accent); }
.hero ::selection { background: color-mix(in srgb, var(--space-accent) 35%, transparent); }
code { font-family: var(--mono); font-size: 0.92em; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; }
p { margin: 0; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--surface); color: var(--text); border: 2px solid var(--focus); border-radius: 8px; padding: 8px 12px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; }
.i { width: 16px; height: 16px; flex: none; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.num-slot { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; }

/* ---------- Shell ---------- */

.app {
  display: grid; height: 100%;
  grid-template-columns: 228px minmax(0, 1fr);
  grid-template-rows: 52px minmax(0, 1fr) 28px;
  grid-template-areas: "top top" "side main" "status status";
}
.topbar {
  grid-area: top; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: var(--shell); border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; text-decoration: none; letter-spacing: -0.01em; font-size: 15px; }
.env { font: 600 11.5px/1 var(--font); color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: 4px 6px; }
.crumb { font: 13px var(--mono); color: var(--muted); padding-left: 14px; border-left: 1px solid var(--line); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.top-gh { display: inline-flex; }
.top-gh .i { width: 18px; height: 18px; fill: currentColor; stroke: none; } /* the GitHub mark is filled */
.top-link { color: var(--muted); text-decoration: none; font-size: 13px; }
.top-link:hover { color: var(--text); }
.ghost-btn { font: 500 13px var(--font); color: var(--text); background: none; border: 1px solid var(--input-border); border-radius: 7px; padding: 6px 10px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; text-decoration: none; }
.ghost-btn:hover { border-color: var(--text); }
.inbox-box { border: 1px solid var(--line); border-left: 3px solid var(--ok); border-radius: 8px; padding: 12px 14px; background: var(--surface); font-size: 14px; }
.inbox-box a { color: var(--accent); }
.dev-link { display: block; margin-top: 4px; color: var(--muted); }
.turnstile-box:not(:empty) { margin-top: 10px; }
.dev-link a, .notice a, .key-box a { color: var(--accent); }
.soon, .badge { font: 600 11px/1 var(--font); padding: 3px 5px; border-radius: 4px; background: var(--surface-2); color: var(--muted); }

.sidebar { grid-area: side; background: var(--shell); border-right: 1px solid var(--line); padding: 14px 10px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.nav-group { font: 600 12px/1 var(--font); color: var(--muted); padding: 14px 10px 6px; }
.nav-group:first-child { padding-top: 4px; }
.sidebar a, .nav-disabled { display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 7px 10px; border-radius: 7px; text-decoration: none; color: var(--text); font-size: 13.5px; }
.sidebar a:hover { background: var(--surface-2); }
.sidebar a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar .badge { margin-left: auto; }
.nav-disabled { color: var(--muted); cursor: not-allowed; }
.sidebar .i { color: var(--muted); }
.sidebar a[aria-current="page"] .i { color: var(--accent); }

.main {
  grid-area: main; overflow-y: auto; outline: none; padding: 20px 24px 40px;
  background-color: var(--bg);
  background-image: radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: 18px 18px;
}
.load-status { color: var(--muted); padding: 40px 0; }
.load-status.error { color: var(--error); }

.statusbar {
  grid-area: status; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 14px;
  background: var(--shell); border-top: 1px solid var(--line); font: 12px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden;
}
.status-dot.live { background: var(--l3); }
.ready { font: 600 11px/1 var(--font); color: var(--l3); border: 1px solid currentColor; border-radius: 4px; padding: 2px 4px; }
.planned { font: 600 11px/1 var(--font); color: var(--muted); border: 1px dashed currentColor; border-radius: 4px; padding: 2px 4px; }
.where { font-size: 12.5px; color: var(--muted); }
details.where { display: inline-block; vertical-align: top; max-width: 34ch; }
details.where summary { cursor: pointer; color: var(--text); }
details.where[open] summary { margin-bottom: 4px; }
.ins-where { margin: 0; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--muted); }
.ins-where strong { color: var(--text); }
.status-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--l2); margin-right: 8px; vertical-align: 1px; }
.status-right { overflow: hidden; text-overflow: ellipsis; }
.statusbar a { color: inherit; }
.statusbar a:hover { color: var(--text); }

/* ---------- Common pieces ---------- */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--accent); color: var(--accent-text); border: 0; border-radius: 8px;
  padding: 11px 18px; font: 600 14px/1 var(--font); text-decoration: none; cursor: pointer;
}
.button:hover { filter: brightness(1.08); }
.button.ghost { background: var(--surface); color: var(--text); border: 1px solid var(--input-border); }
.button.ghost:hover { border-color: var(--text); filter: none; }
.button:disabled { opacity: 0.6; cursor: progress; }
.button.small { padding: 8px 12px; font-size: 13px; }
.button.wide { width: 100%; padding: 13px; font-size: 15px; }

.tag {
  display: inline-block; font: 600 11px/1 var(--font);
  padding: 4px 7px; border-radius: 4px; background: var(--surface-2); color: var(--muted); white-space: nowrap; text-decoration: none;
}
.tag.link { color: var(--accent); background: var(--accent-soft); text-transform: none; letter-spacing: 0; }
.tag.dark { background: var(--code-chip); color: var(--code-muted); }
.tag.private { background: var(--accent-soft); color: var(--accent); }

/* The logo (public/brand.js): "worldsıgnals" with a drawn i whose dot is the signal. --wm runs from 0
   (the globe alone) to 1 (the wordmark); pages without the scroll binding stay at 1. */
.wordmark { display: inline-flex; align-items: baseline; gap: 0; font: 700 19px/1 var(--font); letter-spacing: -0.025em; color: var(--text); text-decoration: none; }
.topbar .wordmark { font-size: 17px; }
/* In the desktop header the wordmark's baseline sits on the menu's (it is bigger, so centring the boxes leaves it
   low). The globe it turns into is centred instead, so the lift goes as the letters close up (--wm, 1 to 0). */
@media (min-width: 861px) { .nav-row .wordmark { position: relative; top: calc(var(--wm, 1) * -0.13em); } }
.wordmark { --brand-halo: var(--shell); }
.wm-glyph { flex: none; }
/* The drawn i sits on the font's ı (same box); it widens to the right when it becomes the globe. */
.wm-i { display: block; flex: none; height: 1em; overflow: visible; margin-left: -0.216em; }
/* Clip sideways only (the letters close up); vertically the g keeps its descender. */
.wm-part { display: inline-block; white-space: nowrap; overflow-x: clip; overflow-y: visible; max-width: calc(var(--wm, 1) * 4em); opacity: var(--wm, 1); }
/* The signal ripples like water: the dot dips as each ring leaves it, and the rings start fast, slow down,
   thin out and keep spreading as they fade. Their line width is in screen pixels (non-scaling-stroke), so
   growing never thickens it. In the wordmark
   they are clipped to the space above the letters (clipPath wm-above: above the x-height next to the i,
   above the ascenders further left), so they never cover the text; on the globe they show whole. */
.wm-ping { transform-box: fill-box; transform-origin: center; vector-effect: non-scaling-stroke; opacity: 0; animation: ripple 4.2s cubic-bezier(0.05, 0.6, 0.35, 1) infinite; }
.is-mark .wm-ping { animation-name: ripple-mark; }
.wm-ping-2 { animation-delay: 1.4s; }
.wm-ping-3 { animation-delay: 2.8s; }
.wm-dot { transform-box: fill-box; transform-origin: center; animation: drop 1.4s ease-out infinite; }
@media (prefers-reduced-motion: reduce) { .wm-ping { animation: none; opacity: 0; } .wm-dot { animation: none; } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .site-nav.is-open .nav-menu { animation: none; } }
@keyframes ripple {
  0% { transform: scale(0.9); stroke-width: 2px; opacity: 0; }
  6% { opacity: 0.95; }
  35% { opacity: 0.5; }
  70% { opacity: 0.2; }
  100% { transform: scale(10); stroke-width: 0.5px; opacity: 0; }
}
/* The globe's badge is bigger than the i's dot: its rings spread less, so they stay near the mark. */
@keyframes ripple-mark {
  0% { transform: scale(0.95); stroke-width: 2px; opacity: 0; }
  6% { opacity: 0.9; }
  70% { opacity: 0.2; }
  100% { transform: scale(3.2); stroke-width: 0.6px; opacity: 0; }
}
@keyframes drop { 0%, 100% { transform: scale(1); } 8% { transform: scale(0.84); } 22% { transform: scale(1.07); } 40% { transform: scale(0.98); } }

.view { display: grid; gap: 18px; min-width: 0; }
.view-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 4px; }
.view-head h1 { font-size: 22px; }
.view-head p { margin-top: 4px; max-width: 70ch; }
.view-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* The catalogue's ask row stays in view while the list scrolls under it. */
.ask-bar { position: sticky; top: -14px; z-index: 3; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; padding: 8px 0; background: var(--bg); }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-head h2 { font-size: 14px; font-weight: 650; }

input, textarea, select {
  font: 14px/1.4 var(--font); color: var(--text); background: var(--surface);
  border: 1px solid var(--input-border); border-radius: 7px; padding: 8px 10px; min-width: 0;
}
input[aria-invalid="true"] { border-color: var(--error); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; border-color: transparent; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 0.85; }
.search-box input { width: 260px; font-family: var(--mono); font-size: 13px; }
.search-box.wide input { width: 100%; }
.tool-btn { font: 500 13px var(--font); color: var(--text); background: var(--surface); border: 1px solid var(--input-border); border-radius: 7px; padding: 8px 12px; cursor: pointer; }
.tool-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.table-wrap { overflow: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.table-wrap.flat { border: 0; border-radius: 0; background: none; }
table.data { border-collapse: collapse; width: 100%; font-size: 13px; }
.data th, .data td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.data th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); font: 600 12px/1.2 var(--font); color: var(--muted); }
.data tbody th { position: static; background: none; font: inherit; color: inherit; }
.data tr.placeholder td { padding: 28px 12px; color: var(--muted); text-align: center; }
.data tbody tr.clickable:focus-visible { outline-offset: -2px; }
.data tbody tr:last-child td { border-bottom: 0; }
.data tbody tr.clickable { cursor: pointer; }
.data tbody tr.clickable:hover td { background: var(--surface-2); }
.data tbody tr[aria-selected="true"] td { background: var(--accent-soft); }
.mono { font-family: var(--mono); font-size: 12.5px; }
.type-id { font-family: var(--mono); font-size: 12.5px; color: var(--accent); white-space: nowrap; }
.col-time { width: 132px; white-space: nowrap; }
.live-table td:first-child { white-space: nowrap; }
.live-table .collected { display: block; margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.empty { padding: 24px; text-align: center; color: var(--muted); }

.split-view { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.inspector { position: sticky; top: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; max-height: calc(100svh - 150px); }
pre.code, .code-block pre { margin: 0; background: var(--code-bg); color: var(--code-text); border-radius: 8px; padding: 12px; font: 12.5px/1.6 var(--mono); overflow: auto; }
pre.code { max-height: calc(100svh - 260px); min-height: 120px; }
.k { color: var(--code-key); }
.s { color: var(--code-string); }
.c { color: var(--code-muted); }

.pill { display: inline-block; font: 600 10.5px/1 var(--mono); padding: 3px 6px; border-radius: 999px; border: 1px solid currentColor; text-transform: lowercase; }
.pill.public { color: var(--l3); }
.pill.private { color: var(--accent); }
.pill.combined { color: var(--l1); }

/* ---------- Hero (overview) ---------- */

.hero {
  position: relative; overflow: hidden; color: var(--space-text); border-radius: 14px; border: 1px solid var(--space-line);
  background:
    radial-gradient(ellipse 50% 60% at 62% 55%, var(--space-glow), transparent 70%),
    radial-gradient(ellipse 40% 50% at 70% 40%, var(--space-glow-2), transparent 70%),
    linear-gradient(180deg, var(--space-bg) 0%, var(--space-bg-2) 100%);
}
.hero-grid {
  position: relative; z-index: 1; padding: 8px 24px 28px;
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr) 310px; align-items: center;
  min-height: min(640px, calc(100svh - 140px));
}
.hero-copy { grid-column: 1; grid-row: 1; position: relative; z-index: 2; padding: 20px 0; }
.globe { grid-column: 2 / 4; grid-row: 1; width: 100%; height: 100%; min-height: 520px; display: block; cursor: grab; touch-action: pan-y; }
.globe:active { cursor: grabbing; }
.stream { grid-column: 3; grid-row: 1; position: relative; z-index: 2; align-self: center; min-width: 0; }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1 var(--font); color: var(--space-text); border: 1px solid var(--space-line); background: var(--space-card); padding: 7px 12px; border-radius: 999px; }
.eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--space-accent); box-shadow: 0 0 10px var(--space-accent); }
.hero h1 { margin-top: 22px; font-weight: 720; }
.hero h1 .pre { display: block; font-size: clamp(20px, 2vw, 26px); font-weight: 560; color: var(--space-muted); }
.hero h1 .main-line { display: block; font-size: clamp(42px, 5vw, 74px); line-height: 1; letter-spacing: -0.04em; margin-top: 8px; }
.hero h1 em { font-style: normal; color: var(--space-accent); }
.lede { font-size: 16px; color: var(--space-muted); margin-top: 20px; max-width: 30em; }
/* Short copy and headings: lines of even length at every width, never a lone last word. */
.lede, .hero h1, .section h2, .section-head p.muted, .page-hero h1, .page-hero .lead, .cta-box h2, .cta-box p { text-wrap: balance; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.hero .button { background: var(--space-accent); color: var(--space-bg); }
.install-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.install { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; font: 12.5px var(--mono); color: var(--space-muted); border: 1px solid var(--space-line); border-radius: 8px; padding: 9px 12px; background: var(--space-card); cursor: pointer; text-align: left; }
.install code { font-size: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.install code::before { content: "$ "; color: var(--space-accent); }
.install:hover { color: var(--space-text); border-color: var(--space-muted); }
.install-copy { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--font); color: var(--space-text); }
.install-note { font-size: 12px; color: var(--space-muted); }
/* "Works with your agent": the agents' own icons on white tiles, as on youfoundbruno.com. */
.agents-row { margin-top: 26px; display: grid; gap: 10px; }
.agents-t { font-size: 13px; color: var(--space-muted); }
.agent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.agent { display: grid; place-items: center; width: 48px; height: 48px; background: #fff; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 13px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 8px 22px -12px rgb(0 0 0 / 0.6); }
.agent img { width: 28px; height: 28px; border-radius: 6px; display: block; }
.stream-pause { margin-left: 8px; font: 500 12px var(--font); color: var(--space-muted); background: none; border: 1px solid var(--space-line); border-radius: 6px; padding: 4px 8px; cursor: pointer; }
.stream-pause:hover { color: var(--space-text); }
.sources { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 11.5px/1 var(--mono); color: var(--space-muted); }
.sources li { padding: 6px 9px; border: 1px solid var(--space-line); border-radius: 999px; }

.stream-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.stream-head h2 { margin-right: auto; font: 600 12px/1 var(--font); color: var(--space-muted); display: flex; align-items: center; gap: 8px; }
.stream-head h2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--space-accent); box-shadow: 0 0 10px var(--space-accent); }
.stream-list { list-style: none; margin: 0; padding: 2px 0 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; align-content: start; height: 470px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent); }
.stream-list li { display: grid; gap: 2px; padding: 9px 11px; border-radius: 9px; border: 1px solid var(--space-line); background: var(--space-card); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: border-color 1.2s ease-out; }
.stream-list li.fresh { border-color: var(--space-accent); transition: none; }
.stream-list .type { font: 11.5px/1.3 var(--mono); color: var(--space-accent); display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
/* Long type ids shorten with an ellipsis; the card never grows past the column. */
.stream-list .type > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stream-list .type time { flex: none; }
.stream-list li { min-width: 0; }
.stream-list .type time { color: var(--space-muted); }
.stream-list .what { font-size: 13px; color: var(--space-text); }
.stream-list .where { font-size: 11.5px; color: var(--space-muted); }
.stream-foot { font-size: 11.5px; color: var(--space-muted); margin-top: 10px; text-align: center; font-variant-numeric: tabular-nums; }

.overview-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.layers { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.layers li { border: 1px solid var(--line); border-radius: 8px; padding: 10px; display: grid; gap: 3px; align-content: start; }
.layers .verb { font: 600 12px/1 var(--font); color: var(--muted); margin-bottom: 4px; }
.layers strong { font-size: 13.5px; }
.layers p { color: var(--muted); font-size: 12.5px; }
.layers .missing { border: 1.5px dashed var(--accent); background: var(--accent-soft); }
.layers .missing .verb { color: var(--accent); }
.flow { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.flow li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; }
.step-num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); font: 600 11px var(--mono); }
.flow p { color: var(--muted); font-size: 13px; }
.mini { margin: 6px 0 0; background: var(--code-bg); color: var(--code-text); border-radius: 7px; padding: 9px 11px; font: 12px/1.5 var(--mono); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Build a stream ---------- */

.build-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 16px; align-items: start; }
form { display: grid; gap: 12px; }
.step { margin: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 16px; min-width: 0; }
.step legend { float: left; width: 100%; padding: 0; margin-bottom: 12px; font-weight: 650; font-size: 14.5px; display: flex; align-items: center; gap: 9px; }
.step legend ~ * { clear: both; } /* every sibling, since the first one may be hidden */
.num { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); font: 600 11px var(--mono); }
.count { margin-left: auto; font: 500 12px var(--mono); color: var(--muted); }
.optional { font-weight: 500; font-size: 12px; color: var(--muted); }
.family { margin-top: 14px; }
.family h3 { font: 600 12.5px/1 var(--font); color: var(--muted); margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 32px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: 7px;
  padding: 5px 10px; font: 500 13px/1.2 var(--font); cursor: pointer; text-align: left;
}
.chip:hover { border-color: var(--muted); }
.chip[aria-pressed="true"] { background: var(--accent-soft); border-color: var(--accent); }
.chip[aria-pressed="true"]::before { content: "✓"; font-weight: 700; color: var(--accent); }
.chip.ghost { border-style: dashed; color: var(--muted); }
.chip.ghost::before { content: "+"; }
.chip.removable::after { content: "×"; color: var(--muted); font-size: 15px; line-height: 1; }
.chip.removable[aria-pressed="true"]::before { content: none; }
.chip .tag { padding: 2px 5px; font-size: 9.5px; background: var(--accent-soft); color: var(--accent); }
.chip .cid { font: 11px var(--mono); color: var(--muted); }
.field { display: grid; gap: 5px; margin-top: 12px; }
.field:first-child { margin-top: 0; }
.field > span { font-size: 13px; font-weight: 600; }
.field input, .field textarea { width: 100%; }
textarea { resize: vertical; }
.field.other { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row + .row { margin-top: 12px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.hint.lead-in { margin: -4px 0 10px; }
.sub { margin-top: 16px; display: grid; gap: 8px; }
.sub-label { font-size: 13px; font-weight: 600; }
.segmented { display: inline-flex; flex-wrap: wrap; background: var(--surface-2); padding: 3px; border-radius: 8px; gap: 3px; justify-self: start; }
.segmented button { border: 0; background: transparent; color: var(--muted); font: 500 13px/1 var(--font); padding: 8px 12px; border-radius: 6px; cursor: pointer; }
.segmented button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
#country-matches:not(:empty), #country-picked:not(:empty) { margin-top: 10px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.submit { display: grid; gap: 10px; }
.submit .field { margin: 0; }
.error { color: var(--error); font-size: 13px; font-weight: 500; }
.error:empty { display: none; }
.done { border: 1px solid var(--ok); border-radius: var(--radius); background: var(--surface); padding: 18px; display: grid; gap: 6px; }
.done h2 { color: var(--ok); font-size: 17px; display: flex; align-items: center; gap: 8px; }
.done h2 .i { width: 20px; height: 20px; }
.key-box { display: grid; gap: 8px; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--bg); font-size: 13px; }
.key-row { display: flex; gap: 8px; align-items: center; }
.key-row code { flex: 1; min-width: 0; overflow-wrap: anywhere; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; font-size: 12px; }
.key-row .tool-btn { display: inline-flex; align-items: center; gap: 6px; }
.locked { color: var(--muted); }
.locked .i { width: 13px; height: 13px; margin-right: 6px; vertical-align: -2px; }
.notice { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--ok); background: var(--surface); border-radius: var(--radius); padding: 12px 14px; font-size: 13.5px; }
.notice .i { color: var(--ok); width: 18px; height: 18px; margin-top: 1px; }

.preview { position: sticky; top: 0; }
/* Account: the plan on top, full width; the key and connected apps side by side below. */
.account { display: grid; gap: 16px; max-width: 1080px; }
.account p { margin: 0; }
.account h3 { font-size: 14px; font-weight: 650; margin: 0; }
.account-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.account .panel { padding: 20px; gap: 12px; }
.account .panel-head h2 { font-size: 16px; }
.acc-plan { gap: 18px; background: linear-gradient(180deg, var(--accent-soft), var(--surface) 120px); }
.acc-plan-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.acc-eyebrow { font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 8px; }
.acc-plan-name { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px !important; }
.acc-plan-name .tag { font-size: 11px; }
.acc-upgrade { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 16px; }
.acc-upgrade-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.plan-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.plan-tile { text-align: left; display: grid; gap: 6px; align-content: start; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.plan-tile:hover { border-color: var(--text); }
.plan-tile[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-sm); }
.plan-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.plan-tile-name { font-weight: 650; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.plan-tile-what { color: var(--muted); font-size: 13px; line-height: 1.45; }
.acc-upgrade-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.acc-upgrade-foot p { flex: 1 1 320px; max-width: 70ch; }
.acc-subsection { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.key-row code.is-hidden { color: var(--muted); font-family: var(--font); }
.app-list { list-style: none; margin: 0; padding: 0; display: grid; }
.app-list li { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 10px 0; }
.app-list li:first-child { border-top: 0; padding-top: 0; }
.app-info { flex: 1; min-width: 0; }
.app-mark { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); color: var(--text); font-weight: 650; flex: none; }
.acc-empty { display: grid; gap: 4px; border: 1px dashed var(--line-strong); border-radius: var(--radius); padding: 14px; }
.setup-key { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.setup-key p { margin: 0; }
.preview .code-block pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.preview-inner { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: grid; gap: 10px; }
.summary { font-size: 13px; color: var(--muted); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); }
.tabs button { font: 600 12px var(--mono); color: var(--muted); background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px; cursor: pointer; margin-bottom: -1px; }
.tabs button[aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.code-block { background: var(--code-bg); border-radius: 8px; overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; border-bottom: 1px solid var(--space-line); font: 500 11.5px/1 var(--font); color: var(--code-muted); }
.copy { display: inline-flex; align-items: center; gap: 5px; background: transparent; border: 1px solid var(--space-line); color: var(--code-text); border-radius: 5px; font: 500 11.5px/1 var(--font); padding: 4px 7px; cursor: pointer; }
.copy .i { width: 13px; height: 13px; }
.copy:hover { border-color: var(--code-muted); }
.code-block pre { border-radius: 0; max-height: 420px; }
#cli, #webhook, #mcp { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- Standard, coverage, plans ---------- */

.doc-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fields td:first-child { white-space: nowrap; }
.req { font: 600 11px/1 var(--font); color: var(--accent); margin-left: 4px; }
.rules { margin: 0; padding-left: 18px; display: grid; gap: 8px; color: var(--muted); font-size: 13px; }
.rules strong { color: var(--text); }
.sub-title { font-size: 13px; font-weight: 650; margin-top: 4px; }
.schema-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font: 12.5px var(--mono); }
.schema-links a { color: var(--accent); text-decoration: none; }
.schema-links a:hover { text-decoration: underline; }

.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); align-items: center; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.cov-key { max-width: 90ch; margin-top: -8px; }
.cov-key strong { color: var(--text); font-weight: 600; }
.dot { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; font: 600 9px/1 var(--mono); }
.l3 { background: var(--l3); }
.l2 { border: 2px solid var(--l2); }
.l1 { border: 2px dashed var(--l1); color: var(--l1); }
.l0 { width: 5px; height: 5px; background: var(--l0); }
.matrix th.cat, .matrix td.cell { text-align: center; }
.matrix td.cell { width: 52px; }
.matrix .num-col { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.cell-btn { background: none; border: 0; padding: 4px; border-radius: 6px; cursor: help; display: inline-grid; place-items: center; }
.cell-btn:hover { background: var(--surface-2); }
.cov-card {
  position: fixed; z-index: 50; width: min(340px, calc(100vw - 16px)); background: var(--surface); color: var(--text);
  border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px; box-shadow: var(--shadow-lg);
  display: grid; gap: 8px; font-size: 12.5px; pointer-events: none;
}
.cov-card-title { font-weight: 650; font-size: 13px; }
.cov-card-level { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.cov-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cov-card li { display: grid; gap: 1px; padding-top: 8px; border-top: 1px solid var(--line); }
.cov-card li span { color: var(--muted); font-family: var(--mono); font-size: 11.5px; }
.cov-card .conf.high { color: var(--l3); }
.cov-card .conf.medium { color: var(--l2); }
.matrix .country { white-space: nowrap; }
.matrix .country small { font: 11px var(--mono); color: var(--muted); margin-left: 6px; }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; display: grid; gap: 8px; align-content: start; }
.plan.featured { border-color: var(--accent); }
.plan h2 { font-size: 14px; }
.price { font: 700 24px/1.1 var(--font); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.price span { font-size: 13px; font-weight: 500; color: var(--muted); }
.plan ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; display: grid; gap: 4px; }

/* ---------- Site: /, /docs and the legal pages scroll as a normal document ---------- */

/* Pages that scroll as a document: body grows with its content, or the sticky nav stops after one screen. */
body.site, body.doc { background: var(--bg); height: auto; min-height: 100%; }
.wrap { width: min(1200px, 100% - 48px); margin-inline: auto; }
.site-nav { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--shell) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-row { display: flex; align-items: center; gap: 28px; height: 60px; position: relative; }
.nav-links { display: flex; gap: 22px; }
.nav-menu { display: contents; }
.nav-links a, .nav-signin { color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 500; position: relative; }
.nav-links a:hover, .nav-signin:hover, .nav-links a[aria-current] { color: var(--text); }
/* GitHub: the mark alone in the desktop header, a labelled row in the phone menu. */
.nav-gh { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; }
.nav-gh:hover { color: var(--text); }
.nav-gh .i { width: 18px; height: 18px; vertical-align: 0; fill: currentColor; stroke: none; } /* the mark is filled, not a stroke icon */
.nav-gh span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* The section you are reading, or the page you are on. */
.nav-links .nav-out { display: inline-flex; align-items: center; gap: 3px; }
.nav-links .nav-out .i { width: 13px; height: 13px; }
.nav-links a[aria-current]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -20px; height: 2px; background: var(--accent); border-radius: 2px; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--input-border); border-radius: 8px; padding: 7px; color: var(--text); cursor: pointer; }
.nav-toggle .i { width: 18px; height: 18px; display: block; }
#content { outline: none; }

.site-hero { border-radius: 0; border: 0; border-bottom: 1px solid var(--space-line); }
/* On the landing page the hero runs up under the header (60px and its 1px line). While the header is over the
   dark hero it is dark too, in either theme: clear at the top, then the night sky, frosted (site.js sets
   on-hero and is-clear). Past the hero it is the usual header. An open menu is always the solid sheet. */
.site-nav + main > .site-hero:first-child { margin-top: -61px; padding-top: 61px; }
.site-nav { transition: background-color 0.2s, border-color 0.2s; }
.site-nav.on-hero:not(.is-open) { background: color-mix(in srgb, var(--space-bg) 82%, transparent); border-bottom-color: var(--space-line); }
.site-nav.on-hero.is-clear:not(.is-open) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-nav.on-hero:not(.is-open) .wordmark { color: var(--space-text); --brand-halo: var(--space-bg); }
.site-nav.on-hero:not(.is-open) :is(.nav-links a, .nav-signin, .nav-gh) { color: var(--space-muted); }
.site-nav.on-hero:not(.is-open) :is(.nav-links a, .nav-signin, .nav-gh):hover { color: var(--space-text); }
.site-nav.on-hero:not(.is-open) .nav-toggle { color: var(--space-text); border-color: var(--space-muted); }
.site-nav.on-hero :focus-visible { outline-color: var(--space-accent); }
.site-hero .hero-grid { padding: 24px 0 36px; }
.signup { margin-top: 26px; display: grid; gap: 8px; max-width: 480px; }
.signup-row { display: flex; gap: 8px; }
.signup-row input { flex: 1; min-width: 0; padding: 11px 12px; font-size: 15px; }
.site-hero .signup-row input { background: var(--space-card); color: var(--space-text); border-color: var(--space-muted); }
.site-hero .signup-row input::placeholder { color: var(--space-muted); }
.signup-note { font-size: 12.5px; color: var(--muted); }
.site-hero .signup-note { color: var(--space-muted); }
.signup-note a { color: inherit; }
.site-hero .error { color: var(--space-accent); }
.signup-plan { display: flex; gap: 10px; flex-wrap: wrap; }
.field-inline { display: grid; gap: 4px; font-size: 13px; font-weight: 600; flex: 1; min-width: 150px; }
.field-inline select { width: 100%; padding: 9px 10px; }
.field select { width: 100%; }

.proof { background: var(--surface); border-bottom: 1px solid var(--line); padding: 26px 0; }
.stats { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.stats div { display: flex; flex-direction: column-reverse; gap: 4px; border-left: 2px solid var(--line); padding-left: 14px; }
.stats dt { font-size: 13px; color: var(--muted); }
.stats dd { margin: 0; font: 700 28px/1.1 var(--font); letter-spacing: -0.02em; }
/* The label on one line, the kinds of source scrolling beside it (below it on phones). The list is there
   twice so the loop has no seam; the copy is hidden from screen readers. */
.built-on { margin-top: 18px; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.built-on > p { flex: none; white-space: nowrap; }
.marquee { flex: 1; min-width: 0; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, var(--text) 6%, var(--text) 94%, transparent); mask-image: linear-gradient(90deg, transparent, var(--text) 6%, var(--text) 94%, transparent); }
.marquee ul { list-style: none; margin: 0; padding: 0 10px 0 0; display: flex; gap: 10px; flex: none; animation: marquee 30s linear infinite; }
.marquee li { white-space: nowrap; font-weight: 600; color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; background: var(--bg); }
.marquee:hover ul { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Docs: how events reach your program (public/modes.js). One row per delivery mode: what it is, events
   crossing a track, and what happens to them. */
.modes { margin: 18px 0 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 14px 16px 12px; }
.modes-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 6px; }
.mode { display: grid; grid-template-columns: minmax(170px, 1.1fr) minmax(80px, 1fr) minmax(190px, 1.2fr); gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.mode-label p { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mode-label code { display: inline-block; margin: 4px 0; font-size: 12px; }
.tag.rec { color: var(--l3); border-color: currentColor; }
.mode-track { position: relative; height: 12px; }
.mode-track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--line-strong); }
.mode-dot { position: absolute; top: 1px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--brand-signal); }
.mode-dot.still { position: static; margin: 0; display: inline-block; }
.mode-out { display: grid; gap: 6px; min-width: 0; }
.mode-agent { display: inline-flex; align-items: center; gap: 6px; justify-self: start; padding: 5px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); font-size: 13px; font-weight: 600; }
.mode-agent.pulse { animation: agent-run 0.6s ease-out; }
@keyframes agent-run { 0% { border-color: var(--brand-signal); box-shadow: 0 0 0 0 var(--brand-signal); } 100% { box-shadow: 0 0 0 8px transparent; } }
.mode-tray { display: flex; flex-wrap: wrap; gap: 4px; min-height: 10px; }
.bars { display: grid; gap: 4px; }
.bar { position: relative; margin: 0; height: 14px; border-radius: 4px; background: var(--surface-2); overflow: hidden; font-size: 10.5px; }
.bar span { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--brand-signal) 30%, transparent); }
.bar em { position: relative; font-style: normal; padding-left: 6px; line-height: 14px; color: var(--muted); }
.mode-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; min-height: 3.6em; }
.mode-list li { font: 11px/1.2 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: line-in 0.3s ease-out; }
.mode-list.term { background: var(--code-bg); color: var(--code-text); border-radius: 6px; padding: 6px 8px; }
@keyframes line-in { from { opacity: 0; transform: translateY(-4px); } }
.mode-count, .mode-note { margin: 0; }
@media (max-width: 640px) {
  .mode { grid-template-columns: 1fr; gap: 8px; }
  .mode-track { height: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee ul { animation: none; flex-wrap: wrap; flex: 1; }
  .marquee ul[aria-hidden] { display: none; }
}
@media (max-width: 640px) {
  .built-on { flex-direction: column; align-items: stretch; gap: 10px; }
  .built-on > p { white-space: normal; }
}

.section { padding: 72px 0; }
.section.alt { background: var(--shell); border-block: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head.center { justify-content: center; text-align: center; }
.section-head.center p { margin-inline: auto; }
.section h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -0.025em; }
.section-head p.muted, .std-grid p.muted, .faq-grid header p { margin-top: 10px; max-width: 60ch; font-size: 15.5px; }
.kicker { font-weight: 650; font-size: 13.5px; color: var(--accent); margin-bottom: 8px; }
.link-arrow { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; text-decoration: none; font-size: 14px; }
.link-arrow:hover { text-decoration: underline; }
.src-link { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.src-link .i { width: 12px; height: 12px; }
.latest td:last-child { text-align: right; }
.latest-note { margin-top: 12px; }
.latest-note a { color: var(--accent); }
.latest td:nth-child(1), .latest td:nth-child(3), .live-table td:nth-child(3) { white-space: nowrap; }

.section .layers { margin-bottom: 16px; }
.section .layers li { background: var(--surface); padding: 14px; }
.section .layers li.missing { background: var(--accent-soft); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; align-content: start; }
.steps h3 { font-size: 16px; }
.steps p { color: var(--muted); font-size: 14px; }

.uses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.use { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; align-content: start; }
.use-icon { width: 22px; height: 22px; color: var(--accent); }
.use h3 { font-size: 16px; }
.use h3 a { color: inherit; text-decoration: none; }
.use h3 a:hover { text-decoration: underline; }
.use p { color: var(--muted); font-size: 14px; }
.use-types { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.use-types li { font: 11.5px/1 var(--mono); color: var(--text); background: var(--surface-2); border-radius: 5px; padding: 5px 7px; display: inline-flex; align-items: center; gap: 6px; }
.use-source { font-size: 12.5px; color: var(--muted); margin-top: auto; padding-top: 6px; }
.use-source a { color: var(--accent); }
.private-checks { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 28px; }
.private-checks .i { color: var(--muted); }

.std-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.checks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; font-size: 14.5px; }
/* Block, not flex: links inside an item stay part of its sentence. */
.checks li { position: relative; padding-left: 26px; }
.checks .i { position: absolute; left: 0; top: 4px; color: var(--ok); }
.checks a { color: var(--accent); }
.std-links { margin-top: 22px; display: flex; gap: 20px; flex-wrap: wrap; }
.std-grid .code-block pre { max-height: 440px; }
.std-grid .code-block pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Code on the left, alternating with the section above; on phones the text still comes first. */
@media (min-width: 861px) {
  .std-grid.flip { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .std-grid.flip > .code-block { order: -1; }
}

/* Publish to agents: copy kept to a readable measure, the comparison drawn beside it (left on desktop). */
.pub-copy { max-width: 34rem; }
.pub-cta { margin-top: 24px; }
.pub-art { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.pub-svg { display: block; width: 100%; height: auto; font-family: var(--font); }
.pa-label { font-size: 12.5px; font-weight: 650; fill: var(--muted); }
.pa-note { font-size: 11.5px; fill: var(--muted); }
.pa-site { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1.25; }
.pa-site-t { font-size: 13px; font-weight: 600; fill: var(--text); text-anchor: middle; }
.pa-agent { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; }
.pa-agent-dim { stroke-dasharray: 3 3; }
.pa-agent-t { font: 500 11.5px var(--mono); fill: var(--muted); text-anchor: middle; }
.pa-rule { stroke: var(--line); stroke-dasharray: 2 4; }
.pa-poll { fill: none; stroke: var(--muted); stroke-width: 1.25; stroke-dasharray: 4 5; opacity: 0.55; animation: pa-poll 1.2s linear infinite; }
.pa-pub { fill: none; stroke: var(--accent); stroke-width: 2; }
.pa-fan { fill: none; stroke: var(--accent); stroke-width: 1.5; opacity: 0.8; }
.pa-hub-ring { fill: none; stroke: var(--brand-signal); stroke-width: 1.5; opacity: 0.35; }
.pa-hub { fill: var(--accent-soft); stroke: var(--brand-signal); stroke-width: 2; }
.pa-dot { fill: var(--brand-signal); }
@keyframes pa-poll { to { stroke-dashoffset: -18; } }
@media (min-width: 861px) { .std-grid.flip > .pub-art { order: -1; } .pub-grid { gap: 56px; } }
@media (prefers-reduced-motion: reduce) { .pa-poll { animation: none; } }

.plan-for { font-size: 13px; color: var(--text); }
/* While prices are hidden (src/site.json showPrices, written onto #pricing by build-pages.py). */
[data-prices="hidden"] :is(.price, .billed, .billing, .when-prices) { display: none; }
[data-prices="shown"] .when-early { display: none; }
.price-soon { font: 650 18px/1.3 var(--font); letter-spacing: -0.01em; color: var(--text); }
.launch-note { text-align: center; margin-top: 22px; }
.launch-offer { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 12%, transparent); color: var(--ok); font-weight: 600; font-size: 14px; }
.launch-offer .i { width: 16px; height: 16px; }
[data-prices="hidden"] .plans { margin-top: 8px; }
.billed { font-size: 12.5px; color: var(--muted); margin-top: -6px; min-height: 1.5em; }
.plan-small { font-size: 12px; color: var(--muted); }
.plan-badge.muted-badge { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line-strong); }
.billing { display: flex; width: max-content; margin: -8px auto 30px; background: var(--surface-2); border: 1px solid var(--line); padding: 3px; border-radius: 999px; gap: 2px; }
.billing button { border: 0; background: transparent; color: var(--muted); font: 600 13.5px/1 var(--font); padding: 9px 16px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }
.billing button[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.save { font: 600 11px/1 var(--font); color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); padding: 3px 6px; border-radius: 999px; }
.plan .button { margin-top: 8px; }
.plan.featured { box-shadow: var(--shadow-lg); position: relative; }
.plan { position: relative; }
.plan-badge { position: absolute; top: -11px; left: 16px; background: var(--accent); color: var(--accent-text); font: 600 11.5px/1 var(--font); padding: 5px 8px; border-radius: 999px; }
.plans-note { margin-top: 18px; text-align: center; max-width: 80ch; margin-inline: auto; }
.section .plans { gap: 16px; }
.section .plan { padding: 22px 18px; gap: 10px; display: flex; flex-direction: column; }
.section .plan .button { margin-top: auto; }
.section .plan h3 { font-size: 15px; }
.section .plan ul { flex: 1; align-content: start; }

.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: start; }
.faq { display: grid; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 16px 28px 16px 0; font-weight: 600; font-size: 15px; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 22px; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.15s; }
.faq details[open] summary::after { transform: rotate(-135deg); top: 26px; }
.faq details p { padding: 0 0 18px; color: var(--muted); font-size: 14.5px; max-width: 68ch; }
.faq a, .doc-body a, .legal a { color: var(--accent); }

.cta { padding-top: 24px; }
.cta-box { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 32px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 36px; }
.cta-box .signup { margin-top: 0; }
.cta-box h2 { font-size: clamp(24px, 2.6vw, 32px); }
.cta-box p.muted { margin-top: 8px; font-size: 15px; }

.site-footer { border-top: 1px solid var(--line); background: var(--shell); padding: 44px 0 24px; margin-top: 48px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.footer-brand p { margin-top: 10px; max-width: 34ch; }
.site-footer nav { display: grid; gap: 8px; align-content: start; }
.site-footer h2 { font-size: 13px; font-weight: 650; margin-bottom: 4px; }
.site-footer nav a { color: var(--muted); text-decoration: none; font-size: 13.5px; }
.site-footer nav a:hover { color: var(--text); text-decoration: underline; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }

/* Pages the Worker renders: the event catalogue, event types and use cases (src/pages.ts). */
.page-hero { padding: 56px 0 40px; }
/* Landing pages (the catalogue, use cases) centre their hero; event type pages read like reference. */
.page-hero.center { text-align: center; }
.page-hero.center h1, .page-hero.center .lead { margin-inline: auto; }
.page-hero.center .cta-actions, .page-hero.center .std-links { justify-content: center; }
.page-hero h1 { font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.03em; max-width: 22ch; }
.page-hero .lead { margin-top: 14px; max-width: 62ch; font-size: 18px; color: var(--muted); }
.page-hero .muted { margin-top: 8px; }
.crumbs { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.crumbs a { color: inherit; }
.cta-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.catalogue-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px 40px; }
.catalogue-list h2 { font-size: 18px; margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.type-list { list-style: none; margin: 0; padding: 0; display: grid; }
.type-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.type-list a { display: grid; gap: 2px; text-decoration: none; color: var(--text); }
.type-list a:hover strong { text-decoration: underline; }
.type-list code { font-size: 12px; color: var(--muted); }
.type-side { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.want { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.want:has(input:checked) { color: var(--text); font-weight: 600; }
.want input { accent-color: var(--focus); margin: 0; }
.want-bar { position: sticky; bottom: 12px; margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); }
.want-bar p { font-size: 14px; color: var(--muted); }
.cat-table td.pick, .cat-table th:first-child { width: 36px; }
.cat-table td.pick input { accent-color: var(--focus); }
.flow-list { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 10px; font-size: 15px; }
.more-uses { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 28px; }
.uses .use h3 a { color: inherit; text-decoration: none; }
.uses .use h3 a:hover { text-decoration: underline; }
ul.uses { list-style: none; margin: 0; padding: 0; }
.cta .cta-actions { margin-top: 0; }

/* Docs and legal pages: a readable column with a contents list beside it. */
.doc-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding: 40px 0 24px; align-items: start; }
.doc-toc { position: sticky; top: 84px; display: grid; gap: 4px; font-size: 13.5px; }
.doc-toc h2 { font-size: 13px; color: var(--muted); font-weight: 600; margin-bottom: 6px; }
.doc-toc a { color: var(--muted); text-decoration: none; padding: 4px 0; }
.doc-toc a:hover { color: var(--text); }
.doc-body, .legal { max-width: 76ch; font-size: 15px; line-height: 1.65; }
.doc-body h1, .legal h1 { font-size: clamp(28px, 3.4vw, 38px); letter-spacing: -0.025em; margin-bottom: 10px; }
.doc-body h2, .legal h2 { font-size: 21px; margin: 40px 0 10px; scroll-margin-top: 80px; }
.doc-body h3, .legal h3 { font-size: 16px; margin: 24px 0 8px; }
.doc-body p, .legal p, .doc-body ul, .legal ul, .doc-body ol { margin: 0 0 12px; }
.doc-body ul, .legal ul, .doc-body ol { padding-left: 20px; }
.doc-body li, .legal li { margin-bottom: 4px; }
.doc-body pre { margin: 0 0 16px; background: var(--code-bg); color: var(--code-text); border-radius: 8px; padding: 14px; font: 13px/1.6 var(--mono); overflow-x: auto; }
.doc-body :not(pre) > code, .legal code { background: var(--surface-2); border-radius: 4px; padding: 1px 5px; }
.doc-body table { border-collapse: collapse; width: 100%; font-size: 14px; margin: 0 0 16px; }
.doc-body th, .doc-body td { text-align: left; border-bottom: 1px solid var(--line); padding: 8px 10px; vertical-align: top; }
.doc-body th { font-weight: 600; color: var(--muted); font-size: 13px; }
.lead { font-size: 17px; color: var(--muted); }
.status { display: inline-block; font: 600 11.5px/1 var(--font); border-radius: 999px; padding: 4px 8px; vertical-align: 3px; margin-left: 6px; }
.status.live { color: var(--l3); border: 1px solid currentColor; }
.status.soon { color: var(--muted); border: 1px dashed currentColor; }
.callout { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--surface); border-radius: 8px; padding: 12px 14px; margin: 0 0 16px; font-size: 14px; }
.not-found { min-height: 60vh; display: grid; place-content: center; text-align: center; gap: 12px; padding: 40px 0; }
.not-found h1 { font-size: 32px; }
.not-found p { color: var(--muted); }
.not-found .actions { display: flex; gap: 10px; justify-content: center; margin-top: 8px; flex-wrap: wrap; }

/* ---------- Smaller screens ---------- */

@media (max-width: 1240px) {
  .site-hero .hero-grid { padding: 16px 0 28px; }
  .uses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); min-height: 0; padding-bottom: 20px; }
  .hero-copy { grid-row: 1; }
  .globe { grid-column: 1; grid-row: 2; height: 360px; min-height: 0; }
  .stream { grid-column: 1; grid-row: 3; }
  .stream-list { height: 300px; }
  .split-view, .build-grid, .doc-grid { grid-template-columns: minmax(0, 1fr); }
  .inspector, .preview { position: static; max-height: none; }
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  /* Phones and small tablets: the links and actions fold into a full-height sheet under the bar. The
     sheet is placed against the sticky header (the row isn't positioned here), so it spans the width. */
  .nav-toggle { display: inline-flex; }
  .nav-row { position: static; }
  .nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; height: calc(100dvh - 60px); overflow-y: auto; flex-direction: column; background: var(--shell); border-top: 1px solid var(--line); padding: 8px 20px calc(20px + env(safe-area-inset-bottom)); }
  .site-nav.is-open .nav-menu { display: flex; animation: menu-in 0.18s ease-out; }
  .nav-menu .nav-links { display: flex; flex-direction: column; }
  .nav-menu .nav-links a { display: flex; align-items: center; justify-content: space-between; padding: 18px 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; color: var(--text); border-bottom: 1px solid var(--line); }
  .nav-menu .nav-links a:not(.nav-out)::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); margin-right: 4px; }
  .nav-menu .nav-links .nav-out .i { width: 18px; height: 18px; color: var(--muted); }
  .nav-links a[aria-current]::after { display: none; }
  .nav-menu .nav-links a[aria-current] { color: var(--accent); }
  .nav-menu .nav-actions { margin: auto 0 0; padding-top: 28px; display: grid; gap: 10px; }
  .nav-menu .nav-signin { display: block; text-align: center; padding: 13px; border: 1px solid var(--input-border); border-radius: 8px; font: 600 16px var(--font); color: var(--text); }
  .nav-menu .nav-gh { justify-content: center; padding: 13px; border: 1px solid var(--input-border); border-radius: 8px; font: 600 16px var(--font); color: var(--text); }
  .nav-menu .nav-gh span { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .nav-menu .nav-actions .button { width: 100%; padding: 14px; font-size: 16px; }
  html.menu-open { overflow: hidden; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .std-grid, .faq-grid, .cta-box { grid-template-columns: minmax(0, 1fr); }
  .section { padding: 52px 0; }
  .cta-box { padding: 24px; }
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 24px; }
  .doc-toc { position: static; display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .doc-toc h2 { width: 100%; margin: 0; }
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 52px auto minmax(0, 1fr); grid-template-areas: "top" "side" "main"; }
  .statusbar { display: none; }
  .crumb, .top-link, .ghost-btn { display: none; }
  .sidebar { flex-direction: row; overflow-x: auto; padding: 6px 10px; border-right: 0; border-bottom: 1px solid var(--line); gap: 4px; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .nav-group, .nav-disabled, .sidebar .badge { display: none; }
  .sidebar a { white-space: nowrap; padding: 7px 10px; }
  .main { padding: 14px 12px 32px; }
  .overview-grid { grid-template-columns: minmax(0, 1fr); }
  .search-box input { width: 100%; }
  .view-tools { width: 100%; }
  .view-tools .search-box { flex: 1; }
}

@media (max-width: 560px) {
  .wrap, .site-hero .hero-grid { width: calc(100% - 32px); }
  .signup-row { flex-direction: column; }
  .uses, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .install-note { width: 100%; }
  .stats dd { font-size: 24px; }
  .hero-grid { padding: 4px 16px 18px; }
  .hero h1 .main-line { font-size: 42px; }
  .lede { font-size: 15px; }
  .globe { height: 300px; }
  .layers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row { grid-template-columns: 1fr; }
  .plans { grid-template-columns: 1fr; }
  .env { display: none; }
  .segmented { display: grid; grid-template-columns: repeat(3, 1fr); justify-self: stretch; }
  .segmented button { padding: 9px 4px; font-size: 12.5px; }
}



/* Phones: tables marked .stack become one card per row, labelled from data-label. */
@media (max-width: 640px) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack tr { padding: 10px 12px; border-bottom: 1px solid var(--line); }
  table.stack tbody tr:last-child { border-bottom: 0; }
  table.stack td { border: 0; padding: 2px 0; }
  table.stack td[data-label]::before { content: attr(data-label); display: inline-block; min-width: 76px; color: var(--muted); font: 500 12px var(--font); }
  table.stack td[data-label="Event"]::before, table.stack td[data-label="Name"]::before { display: none; }
  table.stack td[data-label="Event"], table.stack td[data-label="Name"] { font-weight: 600; padding-top: 4px; }
  table.stack tr.placeholder td { text-align: center; }
  /* The catalogue's "ask for it" box sits in the card's corner; the search gets a row of its own. */
  .cat-table tr { position: relative; }
  .cat-table td.pick { position: absolute; top: 10px; right: 12px; width: auto; padding: 0; }
  table.stack.cat-table td.pick::before { display: none; }
  .cat-table td.pick input { width: 20px; height: 20px; margin: 0; }
  .cat-table td.type-id { padding-right: 32px; }
  .view-tools .search-box { flex: 1 1 100%; }
  .ask-bar { border-bottom: 1px solid var(--line); margin-bottom: 8px; }
  .ask-bar #cat-picked { flex: 1 0 100%; }
  .latest td:last-child { text-align: left; }
}

/* /confirm: a person confirms or declines what their agent asked for. */
.confirm { max-width: 640px; margin: 56px auto 24px; display: grid; gap: 16px; }
.confirm h1 { font-size: clamp(28px, 3.4vw, 36px); letter-spacing: -0.025em; }
.confirm-list { margin: 0; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; font-size: 14.5px; }
.confirm-list dt { color: var(--muted); }
.confirm-list dd { margin: 0; overflow-wrap: anywhere; }
.confirm .actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Plan buttons that do nothing for this member: their current plan, or paid plans not open yet. */
.button[aria-disabled="true"] { opacity: 0.6; cursor: default; }

/* The plan badge in the console's top bar, with this month's use on hover or focus. */
.my-plan { position: relative; display: inline-flex; align-items: center; font: 600 12px/1 var(--font); color: var(--accent); background: var(--accent-soft); border: 1px solid transparent; border-radius: 999px; padding: 6px 10px; text-decoration: none; }
.my-plan[data-plan="free"] { color: var(--muted); background: var(--surface-2); }
.my-plan:hover, .my-plan:focus-visible { border-color: currentColor; }
.plan-usage { position: absolute; top: calc(100% + 8px); right: 0; z-index: 20; width: 260px; display: none; gap: 6px; padding: 12px; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); font: 400 13px/1.35 var(--font); }
.my-plan:hover .plan-usage, .my-plan:focus .plan-usage { display: grid; }
.usage-title { font-weight: 650; margin-bottom: 2px; }
.usage-row { display: flex; justify-content: space-between; gap: 12px; }
.usage-row strong { font-weight: 600; font-variant-numeric: tabular-nums; }
.usage-bar { height: 4px; border-radius: 2px; background: var(--surface-2); overflow: hidden; margin-bottom: 4px; }
.usage-bar > span { display: block; height: 100%; background: var(--accent); }
.usage-bar.high > span { background: var(--error); }
.usage-note { color: var(--muted); font-size: 12px; margin-top: 2px; }
.usage-item { display: grid; gap: 4px; }
/* The same meters on the Account page, side by side. */
.acc-usage { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px 20px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-size: 13px; }
.acc-usage:empty { display: none; }
.acc-usage .usage-note { grid-column: 1 / -1; }
.acc-usage .usage-row strong { font-size: 15px; }

/* Live stream: filter chips over the table, its header kept in view while the rows scroll under it. */
.filter-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; }
.filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-actions .tool-btn { display: inline-flex; align-items: center; gap: 6px; }
.link-btn { background: none; border: 0; padding: 4px 2px; color: var(--accent); font: 500 13px var(--font); cursor: pointer; }
.live-wrap { max-height: calc(100svh - 230px); }
.live-table thead th { position: sticky; top: 0; z-index: 2; background: var(--surface); box-shadow: inset 0 -1px 0 var(--line); }
.cell-filter { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; border-bottom: 1px dashed transparent; }
.cell-filter:hover, .cell-filter:focus-visible { color: var(--accent); border-bottom-color: currentColor; }
@media (max-width: 900px) { .live-wrap { max-height: none; } }

/* Live stream: "Live" beside the title while real events show; a plain banner while sample ones do. */
.live-indicator { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; vertical-align: 4px; font: 600 11px/1 var(--mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); background: color-mix(in srgb, var(--brand-signal) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand-signal) 45%, transparent); border-radius: 999px; padding: 5px 10px 5px 8px; }
/* The logo's signal: the dot drops, and rings spread from it in turn, as in the wordmark. */
.live-dot { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--brand-signal); animation: drop 1.4s ease-out infinite; }
.live-dot i { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--brand-signal); opacity: 0; animation: live-ripple 4.2s cubic-bezier(0.05, 0.6, 0.35, 1) infinite; }
.live-dot i:nth-child(2) { animation-delay: 1.4s; }
.live-dot i:nth-child(3) { animation-delay: 2.8s; }
@keyframes live-ripple { 0% { transform: scale(0.95); opacity: 0; } 6% { opacity: 0.9; } 70% { opacity: 0.2; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .live-dot, .live-dot i { animation: none; } }
.sample-banner { margin: 0; padding: 10px 14px; border: 1px solid var(--line); border-left: 3px solid var(--l2); border-radius: 8px; background: var(--surface); font-size: 14px; }

/* Dialogs: a sheet of one height over the console (steps don't jump), the page behind it held still. */
html:has(dialog[open]) { overflow: hidden; }
.modal { border: 0; padding: 0; background: transparent; width: min(1080px, calc(100vw - 32px)); max-width: none; max-height: none; color: var(--text); }
.modal::backdrop { background: rgb(10 10 14 / 0.5); backdrop-filter: blur(3px); }
.modal[open] { animation: modal-in 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
.modal-shell { display: flex; flex-direction: column; height: min(760px, calc(100svh - 32px)); background: var(--surface); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 80px rgb(0 0 0 / 0.28); overflow: hidden; }
.modal[data-mode="copy"] .modal-shell { height: min(640px, calc(100svh - 32px)); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 16px 20px 12px; }
.modal-head h2 { font-size: 18px; letter-spacing: -0.01em; margin: 0; }
.sd-titles p { margin: 3px 0 0; max-width: 64ch; }
.icon-x { background: none; border: 0; font-size: 24px; line-height: 1; color: var(--muted); cursor: pointer; padding: 2px 8px; border-radius: 8px; }
.icon-x:hover { background: var(--surface-2); color: var(--text); }
.modal h3 { font-size: 13px; font-weight: 650; margin: 0; }
.modal-foot { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--shell); }
.modal-foot .spacer { flex: 1; }
.sd-foot-sum { margin: 0; font-size: 12.5px; color: var(--muted); display: none; }
.sd-hint { margin: 0; font-size: 13px; color: var(--error); }
.sd-hint:empty { display: none; }

/* Steps: numbered, the ones done can be clicked to go back. */
.stepper { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0 20px 12px; counter-reset: step; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.stepper[hidden] { display: none; }
.stepper li { counter-increment: step; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.stepper li + li::before { content: ""; width: 24px; height: 1px; background: var(--line-strong); margin-right: 4px; }
.stepper li > * { display: inline-flex; align-items: center; gap: 8px; font: inherit; color: inherit; background: none; border: 0; padding: 0; }
.stepper li > *::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); font: 600 11.5px/1 var(--font); }
.stepper li button { cursor: pointer; }
.stepper li button:hover { color: var(--text); }
.stepper li[aria-current="step"] { color: var(--text); font-weight: 600; }
.stepper li[aria-current="step"] > *::before { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.stepper li.is-done > *::before { content: "✓"; border-color: var(--accent); color: var(--accent); }

/* Body: the step's pane on the left, the stream being built (and its command) on the right; each scrolls alone. */
.sd-body { flex: 1; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); min-height: 0; }
.sd-main { overflow-y: auto; overscroll-behavior: contain; padding: 0 20px 20px; border-right: 1px solid var(--line); min-width: 0; position: relative; }
.sd-side { overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px 20px; background: var(--shell); display: grid; gap: 16px; align-content: start; min-width: 0; }
.sd-pane { display: grid; gap: 12px; align-content: start; padding-top: 14px; animation: pane-in 0.18s ease-out; }
.sd-pane[hidden] { display: none; }
@keyframes pane-in { from { opacity: 0; transform: translateX(6px); } }
.sd-sticky { position: sticky; top: 0; z-index: 2; display: grid; gap: 10px; margin: -14px -20px 0; padding: 14px 20px 10px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.sd-sticky h3 .muted { font-weight: 400; }
.sd-block { padding-top: 6px; }
.sd-side-group { display: grid; gap: 14px; }
.sd-side-group[hidden] { display: none; }
.fd-group { display: grid; gap: 6px; }
.fd-group-label { font-weight: 650; font-size: 13px; margin: 0; }
.fd-global { display: grid; gap: 8px; }
.fd-global[hidden], .fd-global-warn[hidden] { display: none; }
.switch { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; line-height: 1.35; }
.switch-text { display: grid; gap: 2px; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; flex: none; width: 34px; height: 20px; margin-top: 1px; border-radius: 999px; background: var(--line-strong); transition: background 0.15s; }
.switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--accent); }
.switch input:checked + .switch-track::after { transform: translateX(14px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--focus); outline-offset: 2px; }
.fd-global-warn { padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); font-size: 13px; }
.fd-global-warn p { margin: 0 0 4px; }
.fd-global-warn ul { margin: 0; padding-left: 18px; columns: 2; column-gap: 20px; }
@media (max-width: 640px) { .fd-global-warn ul { columns: 1; } }
.chip.is-planned { border-style: dashed; }
.chip-count { margin-left: 6px; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font: 600 10.5px/1.5 var(--font); text-align: center; }

/* Types by family: a jump bar under the search; each type with its live/planned mark and an example. */
.fp-families { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; margin-right: -20px; padding-right: 20px; }
.fp-families .chip { flex: none; }
.fp-list { display: grid; gap: 18px; }
.fp-family { display: grid; gap: 2px; scroll-margin-top: 120px; }
.fp-family-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0 6px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.fp-family-head h3 { font-size: 14px; }
.fp-family-meta { font-weight: 400; font-size: 12px; margin-left: 4px; }
.fp-type { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: 8px; cursor: pointer; }
.fp-type:hover { background: var(--surface-2); }
.fp-type:has(input:checked) { background: var(--accent-soft); }
.fp-type input { accent-color: var(--focus); margin-top: 3px; flex: none; width: 15px; height: 15px; }
.fp-type-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fp-type-name { font-weight: 550; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fp-example { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-type-text code { font-size: 11px; color: var(--muted); }
.fp-type:has(input:disabled) { cursor: default; }
.fd-country-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 8px; max-height: 260px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border: 1px solid var(--line); border-radius: 10px; }
.fp-country { align-items: center; padding: 6px 8px; }
.fp-country input { margin-top: 0; }
.sd-empty { display: grid; gap: 10px; justify-items: start; padding: 16px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.sd-empty p { margin: 0; }
.sd-ask { display: grid; gap: 8px; padding: 14px; margin-top: 6px; border-radius: 12px; background: var(--shell); border: 1px solid var(--line); font-size: 13px; }
.sd-ask textarea, .sd-field input, .cd-prompt input { font: 400 14px var(--font); padding: 10px 12px; border: 1px solid var(--input-border); border-radius: 8px; background: var(--surface); color: var(--text); resize: vertical; width: 100%; box-sizing: border-box; }
.sd-ask textarea:focus, .sd-field input:focus, .cd-prompt input:focus { outline: 2px solid var(--focus); outline-offset: 1px; }
.sd-suggest .chip { font-size: 12px; }

/* Delivery: cards with a familiar mark; signal dots travel into it. */
.cd-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.cd-card { display: flex; gap: 12px; align-items: center; text-align: left; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.cd-card:hover { border-color: var(--text); transform: translateY(-1px); }
.cd-card[aria-checked="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 6px 18px color-mix(in srgb, var(--accent) 14%, transparent); }
.cd-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.cd-card-text { display: grid; gap: 2px; min-width: 0; }
.cd-card-text strong { font-size: 13.5px; }
.cd-card-text span { font-size: 12px; color: var(--muted); line-height: 1.35; }
.cd-prompt { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.cd-anim { position: relative; flex: none; width: 76px; height: 34px; border-radius: 9px; background: var(--surface-2); overflow: hidden; }
.cd-anim i { position: absolute; top: 14px; left: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-signal); animation: cd-go 2.4s linear infinite; }
.cd-anim i:nth-child(2) { animation-delay: 0.8s; }
.cd-anim i:nth-child(3) { animation-delay: 1.6s; }
.cd-dest { position: absolute; right: 5px; top: 5px; height: 24px; min-width: 24px; display: flex; align-items: center; justify-content: center; }
.cd-dest img { width: 20px; height: 20px; padding: 2px; box-sizing: border-box; border-radius: 6px; background: #ffffff; box-shadow: 0 0 0 2px var(--surface-2); }
.cd-dest img + img { margin-left: -8px; }
.cd-glyph { font: 700 10.5px/1 var(--mono); color: var(--text); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 5px; }
@keyframes cd-go { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 70% { transform: translateX(36px); opacity: 1; } 80%, 100% { transform: translateX(38px); opacity: 0; } }
.cd-card[aria-checked="true"] .cd-dest { animation: cd-take 2.4s ease-in-out infinite; }
@keyframes cd-take { 66%, 100% { transform: scale(1); } 74% { transform: scale(1.12); } }
.cd-anim.batch i { animation-name: cd-batch; animation-delay: 0s; }
.cd-anim.batch i:nth-child(1) { top: 14px; left: 6px; }
.cd-anim.batch i:nth-child(2) { top: 8px; left: 12px; }
.cd-anim.batch i:nth-child(3) { top: 20px; left: 12px; }
@keyframes cd-batch { 0%, 45% { transform: translateX(0); opacity: 1; } 72% { transform: translateX(32px); opacity: 1; } 82%, 100% { transform: translateX(34px); opacity: 0; } }
.cd-anim.once i { animation-name: cd-once; }
@keyframes cd-once { 0% { transform: translateX(0); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateX(36px); opacity: 1; } 50%, 100% { transform: translateX(36px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cd-anim i, .cd-dest, .cd-card { animation: none !important; transition: none; } .cd-anim i { left: 28px; } .modal[open], .sd-pane { animation: none; } }

/* The command, on the right. */
.sd-command { display: grid; gap: 8px; }
.sd-command[hidden] { display: none; }
.sd-command-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sd-command-head .tool-btn { display: inline-flex; align-items: center; gap: 6px; }
.sd-command p { margin: 0; }
.cd-code { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12.5px; line-height: 1.55; max-height: 300px; overflow: auto; }

/* Email and what happens next: a form beside a short timeline. */
.sd-you { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.sd-you-form { display: grid; gap: 10px; }
.sd-you-form p { margin: 0; }
.sd-field { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.sd-field input { font-size: 15px; }
.sd-next { list-style: none; margin: 0; padding: 14px; display: grid; gap: 14px; counter-reset: next; background: var(--shell); border: 1px solid var(--line); border-radius: 12px; }
.sd-next li { counter-increment: next; display: grid; grid-template-columns: 26px 1fr; column-gap: 10px; row-gap: 2px; font-size: 13px; position: relative; }
.sd-next li::before { content: counter(next); grid-row: span 2; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line-strong); font: 600 12px/1 var(--font); }
.sd-next li.now::before { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.sd-next li:not(:last-child)::after { content: ""; position: absolute; left: 12.5px; top: 30px; bottom: -12px; width: 1px; background: var(--line-strong); }
.sd-next span { color: var(--muted); line-height: 1.45; }
.sd-done { justify-items: start; }
.sd-done h3 { font-size: 20px; letter-spacing: -0.01em; }
.sd-done > p { margin: 0; max-width: 60ch; }
.sd-done-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--l3) 14%, var(--surface)); color: var(--l3); animation: done-pop 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); }
.sd-done-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: done-draw 0.4s 0.15s ease-out forwards; }
@keyframes done-pop { from { transform: scale(0.6); opacity: 0; } }
@keyframes done-draw { to { stroke-dashoffset: 0; } }
.sd-meanwhile { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); font-size: 13.5px; max-width: 60ch; }
.sd-done .sd-next { width: 100%; box-sizing: border-box; max-width: 560px; }

/* Under the live table: where to get every event. */
.table-end { display: grid; gap: 10px; justify-items: center; text-align: center; padding: 22px 16px 26px; border-top: 1px solid var(--line); }
.table-end p { margin: 0; max-width: 56ch; }
.table-end-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.add-filter { font-weight: 600; }

/* Phones: the dialog fills the screen; the side's summary becomes a line in the footer; the command stays. */
@media (max-width: 760px) {
  .modal { width: 100vw; }
  .modal-shell { height: 100svh; border-radius: 0; border: 0; }
  .modal[data-mode="copy"] .modal-shell { height: 100svh; }
  .sd-body { grid-template-columns: 1fr; overflow-y: auto; }
  .sd-main { overflow: visible; border-right: 0; }
  .sd-side { overflow: visible; }
  .modal[data-step="types"] .sd-side, .modal[data-step="where"] .sd-side, .modal[data-step="you"] .sd-side { display: none; }
  .sd-side-group { display: none; }
  .sd-foot-sum { display: block; flex: 1 1 100%; order: -1; }
  .modal-foot { flex-wrap: wrap; row-gap: 8px; }
  .stepper li > span, .stepper li > button { font-size: 0; gap: 0; }
  .stepper li > *::before { font-size: 11.5px; }
  .stepper li + li::before { width: 14px; }
  .sd-you { grid-template-columns: 1fr; }
  .fd-country-list { grid-template-columns: 1fr 1fr; }
}