/* ── tokens.css (house geometry; colors come from the theme) ── */
:root {
  /* Spacing */
  --of-space-s1: 4px;
  --of-space-s2: 8px;
  --of-space-s3: 12px;
  --of-space-s4: 16px;
  --of-space-s5: 24px;
  --of-space-s6: 32px;

  /* Radii */
  --of-radius-small: 6px;
  --of-radius-base: 8px;
  --of-radius-large: 14px;
  --of-radius-card: 18px;

  /* Fonts: every curated choice, and the defaults */
  --of-font-system: system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --of-font-rounded: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  --of-font-serif: ui-serif, "New York", Georgia, serif;
  --of-font-avenir-next: "Avenir Next", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --of-font-helvetica-neue: "Helvetica Neue", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --of-font-gill-sans: "Gill Sans", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --of-font-georgia: "Georgia", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --of-font-system-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --of-font-menlo: "Menlo", ui-monospace, "SF Mono", SFMono-Regular, monospace;
  --of-font-courier: "Courier", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --of-font-body: var(--of-font-system);
  --of-font-mono: var(--of-font-system-mono);
  --of-font-scale-min: 0.85;
  --of-font-scale-max: 1.3;
  --of-font-scale-step: 0.05;
  --of-font-scale: 1;

  /* Type scale: size at scale 1 (multiplied by --of-font-scale) and weight */
  --of-text-title-size: calc(26px * var(--of-font-scale));
  --of-text-title-weight: 600;
  --of-text-headline-size: calc(17px * var(--of-font-scale));
  --of-text-headline-weight: 600;
  --of-text-subhead-size: calc(13px * var(--of-font-scale));
  --of-text-subhead-weight: 500;
  --of-text-body-size: calc(14px * var(--of-font-scale));
  --of-text-body-weight: 400;
  --of-text-caption-size: calc(12px * var(--of-font-scale));
  --of-text-caption-weight: 400;
  --of-text-label-size: calc(10px * var(--of-font-scale));
  --of-text-label-weight: 600;
  --of-text-mono-size: calc(12px * var(--of-font-scale));
  --of-text-mono-weight: 400;
  --of-text-mono-small-size: calc(10px * var(--of-font-scale));
  --of-text-mono-small-weight: 400;

  /* Layout: shell and card metrics */
  --of-layout-sidebar-width: 300px;
  --of-layout-titlebar-strip: 28px;
  --of-layout-lights-clearance: 40px;
  --of-layout-lights-band: 34px;
  --of-layout-card-gutter: 10px;
  --of-layout-card-radius: 18px;
  --of-layout-tab-strip: 37px;
  --of-layout-pane-top-pad: 10px;
  --of-layout-card-measure: 635px;
  --of-layout-min-card-width: 420px;
  --of-layout-min-tab-column-width: 320px;
  --of-layout-min-card-height: 250px;
  --of-layout-stack-hysteresis: 60px;
  --of-layout-divider-hit-width: 9px;
  --of-layout-min-popout-width: 350px;
  --of-layout-sidecar-width: 300px;
  --of-layout-section-gap: 20px;
  --of-layout-group-gap: 12px;
  --of-layout-rail-width: 56px;

  /* Breakpoints (for scripts and calc(); a custom property cannot sit inside @media) */
  --of-breakpoint-wide-at: 1110px;
  --of-breakpoint-compact-below: 700px;
  --of-breakpoint-hysteresis: 60px;

  /* Control sizes */
  --of-size-hit: 44px;
  --of-size-composer-unit: 36px;
  --of-size-composer-max-lines: 6;
  --of-size-composer-content-air: 50px;
  --of-size-header-chip-width: 30px;
  --of-size-header-chip-height: 22px;
  --of-size-pill-sidebar: 20px;
  --of-size-pill-tab: 16px;
  --of-size-pill-corner: 15px;
  --of-size-pill-font-sidebar: 11px;
  --of-size-pill-font-tab: 10.5px;
  --of-size-pill-font-corner: 9.5px;
  --of-size-state-mark-dot: 6px;
  --of-size-thumbnail: 52px;
  --of-size-primary-min-height: 32px;
  --of-size-inline-pill-height: 28px;
  --of-size-disabled-opacity: 0.38;
  --of-size-sidebar-row-glyph-column: 30px;
  --of-size-sidebar-row-glyph: 13px;
  --of-size-sidebar-row-h-pad: 9px;
  --of-size-sidebar-row-gap: 8px;
  --of-size-sidebar-row-corner: 7px;
  --of-size-sidebar-row-v-pad: 6px;
  --of-size-sidebar-row-spacing: 1px;
  --of-size-sidebar-row-fade: 10px;
  --of-size-page-header-title-line: 19px;
  --of-size-page-header-subtitle-line: 14px;
  --of-size-page-header-mark-box: 22px;
  --of-size-page-header-mark-glyph: 17px;
  --of-size-page-header-mark-gap: 8px;
  --of-size-page-header-h-pad: 12px;
  --of-size-page-header-top: 4px;
  --of-size-page-header-bottom-rule: 14px;
  --of-size-page-header-bottom: 4px;
  --of-size-page-header-cluster: 6px;
  --of-size-page-header-control-row: 24px;
  --of-size-page-top: 24px;
  --of-size-page-bottom: 44px;
  --of-size-page-side: 20px;
  --of-size-page-side-phone: 16px;
  --of-size-page-group-gap: 26px;
  --of-size-page-label-gap: 8px;
  --of-size-page-panel-radius: 10px;
  --of-size-page-panel-pad: 14px;
  --of-size-page-row-v: 9px;
  --of-size-page-value-row-v: 11px;
  --of-size-tab-strip-h-pad: 14px;
  --of-size-tab-strip-v-pad: 10px;
  --of-size-tab-strip-inset: 12px;
  --of-size-tab-strip-underline: 2px;
  --of-size-tab-strip-glyph: 12px;
  --of-size-switch-width: 36px;
  --of-size-detail-header-back-glyph: 14px;
  --of-size-detail-header-back-width: 22px;
  --of-size-detail-header-mark-glyph: 15px;
  --of-size-sheet-prompt: 380px;
  --of-size-sheet-form: 480px;
  --of-size-sheet-wide: 560px;
  --of-size-sheet-document: 720px;
  --of-size-sheet-pad: 16px;
  --of-size-sheet-footer-gap: 10px;
  --of-size-sheet-footer-max-button: 200px;
  --of-size-field-label-gap: 4px;
  --of-size-field-optional-marker: 11px;
  --of-size-field-text-area-min-height: 88px;
  --of-size-field-stepper-width: 56px;
  --of-size-field-checkbox: 16px;
  --of-size-field-help-popover: 300px;
  --of-size-feedback-progress-bar: 4px;
  --of-size-feedback-key-cap: 26px;
  --of-size-feedback-accent-tile: 40px;
  --of-size-feedback-avatar-small: 20px;
  --of-size-feedback-avatar: 28px;
  --of-size-feedback-avatar-large: 40px;
  --of-size-feedback-logo-mark: 28px;
  --of-size-feedback-notice-radius: 10px;
  --of-size-feedback-banner-width: 420px;

  /* Press scales (1 under prefers-reduced-motion, below) */
  --of-press-round: 0.92px;
  --of-press-wide: 0.98px;
  --of-press-pill: 0.94px;

}

@media (prefers-reduced-motion: reduce) {
  :root {
    --of-press-round: 1;
    --of-press-wide: 1;
    --of-press-pill: 1;
  }
}

/* ── src/css/base.css ── */
/* src/css/base.css: the core frame every page wears (the web engine's default; a site replaces it by shipping its
   own src/css/base.css). Colors come ONLY from the site's theme CSS (/_site/theme/tokens.css, made by Outerface's
   themes/build-css.mjs from the ColorTheme documents); never write a hex here but the fallbacks below. A site adds
   its own styles in src/css/lanes/<name>.css (concatenated after the engine's).

   Phone first: a 16px side gutter, no horizontal page scroll at 320px+. */

:where(:root) {
  /* Fallbacks if tokens.css fails to load; the real values are the theme's. */
  --bg: #FFFFFF;
  --surface: #F5F5F5;
  --surface-lift: #EFEFEF;
  --border: #E6E6E6;
  --border-bright: #8A8A8A;
  --text-primary: #000000;
  --text-bright: #000000;
  --text-secondary: #3A3A3C;
  --text-muted: #6B6B6B;
  --accent: #000000;
  --link: #000000;
  --font-body: system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-display: system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
}

:root {
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --gutter: 16px;
  --measure: 46rem;
  --page: 72rem;
  --radius-sm: 6px;
  --radius-md: 12px;
  --header-h: 3.75rem;
  /* The accent as a FILL, with the ink the derivation picks for it (white on Base's black, black on Base Night's
     white; each theme's own elsewhere). A site whose accent wants another ink sets --ink-on-brand itself. */
  --brand: var(--accent);
  --ink-on-brand: var(--ink-on-accent, #FFFFFF);
  /* .segmented (the release toggle, the report kind) */
  --seg-ground: var(--surface);
  --seg-thumb: var(--bg);
  --seg-ink: var(--text-bright);
}

@media (min-width: 40rem) { :root { --gutter: 24px; } }

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

html {
  -webkit-text-size-adjust: 100%;
  /* The closed mobile drawer sits off-canvas (translateX(100%)); clip it so
     it never widens the page. */
  overflow-x: clip;
  scroll-padding-top: calc(var(--header-h) + var(--space-2));
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--text-bright);
  line-height: 1.2;
  text-wrap: balance;
  margin: 0 0 var(--space-2);
}
h1 { font-size: clamp(2rem, 6vw, 3rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); letter-spacing: -0.01em; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 var(--space-2); max-width: var(--measure); }

a {
  color: var(--link);
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 0.15em;
}
a:hover { text-decoration-color: currentColor; }

img, svg { max-width: 100%; }

code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; }
code { background: var(--surface); padding: 0.1em 0.35em; border-radius: 4px; }
pre { background: var(--surface); padding: var(--space-2); border-radius: var(--radius-md); overflow-x: auto; max-width: 100%; }
pre code { background: none; padding: 0; }

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--text-bright);
  padding: var(--space-1) var(--space-2);
}
.skip-link:focus { left: var(--gutter); top: var(--space-1); }

main {
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter) var(--space-6);
}
main > .page-title { margin: var(--space-5) 0 var(--space-4); }
main > section, main > header { margin: 0 0 var(--space-5); }

/* A SLOT: a section its lane has not filled yet (wireframe.yml, no layout). */
.slot {
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  color: var(--text-muted);
}
.slot-note { margin: 0; }

/* Tables from engine/markdown.mjs scroll inside their own box, never the page. */
.table { overflow-x: auto; max-width: 100%; margin: 0 0 var(--space-3); }
table { border-collapse: collapse; width: 100%; font-size: 0.95em; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.65rem; border-bottom: 1px solid var(--border); }
th { color: var(--text-bright); }

/* Rendered Markdown (manual sections, legal documents, agents pages). */
.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--space-4); }
.prose h3 { margin-top: var(--space-3); }
.prose ul, .prose ol { padding-inline-start: 1.4em; margin: 0 0 var(--space-2); max-width: var(--measure); }
.prose li { margin: 0.3rem 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── src/css/components.css ── */
/* src/css/components.css: the chrome every page shares (lane A): header,
   nav and its mobile drawer, footer, buttons, the segmented control, the
   draft banner. Page-specific styles belong to a lane file in src/css/lanes/. */

/* ── header ─────────────────────────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--header-h);
  padding: 0.5rem var(--gutter);
  /* Solid, no backdrop-filter: a filter makes the header the containing block
     for its position:fixed children, which would trap the mobile drawer and
     its scrim inside the bar. */
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-bright);
  text-decoration: none;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  margin-inline-end: auto;
  min-height: 44px;
}
/* The way back to the local front door: a lone chevron, a 32 px target pulled into
   the gutter (its own gap given back), so the wordmark sits almost where it does
   without it. Muted ink; the focus ring is base.css's :focus-visible. */
.header-front {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-inline-start: calc(-1 * var(--gutter));
  margin-inline-end: calc(-1 * var(--space-2));
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.header-front:hover { color: var(--text-bright); background: var(--surface); }
.header-front:focus-visible { outline: 2px solid var(--accent, currentColor); outline-offset: 0; }
.wordmark-mark { width: 36px; height: 36px; border-radius: 8px; }   /* 28 px read too small, in dark mode most of all (Nima, 2026-10-17) */

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }
.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.975rem;
}
.nav-link:hover { color: var(--text-bright); background: var(--surface); }
.nav-link[aria-current="page"] { color: var(--text-bright); font-weight: 600; }
.nav .nav-home, .nav .nav-cta, .nav .nav-sub { display: none; }

.header-cta { white-space: nowrap; }
/* The light/dark switch sits top right: after the call to action; on a phone, just left of the menu button. */
.site-header .theme-switch { order: 1; flex: none; }
@media (max-width: 54rem) { .site-header .nav-toggle { order: 2; } }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text-bright);
  cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block;
  width: 18px;
  height: 2px;
  margin: 0 auto;
  background: currentColor;
  border-radius: 1px;
  transition: transform 160ms ease;
}
.nav-toggle-bars { position: relative; background: transparent; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { transform: translateY(-4px); }
.nav-toggle-bars::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: rotate(-45deg); }
.nav-scrim { display: none; }

/* Below 54rem: with script, the nav becomes a drawer behind the toggle
   (src/js/nav-toggle.js). Without script the toggle stays hidden and the nav
   wraps under the wordmark, which always works. */
@media (max-width: 54rem) {
  .site-header { flex-wrap: wrap; }
  .site-header .header-cta { display: none; }
  .nav-toggle:not([hidden]) { display: inline-block; }
  .nav-toggle:not([hidden]) ~ .nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(20rem, 86vw);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: calc(var(--header-h) + var(--space-1)) var(--space-2) var(--space-3);
    background: var(--bg);
    border-left: 1px solid var(--border);
    overflow-y: auto;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 200ms ease, visibility 0s linear 200ms;
    z-index: 60;
  }
  .nav-toggle[aria-expanded="true"] ~ .nav {
    transform: none;
    visibility: visible;
    transition: transform 200ms ease;
  }
  .nav-toggle:not([hidden]) ~ .nav .nav-home,
  .nav-toggle:not([hidden]) ~ .nav .nav-cta { display: inline-flex; }
  .nav-toggle:not([hidden]) ~ .nav .nav-cta { margin-top: var(--space-2); justify-content: center; }
  .nav-toggle:not([hidden]) ~ .nav .nav-sub { display: block; padding: 0 0 var(--space-1) 0.7rem; }
  .nav-toggle { position: relative; z-index: 70; }
  .nav-toggle[aria-expanded="true"] ~ .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: color-mix(in srgb, var(--text-bright) 30%, transparent);
  }
}

.nav-sub-title { margin: var(--space-1) 0 0.25rem; font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }
.nav-sub-list { list-style: none; margin: 0; padding: 0; }
.nav-sub-list a { display: block; padding: 0.35rem 0; color: var(--text-secondary); text-decoration: none; font-size: 0.925rem; }
.nav-sub-list a[aria-current="page"] { color: var(--text-bright); font-weight: 600; }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 0.975rem;
  text-decoration: none;
  cursor: pointer;
}
.btn--primary { background: var(--brand); color: var(--ink-on-brand); }
.btn--primary:hover { background: var(--accent-bright, var(--brand)); color: var(--ink-on-accent-bright, var(--ink-on-brand)); }
.btn--ghost { background: transparent; color: var(--text-bright); border-color: var(--border-bright); }
.btn--ghost:hover { background: var(--surface); }
.badge--coming-soon, [aria-disabled="true"].btn { opacity: 0.55; cursor: default; }
/* cta.json `kind: "link"`: a quiet text link beside the buttons. */
.cta-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; font-weight: 600; text-decoration: none; }
.cta-link::after { content: "\00a0→"; }
.cta-link:hover { text-decoration: underline; }

/* ── segmented control ──────────────────────────────────────────────────── */

.segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: var(--seg-ground);
  border: 1px solid var(--border);
}
.segmented-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  color: var(--text-secondary);
}
.segmented--sm .segmented-option { padding: 0.25rem 0.75rem; }

/* ── shared bits ────────────────────────────────────────────────────────── */

.eyebrow {
  margin: 0 0 var(--space-1);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.band-alt { background: var(--surface); border-radius: var(--radius-md); padding: var(--space-4) var(--gutter); }
.icon { display: inline-block; }

/* ── the draft banner (legal pages until counsel approves) ─────────────── */

.draft-banner {
  margin: var(--space-4) 0 calc(var(--space-4) * -1 + var(--space-2));
  padding: var(--space-2) var(--space-3);
  border: 2px solid var(--warning, var(--border-bright));
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--warning, var(--surface)) 12%, var(--bg));
  max-width: var(--measure);
}
.draft-banner-title { margin: 0; font-weight: 700; color: var(--text-bright); }
.draft-banner-detail { margin: 0.25rem 0 0; color: var(--text-secondary); font-size: 0.95rem; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--space-4) var(--gutter) var(--space-3);
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
  max-width: var(--page);
  margin: 0 auto var(--space-4);
}
.footer-col-title { font-size: 0.85rem; font-weight: 600; color: var(--text-bright); margin: 0 0 var(--space-1); }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0.2rem 0; }
.footer-col a, .legal-nav a { color: var(--text-secondary); text-decoration: none; display: inline-block; padding: 0.3rem 0; }
.footer-col a:hover, .legal-nav a:hover { color: var(--text-bright); text-decoration: underline; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  max-width: var(--page);
  margin: 0 auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.footer-copy { margin: 0; color: var(--text-muted); font-size: 0.875rem; }
.colophon::before { content: "· "; }
.footer-utils { display: flex; align-items: center; gap: var(--space-2); }
.legal-nav { display: flex; gap: var(--space-2); }

/* The dark/light switch: the knob sits on the side of the CURRENT pole. */
.theme-switch {
  position: relative;
  width: 3.25rem;
  height: 1.9rem;
  border-radius: 999px;
  border: 1px solid var(--border-bright);
  background: var(--surface);
  color: var(--text-bright);
  cursor: pointer;
  padding: 0;
}
.theme-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--border);
  display: grid;
  place-items: center;
  transition: transform 160ms ease;
}
.theme-switch[aria-checked="true"] .theme-switch-knob { transform: translateX(1.3rem); }
.theme-switch-icon { width: 0.95rem; height: 0.95rem; grid-area: 1 / 1; }
.theme-switch-icon--moon { display: none; }
.theme-switch[aria-checked="true"] .theme-switch-icon--sun { display: none; }
.theme-switch[aria-checked="true"] .theme-switch-icon--moon { display: block; }

/* ── src/css/media.css ── */
/* src/css/media.css: the media system's boxes (engine/media.mjs writes the
   markup, src/js/media.js runs the clips). Every box knows its size before a
   byte loads: the <img>/<video> carries width and height, and an empty
   placeholder carries aspect-ratio, so nothing shifts when a file lands. A box
   is at most its display size and shrinks with its column. */

.media {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--border);
}
.media--hero   { max-width: 1200px; }
.media--wide   { max-width: 1040px; }
.media--doc    { max-width: 720px; }
.media--square { max-width: 360px; }
.media--phone  { max-width: 270px; border-radius: 22px; }
.media--tablet { max-width: 360px; border-radius: 18px; }

.media img,
.media video {
  display: block;
  width: 100%;
  height: auto;
}
/* A reused screenshot fills the slot's box and is cropped to it. */
.media--placeholder img {
  object-fit: cover;
}
.media--square.media--placeholder img { aspect-ratio: 1 / 1; }
.media--phone.media--placeholder img  { aspect-ratio: 270 / 585; }
.media--tablet.media--placeholder img { aspect-ratio: 360 / 480; }
.media--hero.media--placeholder img,
.media--wide.media--placeholder img,
.media--doc.media--placeholder img    { aspect-ratio: 16 / 10; }

/* No file and no screenshot to stand in: a calm box with the app's bubble. */
.media--empty {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    var(--surface);
}
.media-empty-mark {
  width: 22%;
  max-width: 64px;
  aspect-ratio: 1;
  border-radius: 50% 50% 50% 12%;
  background: color-mix(in srgb, var(--text-muted) 16%, transparent);
}
.media--video::after {
  /* A quiet "clip" corner so a poster reads as motion to come. */
  content: "";
  position: absolute;
  inset: auto 10px 10px auto;
  width: 0; height: 0;
  border-left: 9px solid color-mix(in srgb, var(--bg) 85%, transparent);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  filter: drop-shadow(0 0 2px rgb(0 0 0 / 0.4));
  pointer-events: none;
}

/* A horizontal swipe row for tall phone shots (features, home proof). */
.media-carousel {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: var(--space-1) 2px var(--space-2);
  margin: 0;
  list-style: none;
  scrollbar-width: thin;
}
.media-carousel > li { position: relative; flex: 0 0 auto; width: min(270px, 72vw); scroll-snap-align: start; }
.media-carousel > li.is-tablet { width: min(360px, 82vw); }
.media-carousel figcaption { margin-top: var(--space-1); font-size: 0.9rem; color: var(--text-secondary); }
.media-carousel figcaption strong { display: block; color: var(--text-bright); }

/* Store buttons: "Coming soon", never Apple's badge artwork. */
.store-row { margin-top: var(--space-2); }
.store-line { margin: 0 0 var(--space-1); font-weight: 600; color: var(--text-bright); }
.store-buttons { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.btn--store {
  display: inline-flex; align-items: center; gap: 0.5rem;
  opacity: 0.55; cursor: not-allowed;
  border: 1px solid var(--border-bright);
  color: var(--text-secondary);
  background: transparent;
}
.btn--store .icon { font-size: 1.1em; }
.store-note { margin: var(--space-1) 0 0; font-size: 0.875rem; color: var(--text-muted); }

/* ── src/css/lanes/architecture.css ── */
/* src/css/lanes/architecture.css: /how-it-works, the architecture diagram
   (layouts/architecture.yml; drawn by src/js/lanes/architecture.js).
   Prototype, 2026-10-17. Colors come from the theme's tokens; the five flow
   kinds get their own hue, redefined for the night theme. */

.arch { max-width: none; }
.arch-lede { max-width: var(--measure); color: var(--text-secondary); }

/* The diagram breaks out of main's column: as wide as the window allows, up to 1720px. */
.arch-app {
  width: min(calc(100vw - 2 * var(--gutter, 16px)), 1720px);
  margin-inline: calc(50% - min(calc(50vw - var(--gutter, 16px)), 860px));
  margin-top: var(--space-3);
  --arch-config: #1E6BFF;
  --arch-chat: #8B3FD9;
  --arch-key: #B86E00;
  --arch-sync: #0E8A5F;
  --arch-human: #D13A6A;
  --arch-claude: #D97757;
  --arch-cloudflare: #F38020;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="base"]) .arch-app {
    --arch-config: #5B93FF; --arch-chat: #B583F2; --arch-key: #E5A33B; --arch-sync: #3CC48F; --arch-human: #F2719A;
  }
}
:root[data-theme="base-night"] .arch-app {
  --arch-config: #5B93FF; --arch-chat: #B583F2; --arch-key: #E5A33B; --arch-sync: #3CC48F; --arch-human: #F2719A;
}

/* the icon font's rules ship because these spans exist; the script reads them */
.arch-glyphs { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* ── toolbar ── */
.arch-bar { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); align-items: center; margin-bottom: var(--space-2); }
.arch-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface); }
.arch-seg button {
  font: inherit; font-size: 0.82rem; border: 0; background: none; color: var(--text-secondary);
  padding: 0.3rem 0.8rem; border-radius: 999px; cursor: pointer;
}
.arch-seg button[aria-pressed="true"] { background: var(--text-primary); color: var(--bg); }

/* ── frame: sidebar | diagram (wide), or the presentation bar over the diagram (`.is-pres`, set by
   architecture.js from the diagram's own width, so a narrow Mac window and an iPad in portrait both get it) ── */
.arch-frame { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.arch-app:not(.is-pres) .arch-frame { grid-template-columns: 19rem minmax(0, 1fr); align-items: start; }
.arch-app:not(.is-pres) .arch-side {
  position: sticky; top: calc(var(--header-h) + var(--space-2));
  max-height: calc(100vh - var(--header-h) - var(--space-3));
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
/* empty room after the last row, so every row can rise to meet the deck */
.arch-app:not(.is-pres) .arch-spacer { height: calc(100vh - var(--header-h) - 12rem); }

/* ── the sidebar ── */
.arch-side { font-size: 0.86rem; padding-right: 0.25rem; }

.arch-deck {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.5rem;
  padding: 0.35rem 0.1rem 0.85rem 0.35rem; margin-bottom: 0.4rem; background: var(--bg);
  box-shadow: 0 1px 0 var(--border);
}
.arch-deck-btn {
  position: relative; flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; padding: 0;
  border-radius: 50%; border: 1px solid var(--border-bright); background: var(--bg); color: var(--text-primary); cursor: pointer;
}
.arch-deck-btn svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.arch-deck-btn:hover:not(:disabled) { background: var(--surface); }
.arch-deck-btn:disabled { opacity: 0.35; cursor: default; }
.arch-deck-btn.is-play { width: 3rem; height: 3rem; border: 0; background: var(--text-primary); color: var(--bg); margin: 0 0.15rem; }
.arch-deck-btn.is-play:hover { background: var(--text-secondary); }
.arch-deck-btn.is-play .glyph-play, .arch-deck-btn.is-play .glyph-pause { width: 1.35rem; height: 1.35rem; }
.arch-deck-btn .glyph-pause, .arch-deck-btn.is-playing .glyph-play { display: none; }
.arch-deck-btn.is-playing .glyph-pause { display: block; }
.arch-deck-btn .ring { position: absolute; top: -5px; left: -5px; width: calc(100% + 10px); height: calc(100% + 10px); max-width: none; transform: rotate(-90deg); pointer-events: none; }
.arch-deck-btn .ring circle { fill: none; stroke-width: 2.5; }
.arch-deck-btn .ring-track { stroke: transparent; }
.arch-deck-btn.is-playing .ring-track { stroke: var(--border); }
.arch-deck-btn .ring-count { stroke: var(--c, var(--accent)); stroke-linecap: round; }
.arch-deck-where { margin-left: auto; font: 0.72rem/1 var(--font-mono); color: var(--text-muted); }

.arch-intro { font-size: 0.8rem; color: var(--text-muted); margin: 0.2rem 0.6rem var(--space-2); }
.arch-group {
  font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-muted); margin: var(--space-2) 0 0.3rem; padding-left: 0.6rem;
}
.arch-list, .arch-kids { list-style: none; margin: 0; padding: 0; }
.arch-flow { border-radius: var(--radius-md); margin: 1px 0; }

/* every row, parent or child, is the same row */
.arch-row {
  display: flex; gap: 0.55rem; align-items: baseline; width: 100%; text-align: left; font: inherit;
  border: 0; background: none; color: var(--text-secondary); padding: 0.36rem 0.6rem; border-radius: var(--radius-sm); cursor: pointer;
}
.arch-row:hover { background: var(--surface-lift); color: var(--text-primary); }
.arch-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c); transform: translateY(-0.05rem); }

.arch-flow.is-open { background: var(--surface); padding-bottom: 0.35rem; }
.arch-flow.is-open > .arch-flow-head { color: var(--text-bright); font-weight: 600; }
.arch-kids { display: none; margin-left: 0.86rem; padding-left: 0.5rem; border-left: 1.5px solid var(--border-bright); }
.arch-flow.is-open > .arch-kids { display: block; }
.arch-summary { font-size: 0.8rem; color: var(--text-muted); padding: 0.05rem 0.6rem 0.3rem; }
.arch-step { font-size: 0.82rem; line-height: 1.42; color: var(--text-muted); }
.arch-step { align-items: flex-start; }
.arch-num {
  flex: none; display: grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-top: 0.02rem; border-radius: 50%;
  font: 600 0.68rem/1 var(--font-mono); background: var(--border); color: var(--text-secondary);
}
.arch-step.is-done { color: var(--text-secondary); }
.arch-step.is-now { background: var(--bg); color: var(--text-primary); }
.arch-step.is-now .arch-num { background: var(--text-primary); color: var(--bg); }

.arch-stage { min-width: 0; }
.arch-canvas { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); overflow-x: auto; }
.arch-canvas svg { display: block; width: 100%; min-width: 760px; height: auto; max-width: none; }

/* ── the SVG ── */
.arch-svg text { font-family: var(--font-body); fill: var(--text-primary); }
.arch-svg text.ico { font-family: "launchpad-icons"; fill: var(--text-secondary); }
.arch-svg .ico-line { fill: none; stroke: var(--text-secondary); }
.arch-svg .ico-fill { fill: var(--text-secondary); }
.arch-svg text.ico.ai-claude { fill: var(--arch-claude); }
.arch-svg text.ico.brand-cloudflare { fill: var(--arch-cloudflare); }
.arch-svg text.ico.brand-apple { fill: var(--text-primary); }

.arch-svg .zone-body { fill: none; stroke: var(--border-bright); stroke-dasharray: 3 5; }
.arch-svg .zone-bar { fill: var(--surface); }
.arch-svg .zone-t { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; fill: var(--text-secondary); }

.arch-svg .node .body { fill: var(--surface); stroke: var(--border); stroke-width: 1.2; }
.arch-svg .node.is-group .body { fill: var(--bg); stroke: var(--border-bright); }
.arch-svg .node.is-group .bar { fill: var(--surface-lift); }
.arch-svg .node.k-device .body { stroke: var(--text-secondary); stroke-width: 1.5; }
.arch-svg .node.k-device .bar { fill: var(--text-primary); }
.arch-svg .node.k-device > text.t, .arch-svg .node.k-device > text.t .s { fill: var(--bg); }
.arch-svg .node.k-device > text.ico { fill: var(--bg); }
.arch-svg .node.k-device > .ico .ico-line { stroke: var(--bg); }
.arch-svg .node.k-device > .ico .ico-fill { fill: var(--bg); }
.arch-svg .node.k-store .body { stroke-dasharray: 4 3; stroke: var(--border-bright); }
.arch-svg .node.k-store:not(.is-group) .body { fill: var(--bg); }
.arch-svg .node.k-secret .body { stroke: var(--arch-key); stroke-dasharray: 2 3; }
.arch-svg .node.k-secret:not(.is-group) .body { fill: var(--bg); }
.arch-svg .node.k-person .body { fill: var(--bg); stroke: var(--arch-human); }
.arch-svg .node.k-ext .body { fill: var(--surface); stroke: var(--border-bright); }
.arch-svg .node.k-off { opacity: 0.55; }
.arch-svg .node.k-off .body { stroke-dasharray: 2 4; }
.arch-svg .node .t { font-size: 13px; font-weight: 650; }
.arch-svg .node.k-device > .t { font-size: 15px; }
.arch-svg .node.k-ext:not(.is-group) > .t { font-size: 14.5px; }
.arch-svg .node .s { font-size: 10.5px; font-weight: 400; fill: var(--text-muted); font-family: var(--font-mono); }
/* words in the body font; paths and code stay mono (architecture.js `subCls`) */
.arch-svg .node .s.w { font-family: var(--font-body); font-size: 11.5px; }
/* a label that doesn't fit its box (architecture.js `fitCheck`): shorten the words */
.arch-svg .node.is-overflow > .body { stroke: #E5484D; stroke-width: 2; stroke-dasharray: 4 2; }
.arch-svg .node { transition: opacity 0.25s; cursor: pointer; }
/* a box is clicked to focus it; its description shows only where it is lit (architecture.js `lit`) */

.arch-svg .edge path.line { fill: none; stroke: var(--c); stroke-width: 1.4; opacity: 0.6; transition: opacity 0.25s, stroke-width 0.25s; }
.arch-svg .edges { pointer-events: none; }
.arch-svg .edge-hit path.hit { fill: none; stroke: transparent; stroke-width: 12; }
.arch-svg .edge-hit.off { pointer-events: none; }
.arch-svg .edge-hit path.hit { cursor: pointer; }
.arch-svg .edge .lbl { font-size: 10.5px; font-weight: 600; fill: var(--c); paint-order: stroke; stroke: var(--bg); stroke-width: 4px; stroke-linejoin: round; opacity: 0; transition: opacity 0.25s; pointer-events: none; }
.arch-svg .edge .dot { fill: var(--c); opacity: 0; }

/* a flow is on: everything not in it steps back */
.arch-svg.is-focus .node { opacity: 0.22; }
.arch-svg.is-focus .node.on, .arch-svg.is-focus .node.ctx { opacity: 1; }
.arch-svg.is-focus .node.on > .body { stroke: var(--c, var(--accent)); stroke-width: 2.4; stroke-dasharray: none; }
.arch-svg.is-focus .edge path.line { opacity: 0.05; }
.arch-svg.is-focus .edge.past path.line { opacity: 0.45; stroke-width: 1.8; }
.arch-svg.is-focus .edge.now path.line { opacity: 1; stroke-width: 2.6; stroke-dasharray: 7 5; animation: arch-march 0.9s linear infinite; }
.arch-svg.is-focus .edge.now .lbl { opacity: 1; }
.arch-svg.is-focus .edge.past .lbl { opacity: 0.6; }
.arch-svg.is-focus .edge.now .dot { opacity: 1; }
/* the overview shows where things connect; direction (arrows) is for playback */
.arch-svg:not(.is-focus) .edge:not(.near) path.line, .arch-svg.is-peek .edge path.line { marker-end: none; }
.arch-svg:not(.is-focus):has(.edge-hit:hover) .edge path.line { opacity: 0.3; }
.arch-svg:not(.is-focus) .edge.hover path.line { opacity: 1; stroke-width: 2.6; }
.arch-svg:not(.is-focus) .edge.hover .lbl { opacity: 1; }
@keyframes arch-march { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) {
  .arch-svg.is-focus .edge.now path.line { animation: none; }
  .arch-svg .edge .dot { display: none; }
}

.arch-tip {
  position: fixed; z-index: 50; max-width: 22rem; pointer-events: none; font-size: 0.8rem; line-height: 1.4;
  background: var(--text-primary); color: var(--bg); padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.2);
}
.arch-tip strong { display: block; margin-bottom: 0.15rem; }
.arch-tip[hidden] { display: none; }

/* ── focus: hovering previews a box's neighborhood; clicking pins it ── */
.arch-svg.is-peek .node:not(.near), .arch-svg.is-pinned .node:not(.near) { opacity: 0.25; }
.arch-svg.is-peek .edge:not(.near) path.line, .arch-svg.is-pinned .edge:not(.near) path.line { opacity: 0.06; }
.arch-svg.is-peek .edge.near path.line, .arch-svg.is-pinned .edge.near path.line { opacity: 1; stroke-width: 2.2; }
.arch-svg.is-pinned .edge.near .lbl { opacity: 1; }
.arch-svg .node.is-pin > .body { stroke: var(--text-primary); stroke-width: 3; stroke-dasharray: none; }
.arch-svg .node.is-pin { opacity: 1 !important; }

.arch-pin {
  display: flex; align-items: center; gap: 0.5rem; margin: 0.2rem 0 var(--space-2); padding: 0.4rem 0.4rem 0.4rem 0.7rem;
  border-radius: 999px; background: var(--text-primary); color: var(--bg); font-size: 0.84rem; font-weight: 600;
}
.arch-pin[hidden] { display: none; }
.arch-pin-dot { flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--bg); }
.arch-pin-label { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.arch-pin-x { flex: none; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0; }
.arch-pin-x:hover { background: rgb(127 127 127 / 0.3); }
.arch-pin-x svg { width: 0.9rem; height: 0.9rem; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.arch-more { font-size: 0.78rem; color: var(--text-muted); padding-left: 2.45rem; }
.arch-group[hidden], .arch-list[hidden], .arch-flow[hidden], .arch-kids li[hidden] { display: none; }

/* a group's border is drawn twice: under (the fill) and over its header bar (the line) */
.arch-svg .node .body.frame { fill: none !important; pointer-events: none; }
.arch-svg .node .body:not(.frame):has(~ .frame) { stroke: transparent !important; }

/* a selected box animates its wires like playback: marching, dots, direction */
.arch-svg.is-pinned .edge.near path.line { stroke-dasharray: 7 5; animation: arch-march 0.9s linear infinite; }
.arch-svg.is-pinned .edge.near .dot { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .arch-svg.is-pinned .edge.near path.line { animation: none; } }

/* ── presentation mode: one bar, one slide at a time ── */
.arch-presbar { display: none; }
.arch-app.is-pres .arch-presbar {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.4rem 0.9rem; align-items: center;
  position: sticky; top: var(--header-h); z-index: 5; background: var(--bg); padding: 0.6rem 0 0.5rem;
}
.arch-app.is-pres .arch-presbar .arch-deck { position: static; padding: 0; margin: 0; box-shadow: none; background: none; gap: 0.35rem; }
.arch-app.is-pres .arch-presbar .arch-deck-where { display: none; }
.arch-pres-head { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.arch-pres-title {
  display: inline-flex; align-items: center; gap: 0.4rem; min-width: 0; max-width: 100%; font: inherit; font-weight: 650; font-size: 0.95rem;
  border: 1px solid var(--border-bright); background: var(--bg); color: var(--text-primary); border-radius: 999px; padding: 0.3rem 0.8rem; cursor: pointer;
}
.arch-pres-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-pres-title::before { content: ""; flex: none; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--c, var(--text-muted)); }
.arch-pres-title svg { flex: none; width: 1rem; height: 1rem; stroke: var(--text-secondary); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.2s; }
.arch-app.is-picking .arch-pres-title svg { transform: rotate(180deg); }
.arch-pres-count { flex: none; font: 0.75rem/1 var(--font-mono); color: var(--text-muted); }
/* the slide: always two lines tall, so nothing below it moves */
.arch-pres-caption {
  grid-column: 1 / -1; margin: 0; max-width: none; font-size: 0.95rem; line-height: 1.4; color: var(--text-secondary);
  min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.arch-app.is-pres .arch-presbar .arch-pin { grid-column: 1 / -1; margin: 0; }
@media (max-width: 34rem) {
  .arch-app.is-pres .arch-presbar { grid-template-columns: 1fr; }
}
/* the flow list becomes a picker under the bar */
.arch-stage { position: relative; }
.arch-app.is-pres .arch-side { display: none; }
/* the picker pops out under the flow name, fixed to the window so it is always in view (architecture.js `placePicker`) */
.arch-app.is-pres.is-picking .arch-side {
  display: block; position: fixed; z-index: 60; overflow-y: auto; overscroll-behavior: contain; background: var(--bg);
  border: 1px solid var(--border-bright); border-radius: var(--radius-md); padding: 0.4rem 0.6rem; box-shadow: 0 16px 48px rgb(0 0 0 / 0.22);
}
.arch-app.is-pres .arch-side .arch-intro, .arch-app.is-pres .arch-side .arch-spacer { display: none; }
/* the stage holds still: the camera moves inside it */
.arch-app.is-pres .arch-canvas { overflow: hidden; touch-action: pan-y; }
.arch-app.is-pres .arch-canvas svg { min-width: 0; height: var(--stage-h, 70vh); }

/* shown only while the diagram passes under the bar (architecture.js `barShadow`) */
.arch-app.is-pres .arch-presbar { transition: box-shadow 0.2s; }
.arch-app.is-pres .arch-presbar.is-over { box-shadow: 0 10px 14px -10px rgb(0 0 0 / 0.28); }

/* a selected box: the picker's button names it with a ring, its × clears it; no separate chip */
.arch-app.is-pres .arch-side > .arch-pin { display: none; }
.arch-pres-title.is-thing { background: var(--text-primary); color: var(--bg); border-color: var(--text-primary); }
.arch-pres-title.is-thing::before { background: transparent; box-shadow: inset 0 0 0 2px var(--bg); width: 0.7rem; height: 0.7rem; }
.arch-pres-title.is-thing svg { stroke: var(--bg); }
.arch-pres-clear {
  flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; padding: 0; margin-left: -0.3rem;
  border-radius: 50%; border: 1px solid var(--border-bright); background: var(--bg); color: var(--text-primary); cursor: pointer;
}
.arch-pres-clear[hidden] { display: none; }
.arch-pres-clear svg { width: 0.95rem; height: 0.95rem; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.arch-pres-clear:hover { background: var(--surface); }

/* a selected box's description: docked at the bottom of the diagram, never floating over it (touch has no "leave") */
.arch-dock {
  position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: 12px;
  width: min(34rem, calc(100% - 24px)); display: flex; gap: 0.6rem; align-items: flex-start;
  padding: 0.6rem 0.5rem 0.6rem 0.85rem; border-radius: var(--radius-md); font-size: 0.85rem; line-height: 1.45;
  background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border-bright); box-shadow: 0 10px 30px rgb(0 0 0 / 0.16);
}
.arch-dock[hidden] { display: none; }
.arch-dock-text { flex: 1; min-width: 0; }
.arch-dock-text strong { display: block; color: var(--text-primary); margin-bottom: 0.1rem; }
.arch-dock-x { flex: none; display: grid; place-items: center; width: 1.9rem; height: 1.9rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-secondary); cursor: pointer; }
.arch-dock-x:hover { background: var(--surface); }
.arch-dock-x svg { width: 0.9rem; height: 0.9rem; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }

/* ── src/css/lanes/boxes.css ── */
/* src/css/lanes/boxes.css — /features (layouts/feature-boxes.yml): tiles, text tiles and the plans card; the manual repeats
 * the same squares (.manual-media, lanes/docs.mjs).
 *
 * THE CORNER IS THE APP'S. GradeRenderer.cornerFraction is 50/346 of the square's side (Camcorder/Core/GradeRenderer.swift:
 * radiusOnScreen / referenceViewport; scripts/check-camcorder.mjs holds this number to it), so a loop's square here is the
 * app's own shape at any size. Every block on the page takes that corner from the COLUMN's width, because a text tile is the
 * same width as a loop's square and not the same height: one radius for all of them, never a percentage of a tall or short
 * box. `.box-section` is the size container: --column resolves in cqw where it is used (it is unregistered on purpose).
 * The curve is continuous, as SwiftUI's `.continuous`, where the engine has `corner-shape`. */
.box-section {
  --corner-fraction: calc(50 / 346);
  --cols: 1;
  --gap: var(--space-3);
  --column: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --corner: calc(var(--column) * var(--corner-fraction));
  container-type: inline-size;
  margin-bottom: var(--space-5);
  scroll-margin-top: calc(var(--header-h) + var(--space-2));
}
@media (min-width: 36rem) { .box-section { --cols: 2; } }
@media (min-width: 60rem) { .box-section { --cols: 3; } }
.box-section .feature-section-head { margin-bottom: var(--space-3); }
/* A section's mark: big (Nima: the big red dot, the big play triangle), the glyph font's where it has one, drawn where it has
 * not (lanes/tiles.mjs MARKS). White, but for the disc, which is the app's red. */
.section-mark { flex: none; width: 2.75rem; height: 2.75rem; display: inline-grid; place-items: center; font-size: 2.1rem; color: var(--text-bright, var(--text-primary)); }
.section-glyph { display: block; width: 100%; height: 100%; }
.section-glyph--record { fill: #EB362C; }
.feature-section-title { gap: 0.75rem; }
.feature-index .section-glyph { width: 1rem; height: 1rem; color: var(--text-bright, var(--text-primary)); }
.feature-index .icon { color: var(--text-bright, var(--text-primary)); }

.tile-grid, .box-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.tile-grid { row-gap: var(--space-4); }
.tile-grid + .box-grid { margin-top: var(--space-4); }

.tile, .box { min-width: 0; }
.tile-square, .box, .plan { border-radius: var(--corner); }
@supports (corner-shape: squircle) { .tile-square, .box, .plan { corner-shape: squircle; } }

.tile-square { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
/* A hairline round every rounded box (Nima, 2026-10-30): black on black looks unfinished. */
.tile-square, .box, .plan, .plan-promise { border: 1px solid color-mix(in srgb, var(--border) 80%, var(--border-bright)); }
.tile-poster, .tile-loop { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.tile-glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-bright, var(--text-primary)); }
.tile-glyph svg { width: 42%; height: 42%; }
.tile-glyph--icon { font-size: clamp(3.5rem, 22cqw, 7rem); }
.tile-drawn { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }   /* a percentage height has nothing to resolve against in flow */
.tile-square--black { background: #000; }
.tile-square--bare { border: 0; }
.tile-title { margin: var(--space-2) 0 0.25rem; font-size: 1.1rem; }
.tile-title a, .box-title a { color: var(--text-bright, var(--text-primary)); text-decoration: none; }
.tile-title a:hover, .box-title a:hover { text-decoration: underline; }
.tile-words { margin: 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }
.tile-fold { margin: 0.5rem 0 0; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.45; }
.tile-fold a { color: var(--text-primary); font-weight: 600; text-decoration: none; }
.tile-fold a:hover { text-decoration: underline; }

/* The text tile sits clear of its big corner: the padding is a share of that corner, not a fixed space. */
.box { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: 0.75rem; padding: calc(var(--corner) * 0.55); background: var(--surface); }
.box-icon { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.6rem; background: var(--surface-lift, var(--surface)); color: var(--text-bright, var(--text-primary)); font-size: 1rem; }
.box-title { margin: 0 0 0.25rem; font-size: 1.05rem; line-height: 1.3; overflow-wrap: normal; }
.box-detail { margin: 0; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }

/* What runs out of room needs no upgrade: the plans card's other half, as wide as the page. */
.plan-promise { margin-top: var(--gap); padding: calc(var(--corner) * 0.55); border-radius: var(--corner); background: var(--surface); text-align: center; }
@supports (corner-shape: squircle) { .plan-promise { corner-shape: squircle; } }
.plan-promise-title { margin: 0 0 0.25rem; font-size: 1.25rem; }
.plan-promise-title a { color: var(--text-bright, var(--text-primary)); text-decoration: none; }
.plan-promise-title a:hover { text-decoration: underline; }
.plan-promise p { margin: 0 auto; max-width: none; color: var(--text-secondary); }

/* Hosting Plans: the app's card (Camcorder/Views/PlanCards.swift), Monthly / Annual above the plans, each its price then its
 * hours. Two radio buttons, no script. Wide, the plans stand side by side; on a phone they stack, as the app's buttons do. */
.plans { display: flex; flex-wrap: wrap; justify-content: center; }
.plan-switch { display: inline-flex; gap: 0.125rem; padding: 0.25rem; border-radius: 999px; background: var(--surface); }
.plan-side { padding: 0.5rem 1.25rem; border-radius: 999px; color: var(--text-primary); font-weight: 500; cursor: pointer; }
input:checked + .plan-side { background: var(--text-bright, var(--text-primary)); color: var(--bg, #000); }
input:focus-visible + .plan-side { outline: 2px solid var(--text-bright, var(--text-primary)); outline-offset: 2px; }
.plan-list { flex: 0 0 100%; list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan { padding: calc(var(--corner) * 0.55) var(--space-2); text-align: center; background: var(--surface); }
.plan-price { margin: 0; font-size: 2rem; line-height: 1.2; font-weight: 600; color: var(--text-bright, var(--text-primary)); font-variant-numeric: tabular-nums; }
.plan-hours { margin: 0.25rem 0 0; color: var(--text-secondary); }
.plan-year { display: none; }
.plans:has(#plan-year:checked) .plan-year { display: inline; }
.plans:has(#plan-year:checked) .plan-month { display: none; }
.plan-note { flex: 0 0 100%; margin: var(--space-2) 0 0; text-align: center; color: var(--text-secondary); font-size: 0.9rem; }
.plan-note a { color: var(--text-primary); }
@media (max-width: 35.99rem) {
  .plan-list { grid-template-columns: minmax(0, 1fr); }
  .plan { padding: var(--space-2); }
  .plan-price { font-size: 1.5rem; }
}

/* The manual repeats a feature's square under its heading (lanes/docs.mjs): the same markup, the app's corner of its own
 * width. One beside the words when there is room; several in a row. */
.manual-media { --corner-fraction: calc(50 / 346); --cols: 1; --gap: var(--space-2); --column: calc((100cqw - (var(--cols) - 1) * var(--gap)) / var(--cols)); --corner: calc(var(--column) * var(--corner-fraction)); container-type: inline-size; margin: var(--space-2) 0; max-width: 20rem; }
.manual-media--many { --cols: 2; max-width: none; }
@media (min-width: 36rem) { .manual-media--many { --cols: 3; } }
.docs-prose .manual-media ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gap); grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.docs-prose .manual-media li { margin: 0; min-width: 0; }
.manual-media figure { margin: 0; }
.manual-media figcaption { margin-top: 0.4rem; color: var(--text-secondary); font-size: 0.875rem; line-height: 1.35; }
.manual-media:has(.tile-glyph) { max-width: 10rem; }

/* ── src/css/lanes/camcorder.css ── */
/* src/css/lanes/camcorder.css — what the whole site adds to the engine's chrome.
 *
 * BLACK, ALWAYS (Nima, 2026-10-30). The theme is one dark document, Base Night (theme/theme.config.json), so the engine
 * draws no switch. The engine has theme.lightOnly and no dark twin: its head says color-scheme only for light, so this
 * says it, and the browser's own surfaces (scrollbars, form controls, the canvas before paint) go dark too. */
:root { color-scheme: dark; }
html, body { background: var(--bg, #000); }

/* The bar: the disc at the size it always was beside the name. */
.wordmark-mark { width: 22px; height: 22px; border-radius: 50%; }
.wordmark picture { display: flex; }

/* The store button: the engine draws it for an app that is coming, faded and not-allowed (src/css/media.css). This one is on
 * the App Store: full strength, which is also what takes /support's button from 4.06:1 to the text color's own ratio. */
.btn--store { opacity: 1; cursor: pointer; color: var(--text-bright); }
.btn--store:hover { border-color: var(--text-bright); }

/* A phone on its side: the page nearly full screen, the site's own header gone (Nima, 2026-10-30). Every way on is in the footer. */
@media (orientation: landscape) and (max-height: 500px) {
  :root { --header-h: 0px; }
  .site-header { display: none; }
}

/* The legal pages: the manual's sticky sidebar (layouts/legal.yml, the manual's own classes), the section being read marked as the
 * manual marks its page. On a phone the index stays on top, its panel as it was. */
.legal.docs-layout { max-width: var(--page); }
.legal-toc .docs-nav-list { list-style: none; margin: 0; padding: 0; }
.legal-toc a[aria-current="location"] { color: var(--text-bright); font-weight: 600; background: var(--surface); box-shadow: inset 2px 0 0 var(--accent); }
@media (min-width: 54rem) {
  .legal-toc { margin: 0; padding: 0 var(--space-1) 0 0; border: 0; }
  .legal .legal-body { max-width: var(--measure); }
}
@media (max-width: 53.99rem) {
  .legal-toc.docs-nav { margin-top: 0; }
}

/* ── src/css/lanes/demos.css ── */
/* src/css/lanes/demos.css: /demos (layouts/demos.yml; behavior in src/js/lanes/demos.js), 2026-10-17.
   Clips of the real app inside Apple device bezels. The <video> sits in the bezel's screen rect (percentages from
   site/assets/demos/demos.json, set inline as --demo-x/y/w/h) and the bezel image is layered on top, so its rounded
   corners and the island cover the video's corners. Colors only from the theme's tokens. */

.demos { max-width: none; }
.demos-lede { max-width: var(--measure); color: var(--text-secondary); font-size: 1.15rem; margin: 0 0 var(--space-4); }
.demos-empty {
  padding: var(--space-5) var(--space-3);
  border: 1px dashed var(--border-bright);
  border-radius: var(--radius-md);
  text-align: center;
  color: var(--text-muted);
}

/* ── one device ─────────────────────────────────────────────────────────── */

.demo-stage { position: relative; }
.demo-device {
  position: relative;
  width: 100%;
  container-type: inline-size;
}
.demo-video {
  position: absolute;
  left: var(--demo-x);
  top: var(--demo-y);
  width: var(--demo-w);
  height: var(--demo-h);
  object-fit: cover;
  background: #000;
  display: block;
  /* A backup only, a little inside the hole's own corner: the bezel covers the video's corners. */
  border-radius: 2cqw;
}
.demo-device--iphone .demo-video { border-radius: 12cqw; }
/* The screen's black, under the video: a clip change fades through it (demos.js fadeSwap), never through the page. */
.demo-device::before {
  content: "";
  position: absolute;
  left: var(--demo-x);
  top: var(--demo-y);
  width: var(--demo-w);
  height: var(--demo-h);
  background: #000;
  border-radius: 2cqw;
}
.demo-device--iphone::before { border-radius: 12cqw; }
.demo-video { transition: opacity 0.22s ease; }
.demo-video.demo-dark { opacity: 0; transition-duration: 0.18s; }
@media (prefers-reduced-motion: reduce) { .demo-video, .demo-video.demo-dark { transition: none; } }
.demo-bezel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}
.demo-play {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 50%;
  background: rgb(0 0 0 / 0.6);
  color: #fff;
  font-size: 1.5rem;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.demo-play[hidden] { display: none; }
.demo-play:focus-visible, .demo-fullscreen:focus-visible, .demos-arrow:focus-visible, .demos-page:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Full screen opens the presentation (below). The button sits on the device's top-right corner, over the bezel. */
.demo-fullscreen {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border: 1px solid var(--border-bright);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-bright);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.demo-fullscreen:hover { color: var(--accent); }
.demo-fullscreen[hidden] { display: none; }

/* ── the hero: an iPad in landscape and its titled pages ────────────────── */

.demos-hero { margin: 0 0 var(--space-6); }
/* The second iPad pager (managing an organization): the hero's look, under its own heading. */
.demos-section-title { margin: 0 0 var(--space-3); }
/* The hero fits the window with its caption and pages (a Mac's whole screen): the device's height is capped by the
   viewport's, its width follows the bezel's aspect, centered. */
.demos-hero .demo-stage {
  max-width: 100%;
  width: min(100%, calc((100svh - 300px) * var(--demo-aspect, 1.3043)));
  margin-inline: auto;
}
.demos-captions { min-height: 3em; margin-top: var(--space-3); }
.demos-caption { max-width: var(--measure); margin: 0; color: var(--text-secondary); text-wrap: pretty; }
.demos-pages {
  position: relative;   /* the pages' offsetLeft is inside the list (demos.js keeps the active one in sight) */
  list-style: none;
  margin: 0 0 var(--space-3);
  padding: 0;
  display: grid;
  /* One row of pages, however many; it scrolls sideways on a narrow screen rather than wrapping. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(9rem, 1fr);
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.demos-pages::-webkit-scrollbar { display: none; }
.demos-page {
  width: 100%;
  min-height: 44px;
  padding: var(--space-1) 0;
  border: 0;
  background: none;
  color: var(--text-muted);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  /* The title sits on its line, and every line meets the same baseline however the titles wrap (Nima, 2026-10-17). */
  justify-content: flex-end;
  gap: 0.5rem;
}
.demos-page:hover { color: var(--text-secondary); }
.demos-page[aria-current="true"] { color: var(--text-bright); }
.demos-page-bar {
  display: block;
  height: 3px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.demos-page-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
}
.demos-page[aria-current="true"] .demos-page-fill { transform: scaleX(var(--demo-progress, 0)); }
/* A phone: each title on one line, each page as wide as its title; the row scrolls sideways (the active page kept in
   sight by demos.js). */
@media (max-width: 640px) {
  .demos-pages { grid-auto-columns: max-content; gap: var(--space-3); }
  .demos-pages .demos-page-title { white-space: nowrap; }
}

/* ── the iPhone carousel ────────────────────────────────────────────────── */

.demos-phones-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.demos-phones-title { margin: 0; }
.demos-arrows { display: flex; gap: var(--space-1); }
.demos-arrow {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-bright);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.demos-arrow:hover:not(:disabled) { border-color: var(--border-bright); }
.demos-arrow:disabled { opacity: 0.35; cursor: default; }

.demos-track {
  --demos-gap: var(--space-3);
  list-style: none;
  margin: 0;
  padding: 0 0 var(--space-2);
  display: grid;
  grid-auto-flow: column;
  /* One phone with a peek of the next on a phone; up to four on a wide screen. */
  grid-auto-columns: 78%;
  gap: var(--demos-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 0;
  scrollbar-width: none;
}
.demos-track::-webkit-scrollbar { display: none; }
@media (min-width: 560px) { .demos-track { grid-auto-columns: calc((100% - var(--demos-gap)) / 2.2); } }
@media (min-width: 820px) { .demos-track { grid-auto-columns: calc((100% - 2 * var(--demos-gap)) / 3); } }
@media (min-width: 1080px) { .demos-track { grid-auto-columns: calc((100% - 3 * var(--demos-gap)) / 4); } }
.demos-slide { scroll-snap-align: start; min-width: 0; }
.demos-slide figure { margin: 0; }
.demos-slide .demo-device { cursor: pointer; }
/* Each phone's title and its progress line sit above it (the hero's page look); the caption below. */
.demos-slide-page { margin-bottom: var(--space-2); min-height: calc(2.6em + 0.5rem + 3px); }
.demos-slide-caption { display: block; margin-top: var(--space-2); font-size: 0.92rem; color: var(--text-muted); text-wrap: pretty; }
/* The phones that are not playing are dimmed; the active one is in full light. */
.demos-slide .demo-stage, .demos-slide-caption { transition: opacity 0.45s ease, filter 0.45s ease; }
/* Darkened, never see-through: transparency let the page's white wash over the phone in light mode. */
.demos-slide:not([data-active]) .demo-stage { filter: brightness(0.45) saturate(0.6); }
.demos-slide:not([data-active]) .demos-slide-caption { opacity: 0.6; }
.demos-slide:not([data-active]) .demo-stage:hover { filter: brightness(0.7) saturate(0.8); }
@media (prefers-reduced-motion: reduce) {
  .demos-slide .demo-stage, .demos-slide-caption { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .demos-track { scroll-behavior: smooth; }
}

/* ── the presentation: every clip in one sequence, on black ─────────────────
   One stage for the whole page (src/js/lanes/demos.js moves it to <body>): element full screen where the browser has
   it, otherwise (the iPhone's Safari) the same stage as a fixed overlay over the whole viewport. Always black, whatever
   the theme: a screening room. */

.demos-present {
  position: fixed;
  inset: 0;
  z-index: 1000;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: max(12px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  overscroll-behavior: contain;
}
.demos-present[hidden] { display: none; }
.demos-present:fullscreen { width: 100vw; height: 100vh; }
.demos-present:-webkit-full-screen { width: 100vw; height: 100vh; }
.demos-present::backdrop { background: #000; }
html.demos-presenting, html.demos-presenting body { overflow: hidden; }

.demos-present-top {
  position: relative;
  display: flex;
  justify-content: center;
  min-height: 44px;
  padding-inline: 56px;
}
/* The brand stays on screen in presentation mode: the app's mark and name, top left (Nima, 2026-10-17). */
.demos-present-brand {
  position: absolute;
  top: 0;
  left: 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  white-space: nowrap;
}
/* The app icon's bubble alone, cropped to its circle (on black the icon's black square vanished, leaving a small,
   off-center bubble): centered on the ✕'s line and about its size (Nima, 2026-10-17). */
.demos-present-mark { width: 40px; height: 40px; flex: none; }
/* Where you are in the whole run ("3 of 15"), under the progress line, so the wrap back to the first clip is plain. */
.demos-present-count {
  display: block;
  margin-top: 6px;
  text-align: center;
  color: rgb(255 255 255 / 0.65);
  font-size: 0.85rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) { .demos-present-brand span { display: none; } }
.demos-present .demos-page.demos-present-page { width: min(28rem, 100%); color: #fff; cursor: default; }
.demos-present .demos-page-bar { background: rgb(255 255 255 / 0.22); }
.demos-present-close, .demos-present-arrow {
  /* Dark glass with a hairline: legible over black and over a white screen alike. */
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  background: rgb(40 40 40 / 0.78);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
@media (hover: hover) { .demos-present-close:hover, .demos-present-arrow:hover { background: rgb(72 72 72 / 0.9); } }
.demos-present-close:focus-visible, .demos-present-arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* A plain ✕, no circle (Nima, 2026-10-17); the 44 pt tap area stays. */
.demos-present-close { position: absolute; top: 0; right: 0; width: 44px; height: 44px; font-size: 1.6rem; border: 0; background: none; border-radius: 10px; }
@media (hover: hover) { .demos-present-close:hover { background: rgb(255 255 255 / 0.12); } }

.demos-present-screen {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  touch-action: pan-y pinch-zoom;
}
.demos-present .demo-device {
  width: min(calc(100vw - 160px), calc((100vh - 180px) * var(--demo-aspect, 1.3043)));
  width: min(calc(100vw - 160px), calc((100dvh - 180px) * var(--demo-aspect, 1.3043)));
}
.demos-present .demo-device { cursor: pointer; }
.demos-present-arrow {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 52px;
  height: 52px;
  font-size: 1.25rem;
}
.demos-present-prev { left: 0; }
.demos-present-next { right: 0; }
.demos-present-caption {
  margin: 0 auto;
  max-width: var(--measure);
  min-height: 2.8em;
  text-align: center;
  color: rgb(255 255 255 / 0.74);
  text-wrap: pretty;
}
.demos-present-caption a { color: #fff; }
@media (max-width: 640px) {
  /* A phone: the device takes the width. */
  .demos-present .demo-device {
    width: min(calc(100vw - 32px), calc((100vh - 260px) * var(--demo-aspect, 1.3043)));
    width: min(calc(100vw - 32px), calc((100dvh - 260px) * var(--demo-aspect, 1.3043)));
  }
}
/* A phone or a narrow portrait screen: the arrows move to the bottom of the stage, same spacing, where a thumb reaches
   them and where they clear a landscape iPad (in the black under it) and sit beside an iPhone (Nima, 2026-10-17). A wide
   screen keeps them beside the device, where there is room. */
@media (max-width: 640px), (orientation: portrait) and (max-width: 1100px) {
  .demos-present-screen { padding-bottom: 64px; }
  .demos-present-arrow { top: auto; bottom: 4px; translate: none; width: 52px; height: 52px; }
}

/* ── src/css/lanes/docs.css ── */
/* src/css/lanes/docs.css: lane B (Docs): /docs and /docs/<slug>. Started from
   Terminal C's docs layout (components.css). Owned by lane B.

   The frame: on a wide screen, the sidebar (every section, grouped) on the
   left and the document beside it; on a phone, the document first and the
   sidebar after it (Terminal C's grid areas), reached by "All sections". */

.docs-layout { max-width: var(--page); }

@media (min-width: 54rem) {
  .docs-layout {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    grid-template-areas: "nav body";
    column-gap: var(--space-5);
    align-items: start;
  }
  /* The sticky offset clears the header bar; the max-height shrinks by the
   * same amount so the list's tail stays reachable. */
  .docs-nav {
    grid-area: nav;
    position: sticky;
    top: calc(var(--header-h) + var(--space-2));
    max-height: calc(100vh - var(--header-h) - var(--space-3));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--space-1);
  }
  .docs-body { grid-area: body; }
  /* The jump link exists for the one-column order; beside a visible sidebar
   * it is a control that does nothing. */
  .docs-nav-jump { display: none; }
}

/* ── the sidebar / section list ── */

.docs-nav { font-size: 0.875rem; line-height: 1.4; }

/* On a phone the list follows the document: a quiet panel of its own. */
@media (max-width: 53.99rem) {
  .docs-nav {
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-2) var(--space-1);
    background: var(--surface);
    border-radius: var(--radius-md);
  }
}

.docs-nav-group { margin-bottom: var(--space-3); }

/* Group names step DOWN from the body, not up: the nav is wayfinding beside a
 * document, and ten loud headings would out-shout the prose they serve. */
.docs-nav-title {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 0 0 0.35rem;
  padding-left: 0.65rem;
}

.docs-nav-list { list-style: none; margin: 0; padding: 0; }
.docs-nav-list li { margin: 0; }
.docs-nav-list a {
  display: block;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
}
.docs-nav-list a:hover { color: var(--text-bright); background: var(--surface-lift); }
/* Current: bright and weighted, with a quiet ground and a thin rule in the
 * accent so "you are here" reads at a glance in a long list. */
.docs-nav-list a[aria-current="page"] {
  color: var(--text-bright);
  font-weight: 600;
  background: var(--surface-lift);
  box-shadow: inset 2px 0 0 var(--accent);
}
@media (min-width: 54rem) {
  .docs-nav-list a[aria-current="page"] { background: var(--surface); }
}

/* ── the document column ── */

.docs-body { max-width: var(--measure); min-width: 0; }

.docs-summary {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 var(--space-1);
}

.docs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.5rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}
.docs-meta .docs-nav-jump { margin-left: auto; }

/* The manual's own stable id (GS-1, AS-2): the app, the phone and an agent
 * all name sections by it. */
.docs-id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.05rem 0.5rem;
  white-space: nowrap;
}

.docs-nav-jump { white-space: nowrap; font-size: 0.875rem; }

.docs-prose { line-height: 1.7; }
.docs-prose p { margin: 0 0 var(--space-2); }
.docs-prose h2,
.docs-prose h3 {
  font-weight: 650;
  line-height: 1.3;
  margin: var(--space-4) 0 var(--space-1);
}
.docs-prose h2 { font-size: 1.375rem; letter-spacing: -0.01em; }
.docs-prose h3 { font-size: 1.125rem; }
.docs-prose > :first-child { margin-top: 0; }

.docs-prose ul,
.docs-prose ol { margin: 0 0 var(--space-2); padding-left: 1.3em; }
.docs-prose li { margin-bottom: 0.4rem; }
.docs-prose li > ul,
.docs-prose li > ol { margin: 0.4rem 0 0; }
.docs-prose li::marker { color: var(--text-muted); }
.docs-prose strong { color: var(--text-bright); font-weight: 600; }
.docs-prose code { font-size: 0.85em; overflow-wrap: anywhere; }
.docs-prose pre code { overflow-wrap: normal; }

/* Cross-references ("See Confirmation cards (AS-2)") link to their section. */
.docs-xref { white-space: normal; }

.docs-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-5);
}
.docs-pager-link {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--text-bright);
  min-width: 0;
}
.docs-pager-link:hover { border-color: var(--border-bright); background: var(--surface); }
.docs-pager-label { font-size: 0.8125rem; color: var(--text-muted); }
.docs-pager-title { font-weight: 600; line-height: 1.35; }
.docs-pager-prev .docs-pager-label::before { content: "← "; }
.docs-pager-next { grid-column: 2; text-align: right; }
.docs-pager-next .docs-pager-label::after { content: " →"; }

.docs-provenance {
  margin: var(--space-3) 0 0;
  font-size: 0.875rem;
  color: var(--text-muted);
}

/* ── /docs — the grouped directory ── */

.docs-intro {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0 0 var(--space-4);
}

.docs-group { margin-bottom: var(--space-4); }

.docs-group-title {
  font-size: 1.25rem;
  font-weight: 650;
  margin: var(--space-4) 0 var(--space-2);
  padding-bottom: var(--space-1);
  border-bottom: 1px solid var(--border);
}
.docs-intro + .docs-group .docs-group-title { margin-top: 0; }

.docs-entries { list-style: none; margin: 0; padding: 0; }

/* Deep-link targets by the manual's own section ids (/docs#AP-4); the
 * header offset is base.css's scroll-padding-top. */
.docs-entry {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6rem;
  padding: 0.6rem 0;
}
.docs-entry:target { background: var(--surface); border-radius: var(--radius-sm); padding-inline: 0.6rem; margin-inline: -0.6rem; }

/* Weight only: the base `a` affordance (link color, visible underline) stays,
 * so every row reads as clickable. */
.docs-entry-title { font-weight: 600; }

.docs-entry-summary {
  flex-basis: 100%;
  margin: 0.15rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Pictures placed site-side (content/media-slots.json, 2026-10-13). */
.docs-figure { margin: var(--space-2) 0 var(--space-3); }
.docs-figure--lead { margin-top: 0; }

/* ── src/css/lanes/features.css ── */
/* src/css/lanes/features.css: phase 2 (Features): /features and any
   feature-grid band. Owned by the features lane. Colors only from the theme
   tokens (base.css / theme/tokens.css); phone first. */

.feature-lede { padding: var(--space-5) 0 var(--space-2); }
.feature-lede-detail { font-size: 1.15rem; color: var(--text-secondary); }

/* The compact section index: chips that wrap, never scroll the page. */
.feature-index ul {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.feature-index a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  min-height: 2.25rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.95rem;
  line-height: 1.2;
}
.feature-index a:hover { border-color: var(--border-bright); }
.feature-index .icon { color: var(--accent); font-size: 1rem; }

.feature-section { margin-bottom: var(--space-5); scroll-margin-top: calc(var(--header-h) + var(--space-2)); }
.feature-section-title { display: flex; align-items: center; gap: 0.5rem; }
.feature-section-icon { color: var(--accent); }
.feature-section-lede { color: var(--text-secondary); }

.feature-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.feature-card {
  position: relative;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}
.feature-card:hover { border-color: var(--border-bright); }
.feature-card h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
/* The title is the card's one link; it covers the card so the whole card taps. */
.feature-card-link { color: var(--text-bright); text-decoration: none; }
.feature-card-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.feature-card-link:focus-visible { outline: none; }
.feature-card:has(.feature-card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.feature-card p { margin: 0; color: var(--text-secondary); font-size: 0.975rem; }
.feature-icon { display: block; font-size: 1.4rem; color: var(--accent); margin-bottom: var(--space-1); }

/* Phone: the icon sits beside the title, so 69 cards don't make a mile-long page. */
@media (max-width: 40rem) {
  .feature-card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.75rem; align-items: baseline; padding: var(--space-2); }
  .feature-icon { grid-row: 1 / span 2; margin: 0; font-size: 1.25rem; }
  .feature-cards { gap: 0.75rem; }
}

/* Media (2026-10-13): square shots tile; portrait phone shots swipe
   (.media-carousel, src/css/media.css); cards without a picture follow in
   their own grid, so no row mixes a picture with a bare card. */
.feature-tiles {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: var(--space-3) var(--space-2);
}
.feature-tile { position: relative; }
.feature-tile .media { margin-bottom: var(--space-1); }
.feature-tile h3 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.feature-tile p { margin: 0; color: var(--text-secondary); font-size: 0.975rem; }
.feature-tile:has(.feature-card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-md); }
.feature-reel { margin-top: var(--space-3); }
.feature-reel li { position: relative; }
.feature-reel figure { margin: 0; }
.feature-tiles + .feature-cards, .feature-reel + .feature-cards { margin-top: var(--space-3); }

/* ── src/css/lanes/home.css ── */
/* src/css/lanes/home.css — the home page (engine: every file here joins /_site/site.css, so every selector is gated on its own
 * section). --cam-red is the app's disc. The hero is one screen under the bar, its parts centered; the footer stays the floor. */
.splash, .home-phones { --cam-red: #EB362C; --radius: 8px; }

/* `flex-direction: column` is load-bearing: a flex ROW lets the section grow to max-content, wider than a phone, and the clip hides it. */
main:has(> .splash) { display: flex; flex-direction: column; padding-bottom: 0; }
main:has(> .splash) > .splash {
  margin: 0;
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--space-2);
  /* Symmetric padding is what keeps a centered column reachable when it is taller than its box. */
  padding-block: var(--space-4);
  min-width: 0;
  min-block-size: calc(100svh - var(--header-h, 4.5rem));
}
.splash-wordmark { margin: 0; font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.02em; }
.splash-actions { margin-block-start: var(--space-2); display: flex; justify-content: center; }

/* ═══ THE ROW OF IPHONES (docs/plans/site-wave-2.md, after Streamliner's home) ══════════════════════════════════════
 * The film first, then the app's screens, each in Apple's bezel (baked by scripts/phone-compose.swift: the bezel itself is never
 * served). Wide, they stand side by side; on a phone the row scrolls and snaps, and the row takes the keyboard's focus so the
 * arrows reach it. layouts/home-phones.yml. */
.home-phones { padding-block: var(--space-5) var(--space-5); }
.home-band-title { margin: 0 0 var(--space-4); text-align: center; font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.02em; text-wrap: balance; }
.phone-row { list-style: none; margin: 0; padding: 0 0 var(--space-1); display: flex; gap: var(--space-2); justify-content: safe center; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; }
.phone-row::-webkit-scrollbar { display: none; }
.phone-row:focus-visible { outline: 2px solid var(--text-bright); outline-offset: 4px; border-radius: var(--radius); }
.phone-item { flex: 1 1 0; min-width: 9.5rem; max-width: 13rem; margin: 0; scroll-snap-align: center; }
.phone-name { margin: 0 0 var(--space-1); text-align: center; font-weight: 600; color: var(--text-primary); white-space: nowrap; font-size: 0.95rem; }
.phone-shot { position: relative; display: block; aspect-ratio: 1350 / 2760; }
.phone-shot img, .phone-shot video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 44rem) {
  .phone-row { justify-content: flex-start; padding-inline: 12%; margin-inline: calc(-1 * var(--gutter, 1rem)); }
  .phone-item { flex: 0 0 66%; max-width: none; }
}

/* ═══ THE DISC HERO (layouts/splash.yml) ══════════════════════════════════════════════════
 * Sized on the disc, so disc, reflection, name and badge are one screen at any window: the name sits on the reflection's tail. */
.disc-stage { display: block; block-size: clamp(16rem, 58svh, 40rem); inline-size: auto; aspect-ratio: 700 / 960; max-inline-size: 86vw; overflow: visible; }
.splash--disc .splash-wordmark { margin-block-start: calc(-1 * clamp(2.5rem, 9svh, 6rem)); position: relative; }
/* On a phone the disc is 30% smaller (Nima, 2026-10-30): at full size it filled the glass. */
@media (max-width: 44rem) {
  .disc-stage { block-size: clamp(11rem, 40.6svh, 28rem); max-inline-size: 60vw; }
  .splash--disc .splash-wordmark { margin-block-start: calc(-1 * clamp(1.75rem, 6.3svh, 4.2rem)); }
}
.disc-platforms { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-3); color: var(--text-secondary); font-size: 0.9375rem; }
.disc-platforms li { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; }
.disc-platforms svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.disc-chip { border-radius: 999px; corner-shape: round; padding-inline: var(--space-3); }

/* ── src/css/lanes/kit.css ── */
/* src/css/lanes/kit.css: the web Outerface kit (engine/kit.mjs, 0.49.0, 2026-10-24; 0.50.0 the app's own chrome, plain
   macOS windows, the island and the expand button; 0.51.0 one device definition (monitor, iPad, iPhone), the group and
   its theme picker, the sidebar's one glyph column): the app's frame drawn in HTML.
   Geometry from Outerface's house tokens (`--of-*`, web/tokens.css, which the engine puts first in site.css); colors
   only from the theme's flat names (--bg, --surface, --accent, --ink-on-accent …), so a drawn screen wears the site's
   theme, or the palette a frame sets inline. Every class starts `ofk-`. The Swift it follows: OFSidebar (`.afterGlyph`
   selection), OFPaneChrome (the header and its chips), OFTabs (the band), OFMessageBubble (the sender's corner),
   OFComposer (the capsule). The literal colors are hardware and system chrome: the Mac's window lights, the devices, the
   Dynamic Island. */

/* ── the screen box: the frame is laid out at its logical size and scaled to the box (src/js/kit.js) ─────────── */

[data-ofk-screen] { position: relative; overflow: hidden; width: 100%; }
[data-ofk-screen] .ofk-frame {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  transform: scale(var(--ofk-scale, 0.5));
}
.ofk-band { max-width: none; }
.ofk-band-title { margin: 0 0 var(--space-2); }
.ofk-figure { margin: 0 auto; max-width: 1040px; }
.ofk-figure--iphone { max-width: 340px; }
.ofk-caption { margin-top: var(--space-1); color: var(--text-secondary); text-align: center; }

/* ── the devices (0.51.0): ONE definition for figures, tiles, groups and reels (engine/kit.mjs DEVICES, deviceParts) ─
   `.ofk-device` is the container, so every length below is in cqw (percent of the drawn device's width) and scales with
   the drawing. --ofk-bezel and --ofk-radius are DEVICES' numbers (the selftest holds them equal); the bezel and the outer
   radius have a small px floor so a tiny drawing still reads, and the screen's radius is ALWAYS the outer radius minus
   the bezel (concentric) because both come from the same two values. The body is real padding, so the bezel is even on
   every side. Hardware colors (the black glass, the rims, the stand) are the device's own, the same in every theme. */

.ofk-device {
  position: relative;
  width: 100%;
  container-type: inline-size;
  --ofk-b: max(var(--ofk-bezel-min, 2px), calc(var(--ofk-bezel, 0) * 1cqw));
  --ofk-ro: max(calc(var(--ofk-b) + 1px), calc(var(--ofk-radius, 0) * 1cqw));
  --ofk-ri: calc(var(--ofk-ro) - var(--ofk-b));
}
.ofk-device--ipad { --ofk-bezel: 2.6; --ofk-radius: 4.2; --ofk-bezel-min: 3px; --ofk-rim: #2B2C30; }
.ofk-device--iphone { --ofk-bezel: 2.2; --ofk-radius: 16.4; --ofk-bezel-min: 2px; --ofk-rim: #2B2C30; }
.ofk-device--monitor { --ofk-bezel: 1.8; --ofk-radius: 2.6; --ofk-stand: 10.6; --ofk-bezel-min: 2px; --ofk-rim: #B5B7BC; }
.ofk-body {
  position: relative;
  display: block;
  padding: var(--ofk-b);
  border-radius: var(--ofk-ro);
  background: #0B0B0C;
  box-shadow: 0 0 0 max(1px, 0.2cqw) var(--ofk-rim, #2B2C30), var(--ofk-shadow, 0 0 #0000);
}
.ofk-body > .ofk-screen,
.ofk-body > .reel-screen { border-radius: var(--ofk-ri); overflow: hidden; background: var(--bg); }
/* The Dynamic Island, in the bezel over the screen: placed in the SCREEN's width (100cqw less two bezels), black in
   light and dark alike. No home indicator is drawn. */
.ofk-device-island {
  position: absolute;
  z-index: 3;
  top: calc(var(--ofk-b) + (100cqw - 2 * var(--ofk-b)) * 0.028);
  left: 50%;
  width: calc((100cqw - 2 * var(--ofk-b)) * 0.316);
  height: calc((100cqw - 2 * var(--ofk-b)) * 0.092);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #000;
  pointer-events: none;
}
/* The monitor's stand: a neck and a flat foot, centered under the body (DEVICES.monitor.stand of the width tall). */
.ofk-stand { position: relative; display: block; height: calc(var(--ofk-stand, 10.6) * 1cqw); }
.ofk-stand::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 15cqw;
  height: calc(100% - 1.5cqw);
  transform: translateX(-50%);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #A3A5AA 0%, #D6D7DA 45%, #C4C6CA 70%, #9C9EA3 100%);
  box-shadow: inset 0 0.6cqw 0.8cqw -0.4cqw rgb(0 0 0 / 0.35);
}
.ofk-stand::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 30cqw;
  height: 1.5cqw;
  transform: translateX(-50%);
  border-radius: 0.75cqw 0.75cqw 0.4cqw 0.4cqw;
  background: linear-gradient(180deg, #D9DADD 0%, #B9BBC0 60%, #8E9095 100%);
}
/* A Mac is a window (no device): its card radius and the window's edge and shadow. */
.ofk-device--mac > .ofk-screen {
  border-radius: var(--of-radius-card);
  box-shadow: 0 0 0 1px var(--border), 0 24px 60px -32px var(--scrim);
}
.ofk-device--mac-window > .ofk-screen { box-shadow: none; border-radius: 0; overflow: visible; }

/* A frame's own Dynamic Island (`island: true` on the frame: drawn inside the screen at the logical size, for hosts that
   draw their own bezel); the kit's devices draw theirs in the bezel (.ofk-device-island). Black in every theme. */
.ofk-island {
  position: absolute;
  z-index: 3;
  top: 11px;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 36px;
  border-radius: 999px;
  background: #000;
}

/* The old laptop markup (0.50.0's `.ofk-device--laptop > .ofk-screen` + `.ofk-deck`, written by hand in hosts) now draws
   the monitor: the screen in an even black bezel (a spread shadow, so the hand-written layout keeps its size) and the
   stand under it. New markup comes from kit.deviceParts; this keeps old pages from drawing the retired MacBook base. */
.ofk-device--laptop {
  --ofk-bezel: 1.8; --ofk-radius: 2.6; --ofk-stand: 10.6; --ofk-bezel-min: 2px;
}
.ofk-device--laptop > .ofk-screen {
  width: calc(100% - 2 * var(--ofk-b));
  margin: var(--ofk-b);
  border-radius: var(--ofk-ri);
  box-shadow: 0 0 0 var(--ofk-b) #0B0B0C, 0 0 0 calc(var(--ofk-b) + max(1px, 0.2cqw)) #B5B7BC;
}
.ofk-deck { position: relative; display: block; height: calc(var(--ofk-stand) * 1cqw); }
.ofk-deck::before, .ofk-deck::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); }
.ofk-deck::before {
  top: 0; width: 15cqw; height: calc(100% - 1.5cqw);
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, #A3A5AA 0%, #D6D7DA 45%, #C4C6CA 70%, #9C9EA3 100%);
}
.ofk-deck::after {
  bottom: 0; width: 30cqw; height: 1.5cqw; border-radius: 0.75cqw 0.75cqw 0.4cqw 0.4cqw;
  background: linear-gradient(180deg, #D9DADD 0%, #B9BBC0 60%, #8E9095 100%);
}

/* Full screen, at the top right corner of every drawn device: a figure's, a reel's and /demos' (.demo-fullscreen,
   demos.css): one size, one look. Shown by script; a frame's or a reel's `expand: false` draws none. */
.ofk-expand {
  position: absolute;
  z-index: 4;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border-bright);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-bright);
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.18);
  display: grid;
  place-items: center;
  font-size: 15px;
  cursor: pointer;
}
/* The button straddles the device's corner, clear of the card header's own buttons. */
.ofk-device > .ofk-expand { transform: translate(40%, -40%); }
.ofk-expand:hover { color: var(--accent); }
.ofk-expand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofk-expand[hidden] { display: none; }
/* Open: the device centered in the window on BLACK (every full screen is black, 2026-10-24), sized to fit by its
   whole aspect (--ofk-aspect, the bezel and the stand included); the same button, now a close, above its corner. */
.ofk-device--full {
  position: fixed;
  z-index: 1000;
  top: 50%;
  left: 50%;
  width: min(calc(100vw - 32px), calc((100dvh - 96px) * var(--ofk-aspect, 1.5)));
  transform: translate(-50%, -50%);
  background: #000;
  box-shadow: 0 0 0 100vmax #000;
}
.ofk-device--full > .ofk-expand { top: -44px; transform: none; }
.ofk-expand .icon--close { display: none; }
.ofk-device--full > .ofk-expand .icon--expand { display: none; }
.ofk-device--full > .ofk-expand .icon--close { display: inline; }
html.ofk-presenting { overflow: hidden; }

/* ── a group of devices and its theme picker (kit.devices, 0.51.0) ───────────────────────────────────────────── */

.ofk-devices { margin: 0 auto; max-width: 1100px; }
.ofk-devices-stage { position: relative; width: 100%; }
.ofk-devices-item { position: absolute; }
.ofk-devices-item--ipad .ofk-body,
.ofk-devices-item--iphone .ofk-body { --ofk-shadow: 0 2.4cqw 6cqw -1.2cqw rgb(0 0 0 / 0.38); }
.ofk-theme-picker {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-3) auto 0;
}
.ofk-devices--themed > .ofk-theme-picker:first-child { margin: 0 auto var(--space-3); }
.ofk-theme-picker[hidden] { display: none; }
.ofk-theme-choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 14px 4px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-primary);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
}
.ofk-theme-choice:hover { border-color: var(--border-bright); }
.ofk-theme-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofk-theme-choice[aria-pressed="true"] { border-color: var(--text-bright); box-shadow: inset 0 0 0 1px var(--text-bright); color: var(--text-bright); }
/* The swatch: the theme's ground with its accent, ringed by its strong line. Colors are the theme's data. */
.ofk-theme-swatch {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ofk-sw-bg) 0 50%, var(--ofk-sw-fill) 50% 100%);
  box-shadow: inset 0 0 0 1px var(--ofk-sw-line);
}

/* ── the frame ───────────────────────────────────────────────────────────────────────────────────────────────── */

.ofk-frame {
  width: var(--ofk-w);
  height: var(--ofk-h);
  display: grid;
  grid-template-columns: var(--of-layout-sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  background: var(--bg);
  color: var(--text-primary);
  font-family: var(--of-font-body);
  font-size: var(--of-text-body-size);
  line-height: 1.35;
  text-align: left;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  user-select: none;
}
.ofk-frame *, .ofk-frame *::before, .ofk-frame *::after { box-sizing: border-box; }
:where(.ofk-frame) :where(p, ul) { margin: 0; padding: 0; max-width: none; }
.ofk-frame--iphone { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); padding-top: 54px; position: relative; }
.ofk-flip { display: inline-block; transform: scaleX(-1); }
.ofk-turn { display: inline-block; transform: rotate(90deg); }
/* The Concierge's desk bell (bell-desk) is drawn small and low in its em box: at a row's size it read as a small
   triangle. Inside the kit it draws a third larger, lifted to the row's center (0.50.0). */
:is(.ofk-frame, .ofk-tile) .icon--bell-desk { display: inline-block; font-size: 1.35em; transform: translateY(-0.1em); }

/* ── plain macOS windows (`device: "mac-window"`, 0.50.0): a main window and a popped-out card window over it ─── */
.ofk-frame--mac-window { display: block; position: relative; background: transparent; overflow: visible; }
.ofk-window {
  position: absolute;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: var(--bg);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--border-bright), 0 22px 60px -18px rgb(0 0 0 / 0.38);
}
.ofk-window--popout { box-shadow: 0 0 0 1px var(--border-bright), 0 30px 80px -16px rgb(0 0 0 / 0.5); }
.ofk-window-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: var(--of-layout-sidebar-width) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}
.ofk-window--popout .ofk-window-body { grid-template-columns: minmax(0, 1fr); }
.ofk-window--lights .ofk-side { padding-top: var(--of-layout-lights-clearance); position: relative; }
.ofk-titlebar {
  flex: none;
  position: relative;
  height: 32px;
  display: grid;
  place-items: center;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ofk-titlebar .ofk-lights { top: 10px; left: 12px; }
.ofk-titlebar-title { max-width: 60%; font-size: 13px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofk-side { min-width: 0; padding-top: 20px; overflow: hidden; }
.ofk-frame--mac .ofk-side, .ofk-frame--monitor .ofk-side { padding-top: var(--of-layout-lights-clearance); position: relative; }
.ofk-lights { position: absolute; top: 14px; left: 16px; display: flex; gap: 8px; }
.ofk-lights i { width: 12px; height: 12px; border-radius: 50%; background: #FF5F57; }
.ofk-lights i:nth-child(2) { background: #FEBC2E; }
.ofk-lights i:nth-child(3) { background: #28C840; }

/* ── the sidebar ─────────────────────────────────────────────────────────────────────────────────────────────── */

.ofk-sidebar { padding: 0 var(--of-space-s2) var(--of-space-s4); }
.ofk-org {
  display: flex;
  align-items: center;
  gap: var(--of-space-s3);
  padding: var(--of-space-s2) var(--of-size-sidebar-row-h-pad) var(--of-space-s4);
}
.ofk-org-mark {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--of-radius-base);
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 15px;
  background: var(--ofk-tint, var(--text-bright));
  color: var(--ofk-tint-ink, var(--bg));
}
.ofk-org-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.ofk-org-name { font-size: var(--of-text-headline-size); font-weight: 600; color: var(--text-bright); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofk-org-sub { font-size: var(--of-text-caption-size); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofk-org-switch { flex: none; width: 8px; height: 12px; border-block: 4px solid transparent; position: relative; }
.ofk-org-switch::before, .ofk-org-switch::after {
  content: ""; position: absolute; left: 0; width: 6px; height: 6px;
  border: solid var(--text-muted); border-width: 1.5px 1.5px 0 0;
}
.ofk-org-switch::before { top: -3px; transform: rotate(-45deg); }
.ofk-org-switch::after { bottom: -3px; transform: rotate(135deg); }

.ofk-section + .ofk-section { margin-top: var(--of-layout-group-gap); }
.ofk-section--rule { border-top: 1px solid var(--border); margin-inline: var(--of-size-sidebar-row-h-pad); padding-top: calc(var(--of-layout-section-gap) / 2); }
.ofk-section--rule .ofk-rows { margin-inline: calc(-1 * var(--of-size-sidebar-row-h-pad)); }
.ofk-section-title {
  padding: 0 var(--of-size-sidebar-row-h-pad) var(--of-space-s1);
  font-size: var(--of-text-label-size);
  font-weight: var(--of-text-label-weight);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ofk-rows { list-style: none; }
.ofk-row {
  display: flex;
  align-items: center;
  padding: 2px var(--of-size-sidebar-row-h-pad);
  margin-bottom: var(--of-size-sidebar-row-spacing);
  color: var(--text-primary);
}
/* ONE glyph column (0.51.0, Nima 2026-10-24): every row's glyph (the environment band's laptop, the Concierge's bell, the
   Operator's rings, the streamlines, the foot) sits in a box of the column's width and is CENTERED in it, as the app's
   `.frame(width: sidebarRowGlyphColumn)` centers its symbols; the kit also shifts each glyph by its ink's offset in its
   em box (engine/glyph-metrics.mjs, the inline `translate`), so glyphs of different drawn widths line up exactly. An
   initial's disc centers on the same column. */
.ofk-row-glyph {
  flex: none;
  width: var(--of-size-sidebar-row-glyph-column);
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  color: var(--ofk-tint, var(--text-secondary));
}
.ofk-row-glyph > .icon { display: block; width: 1em; text-align: center; }
.ofk-row-glyph--initial {
  width: 22px;
  height: 22px;
  margin-inline: calc((var(--of-size-sidebar-row-glyph-column) - 22px) / 2);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface-lift);
  color: var(--text-bright);
}
.ofk-row-glyph--initial.ofk-tinted { background: var(--ofk-tint); color: var(--ofk-tint-ink, var(--bg)); }
/* 0.52.0: a logo in the glyph column (a streamline's or a company's own picture), the same box, centered, the app's logo
   corner: `<span class="ofk-row-glyph ofk-row-glyph--logo"><img src="…" alt=""></span>`. */
.ofk-row-glyph--logo img { display: block; width: 22px; height: 22px; border-radius: 5px; object-fit: cover; background: #fff; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12); }
/* 0.54.2: a logo in a live header's mark wears the same plate (white behind it, the hairline), so a black mark still shows on
   a dark theme. */
.ofk-head-mark--logo > img { background: #fff; box-shadow: 0 0 0 0.5px rgb(0 0 0 / 0.12); }
/* `.afterGlyph`: the selection's fill starts after the glyph column and is the bubbles' pill (OFSidebarRowFill). */
.ofk-row-fill {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--of-size-sidebar-row-gap);
  min-height: 28px;
  padding: var(--of-size-sidebar-row-v-pad) var(--of-space-s2) var(--of-size-sidebar-row-v-pad) 14px;
  border-radius: 14px;
}
.ofk-row-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofk-row-key { flex: none; font-family: var(--of-font-mono); font-size: 11px; color: var(--text-muted); }
.ofk-row--open .ofk-row-fill { background: var(--surface-high); }
.ofk-row--on .ofk-row-fill { background: var(--accent); color: var(--ink-on-accent); }
.ofk-row--on .ofk-row-key { color: inherit; opacity: 0.75; }
.ofk-row--on .ofk-row-glyph--icon { color: var(--ofk-tint, var(--accent)); }
.ofk-row--on.ofk-row--tinted .ofk-row-fill { background: var(--ofk-tint); color: var(--ofk-tint-ink, var(--ink-on-accent)); }
.ofk-row--on.ofk-row--tinted .ofk-pill { background: var(--ofk-tint-ink, var(--ink-on-accent)); color: var(--ofk-tint); }

/* The environment band (sidebar.env, 0.51.0): its glyph in the rows' column, then the capsules where a row's fill
   starts (OFSidebar's environment switcher). */
.ofk-env { display: flex; align-items: center; padding: 2px var(--of-size-sidebar-row-h-pad); margin-bottom: var(--of-space-s3); }
.ofk-env-seg { flex: 1; min-width: 0; display: flex; padding: 2px; border-radius: 999px; background: var(--surface-high); }
.ofk-env-opt { flex: 1; min-width: 0; padding: 4px 6px; border-radius: 999px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofk-env-opt--on { background: var(--bg); color: var(--text-primary); box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }

.ofk-pill {
  flex: none;
  min-width: var(--of-size-pill-sidebar);
  height: var(--of-size-pill-sidebar);
  padding: 0 6px;
  border-radius: calc(var(--of-size-pill-sidebar) / 2);
  display: inline-grid;
  place-items: center;
  font-size: var(--of-size-pill-font-sidebar);
  font-weight: 600;
  background: var(--accent);
  color: var(--ink-on-accent);
}
.ofk-row--on .ofk-pill { background: var(--ink-on-accent); color: var(--accent); }
.ofk-pill--tab { min-width: var(--of-size-pill-tab); height: var(--of-size-pill-tab); font-size: var(--of-size-pill-font-tab); padding: 0 5px; }
.ofk-pill--warm { background: var(--secondary); color: var(--ink-on-secondary); min-width: 22px; height: 22px; }

/* ── the desk and a card ─────────────────────────────────────────────────────────────────────────────────────── */

.ofk-desk {
  min-width: 0;
  min-height: 0;
  display: flex;
  gap: var(--of-layout-card-gutter);
  padding: var(--of-layout-card-gutter);
  background: var(--bg);
}
.ofk-frame--iphone .ofk-desk { padding: 0; }
.ofk-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: var(--of-layout-card-radius);
  background: var(--surface);
  overflow: hidden;
}
/* The card's edge is an overlay, so nothing inside paints over it (bounce's shell, the same reason). */
.ofk-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--border);
  pointer-events: none;
}
.ofk-card--focus::after { box-shadow: inset 0 0 0 1px var(--accent); }
.ofk-frame--iphone .ofk-card { border-radius: 0; background: var(--bg); }
.ofk-frame--iphone .ofk-card::after { display: none; }

.ofk-card-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--of-size-page-header-mark-gap);
  height: 57px;
  padding: 0 var(--of-space-s3) 0 var(--of-space-s4);
}
.ofk-card-mark {
  flex: none;
  width: var(--of-size-page-header-mark-box);
  height: var(--of-size-page-header-mark-box);
  display: grid;
  place-items: center;
  font-size: var(--of-size-page-header-mark-glyph);
  color: var(--ofk-tint, var(--text-secondary));
}
.ofk-card-mark--initial { border-radius: 6px; font-size: 12px; font-weight: 700; background: var(--surface-lift); color: var(--text-bright); }
.ofk-card-mark--initial.ofk-tinted { background: var(--ofk-tint); color: var(--ofk-tint-ink, var(--bg)); }
/* The header's mark wears the card's accent (OFPageHeader with markTone .accent: a streamline's color). */
.ofk-card-mark--icon { color: var(--ofk-tint, var(--accent)); }

/* A streamline's mark as a tile (kit.tile, 0.50.0): its icon on its color, in a rounded square. */
.ofk-tile {
  flex: none;
  width: var(--ofk-tile, 28px);
  height: var(--ofk-tile, 28px);
  border-radius: calc(var(--ofk-tile, 28px) * 0.26);
  display: inline-grid;
  place-items: center;
  font-size: calc(var(--ofk-tile, 28px) * 0.56);
  font-weight: 700;
  line-height: 1;
  background: var(--ofk-tint, var(--accent));
  color: var(--ofk-tint-ink, var(--ink-on-accent));
}
.ofk-tile--initial { font-size: calc(var(--ofk-tile, 28px) * 0.46); }
.ofk-card-mark--tile { --ofk-tile: 26px; }

/* The iPhone's back chevron (OFDetailHeader). */
.ofk-back { flex: none; margin-right: 2px; font-size: 17px; color: var(--accent); }
.ofk-card-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ofk-card-title {
  font-size: var(--of-text-headline-size);
  font-weight: var(--of-text-headline-weight);
  line-height: var(--of-size-page-header-title-line);
  color: var(--text-bright);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ofk-card-sub {
  font-size: var(--of-text-caption-size);
  line-height: var(--of-size-page-header-subtitle-line);
  color: var(--text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ofk-chips { flex: none; display: flex; align-items: center; gap: var(--of-size-page-header-cluster); height: var(--of-size-page-header-control-row); }
.ofk-chip {
  width: var(--of-size-header-chip-width);
  height: var(--of-size-header-chip-height);
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 13px;
  background: var(--surface-high);
  color: var(--text-muted);
}
.ofk-chip--small { font-size: 11px; }
.ofk-frame--iphone .ofk-card-head { padding: 0 var(--of-space-s3); }

/* ── the tab band ────────────────────────────────────────────────────────────────────────────────────────────── */

.ofk-tabs {
  flex: none;
  display: flex;
  align-items: stretch;
  min-height: var(--of-layout-tab-strip);
  padding: 0 var(--of-size-tab-strip-inset);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.ofk-tab {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 240px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 var(--of-size-tab-strip-h-pad);
  font-size: 14px;
  white-space: nowrap;
  color: var(--text-muted);
  border-bottom: var(--of-size-tab-strip-underline) solid transparent;
}
.ofk-tab-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ofk-tab .ofk-pill, .ofk-tab-close { flex: none; }
.ofk-tab--on { flex-shrink: 0; max-width: 60%; color: var(--text-bright); font-weight: 600; border-bottom-color: var(--accent); }
.ofk-tab-close { font-size: 9px; color: var(--text-muted); }
.ofk-tab-add { margin-left: auto; flex: none; display: grid; place-items: center; padding: 0 var(--of-space-s1); font-size: 13px; color: var(--text-muted); }
.ofk-tabs--empty .ofk-tab-add { visibility: hidden; }

/* ── the chat ────────────────────────────────────────────────────────────────────────────────────────────────── */

.ofk-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ofk-transcript {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--of-space-s2);
  padding: var(--of-space-s3) var(--of-space-s4);
  overflow: hidden;
}
.ofk-bubble {
  max-width: calc(100% - 36px);
  padding: 8px 13px;
  border-radius: 18px;
  font-size: 15px;
  line-height: 1.38;
  overflow-wrap: anywhere;
}
.ofk-bubble--person { align-self: flex-end; background: var(--accent); color: var(--ink-on-accent); border-bottom-right-radius: 6px; }
.ofk-bubble--assistant { align-self: flex-start; background: var(--surface-high); color: var(--text-primary); border-bottom-left-radius: 6px; }
.ofk-frame--iphone .ofk-bubble--assistant { background: var(--surface); }
/* A link in a reply, as a chip (0.56.0): the page's name, the page's or site's icon (else a link glyph) and an arrow that
   says where it goes (→ this site, in place; ↗ a new tab). The address shows on hover (title) and on a long-press (the
   system's link preview). The reply renderer draws it for every link, in every streamline: a streamline never templates it.
   Markup: <a class="ofk-linkchip" href title><span class="ofk-linkchip-icon">img | svg</span>
   <span class="ofk-linkchip-label">Name</span><span class="ofk-linkchip-arrow">svg</span></a> */
.ofk-linkchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  vertical-align: middle;
  margin: 2px 0;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-primary);
  font-size: 0.93em;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
}
.ofk-linkchip:hover { border-color: var(--border-bright); background: var(--surface); }
.ofk-linkchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofk-linkchip-icon { flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; overflow: hidden; color: var(--accent-text, var(--accent)); }
.ofk-linkchip-icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ofk-linkchip-icon svg, .ofk-linkchip-arrow svg { width: 14px; height: 14px; display: block; }
.ofk-linkchip-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ofk-linkchip-arrow { flex: none; color: var(--text-muted); }
.ofk-bubble--person .ofk-linkchip { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); color: inherit; }
.ofk-bubble--person .ofk-linkchip-icon, .ofk-bubble--person .ofk-linkchip-arrow { color: inherit; }
.ofk-line {
  align-self: flex-start;
  display: flex;
  align-items: baseline;
  gap: 7px;
  max-width: 100%;
  padding: 0 var(--of-space-s1);
  font-size: 13px;
  color: var(--text-secondary);
}
.ofk-line .icon { flex: none; font-size: 12px; color: var(--ofk-line-tone, var(--text-muted)); }
.ofk-slot { align-self: flex-start; width: min(100%, 520px); }
.ofk-slot--card { flex: 1; min-height: 0; width: 100%; overflow: hidden; }

/* The composer: ONE capsule (OFComposer, 0.50.0): the quick phrases' clock (or +), the field, the paper clip, the scan
   and the mic, then send, the only filled control and only while there is something to send. Radius half the unit. */
.ofk-composer { flex: none; padding: var(--of-space-s2) var(--of-space-s3) var(--of-space-s3); }
.ofk-frame--iphone .ofk-composer { padding-bottom: 30px; }
.ofk-composer-box {
  display: flex;
  align-items: center;
  gap: 2px;
  min-height: calc(var(--of-size-composer-unit) + 8px);
  padding: 4px;
  border-radius: calc((var(--of-size-composer-unit) + 8px) / 2);
  border: 1px solid var(--border-bright);
  background: var(--input, var(--bg));
}
.ofk-composer-side {
  flex: none;
  width: var(--of-size-composer-unit);
  height: var(--of-size-composer-unit);
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--text-primary);
}
.ofk-composer-field {
  flex: 1;
  min-width: 0;
  padding: 0 8px;
  color: var(--text-muted);
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ofk-composer-field--typed { color: var(--text-primary); }
.ofk-composer-send {
  flex: none;
  width: var(--of-size-composer-unit);
  height: var(--of-size-composer-unit);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
  background: var(--surface-high);
  color: var(--text-muted);
}
.ofk-composer-send--ready { background: var(--accent); color: var(--ink-on-accent); }

/* ── the usage bar (0.52.0; OuterfaceSuite's OFUsageBar) ─────────────────────────────────────────────────────────────
   A capsule on the raised surface with a 0.5 pt line, the used part in the accent's fill; over the plan, the used part in
   the ink and the overage in the negative color, with a tick where the plan ends. `--ofk-usage` is the used fraction
   (0..1); a host that shows what is LEFT sets it to the remaining fraction. Height 8, as OFPlanManager draws it.
   <div class="ofk-usage" style="--ofk-usage:0.42" role="meter" aria-valuenow="42" aria-valuemin="0" aria-valuemax="100"><span></span></div> */
.ofk-usage { position: relative; height: 8px; border-radius: 999px; background: var(--surface-high); box-shadow: inset 0 0 0 0.5px var(--border); overflow: hidden; }
.ofk-usage > span { position: absolute; inset: 0 auto 0 0; width: calc(var(--ofk-usage, 0) * 100%); background: var(--accent); border-radius: inherit; transition: width 0.2s ease-out; }
@media (prefers-reduced-motion: reduce) { .ofk-usage > span { transition: none; } }

/* ── kit glyphs (0.52.1; engine/sf-glyphs.mjs KIT_GLYPHS): what the icon font lacks, drawn as a mask over currentColor so
   it sizes, colors and sits like a font glyph (1em, the text's baseline). A page's CSP must allow img-src data:. ── */
.icon--squares-2x2::before, .icon--squares-2x2-solid::before, .icon--bubble-exclamation::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.125em; background-color: currentColor; -webkit-mask: var(--ofk-glyph) center / contain no-repeat; mask: var(--ofk-glyph) center / contain no-repeat; }
.icon--squares-2x2::before { --ofk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Crect x='3.2' y='3.2' width='7.6' height='7.6' rx='2.2'/%3E%3Crect x='13.2' y='3.2' width='7.6' height='7.6' rx='2.2'/%3E%3Crect x='3.2' y='13.2' width='7.6' height='7.6' rx='2.2'/%3E%3Crect x='13.2' y='13.2' width='7.6' height='7.6' rx='2.2'/%3E%3C/svg%3E"); }
.icon--squares-2x2-solid::before { --ofk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='2.5' y='2.5' width='8.6' height='8.6' rx='2.4'/%3E%3Crect x='12.9' y='2.5' width='8.6' height='8.6' rx='2.4'/%3E%3Crect x='2.5' y='12.9' width='8.6' height='8.6' rx='2.4'/%3E%3Crect x='12.9' y='12.9' width='8.6' height='8.6' rx='2.4'/%3E%3C/svg%3E"); }
.icon--bubble-exclamation::before { --ofk-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3.2c-5 0-9 3.3-9 7.5 0 2.3 1.2 4.4 3.2 5.8-.2 1.5-.9 2.8-2 3.8 2.2-.1 4.1-.9 5.5-2.1.7.1 1.5.2 2.3.2 5 0 9-3.4 9-7.7s-4-7.5-9-7.5z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 6.9v4.7' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='14.6' r='1.2'/%3E%3C/svg%3E"); }

/* ── the image viewer (0.53.0; src/js/viewer.js, the core's OFImageViewer) ─────────────────────────────────────────
   Full screen on the page's ground; the sheet's header with no rule (a photo mark in the muted ink, "Image", the header
   chips' capsules); the picture fitted, rounded 14 (OFImageViewer.defaultCornerRadius) at any zoom. --ofk-vs is the
   scale: 1, or 1.3 on a touch screen (OFScale phoneFactor), where every chip reaches 44. A picture that opens it is a
   button (`[data-ofk-viewer]`) that looks like the picture alone. */
.ofk-viewing, .ofk-viewing body { overflow: hidden; }
[data-ofk-viewer] { all: unset; display: block; cursor: zoom-in; border-radius: inherit; }
[data-ofk-viewer]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofk-viewer { --ofk-vs: 1; position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--bg); color: var(--text-primary);
  opacity: 0; transition: opacity 0.18s ease-out; }
.ofk-viewer.is-open { opacity: calc(1 - var(--ofk-viewer-pull, 0) * 0.6); }
.ofk-viewer--still, .ofk-viewer--still .ofk-viewer-img { transition: none !important; }
@media (pointer: coarse), (max-width: 720px) { .ofk-viewer { --ofk-vs: 1.3; --ofk-vtarget: 44px; } }
.ofk-viewer-head { flex: none; display: flex; align-items: center; gap: calc(6px * var(--ofk-vs));
  padding: calc(env(safe-area-inset-top) + 10px * var(--ofk-vs)) 12px calc(6px * var(--ofk-vs)); }
.ofk-viewer-mark { flex: none; width: calc(22px * var(--ofk-vs)); display: grid; place-items: center; font-size: calc(15px * var(--ofk-vs)); color: var(--text-muted); margin-right: calc(2px * var(--ofk-vs)); }
.ofk-viewer-title { flex: 1; min-width: 0; font-size: calc(var(--of-text-headline-size, 17px) * var(--ofk-vs)); font-weight: var(--of-text-headline-weight, 600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofk-viewer-chips { flex: none; display: flex; gap: calc(6px * var(--ofk-vs)); }
/* The viewer's chips are the header chip (.ofk-hchip, the live header below) at the viewer's scale. */
.ofk-viewer .ofk-hchip { --ofk-hs: var(--ofk-vs); --ofk-touch: var(--ofk-vtarget, 0px); }
.ofk-viewer-stage { flex: 1; min-height: 0; display: grid; place-items: center; overflow: hidden; touch-action: none;
  padding: 0 0 max(12px, env(safe-area-inset-bottom)); cursor: zoom-in; }
.ofk-viewer-img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: calc(14px / var(--ofk-viewer-zoom, 1));
  transform-origin: center; user-select: none; -webkit-user-drag: none; will-change: transform; }
.ofk-viewer-img.is-animating { transition: transform 0.2s ease-out; }

/* ── the live header (0.54.0): OFDetailHeader's geometry, ONE rule for a card's head and the sidebar's head ─────────
   For a live page (a web app), not the drawn screens above. [back] [mark] title over subtitle ……… [chips], a grid whose
   first row IS the title's line, so the back chevron, the mark and the chips center on it by construction (the app's
   .ofTitleCenter); the titles span both rows; the head's own 1 pt rule under it (showsDivider), none over a tab band.
   Metrics are OFDetailHeaderMetrics' tokens: title line 19, subtitle line 14, mark box 22 (glyph 15, muted), markGap 8,
   cluster 6, chips 30 x 22 (OFHeaderIconButton's capsule on palette.surface, muted ink), hPad 12; on the Mac 15 above the
   title's line (paneTopPad + pageHeaderTop + 1) and 6 + 10 under the subtitle's (vPad + the divider's air). `--ofk-hs` is
   the scale: 1.3 on a phone-width page (OFScale phoneFactor), with 44 pt targets and the app's iPhone insets (measured in
   the iPhone 17 Pro simulator: the title's center 41 pt under the status bar, the rule 48 under it).
   The SIDEBAR'S head is a card head without the card: `.ofk-side-head` drops it one card gutter from the top on a wide
   page, as a card sits one gutter below the window's top, so marks, titles, subtitles and rules line up across them.

   <header class="ofk-head"><button class="ofk-head-back">…</button><span class="ofk-head-mark">…</span>
     <span class="ofk-head-titles"><span class="ofk-head-title">…</span><span class="ofk-head-sub">…</span></span>
     <span class="ofk-head-chips"><button class="ofk-hchip">…</button></span></header>                                */
.ofk-head { --ofk-hs: 1; --ofk-tl: calc(19px * var(--ofk-hs)); --ofk-sl: calc(14px * var(--ofk-hs)); --ofk-touch: 0px;
  --ofk-head-top: 15px; --ofk-head-bottom: 16px;
  flex: none; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-rows: var(--ofk-tl) var(--ofk-sl);
  padding: var(--ofk-head-top) 12px var(--ofk-head-bottom); border-bottom: 1px solid var(--border); background: transparent; }
.ofk-head > * { grid-row: 1; align-self: unsafe center; }
/* A head without a subtitle keeps the subtitle's line empty, so its title and rule stay level with a neighbor's. */
.ofk-head--tabbed { border-bottom: 0; --ofk-head-bottom: calc(6px * var(--ofk-hs)); }
.ofk-head-back { all: unset; box-sizing: border-box; grid-row: 1; grid-column: 1; align-self: unsafe center; cursor: pointer; display: grid; place-items: center start;
  width: calc(22px * var(--ofk-hs)); height: max(calc(34px * var(--ofk-hs)), var(--ofk-touch)); margin-right: calc(6px * var(--ofk-hs));
  font-size: calc(14px * var(--ofk-hs)); color: var(--text-muted); }
.ofk-head-back[hidden] { display: none; }
.ofk-head-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.ofk-head-mark { grid-column: 2; width: calc(22px * var(--ofk-hs)); height: calc(22px * var(--ofk-hs)); margin-right: calc(8px * var(--ofk-hs));
  display: grid; place-items: center; font-size: calc(15px * var(--ofk-hs)); color: var(--text-muted); }
.ofk-head-mark > img, .ofk-head-mark > svg { display: block; width: 100%; height: 100%; border-radius: 24%; object-fit: contain; }
.ofk-head-titles { grid-column: 3; grid-row: 1 / span 2; align-self: start; min-width: 0; display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.ofk-head-title { display: block; height: var(--ofk-tl); line-height: var(--ofk-tl); font-size: calc(var(--of-text-headline-size, 17px) * var(--ofk-hs));
  font-weight: var(--of-text-headline-weight, 600); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofk-head-sub { display: block; height: var(--ofk-sl); line-height: var(--ofk-sl); font-size: calc(var(--of-text-caption-size, 12px) * var(--ofk-hs));
  color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ofk-head-chips { grid-column: 4; display: flex; align-items: center; gap: calc(6px * var(--ofk-hs)); margin-left: calc(6px * var(--ofk-hs)); }
/* The header chip (OFHeaderIconButton / OFHeaderMenuLabel): one capsule for every header, the sidebar's and a card's. */
.ofk-hchip { all: unset; position: relative; box-sizing: border-box; cursor: pointer; flex: none; display: grid; place-items: center;
  width: calc(var(--of-size-header-chip-width, 30px) * var(--ofk-hs)); height: calc(var(--of-size-header-chip-height, 22px) * var(--ofk-hs));
  border-radius: 999px; background: var(--surface); color: var(--text-muted); font-size: calc(12px * var(--ofk-hs)); }
.ofk-hchip::after { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, var(--ofk-touch)); height: max(100%, var(--ofk-touch)); transform: translate(-50%, -50%); }
.ofk-hchip:hover, .ofk-hchip[aria-expanded="true"], .ofk-hchip[aria-pressed="true"] { color: var(--text-primary); }
.ofk-hchip[aria-expanded="true"], .ofk-hchip[aria-pressed="true"] { color: var(--accent-text, var(--accent)); }
.ofk-hchip:disabled { opacity: 0.4; cursor: default; }
.ofk-hchip[hidden] { display: none; }
.ofk-hchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ofk-side:has(.ofk-side-head) { padding-top: 0; }
.ofk-side-head { margin-top: var(--of-layout-card-gutter, 10px); }
@media (pointer: coarse) { .ofk-head { --ofk-touch: 44px; } }   /* a touch screen's floor, at any width */
@media (max-width: 720px) {
  .ofk-head { --ofk-hs: 1.3; --ofk-touch: 44px; --ofk-head-top: calc(env(safe-area-inset-top) + 28.65px); --ofk-head-bottom: 18.8px; }
  .ofk-head--tabbed { --ofk-head-bottom: 7.8px; }
  .ofk-side-head { margin-top: 0; }
}

/* ── src/css/lanes/legal.css ── */
/* src/css/lanes/legal.css: the legal documents (layouts/legal.yml). The draft
   banner is core (src/css/components.css). */

.legal { max-width: var(--measure); }
.legal-toc { margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 0.95rem; }
.legal-toc ul { margin: 0; padding-inline-start: 1.2em; }
.legal-toc li { margin: 0.2rem 0; }
.legal-body h2 { scroll-margin-top: calc(var(--header-h) + var(--space-2)); }
.legal-signature { margin-top: var(--space-4); color: var(--text-muted); }
.legal-missing { color: var(--text-muted); }

/* ── src/css/lanes/reel.css ── */
/* src/css/lanes/reel.css: the reel (layouts/demo-reel.yml, src/js/lanes/reel.js, 0.49.0, 2026-10-24; 0.50.0 fixes; 0.51.0 the
   kit's devices and a black full screen): the bezel-plus-
   presentation component placed inline on any page. Its titles and progress lines reuse the demos' pager look
   (.demos-page in demos.css). A bezel image (demos.json's devices, a build input) frames the screen like /demos;
   without one the device is DRAWN by the kit (kit.css `.ofk-device`: even bezels, concentric corners, the iPhone's
   Dynamic Island black in every theme, no home indicator, a monitor on its stand). A Mac is a window. Theme colors
   only, but for the hardware and the black full screen. */

.reel-band { max-width: none; }
.reel-band-title { margin: 0 0 var(--space-1); }
.reel-band-lede { color: var(--text-secondary); margin: 0 0 var(--space-3); }

.reel { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); min-width: 0; max-width: 100%; }
/* 0.50.0: the titles never push the page sideways. Each page is as wide as its title (never wrapped), the row scrolls
   inside itself when they don't fit, and `safe` keeps the first ones reachable (a plain `center` cut them off). */
.reel-pages { align-self: stretch; min-width: 0; max-width: 100%; justify-content: safe center; grid-auto-columns: max-content; }
.reel-pages .demos-page-title { white-space: nowrap; }
.reel-stage { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }

/* ── the device ──────────────────────────────────────────────────────────────────────────────────────────────── */

.reel-device { position: relative; width: 100%; container-type: inline-size; }
.reel--ipad .reel-stage > .reel-device { max-width: 980px; }
.reel--mac .reel-stage > .reel-device, .reel--monitor .reel-stage > .reel-device { max-width: 1040px; }
.reel--iphone .reel-stage > .reel-device { max-width: 320px; }

.reel-screen { background: var(--bg); }
.reel-slide { position: absolute; inset: 0; }
.reel-slide[hidden] { display: none; }
.reel-slide.reel-slide--in { animation: reel-in 0.35s ease both; }
@keyframes reel-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .reel-slide.reel-slide--in { animation: none; } }
.reel-video { width: 100%; height: 100%; object-fit: cover; display: block; background: #000; }

/* With a bezel image: the screen sits in its hole, the image on top (as /demos). */
.reel-device--bezel { aspect-ratio: var(--reel-aspect); }
.reel-device--bezel .reel-screen {
  position: absolute;
  left: var(--demo-x);
  top: var(--demo-y);
  width: var(--demo-w);
  height: var(--demo-h);
  border-radius: 2cqw;
}
.reel-device--bezel.reel-device--iphone .reel-screen { border-radius: 12cqw; }

/* Drawn (0.51.0): the kit's one device definition (kit.css `.ofk-device`, `.ofk-body`, `.ofk-device-island`,
   `.ofk-stand`): the iPad and iPhone in even bezels with concentric corners, the monitor on its stand. A Mac is a
   window: */
.reel-device--drawn.reel-device--mac > .reel-screen {
  margin: 1.2cqw;
  width: calc(100% - 2.4cqw);
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--border-bright), 0 2cqw 5cqw -1.5cqw rgba(0, 0, 0, 0.3);
}
/* Plain macOS windows (`device: "mac-window"`): no device, the windows' own shadows on the page's ground. */
.reel-device--mac-window .reel-screen { background: transparent; overflow: visible; }
.reel--mac-window .reel-stage > .reel-device { max-width: 1040px; }

/* ── controls and captions ───────────────────────────────────────────────────────────────────────────────────── */

.reel-controls { display: flex; justify-content: center; gap: var(--space-1); }
.reel-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 15px;
}
.reel-btn:hover { background: var(--surface-high); color: var(--text-bright); }
.reel-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.reel-btn[hidden] { display: none; }
.reel-btn .icon--play { display: none; }
.reel-btn[data-paused] .icon--play { display: inline; }
.reel-btn[data-paused] .icon--pause { display: none; }
.reel-captions { min-height: 3em; max-width: var(--measure); text-align: center; color: var(--text-secondary); }
.reel-caption { margin: 0 auto; }

/* ── the presentation (full screen, or a fixed overlay where there is none) ───────────────────────────────── */

/* Every full screen is black (Nima, 2026-10-24), in every theme: the ground, the backdrop, white words, dark controls
   (as /demos' presentation). The drawn screen keeps the theme's own colors. */
.reel-present {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2) var(--space-2);
  background: #000;
  color: #fff;
}
.reel-present[hidden] { display: none; }
.reel-present::backdrop { background: #000; }
.reel-present:fullscreen { width: 100vw; height: 100vh; }
.reel-present .demos-page.reel-present-page, .reel-present .demos-page-title { color: #fff; }
.reel-present .demos-page-bar { background: rgb(255 255 255 / 0.22); }
.reel-present .reel-btn { border: 0; background: rgb(40 40 40 / 0.78); color: #fff; }
@media (hover: hover) { .reel-present .reel-btn:hover { background: rgb(72 72 72 / 0.9); color: #fff; } }
html.reel-presenting { overflow: hidden; }
.reel-present-top { display: flex; align-items: center; gap: var(--space-2); }
.reel-present-page { flex: 1; cursor: default; }
.reel-present-count { margin-left: var(--space-1); color: rgb(255 255 255 / 0.6); font-size: 0.85rem; }
.reel-present-screen { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: var(--space-2); }
.reel-present .reel-device {
  flex: none;
  width: min(calc(100vw - 160px), calc((100dvh - 190px) * var(--reel-aspect)));
}
.reel-present-caption { margin: 0 auto; max-width: var(--measure); min-height: 3em; text-align: center; color: rgb(255 255 255 / 0.78); }
.reel-present-caption a { color: #fff; }
/* The full-screen button sits on the device's top right corner (.ofk-expand, kit.css): the same as /demos'. */
.reel-open { z-index: 4; }
@media (max-width: 700px) {
  .reel-present-screen { position: relative; }
  .reel-present .reel-device { width: min(calc(100vw - 32px), calc((100dvh - 210px) * var(--reel-aspect))); }
  .reel-present-arrow { position: absolute; bottom: -48px; }
  .reel-present-arrow[data-reel-present-prev] { left: 25%; }
  .reel-present-arrow[data-reel-present-next] { right: 25%; }
  /* The arrows sit under the device here: the caption moves below them, never under them. */
  .reel-present-caption { margin-top: 56px; }
}

/* ── src/css/lanes/releases-support.css ── */
/* src/css/lanes/releases-support.css — lane D: /releases (layouts/support-releases.yml) and /support
   (layouts/issue-report.yml). The form rules are Terminal C's forms.css, trimmed. Every color is a theme token
   (the Base theme has no success/error colors, so states use the brand and bright ink). */

/* ── /releases ─────────────────────────────────────────────────────────────── */

.releases { max-width: var(--measure); }
.rel-intro { color: var(--text-secondary); margin-bottom: var(--space-1); }
.rel-legend { color: var(--text-muted); font-size: 0.9rem; margin-bottom: var(--space-4); }

.rel-list { list-style: none; margin: 0; padding: 0; }
.rel { border-top: 1px solid var(--border); }
.rel:last-child { border-bottom: 1px solid var(--border); }
.rel:target .rel-date { color: var(--brand); }

.rel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
  min-height: 2.75rem;
}
.rel-head::-webkit-details-marker { display: none; }
.rel-head::before {
  content: "";
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  margin-inline-end: 0.15rem;
}
.rel-fold[open] > .rel-head::before { transform: rotate(45deg); }
.rel-head:focus-visible { outline: 2px solid var(--border-bright); outline-offset: 2px; border-radius: var(--radius-sm); }

.rel-date { margin: 0; font-size: 1.15rem; line-height: 1.3; color: var(--text-bright); }
.rel-badges { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }
.rel-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-size: 0.8rem;
  line-height: 1;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-secondary);
  white-space: nowrap;
}
.rel-badge-os { font-weight: 600; color: var(--text-bright); }
.rel-badge-build { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.rel-count { margin-inline-start: auto; font-size: 0.85rem; color: var(--text-muted); }

.rel-highlights { margin: 0 0 var(--space-3); padding-inline-start: 1.6rem; list-style: disc; }
.rel-highlights li { margin-bottom: 0.75rem; max-width: var(--measure); }
.rel-highlights li::marker { color: var(--text-muted); }
.rel-h-title { display: block; color: var(--text-bright); font-weight: 600; }
.rel-h-detail { color: var(--text-secondary); }
.rel-maintenance { color: var(--text-muted); margin: 0 0 var(--space-3) 1.6rem; }

@media (max-width: 30rem) {
  .rel-count { margin-inline-start: 0; flex-basis: 100%; padding-inline-start: 1.1rem; }
}

/* ── /support: shared ──────────────────────────────────────────────────────── */

.support-get-app, .issue-report, .support-help { max-width: var(--measure); margin-top: var(--space-5); }
.support-get-app { margin-top: var(--space-3); }
.support-get-app p:last-child { margin-bottom: 0; }
.support-h { margin-bottom: var(--space-2); }
.support-muted { color: var(--text-secondary); }

/* ── the reporter ──────────────────────────────────────────────────────────── */

.report-intro { color: var(--text-secondary); }
.report-icon { display: inline-block; margin-inline-end: 0.3em; }
.report-icon::before {
  font-family: "launchpad-icons";
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  font-size: 0.85em;
  color: currentColor;
  -webkit-font-smoothing: antialiased;
}

.report-form { margin-top: var(--space-3); max-width: 34rem; }
.report-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-3); }
.report-form fieldset[disabled] { opacity: 0.55; }

.report-field { display: grid; gap: 0.4rem; }
.report-label { font-size: 0.875rem; color: var(--text-secondary); }

.report-form input[type="text"],
.report-form input[type="email"],
.report-form select,
.report-form textarea {
  font: inherit;
  color: var(--text-primary);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  width: 100%;
  min-height: 2.75rem;
}
.report-form select {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 1.1rem center, right 0.8rem center;
  background-size: 0.3rem 0.3rem, 0.3rem 0.3rem;
  background-repeat: no-repeat;
  cursor: pointer;
}
.report-form select:invalid { color: var(--text-muted); }
.report-form textarea { resize: vertical; min-height: 7rem; }
.report-form input::placeholder, .report-form textarea::placeholder { color: var(--text-muted); }

.report-form input:focus-visible,
.report-form select:focus-visible,
.report-form textarea:focus-visible,
.report-form button:focus-visible { outline: 2px solid var(--border-bright); outline-offset: 2px; }
.report-kind input:focus-visible + .segmented-option { outline: 2px solid var(--border-bright); outline-offset: 1px; }

.report-form .segmented { justify-self: start; }
.report-kind { cursor: pointer; display: inline-flex; }
.report-kind input { position: absolute; opacity: 0; pointer-events: none; }
.report-kind .segmented-option { min-height: 2.75rem; font-size: 0.9375rem; width: 100%; padding-inline: 1.1rem; cursor: pointer; }
.report-kind input:checked + .segmented-option { background: var(--seg-thumb); color: var(--seg-ink); font-weight: 600; box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }

.report-optional { display: grid; gap: var(--space-2); }
@media (min-width: 34rem) { .report-optional { grid-template-columns: 1fr 1fr; } }

.report-hint, .report-noscript, .report-app { font-size: 0.875rem; color: var(--text-muted); margin: 0; }
/* 0.52.0: the Attach diagnostics switch (layouts/issue-report.yml `reporter.diagnostics`; OFIssuePage's switch row). */
.report-switch { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-md, 10px); cursor: pointer; }
.report-switch input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0.1rem 0 0; accent-color: var(--accent); }
.report-switch-text { display: grid; gap: 0.15rem; }
.report-switch-label { color: var(--text-primary); }
.report-app { margin-top: var(--space-3); }
.report-noscript { margin-top: var(--space-2); }

.report-form button[type="submit"] { justify-self: start; }

.report-challenge iframe { border: 0; width: 100%; max-width: 20rem; height: 70px; display: block; color-scheme: normal; }

.report-status:empty { display: none; }
.report-status {
  margin-top: var(--space-2);
  font-size: 0.9375rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  border-inline-start-width: 4px;
  color: var(--text-secondary);
}
.report-status.is-ok { border-color: var(--brand); color: var(--text-primary); }
.report-status.is-error { border-color: var(--text-bright); color: var(--text-bright); font-weight: 500; }

/* ── help ──────────────────────────────────────────────────────────────────── */

.help-groups { display: grid; gap: var(--space-4); margin-top: var(--space-3); }
@media (min-width: 52rem) {
  .support-help { max-width: var(--page); }
  .help-groups { grid-template-columns: 1fr 1fr; }
}
.help-group-title { font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 var(--space-1); }
.help-list { list-style: none; margin: 0; padding: 0; }
.help-list li + li { border-top: 1px solid var(--border); }
.help-link {
  display: grid;
  gap: 0.15rem;
  padding: 0.7rem 0;
  text-decoration: none;
  min-height: 2.75rem;
}
.help-link-title { color: var(--link); font-weight: 600; }
.help-link:hover .help-link-title { text-decoration: underline; }
.help-link-summary { color: var(--text-secondary); font-size: 0.9rem; }
.help-link:focus-visible { outline: 2px solid var(--border-bright); outline-offset: 2px; border-radius: var(--radius-sm); }
.support-contact { margin-top: var(--space-4); color: var(--text-secondary); }

/* generated by engine/icons.mjs: @dboio/launchpad-icons@5.3.0, 5 glyph(s) used */
@font-face{font-family:"launchpad-icons";src:url("/_site/icons/launchpad-icons-regular.woff2?v=71c3c02") format("woff2");font-display:block}
.icon::before{font-family:"launchpad-icons";font-style:normal;font-weight:normal;line-height:1;speak:never;-webkit-font-smoothing:antialiased}
.icon--cloud::before{content:"\e851"}
.icon--musicalnote::before{content:"\ed55"}
.icon--phone::before{content:"\ed40"}
.icon--report-bug::before{content:"\ed4a"}
.icon--wifi::before{content:"\e85a"}