/* Rays — one stylesheet for every page. Inter (SIL OFL, fonts/Inter-LICENSE.txt).

   Every colour, size, radius, shadow and duration comes from a token declared
   on :root below; no literal appears outside it (tests/test_web.py checks).
   docs/design.md is the rulebook for the tokens and the components. */

/* A url() carries the file's digest, as asset() writes it, so a changed font is
   fetched at once; tests/test_assets.py fails when the digest is stale. */
@font-face {
  font-family: "Inter";
  src: url("fonts/InterVariable.woff2?v=693b77d4f32ee9b8") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Primitives: ramps by hue. Components never use these directly. */
  --paper-0: #fffdf8;
  --paper-50: #f9f7f2;
  --paper-100: #f6f4ef;
  --paper-200: #f0ede7;
  --paper-300: #e4dfd4;
  --paper-400: #d6d0c3;
  --paper-500: #b5afa2;
  --ink-200: #c9c2b4;
  --ink-350: #a39e94;
  --ink-500: #6e685d;   /* the faintest text: passes 4.5:1 on every paper step (axe checks it) */
  --ink-600: #625b52;
  --ink-650: #4a433c;
  --ink-700: #3a362f;
  --ink-750: #312d29;
  --ink-800: #24211e;
  --ink-850: #1d1b17;   /* the ink: text on paper, and the dark chrome */
  --ink-950: #100e0c;
  --green-400: #7dcea8;
  --red-400: #f0a090;
  --blue-400: #a9b8f7;
  --violet-400: #cbbff5;
  --sun-100: #fff4dc;
  --sun-200: #fdebc4;
  --sun-300: #ffb347;   /* the accent as text in dark mode: 6:1 even on its own tint */
  --sun-400: #ffc414;   /* the accent on the dark chrome, where the orange is too dim */
  --sun-500: #f59a00;   /* Ray's orange: the accent as a fill in dark mode */
  --sun-700: #b4520a;   /* the accent: 4.6:1 on the page, 5:1 on a card */
  --sun-800: #93430a;   /* the accent pressed, and badge text on its tint */
  --sun-900: #3b2a0c;
  --green-100: #e3f4ec;
  --green-200: #bfe3d0;
  --green-700: #207a56;
  --green-800: #1b5e43;
  --red-100: #fdece4;
  --red-200: #f5cdb9;
  --red-700: #bf400b;
  --red-800: #8a2c07;
  --red-900: #5b1a08;
  --violet-100: #efebfd;
  --violet-200: #d6cae6;
  --violet-700: #6b4fd8;
  --blue-100: #e8ecfc;
  --blue-700: #3c4fcf;
  --blue-800: #293c92;

  /* Semantic tokens: what components use. light-dark() follows color-scheme. */
  color-scheme: light dark;
  --sun-soft-dark: color-mix(in srgb, var(--sun-500) 24%, var(--ink-850));
  --green-soft-dark: color-mix(in srgb, var(--green-400) 22%, var(--ink-850));
  --red-soft-dark: color-mix(in srgb, var(--red-400) 20%, var(--ink-850));
  --blue-soft-dark: color-mix(in srgb, var(--blue-400) 20%, var(--ink-850));
  --violet-soft-dark: color-mix(in srgb, var(--violet-400) 20%, var(--ink-850));
  --bg: light-dark(var(--paper-100), var(--ink-950));
  --surface: light-dark(var(--paper-0), var(--ink-850));
  --surface-2: light-dark(var(--paper-50), var(--ink-800));
  --surface-3: light-dark(var(--paper-100), var(--ink-750));
  --border: light-dark(var(--paper-300), var(--ink-650));
  --border-soft: light-dark(var(--paper-200), var(--ink-800));
  --border-strong: light-dark(var(--paper-400), var(--ink-600));
  --text: light-dark(var(--ink-850), var(--paper-50));
  --text-2: light-dark(var(--ink-600), var(--paper-400));
  --text-3: light-dark(var(--ink-500), var(--ink-350));
  --text-strong: light-dark(var(--ink-700), var(--paper-200));
  --accent: light-dark(var(--sun-700), var(--sun-500));
  --accent-deep: light-dark(var(--sun-800), var(--sun-400));
  --accent-text: light-dark(var(--sun-700), var(--sun-300));
  --accent-soft: light-dark(var(--sun-100), var(--sun-soft-dark));
  --accent-soft-2: light-dark(var(--sun-200), var(--sun-soft-dark));
  --accent-on-dark: var(--sun-400);
  --link: light-dark(var(--sun-700), var(--sun-300));
  --positive: light-dark(var(--green-700), var(--green-400));
  --positive-text: light-dark(var(--green-800), var(--green-400));
  --positive-soft: light-dark(var(--green-100), var(--green-soft-dark));
  --positive-line: light-dark(var(--green-200), var(--green-700));
  --negative: light-dark(var(--red-700), var(--red-400));
  --negative-text: light-dark(var(--red-800), var(--red-400));
  --negative-soft: light-dark(var(--red-100), var(--red-soft-dark));
  --negative-line: light-dark(var(--red-200), var(--red-700));
  --info: light-dark(var(--blue-700), var(--blue-400));
  --info-text: light-dark(var(--blue-800), var(--blue-400));
  --info-soft: light-dark(var(--blue-100), var(--blue-soft-dark));
  --agent: light-dark(var(--violet-700), var(--violet-400));
  --agent-soft: light-dark(var(--violet-100), var(--violet-soft-dark));
  --agent-line: light-dark(var(--violet-200), var(--violet-700));
  --side: var(--ink-850);
  --side-2: var(--ink-700);
  --side-3: var(--ink-800);
  --side-line: var(--ink-800);
  --side-text: var(--ink-200);
  --side-mark: var(--ink-600);
  --on-dark: var(--paper-0);
  --on-accent: light-dark(var(--paper-0), var(--ink-850));
  --focus: light-dark(var(--sun-700), var(--sun-500));
  --focus-on-dark: var(--sun-400);
  --scrim: light-dark(rgb(29 27 23 / .46), rgb(0 0 0 / .62));
  --hatch: light-dark(rgb(255 255 255 / .3), rgb(255 255 255 / .14));
  --texture: light-dark(var(--paper-500), var(--ink-600));
  /* Syntax colours for JSON on the dark terminal block. */
  --code-key: #9dcaff;
  --code-string: #b8dda0;
  --code-number: #f3c078;
  --code-literal: #d8b5ff;

  /* Stage and kind tones: one table for the progress bar, the calendar, the
     toasts and the timeline, so a kind is the same colour everywhere. */
  --tone-opened: light-dark(var(--sun-800), var(--sun-300));           --tone-opened-soft: light-dark(var(--sun-200), var(--sun-soft-dark));
  --tone-conversations: light-dark(var(--blue-800), var(--blue-400));  --tone-conversations-soft: light-dark(var(--blue-100), var(--blue-soft-dark));
  --tone-diligence: light-dark(var(--violet-700), var(--violet-400));  --tone-diligence-soft: light-dark(var(--violet-100), var(--violet-soft-dark));
  --tone-commitments: light-dark(var(--green-800), var(--green-400));  --tone-commitments-soft: light-dark(var(--green-100), var(--green-soft-dark));
  --tone-closed: light-dark(var(--green-800), var(--green-400));       --tone-closed-soft: light-dark(var(--green-100), var(--green-soft-dark));
  --tone-none: light-dark(var(--ink-600), var(--ink-350));             --tone-none-soft: light-dark(var(--paper-200), var(--ink-800));
  --kind-activity: light-dark(var(--sun-800), var(--sun-300));         --kind-activity-soft: light-dark(var(--sun-100), var(--sun-soft-dark));
  --kind-task: light-dark(var(--blue-700), var(--blue-400));           --kind-task-soft: light-dark(var(--blue-100), var(--blue-soft-dark));
  --kind-revisit: light-dark(var(--violet-700), var(--violet-400));    --kind-revisit-soft: light-dark(var(--violet-100), var(--violet-soft-dark));
  --kind-milestone: light-dark(var(--ink-700), var(--ink-350));        --kind-milestone-soft: light-dark(var(--paper-200), var(--ink-800));
  --kind-positive: light-dark(var(--green-700), var(--green-400));     --kind-positive-soft: light-dark(var(--green-100), var(--green-soft-dark));

  /* Type: one scale, three weights. */
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  --text-xs: 11px;
  --text-sm: 12px;
  --text-md: 13px;
  --text-base: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 28px;
  --text-3xl: clamp(1.875rem, 3.6vw, 2.75rem);   /* statements and section headings on the public pages */
  --text-display: clamp(2.5rem, 5.4vw, 3.625rem);   /* the landing headline and the dark band */
  --w-regular: 400;
  --w-medium: 600;
  --w-bold: 700;
  --track-tight: -.015em;
  --track-label: .06em;

  /* Space, shape, depth, motion. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --pad-x: 20px;   /* inside a card, and the card head, so rows line up */
  --pad-y: 14px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 999px;
  --radius-xl: 20px;   /* cards and panels on the public pages */
  --radius: var(--radius-lg);
  --shadow-pop: 0 4px 18px light-dark(rgb(35 30 20 / .12), rgb(0 0 0 / .5)), 0 1px 3px light-dark(rgb(35 30 20 / .06), rgb(0 0 0 / .35));
  --shadow-modal: 0 24px 80px light-dark(rgb(35 30 20 / .24), rgb(0 0 0 / .55));
  --shadow-lift: 0 24px 48px -28px light-dark(rgb(60 45 20 / .28), rgb(0 0 0 / .6));   /* a card on a public page */
  --shadow-figure: 0 14px 16px light-dark(rgb(120 60 0 / .18), rgb(0 0 0 / .45));   /* Ray, standing on the landing card */
  --fast: 120ms;
  --slow: 200ms;
  --theme-move: 300ms; /* three times --slow: the theme slider and the colour change */
  --ease: ease;

  font: var(--text-base)/1.5 var(--font);
  font-feature-settings: "cv11", "ss01";
  color: var(--text);
}

/* A stored choice overrides the system. Absent, the page follows the system. */
html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
h1, h2, h3 { margin: 0; }
h1 { font-size: var(--text-2xl); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: 1.15; }
h2 { font-size: var(--text-lg); font-weight: var(--w-medium); letter-spacing: var(--track-tight); }
h3 { font-size: var(--text-base); font-weight: var(--w-medium); }
code { font: .85em var(--mono); background: var(--border-soft); padding: .1em .35em; border-radius: var(--radius-sm); }
/* On the chip's tint the link orange is 4.3:1, so a link set in code takes the deeper one. */
a code { color: var(--accent-deep); }
pre { max-width: 100%; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }
.small { font-size: var(--text-md); }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.grow { flex: 1; min-width: 0; }
/* The small uppercase label: eyebrows and table headers only. */
.label { font-size: var(--text-sm); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-2); }
/* The small secondary line under a name or a title. */
.line2 { font-size: var(--text-md); color: var(--text-2); margin-top: 2px; }
/* A row of things with a gap; add .wrap to let it wrap and .top to align at the top. */
.row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.row.wrap { flex-wrap: wrap; }
.row.top { align-items: flex-start; }
.row.roomy { gap: var(--space-4); }
.row.tight { gap: 6px; }
.divider-top { border-top: 1px solid var(--border-soft); }
.stack-sm { margin-top: var(--space-2); }
.sr-only, .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

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

.frame { display: grid; grid-template-columns: 189px 1fr; grid-template-rows: auto 1fr; min-height: 100vh; }
.side {
  grid-column: 1; grid-row: 1 / 3;
  background: var(--side); color: var(--side-text); padding: var(--space-5) 14px;
  display: flex; flex-direction: column; gap: var(--space-5); position: sticky; top: 0; height: 100dvh;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--on-dark); font-weight: var(--w-bold); font-size: var(--text-lg); padding: 0 var(--space-2); letter-spacing: var(--track-tight); }
/* Ray's face (static/ray.svg) is sized in em, so each place sets its size with font-size as it did for the emoji. */
.brand-emoji, .footer-emoji, .mobile-brand img, .eyebrow-mark { width: 1.1em; height: 1.1em; }
.brand-emoji { font-size: 1.8rem; line-height: 1; flex: none; }
.brand .wordmark { letter-spacing: -.045em; }
.side > .brand { flex-direction: column; justify-content: center; gap: 6px; min-height: 48px; padding: 0; font-size: 1.725rem; text-decoration: none; }
.side > .brand .brand-emoji { font-size: 2.7rem; }
.side > .brand:hover { text-decoration: none; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: 11px; padding: var(--space-2) 10px; min-height: 40px; border-radius: var(--radius-md);
  color: var(--side-text); font-weight: var(--w-medium); position: relative; transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.nav a:hover { background: var(--side-2); color: var(--on-dark); text-decoration: none; }
.nav a.on { background: var(--side-2); color: var(--on-dark); }
.nav a.on::before { content: ""; position: absolute; left: -14px; top: var(--space-2); bottom: var(--space-2); width: 3px; border-radius: 0 3px 3px 0; background: var(--accent-on-dark); }
.nav svg { width: 17px; height: 17px; flex: none; opacity: .85; }
.nav .count { margin-left: auto; background: var(--accent-on-dark); color: var(--side); font-size: var(--text-xs); font-weight: var(--w-bold); padding: 1px 7px; border-radius: var(--radius-full); }
.nav .count.quiet { background: var(--side-3); color: var(--side-text); }

/* Rounds has an overview and contextual links to individual rounds. */
.round-links { list-style: none; padding: 2px 0 6px 18px; margin: 0; max-height: 220px; overflow-y: auto; }
.nav .round-links a { display: block; min-height: 0; padding: 7px var(--space-2); font-size: var(--text-md); border-left: 1px solid var(--side-mark); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.round-link-name { display: block; overflow-wrap: anywhere; }
.round-link-state { display: block; font-size: var(--text-xs); color: var(--side-text); }
.nav .round-links a.selected { color: var(--on-dark); background: var(--side-2); border-left: 2px solid var(--accent-on-dark); }

/* The sidebar can be narrowed to icons. The choice is kept in localStorage and
   applied by a script in <head> before the first paint. Below 900px there is
   no sidebar to narrow, so none of this applies there. */
.side-toggle {
  display: flex; align-items: center; gap: 11px; padding: var(--space-2) 10px; min-height: 40px; border-radius: var(--radius-md);
  background: none; border: 0; color: var(--side-text); font: inherit; font-weight: var(--w-medium); cursor: pointer; text-align: left;
}
.side-toggle:hover { background: var(--side-2); color: var(--on-dark); }
.side-toggle svg { width: 17px; height: 17px; flex: none; opacity: .85; transition: transform var(--slow) var(--ease); }
@media (min-width: 901px) {
  html.side-narrow .frame { grid-template-columns: 68px 1fr; }
  html.side-narrow .side { padding: var(--space-5) 10px; }
  html.side-narrow .side > .brand { justify-content: center; padding: 0; }
  html.side-narrow .side > .brand .wordmark { display: none; }
  html.side-narrow .nav a, html.side-narrow .side-toggle { justify-content: center; padding: 9px 0; }
  html.side-narrow .nav a.on::before { left: -10px; }
  html.side-narrow .nav svg, html.side-narrow .side-toggle svg { width: 20px; height: 20px; }
  html.side-narrow .side-toggle svg { transform: rotate(180deg); }
  html.side-narrow .nav .count { position: absolute; top: 3px; right: 4px; margin: 0; font-size: var(--text-xs); padding: 0 5px; }
  /* Labels stay in the page for screen readers and appear as a tag on hover or focus. */
  html.side-narrow .side .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; text-transform: none; letter-spacing: 0; }
  html.side-narrow :where(.nav a, .side-toggle):is(:hover, :focus-visible) .nav-label {
    width: auto; height: auto; clip-path: none; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 50;
    padding: 5px 10px; border-radius: var(--radius-sm); background: var(--text); color: var(--surface); font-size: var(--text-md); font-weight: var(--w-medium);
    box-shadow: var(--shadow-pop);
  }
  html.side-narrow .side-toggle { position: relative; }
  html.side-narrow .side-foot { padding: var(--space-3) 0 0; }
  html.side-narrow .round-links { display: none; }
  html.side-narrow .account-trigger { justify-content: center; padding: var(--space-2) 0; }
  html.side-narrow .account-chevron { display: none; }
  html.side-narrow .side-foot .who { display: none; }
}

/* The account section at the foot of the sidebar opens upward. */
.side-foot { margin-top: auto; display: flex; flex-direction: column; align-items: stretch; padding: var(--space-2) 0 0; border-top: 1px solid var(--side-line); }
/* A long name wraps onto a second line; it is never cut short with an ellipsis. */
.side-foot .who { line-height: 1.25; font-size: var(--text-md); min-width: 0; overflow-wrap: anywhere; }
.side-foot .who b { color: var(--on-dark); font-weight: var(--w-medium); display: block; }
.account-trigger { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; background: transparent; color: var(--side-text); border: 0; border-radius: var(--radius-md); font: inherit; cursor: pointer; text-align: left; }
.account-trigger:hover { background: var(--side-2); }
.account-chevron { margin-left: auto; display: flex; transition: transform var(--slow) var(--ease); }
.account-chevron svg { width: 16px; height: 16px; }
.account-trigger[aria-expanded=true] .account-chevron { transform: rotate(180deg); }
.account-menu { display: grid; grid-template-rows: 0fr; opacity: 0; width: 100%; transition: grid-template-rows var(--slow) var(--ease), opacity var(--slow) var(--ease); }
.account-menu-body { min-height: 0; overflow: hidden; }
.side-foot[data-account-open] .account-menu { grid-template-rows: 1fr; opacity: 1; }
.side-foot[data-account-open] .account-menu-body { max-height: min(360px, 45dvh); overflow-y: auto; overscroll-behavior: contain; }
.account-menu nav { display: grid; }
.account-menu nav a, .account-signout { display: flex; gap: var(--space-2); align-items: center; padding: 10px var(--space-2); border-radius: var(--radius-md); font: inherit; font-size: var(--text-md); color: var(--side-text); text-decoration: none; }
.account-menu svg { width: 17px; height: 17px; flex: none; }
.account-menu nav a:hover, .account-signout:hover { background: var(--side-2); color: var(--on-dark); text-decoration: none; }
.account-signout { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
.account-switch { padding: 10px var(--space-2); display: grid; gap: var(--space-2); border-block: 1px solid var(--side-mark); }
.account-switch label { font-size: var(--text-md); font-weight: var(--w-medium); }
.account-switch select { width: 100%; min-width: 0; background-color: var(--side-2); color: var(--on-dark); border-color: var(--side-mark); }

/* The header beside the sidebar: the company, then where this page is. */
.site-header { display: flex; align-items: center; gap: var(--space-6); padding: var(--space-4) 28px; min-height: 72px; background: var(--surface); border-bottom: 1px solid var(--border); }
.site-header .brand { color: var(--text); padding: 0; font-size: 1.35rem; text-decoration: none; }
.site-header > .btn { margin-left: auto; }
.header-company { font-weight: var(--w-medium); min-width: 0; overflow-wrap: anywhere; }
.app-header .header-company { padding-right: var(--space-4); border-right: 1px solid var(--border); }
.app-header { min-height: 56px; padding: var(--space-3) 36px; gap: var(--space-4); }
.frame > .site-header { grid-column: 2; grid-row: 1; position: sticky; top: 0; z-index: 35; }
.app-header .crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; min-width: 0; font-size: var(--text-md); font-weight: var(--w-medium); letter-spacing: normal; text-transform: none; overflow-wrap: anywhere; color: var(--text-2); }
.app-header .crumbs a { color: var(--text-2); }
.app-header .crumbs a:hover { color: var(--text); text-decoration: none; }
.app-header .crumbs .sep { display: flex; color: var(--text-3); }
.app-header .crumbs .sep svg { width: 14px; height: 14px; }
.app-header .crumbs [aria-current] { color: var(--text); }
.mobile-brand { display: none; }
/* Three icons in a pill; the cells are a fixed width so the thumb lands exactly under the chosen one in any container. */
.theme-switch { position: relative; display: inline-grid; grid-template-columns: repeat(3, 34px); margin-left: auto; flex: none; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface-3); }
/* The thumb takes its place from the stored choice on <html>, which the head
   script sets before the first paint, so a page opens with the thumb already
   in place. It moves only while a change is animating (html.theme-changing),
   never on load. */
.theme-switch-thumb { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 3px; width: 34px; border-radius: var(--radius-full); background: var(--text); }
html.theme-changing, html.theme-changing *, html.theme-changing *::before, html.theme-changing *::after {
  transition: background-color var(--theme-move) var(--ease), color var(--theme-move) var(--ease), border-color var(--theme-move) var(--ease), outline-color var(--theme-move) var(--ease), fill var(--theme-move) var(--ease), stroke var(--theme-move) var(--ease), box-shadow var(--theme-move) var(--ease);
}
html.theme-changing .theme-switch-thumb { transition: transform var(--theme-move) var(--ease), background-color var(--theme-move) var(--ease); }
html[data-theme="light"] .theme-switch-thumb { transform: translateX(100%); }
html[data-theme="dark"] .theme-switch-thumb { transform: translateX(200%); }
.theme-switch label { position: relative; z-index: 1; display: grid; place-items: center; height: 28px; border-radius: var(--radius-full); color: var(--text-2); cursor: pointer; transition: color var(--fast) var(--ease); }
.theme-switch label svg { width: 16px; height: 16px; }
.theme-switch label:hover { color: var(--text); }
.theme-switch label:has(input:checked) { color: var(--surface); }
.theme-switch label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.theme-switch input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.header-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
.header-end .theme-switch { margin-left: 0; }

.frame > .main { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; min-width: 0; }
.main > .page { width: 100%; flex: 1; }
.page { max-width: 1180px; margin: 0 auto; padding: 30px 36px 80px; }
/* The footer is its own place: the sidebar's ink one step lighter, under a
   yellow edge, so the page visibly ends and the chrome takes over. Its text
   tokens are the sidebar's, so it reads as part of the same dark chrome. */
.site-footer { padding: var(--space-10) 0; background: var(--side-3); color: var(--side-text); font-size: var(--text-md); border-top: 3px solid var(--accent-on-dark); }
.footer-inner { max-width: 1180px; margin: 0 auto; padding: 0 36px; display: grid; gap: var(--space-8); }
/* The brand row: the glasses at the size the sidebar gives them, and the tagline in the accent. */
.footer-top { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding-bottom: var(--space-6); border-bottom: 1px solid var(--side-mark); }
.footer-mark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--on-dark); font-size: var(--text-2xl); font-weight: var(--w-bold); letter-spacing: -.045em; text-decoration: none; }
.footer-mark:hover { color: var(--on-dark); text-decoration: none; }
.footer-emoji { font-size: 2.6rem; line-height: 1; }
.footer-statement { margin: 0 0 0 auto; font-size: var(--text-xl); font-weight: var(--w-medium); letter-spacing: var(--track-tight); color: var(--accent-on-dark); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(10rem, .6fr) minmax(0, 1fr); gap: var(--space-8) var(--space-10); align-items: start; }
.footer-grid > * { min-width: 0; }
.footer-about { margin: 0; max-width: 36em; color: var(--on-dark); font-size: var(--text-lg); font-weight: var(--w-medium); letter-spacing: var(--track-tight); line-height: 1.4; }
.footer-principles { margin: var(--space-4) 0 0; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--accent-on-dark); list-style: none; display: grid; gap: var(--space-2); max-width: 40em; color: var(--paper-200); line-height: 1.45; }
.site-footer .label { color: var(--side-text); }
.footer-links { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: grid; gap: 2px; }
.footer-links a { display: inline-flex; align-items: center; gap: var(--space-2); padding: 5px 0; color: var(--paper-200); font-weight: var(--w-regular); line-height: 1.35; overflow-wrap: anywhere; }
.footer-links svg { width: 16px; height: 16px; flex: none; color: var(--side-text); }
.footer-links a:hover { color: var(--accent-on-dark); text-decoration: none; }
.footer-links a:hover svg { color: var(--accent-on-dark); }
/* Where else Rays is: one tile per network, drawn from the icon set. */
.footer-marks { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer-marks a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--radius-md); background: var(--side-2); border: 1px solid var(--side-mark); color: var(--paper-200); transition: background var(--fast) var(--ease), color var(--fast) var(--ease), border-color var(--fast) var(--ease); }
.footer-marks a:hover { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--side); }
.footer-marks svg { width: 18px; height: 18px; }
.footer-note { margin: 0; padding-top: var(--space-5); border-top: 1px solid var(--side-mark); color: var(--side-text); }
.site-footer :where(a):focus-visible { outline-color: var(--focus-on-dark); }

/* ---------- headers ---------- */

.head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-6); }
.head-title { display: flex; gap: var(--space-4); align-items: center; }
.eyebrow { font-size: var(--text-sm); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--accent-text); margin-bottom: var(--space-1); }
.eyebrow a { color: inherit; display: inline-flex; align-items: center; gap: var(--space-1); }
.eyebrow svg { width: 13px; height: 13px; }
.eyebrow-mark { font-size: 1.6em; vertical-align: -0.35em; }
/* A breadcrumb in the eyebrow: the category, the parent (a link), this page. */
.crumbs { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.crumbs .sep { color: var(--text-3); }
.crumbs [aria-current] { color: var(--text-2); }
.sub { color: var(--text-2); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.sub .dot::before, .separator { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: currentColor; color: var(--text-3); vertical-align: middle; flex: none; }
.sub .dot::before { margin-right: 14px; }
.separator { margin: 0 .5em; }
.head-side { text-align: right; }
.head-side .track { margin-left: auto; }
.head-side .stage { font-size: var(--text-lg); }
.head-side .ref { margin-top: var(--space-2); display: inline-flex; }

/* ---------- cards and grids ---------- */

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.card-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--pad-y) var(--pad-x); border-bottom: 1px solid var(--border-soft); }
/* The heading sits left; the one thing that follows it (a count, a link, an icon button) sits at the right edge. */
.card-head > h2 + *, .card-head > h3 + * { margin-left: auto; }
.card-head .muted { font-size: var(--text-md); }
.card-body { padding: var(--space-4) var(--pad-x); }
.card-body > p { margin: 0; }
.card-body > p + p { margin-top: var(--space-2); }
.stack > * + * { margin-top: var(--space-4); }
.grid-2 { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.grid-halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.section { margin-top: var(--space-8); }
.section > h3 { margin-bottom: 10px; }
/* An empty state: what will appear here, and how. */
.empty { color: var(--text-2); padding: var(--space-4) var(--pad-x); margin: 0; }
.empty.left, .card-body .empty { padding: 0; }
.card > .empty + .empty { padding-top: 0; }
.card-body > p + .empty { margin-top: var(--space-3); }
.card-body > p + .row { margin-top: var(--space-3); }

/* Home responds to the space beside the sidebar, including when it is collapsed. */
.home-content { container-type: inline-size; }
.home-overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.home-overview .card-head { flex-wrap: wrap; }
@container (min-width: 840px) {
  .home-overview { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
}

/* ---------- what a round expects in money ---------- */

/* One or two plain sentences under the round's header: the company's estimates
   against the target, and how many investors the target takes. */
.head:has(+ .round-amounts) { margin-bottom: var(--space-3); }
.round-amounts { display: grid; gap: var(--space-1); margin: 0 0 var(--space-5); font-size: var(--text-md); color: var(--text-2); }
.round-amounts p { margin: 0; overflow-wrap: anywhere; }
.round-amounts p:first-child { color: var(--text-strong); }
.round-amounts b { color: var(--text); font-weight: var(--w-medium); }

/* ---------- where a round stands in time ---------- */

.timeline-bar { margin: var(--space-1) 0 var(--space-5); container-type: inline-size; }
.timeline-bar .ends { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-md); color: var(--text-2); margin-bottom: 7px; }
.round-time { height: 4px; border-radius: var(--radius-full); background: var(--border-soft); overflow: hidden; }
.round-time > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.timeline-bar .caption { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: var(--text-sm); color: var(--text-2); }
/* Today is a knob where the elapsed time ends. */
.round-track { position: relative; }
.round-today { position: absolute; top: 50%; left: var(--today); width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--bg); }
/* The plan's markers, one row each, earliest first: a bar over the days it
   covers, on the same scale as the time bar above, and under it its dates and
   words, starting where the bar starts. The space before the words is the
   space before the bar, and it is the only part that gives way: words that
   would run past the right edge move left only as far as they must, and wrap
   when they are wider than the whole bar. */
.round-marks { list-style: none; display: grid; gap: var(--space-2); padding: 0; margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--text-2); }
.round-mark .bar { display: block; margin-left: min(var(--at), calc(100% - 6px)); width: max(6px, var(--span)); height: 6px; border-radius: var(--radius-full); background: var(--text-3); }
.round-mark .words { display: flex; margin-top: 3px; }
.round-mark .words::before { content: ""; flex: 0 1 var(--at); }
.round-mark .what { flex: 0 0 auto; max-width: 100%; overflow-wrap: anywhere; }
/* A marker with no place on the bar is words only. One that falls after the
   target close sits at the right, where later is. */
.round-mark.words .words { margin-top: 0; }
.round-mark.words .words::before { content: none; }
.round-mark.words.late .words { justify-content: flex-end; }
.round-mark .outside { color: var(--text-3); }
.round-mark time { font-weight: var(--w-medium); color: var(--text-strong); margin-right: var(--space-1); }
.round-mark.now .bar { background: var(--accent); }
.round-mark.now .what { color: var(--text-strong); }
.round-mark .badge.now { margin-left: var(--space-1); padding: 0 6px; font-size: var(--text-xs); background: var(--accent-soft); color: var(--accent-text); }
.round-mark.past .bar { background: var(--border-strong); }
.round-mark.past time { color: inherit; font-weight: var(--w-regular); }

/* ---------- a round's plan ---------- */

.round-plan, .round-edit-card, .company-story { margin-bottom: var(--space-4); }
/* The company's story (templates/company.html): the short facts in one line, then each topic's label beside its prose, folded like the plan's narrative. */
.story-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.story-facts li { min-width: 0; overflow-wrap: anywhere; }
.story-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-3) var(--space-5); margin: 0; }
.story-list dt { color: var(--text-2); font-size: var(--text-md); padding-top: 2px; }
.story-list dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.story-list dd .note-body > :first-child { margin-top: 0; }
.story-list dd .note-body > :last-child { margin-bottom: 0; }
.card-body > .story-missing { margin-top: var(--space-4); }
.story-topics.long:not(:has(.plan-more[open])) .story-list { max-height: 12em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent); mask-image: linear-gradient(to bottom, black 60%, transparent); }
/* The playbook folds as a whole: its sections, then its groups. */
.company-playbook .story-topics.long:not(:has(.plan-more[open])) .story-list { max-height: none; -webkit-mask-image: none; mask-image: none; }
.company-playbook .story-topics.long:not(:has(.plan-more[open])) .playbook-body { max-height: 16em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent); mask-image: linear-gradient(to bottom, black 60%, transparent); }
.card-body > .playbook-rule { margin: 0 0 var(--space-4); }
.playbook-groups-heading { font-size: var(--text-md); margin: var(--space-5) 0 var(--space-3); }
.playbook-groups { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-4); }
.playbook-group-name { margin-bottom: var(--space-2); overflow-wrap: anywhere; }
.playbook-answers { margin: 0; padding-left: var(--space-5); }
.plan-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-5); margin: 0; }
.plan-facts dt { color: var(--text-2); font-size: var(--text-md); }
.plan-facts dd { margin: 0; overflow-wrap: anywhere; }
.plan-facts + .plan-narrative { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border-soft); }
.plan-narrative { overflow-wrap: anywhere; }
/* Folded to a few lines until asked for. The toggle is a native disclosure
   with nothing inside it, so opening it needs no script. */
.plan-narrative .note-body > :first-child { margin-top: 0; }
.plan-narrative.long:not(:has(.plan-more[open])) .note-body { max-height: 8.6em; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent); mask-image: linear-gradient(to bottom, black 60%, transparent); }
.plan-more { margin-top: var(--space-2); }
.plan-more > summary { cursor: pointer; font-size: var(--text-md); font-weight: var(--w-medium); color: var(--link); }
.plan-more[open] .closed, .plan-more:not([open]) .opened { display: none; }
.round-edit .field > .muted { font-weight: var(--w-regular); }
/* Some fields carry a line of help under them, so a row lines up along the top. */
.round-edit .form-row.two, .round-edit .form-row.marker-row { align-items: flex-start; }
.round-markers > .muted { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.marker-row + .marker-row { margin-top: var(--space-2); }

/* The chevron progress bar with its hatched fill is a signature of the round
   pages and stays; its colours come from the stage tone table. */
.round-progress-bar { --progress-outline: var(--border-strong); --chevron-width: 10px; display: flex; margin-top: var(--space-4); border: 1px solid var(--progress-outline); border-radius: var(--radius-full); overflow: hidden; }
.round-steps { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; padding: 0; margin: 7px 0 10px; }
.round-steps > li { padding: 0 5px; text-align: center; }
.round-step { --step-color: var(--tone-none); --step-soft: var(--tone-none-soft); min-width: 0; }
.round-step.opened.reached { --step-color: var(--tone-opened); --step-soft: var(--tone-opened-soft); }
.round-step.conversations.reached { --step-color: var(--tone-conversations); --step-soft: var(--tone-conversations-soft); }
.round-step.diligence.reached { --step-color: var(--tone-diligence); --step-soft: var(--tone-diligence-soft); }
.round-step.commitments.reached { --step-color: var(--tone-commitments); --step-soft: var(--tone-commitments-soft); }
.round-step.closed.reached { --step-color: var(--tone-closed); --step-soft: var(--tone-closed-soft); }
.step-band { position: relative; z-index: var(--step-order); display: flex; flex: 1; align-items: center; justify-content: center; height: 38px; padding: 0 4px 0 10px; color: var(--step-color); font-size: var(--text-sm); font-weight: var(--w-medium); text-align: center; }
/* One continuous fill keeps the texture seamless across each chevron. */
.step-band::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--step-soft); }
.step-band:not(:last-child)::before { right: calc(-1 * var(--chevron-width)); clip-path: polygon(0 0, calc(100% - var(--chevron-width)) 0, 100% 50%, calc(100% - var(--chevron-width)) 100%, 0 100%); }
.step-divider { position: absolute; z-index: 1; left: 100%; top: 0; width: var(--chevron-width); height: 100%; stroke: var(--progress-outline); stroke-width: 1px; overflow: visible; }
.step-label { position: relative; z-index: 1; }
.step-band:first-child { border-radius: var(--radius-full) 0 0 var(--radius-full); }
.step-band:last-child { border-radius: 0 var(--radius-full) var(--radius-full) 0; }
.step-band.reached::before { background-image: repeating-linear-gradient(125deg, transparent 0 5px, var(--hatch) 5px 7px); }
.step-band.current::before { background-color: color-mix(in srgb, var(--step-soft) 94%, var(--step-color)); }
.step-band.current { color: color-mix(in srgb, var(--step-color) 80%, black); }
.round-summary { margin-bottom: var(--space-6); }
/* The visible labels are inside the band; the list retains their accessible names. */
.round-step > strong { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.step-detail { display: block; font-size: var(--text-xs); color: var(--text-2); margin-top: 2px; }
.progress-note { font-size: var(--text-sm); color: var(--text-2); }
.progress-note strong { color: var(--text-strong); font-weight: var(--w-medium); }
.round-milestone { display: flex; align-items: flex-start; gap: 7px; margin-top: var(--space-3); padding: var(--space-2) 10px; border-left: 3px solid var(--positive); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--positive-soft); color: var(--positive-text); font-size: var(--text-md); }
.round-milestone svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.round-milestone b { font-weight: var(--w-medium); margin-right: 5px; }
/* Each band carries its long label and a short one; only one shows, and a
   narrow container gets the short one rather than a hyphenated long one. */
.step-short { display: none; }
@container (max-width: 430px) {
  .step-band { height: 44px; font-size: var(--text-xs); padding-left: 6px; padding-right: 1px; }
  .round-progress-bar { --chevron-width: 6px; }
  .round-steps > li { padding: 0 2px; }
  .step-detail { font-size: var(--text-xs); }
  .step-long { display: none; }
  .step-short { display: inline; }
}

/* ---------- stats ---------- */

/* Figures at the top of a page or a card: one tile style everywhere (Home,
   the round page, the opportunity page). Tiles sit inside a card. */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); padding: var(--pad-y) var(--pad-x); }
.tiles.bare { padding: var(--space-1) 0 var(--space-4); }
.tile { display: block; color: inherit; padding: var(--space-3) 14px; border-radius: var(--radius-md); background: var(--surface-3); min-width: 0; transition: background var(--fast) var(--ease); }
a.tile:hover { text-decoration: none; background: var(--border-soft); }
.tile .label { font-size: var(--text-sm); font-weight: var(--w-medium); text-transform: none; letter-spacing: 0; color: var(--text-2); }
.tile .value { font-size: 1.5rem; font-weight: var(--w-bold); letter-spacing: var(--track-tight); font-variant-numeric: tabular-nums; margin-top: 2px; }
.tile .value.text { font-size: var(--text-base); font-weight: var(--w-medium); letter-spacing: 0; margin-top: var(--space-1); }
.tile .value.bad { color: var(--negative); }
.tile .hint { font-size: var(--text-sm); color: var(--text-2); margin-top: 2px; }
.round-summary .tile { color: inherit; text-decoration: none; display: block; }
/* Who a list can reach (lists.html, list.html): a tile per column, the one
   showing marked; a table of counts per list, numbers to the right. */
.tiles.reach { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.tiles.reach .tile[aria-current=true] { background: var(--accent-soft); }
/* A list's addresses (list.html): one block that wraps at any width and scrolls past twelve lines. */
.addresses .card-head .btn { margin-left: auto; flex: none; }
.addresses pre.address-list { margin: var(--space-3) 0 0; padding: var(--space-3); max-height: 12em; overflow-y: auto; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--surface-3); border-radius: var(--radius-md); font-size: var(--text-md); line-height: 1.6; }
.addresses pre.address-list code { font-family: inherit; font-size: inherit; background: none; padding: 0; }
.addresses .card-body > .story-list { margin-top: var(--space-3); }
.addresses .agent-copy-selection { position: absolute; left: -10000px; width: 1px; height: 1px; padding: 0; }
.list th.num, .list td.num { text-align: right; font-variant-numeric: tabular-nums; }
.reach-table th.num { white-space: normal; min-width: 64px; }
.reach-table + .reach-table { margin-top: var(--space-3); border-top: 1px solid var(--border); }
.reach-table tr.everyone td { background: var(--surface-2); font-weight: var(--w-medium); }
/* The Money card's figures: amounts, not counts, so a touch smaller. The commitment
   in the Investors table is a small mark before its amount. */
.money-tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }  /* four to seven tiles share one row */
.money-tiles .value { font-size: 1.25rem; }
.commitment { display: inline-block; font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2); }
.commitment.hard_committed, .commitment.allocated, .commitment.signed, .commitment.funded { color: var(--positive-text); }
.commitment.withdrawn, .commitment.lapsed { color: var(--negative); }
/* The closes and the receipts under the Money tiles; a reversal reads as struck out. */
#money table.list { margin-top: var(--space-2); }
#money .discrepancy { color: var(--negative); }
#receipts tr.reversal td[data-label="Amount"] { text-decoration: line-through; text-decoration-color: var(--negative); }
#receipts tr.reversal .commitment { text-decoration: none; }
.round-summary .tile:hover, .round-summary .tile[aria-current=true] { background: var(--accent-soft); }
.round-summary .tile:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }

/* What needs the person: one list of linked rows. */
.attention .title a { color: var(--text); font-weight: var(--w-medium); }
.attention .n { min-width: 30px; height: 30px; padding: 0 var(--space-2); border-radius: var(--radius-md); display: grid; place-items: center; font-weight: var(--w-bold); font-variant-numeric: tabular-nums; background: var(--accent-soft); color: var(--accent-text); flex: none; }
.attention .n.bad { background: var(--negative-soft); color: var(--negative); }
.attention .n.quiet { background: var(--border-soft); color: var(--text-strong); }
.attention .n.sun { background: var(--accent-soft); color: var(--accent-text); }
.attention .n svg { width: 16px; height: 16px; }
/* A link that reads as text until it is pointed at, for cells that are already dense. */
.list a.plain { color: inherit; }
.list a.plain:hover { color: var(--link); text-decoration: none; }

/* Home: each active round, and the rest. */
.round-card .card-head h2 a { color: var(--text); font-size: var(--text-lg); }
.round-card .card-head { flex-wrap: wrap; }
.round-card .round-action { margin-left: auto; }
.round-heading { flex: 1; min-width: 0; }
.round-card-actions { display: flex; justify-content: flex-end; }
.round-stage-summary { container-type: inline-size; margin-bottom: var(--space-4); }
.round-stage-summary .round-progress-bar { margin-top: 0; }
.round-section-name { font-size: var(--text-md); color: var(--text-2); }
.previous-round-form > summary { list-style: none; cursor: pointer; }
.previous-round-form > summary::-webkit-details-marker { display: none; }
.previous-round-form { margin: var(--space-4) var(--pad-x); }
.previous-round-form .form-grid { padding: var(--space-4) 0 0; }
.rounds-overview .previous-rounds { border-color: var(--accent-soft-2); }
.rounds-overview .previous-rounds > .card-head { background: var(--accent-soft); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.rounds-overview .head .sub { max-width: 640px; }

/* A row a link pointed at (an activity or a task) is lit until the next click. */
li[id^="activity-"], li[id^="task-"] { scroll-margin-top: 60px; }
li[id^="activity-"]:target, li[id^="task-"]:target { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- signals ---------- */

.signals { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.signals.section { margin-bottom: 0; }
.signal { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--radius-md); background: var(--accent-soft); border: 1px solid var(--accent-soft-2); }
.signal svg { width: 18px; height: 18px; color: var(--accent-text); flex: none; margin-top: 1px; }
.signal.high { background: var(--negative-soft); border-color: var(--negative-line); }
.signal.high svg { color: var(--negative); }
.signal.low { background: var(--surface); border-color: var(--border); }
.signal.low svg { color: var(--text-3); }
.signal b { font-weight: var(--w-medium); }
.signal .why { color: var(--text-2); }

/* ---------- tables ---------- */

.card:has(> table.list) { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; }
.list th { white-space: nowrap; text-align: left; font-size: var(--text-sm); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-2); padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.list th:first-child { border-top-left-radius: var(--radius-lg); padding-left: var(--pad-x); }
.list th:last-child { border-top-right-radius: var(--radius-lg); padding-right: var(--pad-x); }
.list td { padding: 13px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.list td:first-child { padding-left: var(--pad-x); }
.list td:last-child { padding-right: var(--pad-x); }
.list tr:last-child td { border-bottom: 0; }
.list tbody tr { transition: background var(--fast) var(--ease); }
.list tbody tr:hover { background: var(--surface-2); }
.list tr.dim td { color: var(--text-2); }
.list tr.dim .name { color: var(--text-strong); }
.list .name { font-weight: var(--w-medium); color: var(--text); }
.list .name:hover { color: var(--link); }
.list .who { display: flex; align-items: center; gap: 11px; }
.list .clip { max-width: 300px; min-width: 150px; }
.list .clip .text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list .next { font-size: var(--text-md); min-width: 96px; }
tr.stale td:first-child { box-shadow: inset 3px 0 0 var(--accent); }
/* A list row that opens a page from a click anywhere in it (rays.js). */
.list tr[data-href] { cursor: pointer; }
.list tbody tr[data-href]:hover { background: var(--accent-soft); }
.list tr[data-href]:hover .name { text-decoration: none; }
/* Engaged and Not yet engaged are two tables, one under the other; fixed
   column widths keep their columns in line instead of each table sizing
   itself to its own rows. Below 700px the rows become cards, so the
   widths no longer apply. */
@media (min-width: 701px) {
  .contact-group table.list { table-layout: fixed; }
  .contact-group table.list th.col-name { width: auto; }
  .contact-group table.list th.col-where { width: 32%; }
  .contact-group table.list th.col-count { width: 15%; }
  .contact-group table.list th.col-when { width: 16%; }
  .contact-group table.list th.col-ref { width: 120px; }
}
/* The Investors table on the round page has six columns below 1280px. In a
   card narrower than they need, each column gets a share of the width and
   its contents wrap, so the table is never scrolled sideways. Below 700px
   the rows are cards and none of this applies. */
#investors { container-type: inline-size; }
@container (max-width: 800px) {
  @media (min-width: 701px) {
    #investors table.list { table-layout: fixed; }
    #investors .list th { white-space: normal; }
    #investors .list :is(th, td):not(:first-child) { padding-left: 8px; }
    #investors .list :is(th, td):not(:last-child) { padding-right: 8px; }
    #investors .list th:nth-child(1) { width: 25%; }
    #investors .list th:nth-child(2) { width: 19%; }
    #investors .list th:nth-child(3) { width: 12%; }
    #investors .list th:nth-child(4) { width: 12%; }
    #investors .list th:nth-child(6) { width: 18%; }
    #investors .list th:nth-child(7) { width: 14%; }
    #investors .list td { overflow-wrap: anywhere; white-space: normal; }
    #investors .list :is(.clip, .next) { min-width: 0; }
    #investors .track { width: 100%; max-width: 138px; }
  }
}
.contact-group + .contact-group { margin-top: var(--space-6); }
.contact-group-description { margin: 0; padding: var(--space-3) var(--pad-x); font-size: var(--text-md); }
.contact-group .card-head { flex-wrap: wrap; }

/* ---------- small parts ---------- */

.avatar {
  --h: 220; width: 32px; height: 32px; border-radius: 50%; flex: none; display: inline-grid; place-items: center;
  font-size: var(--text-xs); font-weight: var(--w-bold); color: hsl(var(--h) 45% 30%); background: hsl(var(--h) 70% 92%);
  border: 1px solid hsl(var(--h) 50% 84%); position: relative; overflow: hidden;
}
.avatar.sm { width: 24px; height: 24px; font-size: 9px; }
.avatar.lg { width: 52px; height: 52px; font-size: var(--text-lg); }
.avatar.firm { border-radius: 20%; }
.avatar.me { --h: 34; }
.avatar-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; visibility: hidden; }
.avatar-image[data-avatar-ready] { visibility: visible; }
.contact .grow { min-width: 0; overflow-wrap: anywhere; }
.contact .added { font-size: var(--text-md); color: var(--text-2); }
.card > .added { padding: 0 var(--pad-x) var(--space-3); margin: 0; font-size: var(--text-md); color: var(--text-2); }

/* Badges come from the tone map; a template picks a tone, never a colour. */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); font-weight: var(--w-medium); padding: 2px 9px; border-radius: var(--radius-full); background: var(--border-soft); color: var(--text-strong); white-space: nowrap; }
.badge.active, .badge.done, .badge.closed { background: var(--positive-soft); color: var(--positive); }
.badge.committed, .badge.agent { background: var(--agent-soft); color: var(--agent); }
.badge.revisit_later, .badge.angel { background: var(--accent-soft); color: var(--accent-text); }
.badge.passed, .badge.withdrawn, .badge.cancelled, .badge.abandoned { background: var(--border-soft); color: var(--text-2); }
.badge.overdue, .badge.bad { background: var(--negative-soft); color: var(--negative); }
.badge.paused, .badge.planning { background: var(--border-soft); color: var(--text-strong); }
.badge.wide { min-width: 64px; justify-content: center; }
.badge[title] { cursor: default; user-select: none; }
a.badge[title] { cursor: pointer; }
.badge svg { width: 12px; height: 12px; }
/* Tags and permission names are square-cornered, so status pills stand out. */
.note-tags .badge, .cap { border-radius: var(--radius-sm); }

.prio { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); margin-right: 2px; vertical-align: 1px; }
.prio.high { background: var(--negative); box-shadow: 0 0 0 3px var(--negative-soft); }
.prio.medium { background: var(--accent); }
.prio.low { background: var(--ink-200); }
.priority-line { font-size: var(--text-md); color: var(--text-2); }

/* A short refcode is read aloud and typed back, so it must be legible: B and 8,
   S and 5 are all in the alphabet. */
.cap { font-size: var(--text-sm); color: var(--text-strong); background: var(--surface-3); border: 1px solid var(--border); padding: 0 6px; }
.caps { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.ref { font: var(--w-medium) var(--text-md) var(--mono); color: var(--text-strong); background: var(--border-soft); border: 1px solid var(--border); padding: 1px 7px; border-radius: var(--radius-sm); letter-spacing: .08em; }
/* The refcode chip is a button: same look, same size whether it shows
   the six characters or "Copied", so nothing around it moves. */
button.ref { cursor: pointer; padding: 2px 5px 2px 7px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center; line-height: 1.4; transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
button.ref .ref-label { position: relative; top: 1px; }
button.ref svg { width: 13px; height: 13px; }
button.ref .copy-icon, button.ref .copied-icon { display: flex; }
button.ref .copy-icon { opacity: .5; transition: opacity var(--fast) var(--ease); }
button.ref:hover .copy-icon, button.ref:focus-visible .copy-icon { opacity: 1; }
button.ref .copied-icon, button.ref.copied .copy-icon { display: none; }
button.ref.copied .copied-icon { display: flex; }
button.ref:hover { background: var(--border); color: var(--text); }
button.ref.copied { background: var(--positive-soft); color: var(--positive); border-color: var(--positive-line); }
.ref-full { font: var(--w-medium) var(--text-md) var(--mono); margin-left: 6px; letter-spacing: .08em; }

.track { display: flex; gap: 3px; margin-top: 7px; width: 138px; }
.track span { flex: 1; height: 5px; border-radius: var(--radius-full); background: var(--border); }
.track span.on { background: var(--accent); }
.track.dim span.on { background: var(--ink-200); }
.stage { font-weight: var(--w-medium); text-transform: capitalize; }

/* A choice among a few: links (.on) or radio inputs (:checked) share one selected look. */
.pill-nav, .segmented { display: inline-flex; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 3px; gap: 2px; }
/* The round switcher grows with the number of rounds: it scrolls inside the page at every width, never past its edge. */
.pill-nav { overflow-x: auto; max-width: 100%; }
.pill-nav a { flex: none; }
.pill-nav a, .segmented > a, .segmented > label {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 5px var(--space-3); border-radius: var(--radius-sm);
  color: var(--text-strong); font-weight: var(--w-medium); font-size: var(--text-md); cursor: pointer; white-space: nowrap; position: relative;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.pill-nav a:hover, .segmented > a:hover, .segmented > label:hover { text-decoration: none; background: var(--border-soft); }
.pill-nav a.on, .segmented > a.on, .segmented > label:has(input:checked) { background: var(--text); color: var(--surface); }
.pill-nav .n, .segmented .n { color: var(--text-3); margin-left: 2px; font-weight: var(--w-regular); }
.pill-nav a.on .n, .segmented > a.on .n { color: var(--ink-200); }
.segmented > label > input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.segmented > label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.segmented > label:has(input[value=high]:checked) { background: var(--negative); }
.segmented > label:has(input[value=low]:checked) { background: var(--text-2); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- timeline ---------- */

.timeline { list-style: none; margin: 0; padding: var(--space-1) 0; }
.timeline li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: var(--space-3); padding: var(--space-3) var(--pad-x); position: relative; }
.timeline .entry { min-width: 0; }
.timeline .aside { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); }
.timeline .aside .marks { display: inline-flex; gap: var(--space-2); align-items: center; }
.timeline .aside .round-name { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; }
.timeline .aside .round-name svg { width: 13px; height: 13px; }
.timeline li + li { border-top: 1px solid var(--border-soft); }
.timeline .icon { width: 34px; height: 34px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--kind-activity-soft); color: var(--kind-activity); }
.timeline .icon svg { width: 17px; height: 17px; }
.timeline .icon.email, .timeline .icon.message { background: var(--info-soft); color: var(--info); }
.timeline .icon.call { background: var(--kind-positive-soft); color: var(--kind-positive); }
.timeline .meta { font-size: var(--text-md); color: var(--text-2); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.timeline .meta .kind { color: var(--text-strong); text-transform: capitalize; font-weight: var(--w-medium); }
.timeline .summary { margin: 3px 0 6px; }
.timeline .detail { font-size: var(--text-md); color: var(--text-2); }
.timeline .activity-remove { margin-top: var(--space-2); font-size: var(--text-sm); }
.timeline .activity-remove > summary { display: inline-block; cursor: pointer; color: var(--text-2); }
.timeline .activity-remove > summary:hover { color: var(--negative); }
.timeline .activity-remove[open] > summary { margin-bottom: var(--space-2); }
.timeline .activity-remove .muted { margin: var(--space-2) 0 0; }
.evidence { display: flex; gap: 6px; flex-wrap: wrap; }
.evidence .badge { font-weight: var(--w-regular); }

/* ---------- lists inside cards ---------- */

.rows { list-style: none; margin: 0; padding: 0; }
.rows > li { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--pad-x); }
.rows > li + li { border-top: 1px solid var(--border-soft); }
/* The line under a list of rows that says how many are shown and links to the
   rest. It lines up with the rows, which pad themselves; a card has no padding. */
.rows-more { margin: 0; padding: var(--space-3) var(--pad-x); border-top: 1px solid var(--border-soft); font-size: var(--text-md); color: var(--text-2); }
.rows > li > svg { width: 18px; height: 18px; color: var(--text-2); flex: none; margin-top: 2px; }
.rows .grow { flex: 1; min-width: 0; }
.rows .why { font-size: var(--text-md); color: var(--text-strong); margin-top: var(--space-1); }
.rows li.overdue .title { color: var(--negative); }
.rows li.done .title { text-decoration: line-through; color: var(--text-2); }
/* A link to a record reads as its name; pointing at it shows the accent. */
.rows a:not(.btn, .badge, .row-link), .timeline a:not(.btn, .badge, .row-link), .intel a { color: var(--text); font-weight: var(--w-medium); }
.rows a:not(.btn, .badge, .row-link):hover, .timeline a:not(.btn, .badge, .row-link):hover, .intel a:hover { color: var(--link); text-decoration: none; }
.due-now { color: var(--accent-text); font-weight: var(--w-medium); }
.stale-mark { color: var(--accent-text); }

/* The main link covers the row; specific links and controls stay above it. */
.clickable-row { position: relative; }
.clickable-row:hover, .clickable-row:focus-within { background: var(--accent-soft); }
.clickable-row :is(a, button, input, select, textarea, form, [data-row-ignore]) { position: relative; z-index: 2; }
.clickable-row .row-link { position: static; z-index: auto; color: inherit; font-weight: inherit; text-decoration: none; }
.row-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.row-link:focus-visible::after { outline: 2px solid var(--focus); outline-offset: -3px; border-radius: var(--radius-sm); }

.intel { display: grid; grid-template-columns: minmax(96px, 130px) 1fr; gap: 6px 14px; padding: var(--pad-y) var(--pad-x); margin: 0; }
.intel dt { color: var(--text-2); font-size: var(--text-md); }
.intel dd { margin: 0; font-weight: var(--w-medium); }
.intel dd .from { display: block; font-weight: var(--w-regular); font-size: var(--text-sm); color: var(--text-2); }
.intel.history { padding: 0; }
.intel.history dd { font-weight: var(--w-regular); color: var(--text-2); }
.intel-history { padding: 0 var(--pad-x) var(--pad-y); }
.intel-history > summary { font-size: var(--text-md); color: var(--text-2); }

/* ---------- forms ---------- */

form.inline { display: inline; }
.form-grid { display: grid; gap: 10px; padding: var(--pad-y) var(--pad-x); }
.form-grid.flush { padding-top: 0; }
/* Archive and Restore on an opportunity's page: one line of explanation and the button. */
.archive-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--pad-y) var(--pad-x); }
.archive-row .muted { flex: 1 1 24ch; }
.card > details.edit + .archive-row { border-top: 1px solid var(--border-soft); }
.form-grid > .muted { margin: 0; }
.form-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
/* A labelled field is taller than a button by its label, so a row with one lines everything up along the bottom. */
.form-row:has(> .field) { align-items: flex-end; }
.form-row > * { min-width: 0; }
.form-row > .wide { flex: 1 1 200px; }
.form-row > .push { margin-left: auto; }
label.field, div.field { display: grid; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2); }
label.field.grow { flex: 1; }
/* The two zone cards on Settings say the zone and the time or date there beside
   the heading, and under it when the two do not fit on one line. */
#user-settings > .card-head, #company-day > .card-head { flex-wrap: wrap; row-gap: var(--space-1); }
input[type=text], input[type=email], input[type=date], input[type=search], input[type=url], select, textarea {
  font: inherit; font-size: var(--text-base); color: var(--text); background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 7px 10px; min-width: 0;
}
textarea { resize: vertical; min-height: 64px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent-soft-2); outline-offset: 0; border-color: var(--accent); }
/* Selects look like the other fields: same border and height, one chevron. */
select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666a78' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center / 16px;
}
/* A date field is one click target from edge to edge (rays.js opens the picker). */
input[type=date] { cursor: pointer; }
.check { display: inline-flex; gap: 6px; align-items: center; font-size: var(--text-md); color: var(--text-strong); }

/* Buttons: secondary by default, one primary per view, the orange for the
   landing call to action and approving a capture, destructive as text. */
.btn {
  font: inherit; font-weight: var(--w-medium); font-size: var(--text-md); border-radius: var(--radius-md); padding: 7px 14px; min-height: 38px; cursor: pointer;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); display: inline-flex; align-items: center; gap: 6px;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.btn:hover { background: var(--surface-3); text-decoration: none; }
.btn.primary { background: var(--text); color: var(--surface); border-color: var(--text); }
.btn.primary:hover { background: var(--text-strong); }
.btn.sun { background: var(--accent); border-color: var(--accent-deep); color: var(--on-accent); }
.btn.sun:hover { background: var(--accent-deep); }
.btn.danger { color: var(--negative); }
.btn.danger:hover { border-color: var(--negative-line); background: var(--negative-soft); }
.btn.small { padding: 4px 10px; min-height: 0; font-size: var(--text-sm); }
.btn.big { font-size: var(--text-base); padding: var(--space-3) var(--space-5); }
.btn svg { width: 15px; height: 15px; }
/* Idle and selected are inverse colours. A cross-fade is below 4.5:1 in the middle, and the accessibility checker measures that frame. */
.btn[aria-pressed] { transition-property: border-color; }
.btn[aria-pressed=true] { background: var(--text); border-color: var(--text); color: var(--surface); }
button.busy { opacity: .6; cursor: progress; }
button.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
button.link:hover { text-decoration: none; }
/* Mark-done: a checkbox-sized square with a solid tick on hover and focus. */
.btn.done-toggle {
  width: 22px; height: 22px; padding: 0; justify-content: center; margin-top: 3px;
  border: 1.5px solid var(--text-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--positive); flex: none;
}
.done-toggle svg { width: 15px; height: 15px; flex: none; stroke-width: 2.6; }
.done-toggle .tick { display: flex; opacity: 0; transition: opacity var(--fast) var(--ease); }
.done-toggle:hover, .done-toggle:focus-visible { border-color: var(--positive); background: var(--positive-soft); }
.done-toggle:hover .tick, .done-toggle:focus-visible .tick { opacity: 1; }

.searchbar { display: flex; position: relative; }
.searchbar input { width: 280px; padding-right: 38px; }
.search-glass, .search-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 29px; height: 29px; color: var(--text-2); }
.search-glass { pointer-events: none; }
.search-clear { padding: 0; border: 0; border-radius: var(--radius-sm); background: none; cursor: pointer; }
.search-glass svg, .search-clear svg { width: 17px; height: 17px; }
.searchbar input:placeholder-shown ~ .search-clear, .searchbar input:not(:placeholder-shown) ~ .search-glass { display: none; }
.searchbar input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

.flash { max-width: 1180px; margin: var(--space-4) auto calc(-1 * var(--space-2)); padding: 0 36px; display: grid; gap: var(--space-2); }
.flash div { padding: 10px 14px; border-radius: var(--radius-md); background: var(--positive-soft); color: var(--positive-text); border: 1px solid var(--positive-line); font-weight: var(--w-medium); }
.flash .warn { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent-soft-2); }
.flash .error { background: var(--negative-soft); color: var(--negative-text); border-color: var(--negative-line); }
.flash .info { background: var(--info-soft); color: var(--info-text); border-color: var(--info-soft); }

details.edit summary { cursor: pointer; list-style: none; }
details.edit summary::-webkit-details-marker { display: none; }
details.edit[open] summary { margin-bottom: 10px; }
details.edit > summary.card-head { border: 0; }

/* Two fields side by side; below 700px they stack (the form-row rule there
   already makes text inputs full width). */
.form-row.two > .field { flex: 1 1 160px; }
fieldset.field { border: 0; padding: 0; margin: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2); }
fieldset.field .segmented { width: 100%; }
fieldset.field .segmented > label { flex: 1; justify-content: center; }

.pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: var(--space-3); }
.card .pager { margin: 0; padding: 10px var(--pad-x); border-top: 1px solid var(--border-soft); }
.pager .muted { margin-right: auto; font-size: var(--text-md); }

/* ---------- captures ---------- */

.capture { padding: var(--space-4) var(--pad-x); }
.capture + .capture { border-top: 1px solid var(--border-soft); }
.capture .question { margin-top: var(--space-3); padding: var(--space-3) 14px; background: var(--accent-soft); border-radius: var(--radius-md); border: 1px solid var(--accent-soft-2); }
.capture .question dd { overflow-wrap: anywhere; }
/* Whose records a proposal changes: the investor, the round, the teammate. */
.capture .applies { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 2px var(--space-3); margin: var(--space-2) 0 0; }
.capture .applies dt { color: var(--text-2); }
.capture .applies dd { margin: 0; }
.capture .choice { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.capture .actions { margin-top: var(--space-3); display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
/* The tile for where a proposal came from stands in for a picture, so it is
   the size of one and sits where one would. */
.capture span.timeline, .rows.settled span.timeline { padding: 0; flex: none; }
.capture .timeline .icon, .rows.settled .timeline .icon { width: 32px; height: 32px; }
/* What a proposal holds, in a waiting card and in a settled row: short facts
   and links on one wrapping line, the paragraph worth reading, and tags. A
   proposal with none of those has the sentence of what approving it records. */
.holds { display: grid; gap: var(--space-1); margin-top: var(--space-1); min-width: 0; }
.holds .facts { display: flex; flex-wrap: wrap; gap: 2px var(--space-4); font-size: var(--text-md); min-width: 0; }
.holds .facts > span { min-width: 0; overflow-wrap: anywhere; }
.holds .text { margin: 0; color: var(--text-strong); overflow-wrap: anywhere; }
.holds .note-tags { margin: 0; }
.holds .note-tags .badge { font-weight: var(--w-regular); }
.capture .said, .rows.settled .said { margin-top: var(--space-1); color: var(--text-strong); overflow-wrap: anywhere; }
/* A settled proposal: who or what it was about, what it held, where it came
   from and who settled it, and the rest behind a disclosure. The choice of
   which to show can be wider than a phone, so it moves under the heading and
   scrolls within itself. */
#settled > .card-head { flex-wrap: wrap; row-gap: var(--space-2); }
#settled .segmented { max-width: 100%; overflow-x: auto; }
#settled .segmented > a { white-space: nowrap; }
.rows.settled .title { font-weight: var(--w-medium); color: var(--text); }
/* A link to another site reads as a link, as it does in a waiting card, and not as the name of a record. */
.rows.settled .holds a, .rows.settled .held a { color: var(--link); font-weight: var(--w-regular); }
.rows.settled .holds a:hover, .rows.settled .held a:hover { text-decoration: underline; }
/* How it was settled sits at the end of the row's first line, and under the name on a phone. */
.rows.settled .row > .badge { margin-left: auto; flex: none; }
/* A long paragraph shows six lines until the row's disclosure is opened. */
.rows.settled > li:has(.held:not([open])) .holds .text { display: -webkit-box; -webkit-line-clamp: 6; -webkit-box-orient: vertical; overflow: hidden; }
.held { margin-top: var(--space-2); font-size: var(--text-md); }
.held > summary { cursor: pointer; color: var(--link); font-weight: var(--w-medium); }
.held[open] .closed, .held:not([open]) .opened { display: none; }
/* A label takes at most two fifths of the width, so a long one wraps and its value keeps room on a phone. */
.held dl { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 3px var(--space-4); margin: var(--space-2) 0 0; padding: var(--space-3) 14px; border-radius: var(--radius-md); background: var(--surface-3); }
.held dt { color: var(--text-2); overflow-wrap: anywhere; }
.held dd { margin: 0; overflow-wrap: anywhere; }
.capture .hint { font-size: var(--text-md); }
/* An unconfirmed report on the round view: visible, and visibly not a fact. */
.secondhand { color: var(--accent-text); font-size: var(--text-md); margin-top: var(--space-1); display: flex; gap: 5px; align-items: flex-start; }
.secondhand svg { width: 14px; height: 14px; flex: none; margin-top: 2px; }

/* ---------- settings ---------- */

.source-mode { margin-top: var(--space-2); }
.settings-note { padding: 0 var(--pad-x) var(--pad-y); margin: 0; font-size: var(--text-md); }

/* ---------- connection notice ---------- */

/* A bar over the top of the page, not in its flow: while a stream is retrying
   the text changes every attempt, and the page must not move under it. */
.connection {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60; min-height: 42px;
  display: flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-4);
  background: var(--sun-900); color: var(--sun-100); font-weight: var(--w-medium); text-align: center;
  box-shadow: var(--shadow-pop);
}
.connection[hidden] { display: none; }
.connection.error, .connection.failed { background: var(--red-900); color: var(--red-100); }

/* ---------- keyboard ---------- */

/* The first thing a keyboard reaches: jump past the navigation. */
.skip { position: absolute; left: var(--space-3); top: -60px; z-index: 100; background: var(--text); color: var(--surface); padding: 10px 14px; border-radius: var(--radius-md); font-weight: var(--w-medium); }
.skip:focus { top: var(--space-3); text-decoration: none; }
/* Focus must be obvious wherever it lands (WCAG 2.4.7): one ring on light
   surfaces, the yellow on the dark chrome. */
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm);
}
.side :where(a, button, select):focus-visible { outline-color: var(--focus-on-dark); }
main.page:focus { outline: none; }

/* Weight distinguishes text links; focus outlines remain visible for the keyboard. */
:where(p, .summary, dd) a { font-weight: var(--w-medium); }
:where(.line2, .why, .sub, .meta, .muted) a { color: var(--text); font-weight: var(--w-medium); }
:where(.line2, .why, .sub, .meta, .muted) a:hover { color: var(--link); text-decoration: none; }

/* ---------- agent hint dialog ---------- */

.card-head .hint-btn { width: 28px; height: 28px; padding: 0; justify-content: center; margin-left: 0; border-radius: 50%; flex: none; }
.card-head > h2 + .hint-btn { margin-left: auto; }
.card-head .hint-btn svg { width: 15px; height: 15px; }
dialog.hint { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0; width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow-y: auto; box-shadow: var(--shadow-modal); color: var(--text); background: var(--surface); }
dialog.hint::backdrop { background: var(--scrim); backdrop-filter: blur(3px); }
.hint-top { position: relative; padding: var(--space-6) 26px var(--space-4); }
.hint-top .eyebrow { padding-right: 26px; }
.hint-top form { position: absolute; top: var(--space-3); right: var(--space-3); margin: 0; }
.hint-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; color: var(--text-2); background: var(--surface-3); cursor: pointer; }
.hint-close svg { width: 16px; height: 16px; }
.hint-close:hover { color: var(--text); background: var(--border-soft); }
dialog.hint h2 { margin: var(--space-2) 0; font-size: var(--text-xl); font-weight: var(--w-bold); }
.hint-top p { margin: 0; color: var(--text-2); font-size: var(--text-md); line-height: 1.55; }
.agent-demo { margin: 0 26px; }
.demo-topline { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.demo-label { color: var(--text-2); font-size: var(--text-sm); letter-spacing: var(--track-label); text-transform: uppercase; font-weight: var(--w-medium); }
.demo-replay { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); cursor: pointer; }
.demo-replay svg { width: 18px; height: 18px; transition: transform var(--slow) var(--ease); }
.demo-replay:hover { background: var(--surface-3); color: var(--text); }
.demo-replay:hover svg { transform: rotate(-35deg); }
.demo-route { display: flex; justify-content: center; align-items: center; gap: 10px; margin: var(--space-2) 0 var(--space-5); }
.demo-node { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 9px; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-md); font-size: var(--text-sm); white-space: nowrap; transition: border-color var(--slow) var(--ease), background var(--slow) var(--ease), color var(--slow) var(--ease); }
.demo-node svg { width: 14px; height: 14px; }
.demo-node.is-active { color: var(--accent-text); background: var(--accent-soft); border-color: var(--accent-soft-2); }
.demo-node.is-complete { color: var(--positive-text); background: var(--positive-soft); border-color: var(--positive-line); }
.demo-wire { height: 2px; width: 28px; flex: 0 1 28px; min-width: 12px; position: relative; background: var(--border-strong); }
.demo-wire::after { content: ''; width: 7px; height: 7px; position: absolute; right: 0; top: -3px; border-top: 2px solid var(--border-strong); border-right: 2px solid var(--border-strong); transform: rotate(45deg); }
.demo-node.is-active + .demo-wire { background: var(--accent-deep); }
.demo-node.is-active + .demo-wire::after { border-color: var(--accent-deep); }
.demo-chat { background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.demo-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: var(--space-3) 15px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.demo-chat-head > span { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: var(--w-medium); }
.demo-chat-head svg { width: 14px; height: 14px; color: var(--accent-text); }
.demo-chat-head .demo-connection { font-size: var(--text-xs); font-weight: var(--w-regular); color: var(--positive-text); }
.demo-connection i { width: 5px; height: 5px; border-radius: 50%; background: var(--positive); }
.demo-transcript { display: flex; flex-direction: column; gap: 14px; height: 322px; overflow-y: auto; padding: 18px 14px; scroll-behavior: smooth; }
.demo-transcript::before { content: ''; flex: 1 0 0; }
.demo-step { flex: none; }
.hint.is-animating .demo-step:not(.is-visible) { display: none; }
.demo-message { display: flex; align-items: flex-end; gap: var(--space-2); }
.demo-message-body { min-width: 0; flex: 1; }
.demo-chat-avatar { display: grid; place-items: center; width: 27px; height: 27px; flex: none; border-radius: 50%; margin-bottom: 2px; }
.demo-chat-avatar svg { width: 15px; height: 15px; }
.demo-chat-avatar.you { background: var(--border); color: var(--text-strong); }
.demo-chat-avatar.agent { background: var(--accent-soft-2); color: var(--accent-text); border: 1px solid var(--sun-300); }
.demo-speaker { color: var(--text-2); font-size: var(--text-xs); margin-bottom: 5px; }
.demo-ask { flex-direction: row-reverse; padding-left: 18px; }
.demo-ask .demo-speaker { text-align: right; }
dialog.hint .bubble { padding: 10px var(--space-3); border-radius: var(--radius-lg); font-size: var(--text-md); line-height: 1.5; }
dialog.hint .bubble.you { background: var(--text-strong); color: var(--surface); border-bottom-right-radius: var(--radius-sm); }
dialog.hint .bubble.agent { background: var(--surface); border: 1px solid var(--border); border-bottom-left-radius: var(--radius-sm); }
.demo-tool { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; padding: 10px 11px; border: 1px solid var(--agent-line); border-radius: var(--radius-md); background: var(--agent-soft); color: var(--agent); }
.demo-tool > svg { width: 14px; height: 14px; flex: none; }
.demo-tool code { background: none; padding: 0; font-size: var(--text-sm); overflow-wrap: anywhere; }
.demo-tool > span { margin-left: auto; font-size: var(--text-xs); white-space: nowrap; }
.demo-tool:hover { text-decoration: none; border-color: var(--agent); }
.demo-thinking { display: none; align-items: center; gap: var(--space-1); min-height: 17px; margin-left: 37px; }
.hint.is-thinking .demo-thinking { display: flex; }
.demo-thinking span { width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); animation: demo-think .8s ease-in-out infinite alternate; }
.demo-thinking span:nth-child(2) { animation-delay: .15s; }
.demo-thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes demo-think { to { opacity: .4; transform: translateY(-3px); } }
.demo-result { display: flex; align-items: center; gap: var(--space-2); margin-left: 35px; padding: 9px 10px; border-left: 2px solid var(--positive); color: var(--positive-text); }
.demo-result > svg { flex: none; width: 17px; height: 17px; }
.demo-result strong { display: block; font-size: var(--text-sm); }
.demo-result span { display: block; margin-top: 2px; font-size: var(--text-xs); line-height: 1.4; }
.demo-composer { display: flex; align-items: flex-end; gap: 10px; height: 86px; margin: 0 var(--space-3) var(--space-3); padding: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); }
.demo-composer-text { flex: 1; align-self: center; color: var(--text-2); font-size: var(--text-md); line-height: 1.45; min-width: 0; max-height: 4.35em; overflow: hidden; }
.hint.is-typing .demo-composer { border-color: var(--accent-deep); }
.hint.is-typing .demo-composer-text { color: var(--text); }
.hint.is-typing .demo-composer-text::after { content: ''; display: inline-block; width: 1px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: var(--accent-text); }
.demo-send { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-md); background: var(--border-soft); color: var(--text-2); transition: transform var(--fast) var(--ease), background var(--slow) var(--ease), color var(--slow) var(--ease); }
.demo-send svg { width: 17px; height: 17px; }
.hint.is-typing .demo-send, .hint.is-sending .demo-send { background: var(--text-strong); color: var(--surface); }
.hint.is-sending .demo-send { transform: scale(.86); }
.hint-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-5) 26px; }
.hint-bottom .btn { font-size: var(--text-md); padding: var(--space-2) 11px; }
.hint-bottom > a:not(.btn) { font-size: var(--text-md); font-weight: var(--w-bold); }
@media (max-width: 700px) {
  .hint-top { padding: var(--space-5) 18px 14px; }
  .agent-demo { margin: 0 14px; }
  .demo-route { gap: 7px; margin: var(--space-2) 0 var(--space-4); }
  .demo-node { gap: var(--space-1); padding: 6px; font-size: var(--text-xs); }
  .demo-wire { flex-basis: 18px; }
  .demo-chat-head { padding: 10px var(--space-3); }
  .demo-transcript { height: 325px; padding: 14px 10px; gap: var(--space-3); }
  .demo-ask { padding-left: 0; }
  .hint-bottom { padding: var(--space-4) 18px; flex-wrap: wrap; }
}

/* ---------- MCP: tool catalog ---------- */

.catalog-intro p { font-size: var(--text-md); line-height: 1.6; margin: 10px 0 0; }
.catalog-index { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: var(--space-2); margin: var(--space-5) 0; }
.catalog-index a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text-strong); font-size: var(--text-md); font-weight: var(--w-medium); }
.catalog-index a:hover { border-color: var(--accent-deep); color: var(--link); text-decoration: none; }
.catalog-count { color: var(--text-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.catalog-index, .catalog-group, .tool-doc { scroll-margin-top: 90px; }
.catalog-group { background: var(--surface-3); }
.catalog-group-head { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5) var(--pad-x) var(--space-4); }
.catalog-group-head h2 a { color: var(--text); }
.catalog-group-head p { color: var(--text-strong); font-size: var(--text-md); margin: 5px 0 0; }
.catalog-back { font-size: var(--text-sm); flex-shrink: 0; }
.catalog-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 350px), 1fr)); align-items: start; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.tool-doc { min-width: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; }
.tool-doc:target, .catalog-group:target { outline: 2px solid var(--focus); outline-offset: 3px; }
.tool-doc-head { display: flex; flex-direction: column; align-items: start; gap: 9px; margin-bottom: var(--space-3); }
.tool-doc h3 { max-width: 100%; }
.tool-doc h3 code { overflow-wrap: anywhere; background: none; padding: 0; }
.tool-doc p { font-size: var(--text-md); line-height: 1.6; margin: 0 0 14px; overflow-wrap: anywhere; }
.tool-inputs { border-top: 1px solid var(--border); padding-top: var(--space-3); }
.tool-inputs summary { cursor: pointer; color: var(--text-strong); font-size: var(--text-md); }
.tool-inputs[open] summary { margin-bottom: 14px; }
.tool-inputs dt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: var(--text-md); overflow-wrap: anywhere; }
.tool-inputs dd { margin: 5px 0 0; color: var(--text-2); font-size: var(--text-md); line-height: 1.5; overflow-wrap: anywhere; }
.tool-inputs pre { white-space: pre-wrap; overflow-wrap: anywhere; background: var(--side); color: var(--side-text); padding: 14px; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.65; tab-size: 2; }
.json-schema { tab-size: 2; }  /* the schemas are indented with tabs (tool_catalog.json_tokens) */
.json-schema code { background: none; padding: 0; font-size: inherit; }
.json-key { color: var(--code-key); }
.json-string { color: var(--code-string); }
.json-number { color: var(--code-number); }
.json-literal { color: var(--code-literal); }

/* ---------- MCP: client setup cards, on the sidebar's ink ---------- */

.agent-clients { display: grid; gap: var(--space-4); }
/* Wide: the cards flow down two columns, each as tall as it needs to be. A grid gave
   every row the height of its taller card, leaving a gap under the shorter one. */
@media (min-width: 1100px) {
  .agent-clients { display: block; columns: 2; column-gap: var(--space-4); }
  .agent-clients > .agent-client { break-inside: avoid; margin-bottom: var(--space-4); }
}
.agent-client { background: var(--side-3); color: var(--on-dark); border: 1px solid var(--side-2); border-radius: var(--radius-lg); overflow-wrap: anywhere; min-width: 0; }
.agent-client-heading { display: flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-3); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--side-2); border-bottom: 1px solid var(--side-mark); }
.agent-client-mark { display: grid; place-items: center; width: 36px; height: 36px; flex: none; background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-md); }
.agent-client-mark img { display: block; object-fit: contain; }
.agent-provider { color: var(--side-text); font-size: var(--text-xs); letter-spacing: var(--track-label); text-transform: uppercase; }
.agent-client h3 { margin: 1px 0 0; color: var(--on-dark); }
.agent-docs { margin-left: auto; font-size: var(--text-md); white-space: nowrap; color: var(--side-text); }
.agent-docs:hover { color: var(--on-dark); }
.agent-docs:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 4px; border-radius: 2px; }
.agent-command { font-family: var(--mono); margin: 14px var(--space-4) 0; border-radius: var(--radius-md); background: var(--side); border: 1px solid var(--side-2); }
.agent-command-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px var(--space-2) 10px 10px; color: var(--side-text); font-size: var(--text-md); font-weight: var(--w-medium); }
.agent-command-bar .btn { background: var(--side-text); color: var(--side); border-color: var(--side-text); width: 96px; flex: none; justify-content: center; }
.agent-command-bar .btn:hover { background: var(--on-dark); border-color: var(--on-dark); }
.agent-command-bar .btn:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 3px; }
.agent-command pre { font-family: inherit; margin: 0; padding: var(--space-3); font-size: var(--text-md); line-height: 1.65; white-space: pre; overflow-wrap: normal; overflow-x: auto; }
.agent-command pre:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: -2px; }
.agent-command pre code { font-family: inherit; font-size: inherit; background: none; padding: 0; border-radius: 0; }
.agent-command .agent-copy-selection { position: absolute; left: -10000px; width: 1px; height: 1px; padding: 0; }
.agent-terminal-comment { color: var(--side-text); }
.agent-terminal-prompt { color: var(--accent-on-dark); }
.agent-next-step { margin: var(--space-3) var(--space-4) var(--space-4); color: var(--side-text); font-size: var(--text-md); line-height: 1.6; }
.agent-connect-note { font-size: var(--text-md); }
.agent-other-clients { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; font-size: var(--text-md); }
.agent-other-clients summary { cursor: pointer; font-weight: var(--w-medium); }
.agent-other-clients code { overflow-wrap: anywhere; }
#connect-agent { scroll-margin-top: 80px; flex-wrap: wrap; }

/* ---------- live-update notices ---------- */

/* A quiet, transient record of changes arriving through the live stream. */
.live-updates { position: fixed; z-index: 80; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); width: 350px; max-width: calc(100vw - 32px); pointer-events: none; }
.live-updates[hidden] { display: none; }
#live-updates { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); padding: 0; margin: 0; }
.update-toast { --update-ink: var(--kind-revisit); --update-soft: var(--kind-revisit-soft); position: relative; pointer-events: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop); }
.update-toast.activity { --update-ink: var(--kind-activity); --update-soft: var(--kind-activity-soft); }
.update-toast.task { --update-ink: var(--kind-task); --update-soft: var(--kind-task-soft); }
.update-toast.pipeline { --update-ink: var(--kind-milestone); --update-soft: var(--kind-milestone-soft); }
.update-toast.capture { --update-ink: var(--kind-activity); --update-soft: var(--kind-activity-soft); }
.update-link { display: flex; align-items: center; gap: 11px; padding: 13px 33px 13px 13px; color: var(--text); border-radius: inherit; }
.update-link:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.update-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-md); color: var(--update-ink); background: var(--update-soft); }
.update-icon svg { width: 17px; height: 17px; }
.update-copy { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.update-copy strong { font-size: var(--text-sm); line-height: 1.3; font-weight: var(--w-medium); }
.update-copy > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; color: var(--text-2); font-size: var(--text-sm); line-height: 1.4; }
.update-dismiss { position: absolute; top: 3px; right: 3px; display: grid; place-items: center; width: 25px; height: 25px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-2); font: inherit; cursor: pointer; }
.update-dismiss svg { width: 14px; height: 14px; }
.update-dismiss:hover { background: var(--border-soft); color: var(--text); }
.update-link:focus-visible, .update-dismiss:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- public pages: landing, sign-in, callback, error ---------- */

/* The pages a visitor sees before signing in, in the style of the Claude Design
   direction "Paper, with Ray" (docs/public-pages-plan.md): plain paper, pill
   buttons, rounder cards and larger type than the working pages. A full-width
   element keeps the page's column with padding of --gutter. */
.public-page { --gutter: max(4vw, calc((100% - 1120px) / 2)); min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }
.public-main { width: min(1120px, 92vw); margin: 0 auto; flex: 1; }
.btn.pill { border-radius: var(--radius-full); padding-inline: var(--space-5); }
.btn.pill.big { padding: var(--space-3) 22px; }

.public-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) 28px; padding: 18px var(--gutter); border-bottom: 1px solid var(--border); }
.public-header .brand { padding: 0; color: var(--text); font-size: 22px; letter-spacing: -.025em; gap: 9px; text-decoration: none; }
.public-header .brand-emoji { font-size: 28px; }
.public-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) 26px; margin-left: auto; }
.public-nav a { color: var(--text-2); font-weight: var(--w-regular); }
.public-nav a:hover { color: var(--text); text-decoration: none; }
.public-header .header-end { display: flex; align-items: center; gap: var(--space-3); }

.public-footer { margin-top: var(--space-12); padding: 64px var(--gutter) 48px; border-top: 1px solid var(--border); }
.public-footer-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .6fr); gap: var(--space-12); }
.public-footer-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.public-footer-cta p { margin: 0; }
.public-footer-statement { font-size: var(--text-2xl); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: 1.1; }
.public-footer-principles { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; color: var(--text-strong); }
.public-footer-links { display: flex; flex-direction: column; gap: 10px; }
.public-footer-links h2, .public-footer-social h2 { margin: 0; }
.public-footer-links a { color: var(--text); font-weight: var(--w-regular); }
.public-footer-social { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); padding-top: var(--space-6); border-top: 1px solid var(--border); }
.public-footer .footer-marks { margin: 0; }
.public-footer .footer-marks a { background: var(--surface); border-color: var(--border); color: var(--text-2); }
.public-footer .footer-marks a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.public-centered .public-main { display: grid; place-items: center; padding: var(--space-12) 0; }
.public-card { width: min(500px, 100%); padding: var(--space-10); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); }
.public-card h1 { font-size: var(--text-2xl); letter-spacing: -.03em; line-height: 1.05; }
.public-card h1.quiet { font-size: var(--text-xl); }
.public-card p { line-height: 1.65; }
.public-card .btn { margin-top: var(--space-3); }
.agent-http-guide { width: min(820px, 100%); }
.agent-http-guide h2 { margin-top: 28px; font-size: var(--text-xl); }
.agent-http-guide li { margin: var(--space-3) 0; line-height: 1.65; }
.agent-http-guide code, .agent-http-guide pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.agent-http-guide pre { padding: var(--space-3); background: var(--border-soft); border-radius: var(--radius-sm); }
.agent-handoff textarea { width: 100%; margin-top: var(--space-2); font: var(--text-md)/1.5 var(--mono); overflow-wrap: anywhere; }
.error-page { text-align: center; }
.error-code { font-size: clamp(5rem, 18vw, 8rem); font-weight: var(--w-bold); letter-spacing: -.08em; line-height: 1; color: var(--accent-text); margin: 0 0 var(--space-5); }

/* The landing page. Each section runs the page's width and keeps the column with --gutter. */
.landing .public-main { width: 100%; }
.landing .public-main > section { padding-inline: var(--gutter); }
.landing .public-main > section + section { border-top: 1px solid var(--border); }
.landing .accent { color: var(--accent-text); }
.landing .eyebrow { margin: 0; }
.section-head { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.section-head h2 { margin: 0; font-size: var(--text-3xl); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: 1.08; }

.hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 64px; align-items: start; padding-block: 72px 104px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero-copy > p { margin: 0; }
.landing h1 { display: flex; flex-direction: column; margin: 0; font-size: var(--text-display); font-weight: var(--w-bold); letter-spacing: -.035em; line-height: .98; }
.landing .lede { font-size: var(--text-xl); line-height: 1.5; color: var(--text-strong); max-width: 500px; text-wrap: pretty; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hero-demo { position: relative; padding-top: 96px; }
.hero-ray { position: absolute; top: 4px; right: 0; z-index: 2; width: 132px; height: 132px; transform: rotate(12deg); filter: drop-shadow(var(--shadow-figure)); }
.hero-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); }
.hero-card > * { margin: 0; }
.hero-card-head { display: flex; align-items: center; gap: var(--space-2); padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); font-size: var(--text-sm); font-weight: var(--w-medium); color: var(--text-2); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.bubble { display: flex; flex-direction: column; gap: var(--space-1); max-width: 86%; padding: 14px 18px; font-size: var(--text-base); line-height: 1.45; }
.bubble .who { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: var(--w-medium); }
.bubble .who img { width: 18px; height: 18px; }
.bubble.you { align-self: flex-end; background: var(--text); color: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl); }
.bubble.you .who { opacity: .7; }
.bubble.ray { align-self: flex-start; background: var(--border-soft); color: var(--text); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-xl) var(--radius-sm); }
.bubble.ray .who { color: var(--accent-text); }
.hero-round { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.hero-round-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }
.hero-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font-size: var(--text-xl); font-weight: var(--w-bold); }
.hero-stage { margin-left: auto; padding: 5px 10px; border-radius: var(--radius-full); background: var(--tone-opened-soft); color: var(--tone-opened); font-size: var(--text-xs); font-weight: var(--w-medium); }
.hero-round ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-md); color: var(--text-strong); }
.hero-round li { display: flex; align-items: center; gap: 10px; }
.landing .dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--text); }
.landing .dot.accent { background: var(--accent); }

.voice { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-block: 72px; }
.voice-statement { display: flex; flex-direction: column; margin: 0; font-size: var(--text-3xl); font-weight: var(--w-bold); letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.voice-cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.voice-cells > div { display: flex; flex-direction: column; gap: var(--space-2); padding: 22px; }
.voice-cells > div + div { border-left: 1px solid var(--border); }
.voice-cells h2 { font-size: var(--text-sm); }
.voice-cells p { margin: 0; color: var(--text-strong); text-wrap: pretty; }

.how { display: flex; flex-direction: column; gap: var(--space-12); padding-block: 88px; }
.how-rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--radius-xl); }
.how-rules article { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-8) 30px 36px; }
.how-rules article + article { border-left: 1px solid var(--border); }
.how-rules article > * { margin: 0; }
.landing .num { font-size: var(--text-2xl); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: 1; color: var(--accent-text); }
.how-rules h3 { font-size: var(--text-xl); font-weight: var(--w-medium); letter-spacing: var(--track-tight); }
.how-rules p { color: var(--text-strong); text-wrap: pretty; }
.how-rules .aside { color: var(--text-2); }

.band { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-12); align-items: end; padding-block: 104px; background: var(--side); color: var(--on-dark); }
.landing .public-main > .band { border-top: 0; }
.band-statement { display: flex; flex-direction: column; margin: 0; font-size: var(--text-display); font-weight: var(--w-bold); letter-spacing: -.035em; line-height: 1.02; }
.band .accent { color: var(--accent-on-dark); }
.band-copy { display: flex; flex-direction: column; gap: 18px; }
.band-copy p { margin: 0; color: var(--side-text); }
.band-copy a { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding-bottom: var(--space-1); border-bottom: 1px solid var(--side-mark); color: var(--on-dark); }
.band-copy a:hover { color: var(--accent-on-dark); border-color: var(--accent-on-dark); text-decoration: none; }
.band-copy a svg { width: 16px; height: 16px; }
.band :focus-visible { outline-color: var(--focus-on-dark); }
.landing .public-main > .band + section { border-top: 0; }

.day { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; padding-block: 96px; }
.day ol { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--border); }
.day li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-6) 0; border-top: 1px solid var(--border); color: var(--text-2); }
.day li .num { font-size: var(--text-md); font-weight: var(--w-medium); padding-top: 5px; }
.day li b { display: block; margin-bottom: var(--space-1); color: var(--text); font-size: var(--text-xl); font-weight: var(--w-medium); }
.landing .public-footer { margin-top: 0; }

@media (min-width: 1200px) {
  .hero-ray { right: -18px; }
}
@media (max-width: 900px) {
  .public-nav { order: 3; flex-basis: 100%; margin-left: 0; font-size: var(--text-md); }
  .public-header .header-end { margin-left: auto; }
  .public-footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .hero, .voice, .band, .day { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .hero { padding-block: 48px 72px; }
  .how-rules { grid-template-columns: minmax(0, 1fr); }
  .how-rules article + article { border-left: 0; border-top: 1px solid var(--border); }
  .voice, .how, .day { padding-block: 64px; }
  .band { padding-block: 72px; }
}
@media (max-width: 700px) {
  .voice-cells { grid-template-columns: minmax(0, 1fr); }
  .voice-cells > div + div { border-left: 0; border-top: 1px solid var(--border); }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .bubble { max-width: 100%; }
  .hero-ray { width: 104px; height: 104px; }
  .hero-demo { padding-top: 80px; }
  .how-rules article { padding: var(--space-6) var(--space-5); }
  .day li { grid-template-columns: 40px minmax(0, 1fr); }
  .public-card { padding: 28px 22px; }
}

.btn.accent-outline { background: transparent; border-color: var(--accent); color: var(--accent-text); }
.btn.accent-outline:hover { background: var(--accent); color: var(--on-accent); }

/* The Request Access page: five steps in one column, one shown at a time
   (request_access.html). The moving parts are Rocket components in
   components/access.js; with reduced motion they show their finished state. */
.access .public-main { width: min(720px, 92vw); padding: 48px 0 80px; }
.tour { display: flex; flex-direction: column; gap: 28px; }
.tour-head { display: flex; align-items: center; gap: var(--space-4); }
.tour-ray { position: relative; flex: none; width: 76px; height: 76px; transform: rotate(-8deg); transition: transform var(--theme-move) var(--ease); }
.tour-ray img { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(var(--shadow-figure)); transition: opacity var(--slow) var(--ease); }
.tour-ray .excited { opacity: 0; }
.tour[data-step="1"] .tour-ray { transform: rotate(6deg) translateY(-2px); }
.tour[data-step="2"] .tour-ray { transform: rotate(-4deg); }
.tour[data-step="3"] .tour-ray { transform: rotate(8deg); }
.tour[data-step="4"] .tour-ray { transform: rotate(-12deg) scale(1.12); }
.tour[data-step="4"] .tour-ray .cool { opacity: 0; }
.tour[data-step="4"] .tour-ray .excited { opacity: 1; }
.tour-progress { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tour-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0; }
.tour-back { display: none; padding: var(--space-1) 0; border: 0; background: none; font: inherit; font-size: var(--text-md); font-weight: var(--w-medium); color: var(--text-2); cursor: pointer; }
.tour-back.on { display: inline-block; }
.tour-back:hover { color: var(--text); }
.tour-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tour-bars span { position: relative; height: 4px; border-radius: 2px; background: var(--border); }
.tour-bars span::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform var(--theme-move) var(--ease); }
.tour-bars span.on::after { transform: scaleX(1); }
.tour-pane { display: flex; flex-direction: column; gap: var(--space-6); }
.tour-pane:not(.is-current) { display: none; }
.tour-pane.is-current { animation: tour-in 500ms var(--ease) both; }
@keyframes tour-in { from { opacity: 0; transform: translateY(18px); } }
.tour-pane > p, .tour-pane > h1, .tour-pane > h2 { margin: 0; }
.tour h1 { font-size: var(--text-display); font-weight: var(--w-bold); letter-spacing: -.035em; line-height: .98; text-wrap: balance; }
.tour h2 { font-size: var(--text-3xl); font-weight: var(--w-bold); letter-spacing: -.025em; line-height: 1.05; text-wrap: balance; }
.tour h2:focus { outline: none; }
.tour-lede { font-size: var(--text-lg); color: var(--text-strong); text-wrap: pretty; }
.tour-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.tour-card { display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lift); }
.tour-card > p { margin: 0; }
.tour-said { align-self: flex-end; max-width: 88%; min-height: 24px; padding: 12px var(--space-4); background: var(--text); color: var(--surface); border-radius: var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl); line-height: 1.45; }
.is-typing [data-said]::after { content: ""; display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: var(--accent-on-dark); animation: caret-blink 1s steps(2, start) infinite; }
@keyframes caret-blink { to { visibility: hidden; } }
.tour-working { display: flex; align-items: center; gap: var(--space-2); min-height: 20px; font-size: var(--text-md); color: var(--text-2); }
.tour-working img { width: 18px; height: 18px; }
.tour-working:has(span:empty) img { visibility: hidden; }
.tour-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tour-rows li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 26px; gap: var(--space-3); align-items: center; padding: 10px var(--space-3); border-radius: var(--radius-lg); transition: opacity var(--slow) var(--ease), transform var(--theme-move) var(--ease), background var(--theme-move) var(--ease); }
.is-running .tour-rows li { opacity: 0; transform: translateY(10px); }
.is-running .tour-rows li.is-shown { opacity: 1; transform: none; background: var(--accent-soft); }
.tour-rows li.is-checked { background: transparent; }
.tour-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--accent-soft-2); color: var(--tone-opened); }
.tour-icon svg { width: 16px; height: 16px; }
.tour-check { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--positive); color: var(--surface); transform: scale(0); transition: transform var(--theme-move) var(--ease); }
.tour-rows li.is-checked .tour-check { transform: scale(1); }
.tour-check svg { width: 13px; height: 13px; }
.tour-replay { align-self: flex-end; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; border: 0; background: none; font: inherit; font-size: var(--text-md); font-weight: var(--w-medium); color: var(--text-2); cursor: pointer; }
.tour-replay:hover { color: var(--text); }
.tour-replay svg { width: 14px; height: 14px; }
.is-running .tour-replay { visibility: hidden; }
rays-typing-demo, rays-name-ticker { display: block; }
rays-typing-demo.tour-card { display: flex; }

.tour-works { display: flex; flex-direction: column; gap: 6px; padding: 22px var(--space-6) var(--space-6); background: var(--side); color: var(--on-dark); border-radius: var(--radius-xl); }
.tour-works > p { margin: 0; color: var(--side-text); }
rays-name-ticker ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) 14px; font-size: var(--text-xl); font-weight: var(--w-bold); color: var(--accent-on-dark); }
rays-name-ticker.is-cycling ul { display: grid; font-size: var(--text-3xl); letter-spacing: -.035em; line-height: 1.1; }
rays-name-ticker.is-cycling li { grid-area: 1 / 1; overflow-wrap: anywhere; opacity: 0; transform: translateY(40%); transition: opacity var(--slow) var(--ease), transform var(--theme-move) var(--ease); }
rays-name-ticker.is-cycling li.is-current { opacity: 1; transform: none; }
.tour-flow { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; }
.tour-flow .tour-card { gap: var(--space-3); padding: var(--space-4); box-shadow: none; }
.tour-join { align-self: center; justify-self: center; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--border-soft); color: var(--accent-text); font-weight: var(--w-bold); }
.tour-card-title { font-size: var(--text-lg); font-weight: var(--w-bold); letter-spacing: var(--track-tight); line-height: 1.15; }
.tour-card-ray { width: 34px; height: 34px; transform: rotate(-8deg); }
.tour-sources, .tour-round { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--text-md); }
.tour-sources li { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--w-medium); color: var(--text-strong); }
.tour-sources svg { width: 14px; height: 14px; color: var(--text-2); }
.tour-tools { list-style: none; margin: 0; padding: 10px; display: flex; flex-direction: column; gap: 6px; background: var(--bg); border: 1px solid var(--border-soft); border-radius: var(--radius-md); font: var(--text-sm)/1.3 var(--mono); color: var(--text-strong); overflow-wrap: anywhere; }
.tour-tools li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 6px; vertical-align: middle; border-radius: 50%; background: var(--positive); }
.tour-round li { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 0; border-top: 1px solid var(--border-soft); }
.tour-stage { padding: 2px var(--space-2); border-radius: var(--radius-full); background: var(--tone-opened-soft); color: var(--tone-opened); font-size: var(--text-xs); font-weight: var(--w-medium); }
.tour-stage.later { background: var(--tone-diligence-soft); color: var(--tone-diligence); }

.tour-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-4) 18px; }
.tour-fields > label { display: flex; flex-direction: column; gap: 6px; font-size: var(--text-md); font-weight: var(--w-medium); }
.tour-fields input[type=text], .tour-fields input[type=email] { padding: 12px 14px; font-weight: var(--w-regular); }
.tour-sizes { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; border: 0; }
.tour-sizes legend { margin-bottom: var(--space-2); padding: 0; font-size: var(--text-md); font-weight: var(--w-medium); }
.tour-sizes label { position: relative; }
.tour-sizes input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.tour-sizes span { display: inline-block; padding: 10px var(--space-4); border: 1px solid var(--border-strong); border-radius: var(--radius-full); background: var(--surface); font-size: var(--text-md); font-weight: var(--w-medium); }
.tour-sizes input:checked + span { background: var(--text); border-color: var(--text); color: var(--surface); }
.tour-sizes input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.tour-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.access-problem { margin: 0; color: var(--negative-text); font-weight: var(--w-medium); }
.access-problem:empty { display: none; }
#access-done { display: flex; flex-direction: column; gap: var(--space-6); }
#access-done:empty { display: none; }
#access-done > * { margin: 0; }
.lede-small { font-size: var(--text-lg); color: var(--text-strong); }
.access-next { list-style: none; padding: 0; border-bottom: 1px solid var(--border); }
.access-next li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4) 0; border-top: 1px solid var(--border); }
.access-next .num { font-weight: var(--w-medium); color: var(--accent-text); }
.access-home { align-self: flex-start; font-weight: var(--w-medium); }
@media (max-width: 700px) {
  .tour-flow { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .tour-ray { width: 60px; height: 60px; }
  .tour-actions .btn { width: 100%; justify-content: center; }
}

/* ---------- calendar ---------- */

/* Jinja renders the surrounding page; FullCalendar owns its grid. */
.calendar-page { min-width: 0; }
.calendar-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-bottom: var(--space-5); }
.calendar-filters .field { min-width: 150px; margin: 0; }
.calendar-filters .field:first-of-type { flex: 1; max-width: 320px; }
.calendar-history { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; font-size: var(--text-md); }
.calendar-history input { accent-color: var(--text); width: 17px; height: 17px; }
.calendar-windows { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: var(--space-5); }
.calendar-window { display: block; padding: var(--space-4) var(--pad-x); color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.calendar-window:hover { border-color: var(--accent-deep); text-decoration: none; }
.calendar-window-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.calendar-window-dates { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 15px; font-size: var(--text-md); color: var(--text-2); margin-top: var(--space-3); }
.calendar-window-rule { height: 5px; background: var(--accent); border-radius: var(--radius-sm); margin-top: var(--space-3); }
.calendar-window.closed .calendar-window-rule { background: var(--positive); }
.calendar-window.planning .calendar-window-rule, .calendar-window.paused .calendar-window-rule { background: repeating-linear-gradient(90deg, var(--accent) 0 8px, var(--bg) 8px 12px); }
rays-calendar { display: block; min-width: 0; }
.calendar-card { padding: var(--pad-x); min-width: 0; }
.calendar-toolbar, .calendar-period { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.calendar-date-nav, .calendar-view-buttons { display: flex; gap: 5px; flex-wrap: wrap; }
.calendar-arrow { min-width: 36px; padding-inline: var(--space-2); justify-content: center; }
.calendar-arrow svg { width: 16px; height: 16px; }
.calendar-period { margin: var(--space-5) 0 var(--space-3); }
.calendar-period h2 { font-size: var(--text-xl); }
.calendar-span { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-md); }
.calendar-span[hidden] { display: none; }
.calendar-span select { font: inherit; padding: 6px; }
.calendar-timezone { font-size: var(--text-sm); }
.calendar-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) 18px; margin: 10px 0 var(--space-4); font-size: var(--text-sm); color: var(--text-2); }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calendar-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--accent); }
.calendar-legend .task { background: var(--kind-task); }
.calendar-legend .revisit { background: var(--kind-revisit); }
.calendar-legend .activity { background: var(--kind-positive); }
.calendar-legend .milestone { background: var(--kind-milestone); }
.calendar-legend .marker { background: var(--border-strong); }
.calendar-message { font-size: var(--text-md); color: var(--text-2); margin-bottom: var(--space-3); }
.calendar-message:empty { display: none; }
.calendar-error { background: var(--negative-soft); color: var(--negative); padding: var(--space-3); border-radius: var(--radius-sm); margin: var(--space-3) 0; }
.calendar-attention { margin-top: var(--space-5); }
.calendar-surface {
  min-width: 0; font-size: var(--text-md);
  --fc-monarch-primary: var(--ink-800);
  --fc-monarch-primary-foreground: var(--on-dark);
  --fc-monarch-primary-over: var(--ink-700);
  --fc-monarch-primary-down: var(--ink-850);
  --fc-monarch-secondary: var(--accent-soft);
  --fc-monarch-secondary-foreground: var(--accent-deep);
  --fc-monarch-secondary-over: var(--accent-soft-2);
  --fc-monarch-secondary-down: var(--accent-soft-2);
  --fc-monarch-tertiary: var(--violet-700);
  --fc-monarch-tertiary-foreground: var(--on-dark);
  --fc-monarch-tertiary-over: var(--violet-700);
  --fc-monarch-tertiary-down: var(--violet-700);
  --fc-monarch-event: var(--info-soft);
  --fc-monarch-event-contrast: var(--info-text);
  --fc-monarch-highlight: var(--accent-soft);
  --fc-monarch-now: var(--accent-deep);
  --fc-monarch-selected: var(--ink-800);
  --fc-monarch-selected-foreground: var(--on-dark);
  --fc-monarch-selected-over: var(--ink-700);
  --fc-monarch-selected-down: var(--ink-850);
  --fc-monarch-outline: var(--focus);
  --fc-monarch-popover: var(--surface);
  --fc-monarch-background: var(--surface);
  --fc-monarch-faint: var(--surface-3);
  --fc-monarch-muted: var(--border-soft);
  --fc-monarch-strong: var(--border);
  --fc-monarch-stronger: var(--border-strong);
  --fc-monarch-strongest: var(--texture);
  --fc-monarch-foreground: var(--text);
  --fc-monarch-faint-foreground: var(--text-2);
  --fc-monarch-muted-foreground: var(--text-2);
  --fc-monarch-border: var(--border);
  --fc-monarch-strong-border: var(--texture);
}
.calendar-surface a { color: inherit; }
.calendar-surface .calendar-window-shading { background: var(--accent-soft); opacity: 1; }
.calendar-surface :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- notes ---------- */

/* One note presentation for every subject. Text remains escaped in Jinja. */
.note-page { max-width: 900px; margin-inline: auto; }
.note { padding: var(--space-3) var(--pad-x); overflow-wrap: anywhere; scroll-margin-top: 85px; }
.note + .note { border-top: 1px solid var(--border-soft); }
.note .by { font-size: var(--text-sm); color: var(--text-2); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1); margin-top: var(--space-4); }
.note-title { margin: 0 0 10px; }
.note-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: var(--space-2) 0 var(--space-3); }
.note-body { font-size: var(--text-md); line-height: 1.65; }
.note-body p { white-space: pre-wrap; margin: 0 0 var(--space-3); }
.note-body p:last-child { margin-bottom: 0; }
.note-body h3 { margin: var(--space-4) 0 6px; }
.note-body ul { padding-left: 22px; margin: var(--space-2) 0 var(--space-3); }
/* Inside content people wrote, an underline is the only thing that marks a link. */
.note-body a, .note-sources a { text-decoration: underline; text-underline-offset: 2px; }
.note-origin { color: var(--text-2); font-size: var(--text-sm); margin: 0 0 14px; }
.note-open { margin-left: auto; }
.note-sources { border-top: 1px solid var(--border); padding-top: 10px; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-2); }
.note-sources summary, .note-compose summary, .note-options summary { cursor: pointer; }
.note-sources p { white-space: pre-wrap; margin-top: 10px; }
.note-sources pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; margin-top: 10px; }
.note-compose { padding: var(--space-4) var(--pad-x); border-top: 1px solid var(--border); }
.note-compose > summary { font-size: var(--text-md); font-weight: var(--w-medium); color: var(--link); }
.note-compose[open] > summary { margin-bottom: var(--space-4); }
.note-compose .field { margin: 0; }
.note-compose .form-grid { padding: 0; border: 0; }
.note-options { font-size: var(--text-md); }
.note-options .field { margin-top: var(--space-3); }
.note-source-fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.note-format-hint { font-size: var(--text-sm); }
.note-edit { margin-top: var(--space-5); }
.notes-filter { display: flex; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); font-size: var(--text-md); }

/* ---------- documents ---------- */

/* Round materials and the shared document library. */
.document-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 14px; margin-bottom: 18px; }
.document-card { min-width: 0; border: 1px solid var(--border); background: var(--surface); border-radius: var(--radius-lg); padding: 18px; }
.document-card h3 { margin: var(--space-3) 0; overflow-wrap: anywhere; }
.document-meta, .document-actions { display: flex; gap: var(--space-2) var(--space-4); align-items: center; flex-wrap: wrap; font-size: var(--text-md); }
.document-meta { color: var(--text-2); }
.document-filter { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-bottom: var(--space-5); }
.document-filter .field, .document-filter .searchbar { flex: 1 1 220px; min-width: 0; }
.document-filter .searchbar input { width: 100%; min-width: 0; }
.document-compose { margin-top: 18px; padding: 18px; scroll-margin-top: 100px; }
.document-compose summary { cursor: pointer; font-weight: var(--w-medium); }
.document-compose form { margin-top: var(--space-4); max-width: 720px; }
.document-page .rows { overflow-wrap: anywhere; }
.document-page .head h1 { overflow-wrap: anywhere; }
.document-shares p { white-space: pre-wrap; }
/* Document titles are people's own text, so their links are underlined too. */
.document-page a:not(.btn), .document-card h3 a { text-decoration: underline; text-underline-offset: 2px; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  dialog.hint::backdrop { backdrop-filter: none; }
}

/* ---------- smaller screens ----------
   Laptop (1280): tables drop the Owner column (the detail page has it).
   Tablet and phone (900): the sidebar becomes a top bar plus a bottom tab bar.
   Phone (700): tables become one card per row, with each value labelled. */

@media (max-width: 1280px) {
  .grid-2, .grid-halves { grid-template-columns: minmax(0, 1fr); }
  .list .roomy { display: none; }
}

@media (max-width: 900px) {
  .frame { display: block; }
  .frame > .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 30; gap: 0;
    padding: var(--space-1) var(--space-1) calc(var(--space-1) + env(safe-area-inset-bottom)); border-top: 1px solid var(--side-line); }
  .side > .brand, .side > .side-toggle, .round-links { display: none; }
  .nav { flex-direction: row; justify-content: space-around; gap: 0; }
  /* Eight labels across a phone: each tab takes its label's width plus an equal share of what is left, so the long ones do not touch. */
  .nav a { flex: 1 1 auto; flex-direction: column; gap: 3px; padding: 7px 3px 6px; min-height: 0; font-size: var(--text-xs); font-weight: var(--w-medium); letter-spacing: -.01em; text-align: center; min-width: 0; }
  .nav a.on::before { left: 28%; right: 28%; top: -4px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .nav svg { width: 21px; height: 21px; }
  .nav .count { position: absolute; top: 3px; left: 50%; margin-left: 5px; font-size: var(--text-xs); padding: 0 5px; }
  .side > .side-foot { display: flex; order: -1; margin: 0; padding: 0; border: 0; }
  .side-foot > .account-trigger { display: none; }
  .account-menu nav a, .account-signout { padding: var(--space-3) var(--space-4); }
  .account-switch { padding-inline: var(--space-4); }

  .site-header { padding: 14px var(--space-4); gap: var(--space-3); }
  .app-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px var(--space-3); min-height: 56px; }
  .mobile-brand { display: block; grid-column: 1; grid-row: 1; font-size: 1.45rem; line-height: 1; text-decoration: none; }
  .mobile-brand img { display: block; }
  .header-company { font-size: var(--text-md); grid-column: 2; grid-row: 1; padding-right: 0; border-right: 0; }
  .app-header .crumbs { grid-column: 2 / -1; grid-row: 2; font-size: var(--text-sm); }
  .app-header .theme-switch { grid-column: 3; grid-row: 1; margin-left: 0; }
  .site-header .brand { font-size: 1.1rem; }
  .site-header .brand-emoji { font-size: 1.45rem; }
  .site-footer { padding: var(--space-8) 0; }
  .footer-inner { padding-inline: var(--space-4); gap: var(--space-6); }
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
  /* The phone tab bar covers the bottom of a working page. Public pages have no tab bar. */
  .frame .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  .page { padding: var(--space-5) var(--space-4) var(--space-10); }
  .flash { padding: 0 var(--space-4); margin-top: 14px; }
  .live-updates { right: var(--space-4); bottom: calc(80px + env(safe-area-inset-bottom)); width: 320px; }
  #live-updates { max-height: calc(100dvh - 150px); overflow-y: auto; }
  .update-link { padding-top: 10px; padding-bottom: 10px; }
}

@media (max-width: 700px) {
  :root { --pad-x: 16px; --pad-y: 12px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-statement { margin-left: 0; }
  h1 { font-size: 1.45rem; }
  .head { margin-bottom: 18px; gap: 14px; }
  .head .avatar.lg { display: none; }
  .sub { gap: 6px var(--space-3); }
  .sub .dot::before { content: none; }
  .head-side { text-align: left; }
  .head-side .track { margin-left: 0; }
  .head > * { max-width: 100%; }
  .head .searchbar, .head > form { width: 100%; }
  .searchbar input { flex: 1; width: auto; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* Tables become cards. */
  .card:has(> table.list) { overflow: visible; }
  .list td.num { text-align: left; }
  table.list, .list tbody, .list tr { display: block; width: 100%; }
  .list thead { display: none; }
  .list tr { position: relative; padding: 14px var(--pad-x); border-bottom: 1px solid var(--border-soft); }
  .list tr:last-child { border-bottom: 0; }
  .list tr.stale { box-shadow: inset 3px 0 0 var(--accent); }
  .list tr.stale td:first-child { box-shadow: none; }
  .list td { display: block; padding: 3px 0; border: 0; }
  .list td:first-child, .list td:last-child { padding-left: 0; padding-right: 0; }
  .list td.lead { padding: 0 64px var(--space-2) 0; }
  .list td[data-label] { position: relative; padding-left: 112px; min-height: 24px; }
  .list td[data-label]::before {
    content: attr(data-label); position: absolute; left: 0; top: 5px; width: 104px;
    font-size: var(--text-xs); font-weight: var(--w-medium); text-transform: uppercase; letter-spacing: var(--track-label); color: var(--text-2);
  }
  .list td.ref-cell { position: absolute; top: 14px; right: var(--pad-x); padding: 0; }
  .list .roomy { display: block; }
  .list .clip { max-width: none; min-width: 0; }
  .list .clip .text { -webkit-line-clamp: 3; }
  .list .who { gap: 10px; }
  .list td[data-label] select { max-width: 100%; }

  .rows > li { flex-wrap: wrap; }
  .rows > li .grow { flex-basis: 60%; }
  .timeline li { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; }
  .timeline .icon { width: 30px; height: 30px; }
  .timeline .aside { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .intel { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .intel dd { margin-bottom: 10px; }
  .form-row > input, .form-row > select { flex: 1 1 140px; }
  .form-row > input[type=text], .form-row > input[type=email], .form-row > .wide { flex-basis: 100%; }
  /* A dropdown beside two buttons was squeezed down to its arrow; it takes the row and the buttons go under it. */
  .form-row > label.field.grow { flex-basis: 100%; }
  /* The story's labels go above their prose instead of beside it. */
  .story-list { grid-template-columns: minmax(0, 1fr); gap: var(--space-1) 0; }
  .story-list dd:not(:last-child) { margin-bottom: var(--space-3); }
  #user-settings > .card-head > .muted, #company-day > .card-head > .muted { margin-left: 0; }
  pre { font-size: var(--text-sm); }
  .note-source-fields { grid-template-columns: 1fr; gap: 0; }
  .calendar-card { padding: var(--space-3); }
  .calendar-toolbar { align-items: stretch; }
  .calendar-view-buttons { width: 100%; }
  .calendar-view-buttons .btn { flex: 1; padding: 7px 6px; font-size: var(--text-sm); }
  .calendar-period h2 { font-size: var(--text-lg); }
  .calendar-timezone { width: 100%; }
  .calendar-filters .field { min-width: 0; flex: 1; }
  .calendar-history { width: 100%; }
  .calendar-filters select { max-width: 100%; }
  .calendar-surface { font-size: var(--text-sm); }
}

/* Documents: the drop zone (docs/data-rooms-plan.md, decision 10). */
.drop { padding: var(--space-4) var(--pad-x); }
.drop-target { display: block; padding: var(--space-6); border: 2px dashed var(--border); border-radius: var(--radius-lg); text-align: center; cursor: pointer; color: var(--text-2); }
.drop.over .drop-target { border-color: var(--accent); background: var(--surface-2, var(--surface)); }
.drop.busy .drop-target { opacity: .6; pointer-events: none; }
.drop-status.error { color: var(--negative); }
/* The team's room page. */
.room-link input { width: 100%; font-family: var(--mono, monospace); font-size: var(--text-sm); }
.room-publish { padding: var(--space-3) var(--pad-x); }
.room-admin .rows > li.dim { color: var(--text-2); }
.room-admin .stack-sm form { display: inline-block; }