/* web/src/app/tokens.css */
/* Kelly design tokens, v1 (October 3, 2026). Compiled from the design system's tokens.json:
   https://claude.ai/artifact/N2iCGKBFop2e18KZjZ6AZu
   Themes: Vellum (light) is the default on :root; Wire (dark) applies under prefers-color-scheme: dark or [data-theme="dark"].
   Fonts: load Source Serif 4 and JetBrains Mono (OFL) from Google Fonts or self-host:
   https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap
   Kelly's own tokens: no other brand's tokens apply here (docs/separation.md). */

:root {
  --ground: #eef1f3; /* Page background. Vellum in light, Wire black in dark. */
  --ground-raised: #fafbfb; /* The Ask bar, answers, menus: the few surfaces that sit above the page. */
  --ground-sunken: #e3e7ea; /* Code blocks and data wells set into a raised surface. */
  --ink: #14171c; /* Primary text and the mark's curve, on ground, ground-raised and ground-sunken (14:1 or better in both themes). */
  --ink-muted: #4a525c; /* Secondary text, metadata, timestamps, placeholders, on every ground (6.2:1 or better). */
  --ink-faint: #7d858f; /* Non-text marks only: axis ticks, no-edge markers, disabled icons (3:1 on ground and ground-raised). Never body text. */
  --rule: #c5ccd3; /* Hairlines between rows and sections. Decorative; never the only boundary of a control. */
  --rule-strong: #80888f; /* Borders of inputs and quiet buttons (3:1 on ground and ground-raised). */
  --signal: #ffb000; /* Kelly amber, with three jobs only: the brand (the mark's dot, the 'ask' prefix), one key figure per answer or readout, and the primary action once per page. Never links, status, code or decoration. */
  --signal-ink: #8a5600; /* Amber as text: the key figure, the 'ask' prefix, an edge readout. On every ground and on signal-soft (4.9:1 or better). */
  --on-signal: #14171c; /* Text and icons on a signal fill (9.8:1). Never white on amber. */
  --signal-soft: #fcefd2; /* Tint behind signal-ink, such as the edge chip. Never a page or panel background. */
  --focus: #2f62b3; /* Keyboard focus ring: 2px solid, 2px offset, on every ground (4.8:1 or better). Blue so it never reads as the apex. */
  --fault: #b4322a; /* Errors and a dropped wire only, always with a word ('Reconnecting', 'Failed'). Never for losses or negative edge. */
  --chart-model: #b87a00; /* Chart series: Kelly's model probability. Validated categorical pair with chart-market; on ground or ground-raised. */
  --chart-market: #2f62b3; /* Chart series: the no-vig market probability. Second categorical slot; on ground or ground-raised. */
  --code-string: #2f62b3; /* String literals in code samples, on ground-sunken (4.8:1 or better). Code is never amber. */
  --brand-amber: #ffb000; /* Fixed brand constant for print and partner use. In product UI use signal. */
  --brand-wire: #0c0f13; /* Fixed brand constant: Wire black, the app-icon tile. */
  --brand-vellum: #eef1f3; /* Fixed brand constant: Vellum, the light ground. */
  --shadow-ask: 0 1px 0 rgba(20,23,28,0.05), 0 12px 32px rgba(20,23,28,0.08); /* The Ask bar at rest. Nothing else is lifted. */
  --space-1: 4px; /* Gap between a figure and its unit; icon to label. */
  --space-2: 8px; /* Inside chips; between stacked data lines. */
  --space-3: 12px; /* Control padding; gap between inline controls. */
  --space-4: 16px; /* Panel padding on phones; minimum page gutter. */
  --space-5: 24px; /* Panel padding; gap between an answer's parts. */
  --space-6: 32px; /* Between sections inside a page. */
  --space-7: 48px; /* Page gutter on desktop; above and below the Ask bar. */
  --space-8: 64px; /* Between major page regions. */
  --space-9: 96px; /* Hero spacing on marketing pages only. */
  --radius-xs: 2px; /* Chips, edge badges, chart data-ends. */
  --radius-sm: 4px; /* Buttons, inputs, code blocks. */
  --radius-md: 6px; /* Answers, panels, menus. */
  --radius-lg: 10px; /* The Ask bar only. */
  --font-serif: "Source Serif 4", "Source Serif Pro", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0c0f13;
    --ground-raised: #141920;
    --ground-sunken: #080a0d;
    --ink: #e6eaee;
    --ink-muted: #9aa3ad;
    --ink-faint: #6a737d;
    --rule: #29313a;
    --rule-strong: #5e6773;
    --signal-ink: #ffb000;
    --on-signal: #0c0f13;
    --signal-soft: #2b2108;
    --focus: #7fa2e6;
    --fault: #ff6e61;
    --chart-model: #c28600;
    --chart-market: #5b84d1;
    --code-string: #7fa2e6;
    --shadow-ask: 0 0 0 1px #29313a, 0 16px 40px rgba(0,0,0,0.45);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #0c0f13;
  --ground-raised: #141920;
  --ground-sunken: #080a0d;
  --ink: #e6eaee;
  --ink-muted: #9aa3ad;
  --ink-faint: #6a737d;
  --rule: #29313a;
  --rule-strong: #5e6773;
  --signal-ink: #ffb000;
  --on-signal: #0c0f13;
  --signal-soft: #2b2108;
  --focus: #7fa2e6;
  --fault: #ff6e61;
  --chart-model: #c28600;
  --chart-market: #5b84d1;
  --code-string: #7fa2e6;
  --shadow-ask: 0 0 0 1px #29313a, 0 16px 40px rgba(0,0,0,0.45);
  color-scheme: dark;
}

/* Type styles. Numbers always sit in --font-mono; set .label in uppercase. */
.display-xl { font-family: var(--font-serif); font-size: 72px; line-height: 72px; font-weight: 600; letter-spacing: -0.02em; font-variation-settings: 'opsz' 60; } /* One per page at most: the homepage mark's companion line, a page hero. */
.display { font-family: var(--font-serif); font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -0.015em; font-variation-settings: 'opsz' 48; } /* Page titles on API, MCP and Wire pages. */
.title { font-family: var(--font-serif); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; font-variation-settings: 'opsz' 30; } /* Section titles and answer headlines. */
.heading { font-family: var(--font-serif); font-size: 21px; line-height: 28px; font-weight: 600; font-variation-settings: 'opsz' 21; } /* Sub-sections and card headings. */
.lede { font-family: var(--font-serif); font-size: 20px; line-height: 30px; font-weight: 400; font-variation-settings: 'opsz' 20; } /* The first paragraph under a page title. */
.body { font-family: var(--font-serif); font-size: 17px; line-height: 27px; font-weight: 400; font-variation-settings: 'opsz' 17; } /* Answers and running text. Keep lines near 65 characters. */
.body-sm { font-family: var(--font-serif); font-size: 15px; line-height: 23px; font-weight: 400; font-variation-settings: 'opsz' 15; } /* Supporting text, footnotes, captions in prose. */
.ask { font-family: var(--font-serif); font-size: 19px; line-height: 28px; font-weight: 400; font-variation-settings: 'opsz' 19; } /* The question typed into the Ask bar. */
.figure { font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } /* The one key figure in an answer or readout; the only data style that may wear signal-ink. */
.data { font-family: var(--font-mono); font-size: 14px; line-height: 22px; font-weight: 400; font-variant-numeric: tabular-nums; } /* Odds, probabilities, points, timestamps, latencies. Tabular by construction. */
.code { font-family: var(--font-mono); font-size: 13px; line-height: 21px; font-weight: 400; font-variant-numeric: tabular-nums; } /* Code blocks, hostnames, request and response bodies. */
.prefix { font-family: var(--font-mono); font-size: 16px; line-height: 28px; font-weight: 500; font-variant-numeric: tabular-nums; } /* The 'ask' prefix in the Ask bar and lockup, in signal-ink. */
.label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; font-variant-numeric: tabular-nums; text-transform: uppercase; } /* Set in uppercase via CSS. Column heads, axis titles, nav, status. */


/* fonts, from web/src/app/fonts.ts */
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-opsz-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-opsz-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-ext-opsz-normal.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-4-latin-ext-opsz-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* web/src/components/kelly.css */
/* Kelly components. Every colour, space and radius is a token. */
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-serif); font-size: 17px; line-height: 27px; -webkit-font-smoothing: antialiased; }
.k-pad { padding: var(--space-5); }
.k-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.k-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.k-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.k-muted { color: var(--ink-muted); }
.k-label { font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.k-figure { font-family: var(--font-mono); font-size: 28px; line-height: 32px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.k-key { color: var(--signal-ink); }
:where(.k-root) :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Mark */
.k-mark { display: inline-block; vertical-align: middle; color: var(--ink); }
.k-mark .k-mark-curve { fill: none; stroke: currentColor; stroke-linecap: round; }
.k-mark .k-mark-dot { fill: var(--signal); }

/* Button */
.k-btn { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: var(--ground-raised); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-2); }
.k-btn:hover { border-color: var(--ink-muted); }
.k-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.k-btn-primary { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.k-btn-primary:hover { border-color: var(--on-signal); }
.k-btn-ghost { background: transparent; border-color: transparent; color: var(--ink-muted); }
.k-btn-ghost:hover { color: var(--ink); border-color: transparent; }
.k-btn[disabled] { color: var(--ink-faint); border-color: var(--rule); background: transparent; cursor: not-allowed; }

/* Wire status */
.k-wire { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.k-wire-state { display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-weight: 500; }
.k-wire-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 0 var(--ink-faint); }
.k-wire-live .k-wire-dot { animation: k-breathe 2s ease-in-out infinite; }
.k-wire-reconnecting .k-wire-state, .k-wire-offline .k-wire-state { color: var(--fault); }
.k-wire-reconnecting .k-wire-dot, .k-wire-offline .k-wire-dot { background: var(--fault); animation: none; }
.k-wire-sep { color: var(--ink-faint); }
@keyframes k-breathe { 0%, 100% { box-shadow: 0 0 0 0 var(--rule-strong); } 50% { box-shadow: 0 0 0 4px var(--rule); } }

/* Ask bar */
.k-ask-wrap { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; }
.k-ask { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: 0 var(--space-2) 0 var(--space-5); background: var(--ground-raised); border: 1px solid var(--rule); border-radius: var(--radius-lg); box-shadow: var(--shadow-ask); }
.k-ask:focus-within { border-color: var(--rule-strong); }
.k-ask-prefix { font-family: var(--font-mono); font-size: 16px; line-height: 28px; font-weight: 500; color: var(--signal-ink); flex: none; user-select: none; }
.k-ask-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-family: var(--font-serif); font-size: 19px; line-height: 28px; padding: var(--space-4) 0; font-variation-settings: 'opsz' 19; }
.k-ask-input::placeholder { color: var(--ink-muted); opacity: 1; }
.k-ask-send { flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.k-ask-send:hover { border-color: var(--ink-muted); }
.k-ask-send:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.k-ask-send[data-ready="true"] { background: var(--ink); border-color: var(--ink); color: var(--ground-raised); }
.k-ask-send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.k-ask-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-1); }
.k-suggest { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.k-chip { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-muted); background: transparent; border: 1px solid var(--rule); border-radius: var(--radius-xs); padding: 6px var(--space-2); cursor: pointer; text-align: left; }
.k-chip:hover { color: var(--ink); border-color: var(--rule-strong); }
.k-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Odds */
.k-odds { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.k-odds-p { color: var(--ink-muted); }

/* Edge readout */
.k-edge { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--ground-raised); border: 1px solid var(--rule); border-radius: var(--radius-md); max-width: 560px; }
.k-edge-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.k-edge-sel { font-family: var(--font-serif); font-size: 21px; line-height: 28px; font-weight: 600; font-variation-settings: 'opsz' 21; }
.k-edge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); border-top: 1px solid var(--rule); padding-top: var(--space-4); }
.k-edge-cell { display: grid; gap: var(--space-1); min-width: 0; }
.k-edge-val { font-family: var(--font-mono); font-size: 17px; line-height: 24px; font-variant-numeric: tabular-nums; }
.k-edge-cell .k-figure { font-size: 22px; line-height: 24px; }
.k-edge-none { color: var(--ink-muted); }
.k-edge-plot { display: block; width: 100%; height: auto; overflow: visible; }
.k-edge-plot .ax { stroke: var(--rule); stroke-width: 1; }
.k-edge-plot .tk { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 10px; }
.k-edge-plot .mk-model { fill: var(--chart-model); stroke: var(--ground-raised); stroke-width: 2; }
.k-edge-plot .mk-model.none { fill: var(--ink-faint); }
.k-edge-plot .mk-market { fill: var(--chart-market); stroke: var(--ground-raised); stroke-width: 2; }
.k-edge-plot .lb { fill: var(--ink); font-family: var(--font-mono); font-size: 11px; }
.k-edge-plot .span { stroke: var(--ink-faint); stroke-width: 2; }
.k-edge-foot { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink-muted); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); justify-content: space-between; }

/* Answer */
.k-answer { display: grid; gap: var(--space-4); padding: var(--space-5); background: var(--ground-raised); border: 1px solid var(--rule); border-radius: var(--radius-md); max-width: 680px; }
.k-answer-q { font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); display: flex; gap: var(--space-2); }
.k-answer-q b { font-weight: 500; color: var(--ink); }
.k-answer-body { font-family: var(--font-serif); font-size: 17px; line-height: 27px; max-width: 65ch; margin: 0; }
.k-answer-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-3) var(--space-5); border-top: 1px solid var(--rule); padding-top: var(--space-4); }
.k-answer-fig { display: grid; gap: var(--space-1); min-width: 0; }
.k-answer-fig .v { font-family: var(--font-mono); font-size: 17px; line-height: 24px; font-variant-numeric: tabular-nums; }
.k-answer-fig.key .v { font-size: 22px; font-weight: 500; color: var(--signal-ink); }
.k-answer-src { font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); border-top: 1px solid var(--rule); padding-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
.k-example { font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }

/* Code block */
.k-code { background: var(--ground-sunken); border: 1px solid var(--rule); border-radius: var(--radius-sm); min-width: 0; }
.k-code-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-bottom: 1px solid var(--rule); }
.k-code pre { margin: 0; padding: var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 21px; color: var(--ink); tab-size: 2; }
.k-code .c { color: var(--ink-muted); }
.k-code .s { color: var(--code-string); }

/* Growth curve */
.k-curve { display: grid; gap: var(--space-3); max-width: 720px; }
.k-curve-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.k-curve-title { font-family: var(--font-serif); font-size: 21px; line-height: 28px; font-weight: 600; font-variation-settings: 'opsz' 21; margin: 0; }
.k-curve svg { display: block; width: 100%; height: auto; touch-action: none; }
.k-curve .grid { stroke: var(--rule); stroke-width: 1; }
.k-curve .zero { stroke: var(--ink-faint); stroke-width: 1; }
.k-curve .tick { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }
.k-curve .axt { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; }
.k-curve .line { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.k-curve .neg { fill: var(--rule); opacity: 0.6; }
.k-curve .frac { fill: var(--ink); stroke: var(--ground); stroke-width: 2; }
.k-curve .apex { fill: var(--signal); stroke: var(--ground); stroke-width: 2; }
.k-curve .lbl { fill: var(--ink); font-family: var(--font-mono); font-size: 11px; }
.k-curve .lbl-m { fill: var(--ink-muted); font-family: var(--font-mono); font-size: 11px; }
.k-curve .xh { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 3; }
.k-curve .hov { fill: var(--ink); stroke: var(--ground); stroke-width: 2; }
.k-curve-tip { font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink); background: var(--ground-raised); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); font-variant-numeric: tabular-nums; min-height: 20px; }
.k-curve-tip span { color: var(--ink-muted); }
.k-curve table { border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; width: 100%; }
.k-curve th { text-align: right; font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); }
.k-curve td { text-align: right; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--rule); }
.k-curve th:first-child, .k-curve td:first-child { text-align: left; }
.k-curve tr.is-apex td:first-child { color: var(--signal-ink); font-weight: 500; }
.k-curve-scroll { overflow-x: auto; }

@media (prefers-reduced-motion: reduce) { .k-wire-live .k-wire-dot { animation: none; } }


/* web/src/components/kelly-site.css */
/* Additions to kelly.css (a copy of docs/components.css) for the site's port:
   EdgeReadout under D18, the disabled Ask bar, the theme toggle and helpers.
   Every colour, space and radius is a token. */

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

/* Ask bar: disabled until answers open, and its one muted line */
.k-ask-input { text-overflow: ellipsis; }
.k-ask-input:disabled { cursor: not-allowed; color: var(--ink-muted); -webkit-text-fill-color: var(--ink-muted); }
.k-ask-send:disabled { color: var(--ink-faint); border-color: var(--rule); background: transparent; cursor: not-allowed; }
.k-ask-note { margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 23px; font-variation-settings: 'opsz' 15; color: var(--ink-muted); }

/* Edge readout (D18): three named numbers; the key figure is Kelly's probability against the break-even */
.k-edge-verdict { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4); }
.k-edge-verdict .k-figure { font-size: 24px; line-height: 28px; }
.k-edge-edge { font-family: var(--font-mono); font-size: 17px; line-height: 24px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.k-edge-verdict .k-edge-none { font-family: var(--font-mono); font-size: 17px; line-height: 24px; }
.k-edge-note { margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.k-edge-plot .be { stroke: var(--ink-muted); stroke-width: 2; stroke-linecap: round; }
.k-edge-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Growth curve: the figure carries no browser margin */
.k-curve { margin: 0; }

/* Theme toggle: both labels render; the theme on screen picks one */
.k-theme-toggle { padding: 0 var(--space-3); }
.k-theme-to-light { display: none; }
:root[data-theme="dark"] .k-theme-to-dark { display: none; }
:root[data-theme="dark"] .k-theme-to-light { display: inline; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .k-theme-to-dark { display: none; }
  :root:not([data-theme="light"]) .k-theme-to-light { display: inline; }
}

/* GrowthCurve axis titles: the reference design sets them in capitals. The source text stays in sentence case so the
   banned-phrase scan never sees the brand name written "KELLY" (brand-book name rules); capitals are presentation only. */
.k-curve .axt { text-transform: uppercase; }


/* web/src/app/site.css */
/* Page layout for the site. Components are styled in components/kelly*.css. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); font-family: var(--font-serif); }
/* Browsers give controls a sans-serif by default; Kelly has none. Component classes set mono or serif on top. */
button, input, select, textarea { font-family: inherit; }
body { min-height: 100vh; font-variation-settings: 'opsz' 17; text-rendering: optimizeLegibility; }

.k-site { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.k-site a { color: inherit; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.k-site a:hover { text-decoration-color: currentColor; }

.k-skip { position: absolute; left: var(--space-4); top: var(--space-2); z-index: 10; transform: translateY(-200%); font-family: var(--font-mono); font-size: 13px; line-height: 20px; padding: var(--space-2) var(--space-3); background: var(--ground-raised); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); color: var(--ink); }
.k-skip:focus { transform: none; }

/* Header: the wordmark and four mono links */
.k-site-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); padding: var(--space-5) var(--space-7); }
.k-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-serif); font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.01em; font-variation-settings: 'opsz' 24; }
.k-site .k-wordmark { text-decoration: none; }
.k-site-tools { display: flex; align-items: center; gap: var(--space-3); }
.k-site-nav ul { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.k-site-nav a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; border-radius: var(--radius-sm); }
.k-site .k-site-nav a { text-decoration: none; }
.k-site-nav a:hover, .k-site-nav a[aria-current="page"] { color: var(--ink); }
.k-site-nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 6px; }

/* Main */
.k-main { flex: 1; display: flex; flex-direction: column; padding: 0 var(--space-7); }

/* Homepage: the mark above one Ask bar, the wire status beneath, nothing else */
.k-home { align-items: center; justify-content: center; gap: var(--space-6); padding-top: var(--space-6); padding-bottom: var(--space-8); }
.k-home-mark { flex: none; }
.k-home-ask { max-width: 720px; }

/* Product placeholders (/wire, /api, /mcp, /docs) */
.k-product { width: 100%; max-width: 720px; margin: 0 auto; padding: var(--space-8) 0; display: grid; gap: var(--space-4); align-content: start; }
.k-lockup { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-2); }
.k-lockup-name { font-family: var(--font-serif); font-size: 48px; line-height: 52px; font-weight: 600; letter-spacing: -0.015em; font-variation-settings: 'opsz' 48; color: var(--ink); }
.k-lockup-desc { font-family: var(--font-mono); font-size: 36px; line-height: 52px; font-weight: 400; color: var(--ink-muted); color: color-mix(in srgb, var(--ink) 72%, transparent); }
.k-product-title { margin: 0; font-family: var(--font-serif); font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -0.01em; font-variation-settings: 'opsz' 30; }
.k-product-addr { margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 21px; color: var(--ink-muted); }
.k-product-note { margin: 0; max-width: 60ch; font-family: var(--font-serif); font-size: 20px; line-height: 30px; font-variation-settings: 'opsz' 20; color: var(--ink-muted); }

/* Footer (D19), on every page */
.k-site-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); padding: var(--space-5) var(--space-7); border-top: 1px solid var(--rule); }
.k-tagline { margin: 0; font-family: var(--font-serif); font-size: 15px; line-height: 23px; font-variation-settings: 'opsz' 15; color: var(--ink); }
.k-rg { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.k-rg a { white-space: nowrap; }

@media (max-width: 640px) {
  .k-site-head { padding: var(--space-4); }
  .k-site-tools { gap: var(--space-1); }
  .k-site-nav ul { gap: 0; }
  .k-main { padding: 0 var(--space-4); }
  .k-home { gap: var(--space-5); padding-bottom: var(--space-7); }
  .k-product { padding: var(--space-6) 0; }
  .k-lockup-name { font-size: 40px; line-height: 44px; }
  .k-lockup-desc { font-size: 30px; line-height: 44px; }
  .k-site-foot { padding: var(--space-4); flex-direction: column; }
  .k-ask { padding-left: var(--space-4); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}


/* devdocs/assets/docs.css */
/* docs.askkelly.ai: the docs frame (API documentation standard §4, §7). Every colour is a token from
   web/src/app/tokens.css (DOC-VIS-1; `docs:check` fails a literal colour). Brand amber (--signal, --signal-ink,
   --signal-soft) marks only the signature lines (.d-sig, .j-sig) and the brand mark (F26); the primary action is ink.
   Tints and 1px rules, no shadows. */

.d-root { min-height: 100vh; display: flex; flex-direction: column; background: var(--ground); color: var(--ink); }
.d-root a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: 3px; }
.d-root a:hover { text-decoration-color: var(--ink); }
.d-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
body { margin: 0; background: var(--ground); }

/* Docs bar: "Developers", search, the four tabs, the way back and "Get a key" (§4.1) */
.d-bar { display: flex; align-items: center; gap: var(--space-3) var(--space-5); flex-wrap: wrap; padding: 0 var(--space-7) var(--space-3); border-bottom: 1px solid var(--rule); }
.d-bar-title { margin: 0; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.d-root .d-bar-title a { color: var(--ink-muted); text-decoration: none; }
.d-tabs { min-width: 0; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, var(--ink) calc(100% - 24px), transparent); }
.d-tabs ul { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.d-root .d-tabs a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 13px; line-height: 20px; color: var(--ink-muted); text-decoration: none; border-bottom: 2px solid transparent; }
.d-root .d-tabs a:hover { color: var(--ink); }
.d-root .d-tabs a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.d-bar-actions { display: flex; align-items: center; gap: var(--space-3); margin: 0; font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.d-root .d-back { color: var(--ink-muted); }
.d-root .d-action { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-sm); background: var(--ink); color: var(--ground); text-decoration: none; }
.d-root .d-action:hover { background: var(--ink-muted); }
.d-search-open { display: inline-flex; align-items: center; gap: var(--space-5); min-height: 36px; padding: 0 var(--space-2) 0 var(--space-3); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--ground-raised); color: var(--ink-muted); font-family: var(--font-mono); font-size: 13px; cursor: pointer; }
.d-kbd { border: 1px solid var(--rule); border-radius: var(--radius-xs); padding: 0 6px; font-size: 11px; }

/* Body: nav 200px, content, rail from 1200px (§4.2, §4.4) */
.d-shell { flex: 1; display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-6); max-width: 1440px; width: 100%; box-sizing: border-box; margin: 0 auto; padding: var(--space-5) var(--space-7) var(--space-8); }
.d-nav { position: sticky; top: var(--space-4); align-self: start; max-height: calc(100vh - var(--space-6)); overflow-y: auto; font-family: var(--font-mono); font-size: 13px; line-height: 20px; }
.d-nav ul { list-style: none; margin: 0; padding: 0; }
.d-nav-group { margin-bottom: var(--space-4); }
.d-nav-label { margin: 0 0 var(--space-1); font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.d-root .d-nav a { display: block; padding: 3px var(--space-2); margin-left: calc(-1 * var(--space-2)); color: var(--ink-muted); text-decoration: none; border-radius: var(--radius-xs); }
.d-root .d-nav a:hover { color: var(--ink); }
.d-root .d-nav a[aria-current="page"] { color: var(--ink); background: var(--ground-sunken); }
.d-pages-btn { display: none; }

main { min-width: 0; }
main:focus { outline: none; }
.d-article { display: grid; grid-template-columns: minmax(0, 46rem); column-gap: var(--space-7); }
.d-title-row, .d-lead, .d-body, .d-page-foot { grid-column: 1; }
.d-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.d-title-row h1 { margin: 0; font-family: var(--font-serif); font-size: 40px; line-height: 46px; font-weight: 600; letter-spacing: -0.015em; font-variation-settings: 'opsz' 40; overflow-wrap: anywhere; }
.d-lead { margin: var(--space-3) 0 var(--space-6); font-family: var(--font-serif); font-size: 20px; line-height: 30px; font-variation-settings: 'opsz' 20; color: var(--ink-muted); }
.d-rail { display: none; }
@media (min-width: 1200px) {
  .d-article { grid-template-columns: minmax(0, 46rem) 200px; }
  .d-rail { display: block; grid-column: 2; grid-row: 1 / span 4; position: sticky; top: var(--space-4); align-self: start; max-height: calc(100vh - var(--space-6)); overflow-y: auto; font-family: var(--font-mono); font-size: 12px; line-height: 18px; }
  .d-rail ul { list-style: none; margin: 0; padding: 0; }
  .d-root .d-rail a { display: block; padding: 3px 0; min-height: 24px; color: var(--ink-muted); text-decoration: none; }
  .d-root .d-rail a:hover, .d-root .d-rail a[aria-current="true"] { color: var(--ink); }
  .d-rail-3 { padding-left: var(--space-3); }
}

/* Page tools: one small "Copy page" control at the right of the title (§4.2) */
.d-tools { position: relative; flex: none; font-family: var(--font-mono); font-size: 12px; }
.d-tools summary { list-style: none; cursor: pointer; min-height: 32px; display: inline-flex; align-items: center; padding: 0 var(--space-2); color: var(--ink-muted); border-radius: var(--radius-sm); }
.d-tools summary::-webkit-details-marker { display: none; }
.d-tools summary:hover { color: var(--ink); }
.d-tools ul { position: absolute; right: 0; z-index: 5; min-width: 200px; margin: var(--space-1) 0 0; padding: var(--space-1); list-style: none; background: var(--ground-raised); border: 1px solid var(--rule); border-radius: var(--radius-md); box-shadow: var(--shadow-ask); }
.d-tools li > a, .d-tools li > button { display: block; width: 100%; box-sizing: border-box; padding: var(--space-2); font: inherit; text-align: left; color: var(--ink); background: none; border: 0; border-radius: var(--radius-xs); cursor: pointer; text-decoration: none; }
.d-tools li > a:hover, .d-tools li > button:hover { background: var(--ground-sunken); }

/* Prose */
.d-body { font-family: var(--font-serif); font-size: 17px; line-height: 27px; font-variation-settings: 'opsz' 17; }
.d-body h2 { margin: var(--space-7) 0 var(--space-3); font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -0.01em; font-variation-settings: 'opsz' 26; }
.d-body h3 { margin: var(--space-6) 0 var(--space-2); font-size: 20px; line-height: 28px; font-weight: 600; font-variation-settings: 'opsz' 20; }
.d-body h2:first-child { margin-top: 0; }
.d-body p, .d-body ul, .d-body ol { margin: 0 0 var(--space-4); }
.d-body li { margin-bottom: var(--space-1); }
.d-body code { font-family: var(--font-mono); font-size: 0.82em; padding: 1px 4px; background: var(--ground-sunken); border-radius: var(--radius-xs); overflow-wrap: anywhere; }
.d-anchor { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; margin-left: var(--space-1); font-family: var(--font-mono); font-size: 14px; vertical-align: middle; opacity: 0; }
.d-root .d-anchor { color: var(--ink-muted); text-decoration: none; }
h2:hover .d-anchor, h3:hover .d-anchor, .d-anchor:focus { opacity: 1; }
.d-body blockquote { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); background: var(--ground-sunken); border-left: 1px solid var(--rule-strong); border-radius: var(--radius-xs); }
.d-body blockquote p:last-child { margin-bottom: 0; }

/* Tables: header row filled; wide ones scroll inside a focusable container (§7.3, DOC-A11Y-4) */
.d-table { overflow-x: auto; margin: 0 0 var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-sm); }
.d-table table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.d-table th { text-align: left; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); background: var(--ground-sunken); padding: var(--space-2) var(--space-3); }
.d-table td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--rule); vertical-align: top; }
.d-table td code { white-space: nowrap; overflow-wrap: normal; }

/* Code panels: light in light mode, dark in dark mode (§7.3); two-tone JSON (DOC-CODE-6) */
.d-code { margin: 0 0 var(--space-5); border: 1px solid var(--rule); border-radius: var(--radius-sm); background: var(--ground-sunken); }
.d-code-label { padding: var(--space-1) var(--space-3); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 11px; line-height: 20px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.d-code pre { margin: 0; padding: var(--space-3); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 21px; font-variant-numeric: tabular-nums; color: var(--ink); }
.d-code pre code { padding: 0; background: none; font-size: inherit; }
.j-key, .j-p { color: var(--ink-muted); }
.j-str { color: var(--code-string); }
.j-num, .j-lit { color: var(--ink); }

/* The signature (§7.4): provenance lines under a captured response. Amber means provenance and nothing else. */
.d-sig { margin: 0; padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 2ch); border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12px; line-height: 20px; color: var(--ink-muted); }
.d-sig li::marker { color: var(--signal-ink); font-weight: 500; }
.d-sig li.is-on, .j-sig.is-on { background: var(--signal-soft); color: var(--ink); }
.j-sig { cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--signal-ink); text-underline-offset: 3px; }

/* Field rows (§5.8) */
.d-op-path { margin: var(--space-7) 0 var(--space-1); font-family: var(--font-mono); font-size: 14px; }
.d-method { display: inline-block; padding: 0 var(--space-2); border: 1px solid var(--ink); border-radius: var(--radius-xs); background: var(--ground-sunken); font-size: 12px; font-weight: 600; }
.d-field { padding: var(--space-3) 0; border-top: 1px solid var(--rule); }
.d-field-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-2); }
.d-field-name { font-weight: 600; }
.d-body .d-field-name { background: none; padding: 0; }
.d-field-type { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.d-badge { font-family: var(--font-mono); font-size: 11px; line-height: 16px; padding: 0 6px; border: 1px solid var(--rule-strong); border-radius: var(--radius-xs); color: var(--ink-muted); }
.d-field p { margin: var(--space-1) 0 0; font-size: 15px; line-height: 23px; }
.d-field-limits { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.d-fold { margin-top: var(--space-2); padding-left: var(--space-4); border-left: 1px solid var(--rule); }
.d-fold summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); min-height: 24px; }

/* Page foot and site footer (§4.2, DOC-FRAME-1) */
.d-page-foot { margin-top: var(--space-8); padding-top: var(--space-4); border-top: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.d-prevnext { display: flex; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.d-root .d-prevnext a { text-decoration: none; font-size: 14px; }
.d-next { text-align: right; }
.d-updated { margin: 0; }
.d-site-foot { border-top: 1px solid var(--rule); }
.d-site-foot .k-site-foot { border-top: 0; }
.d-foot-contact { margin: 0; padding: var(--space-4) var(--space-7) 0; font-family: var(--font-mono); font-size: 12px; line-height: 18px; color: var(--ink-muted); }

/* Search dialog */
.d-search-dialog { width: min(640px, calc(100vw - var(--space-6))); max-height: min(560px, calc(100vh - var(--space-8))); padding: 0; border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--ground-raised); color: var(--ink); box-shadow: var(--shadow-ask); }
.d-search-dialog::backdrop { background: var(--ground); opacity: 0.7; }
.d-search-dialog input { width: 100%; box-sizing: border-box; padding: var(--space-3) var(--space-4); border: 0; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink); font-family: var(--font-serif); font-size: 19px; }
.d-search-dialog input:focus { outline: none; }
.d-search-results { margin: 0; padding: var(--space-2); max-height: 440px; overflow-y: auto; list-style: none; }
.d-search-kind { margin: var(--space-2) var(--space-2) var(--space-1); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.d-root .d-search-results a { display: block; padding: var(--space-2); border-radius: var(--radius-xs); text-decoration: none; }
.d-search-results a[aria-selected="true"], .d-search-results a:hover { background: var(--ground-sunken); }
.d-search-results small { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }

/* < 720px: one column, nav behind "Pages" (§4.4) */
@media (max-width: 719px) {
  .d-bar { padding: 0 var(--space-4) var(--space-2); }
  .d-bar-actions { width: 100%; justify-content: space-between; }
  .d-shell { display: block; padding: var(--space-4) var(--space-4) var(--space-7); }
  .d-pages-btn { display: inline-flex; align-items: center; min-height: 36px; margin-bottom: var(--space-3); padding: 0 var(--space-3); border: 1px solid var(--rule-strong); border-radius: var(--radius-sm); background: var(--ground-raised); color: var(--ink); font-family: var(--font-mono); font-size: 13px; }
  .d-nav { display: none; position: static; max-height: none; margin-bottom: var(--space-5); }
  .d-nav.is-open { display: block; }
  .d-title-row h1 { font-size: 32px; line-height: 38px; }
  .d-foot-contact { padding: var(--space-4) var(--space-4) 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .d-sig li, .j-sig { transition: background-color 120ms ease-out; }
}