/* The /consult page: Anshira's agent builds your proof plan with you.
   While it builds: one thing at a time. The four groups run along the top as words (Your agent, Your buyer, How we'll prove it,
   Ground rules), the thing in focus is large and writes in, and one line of the agent's voice sits under it: what it is reading, the
   question it is asking, or a note. At the end the whole plan is one page, in the same four groups, with three counts at the top
   (agreed, suggested, open), one primary action, and the history. No chat log and no sidebar: the conversation is behind a link.
   Built on the site's conventions (tokens.css, site.css, brand/DESIGN.md): one white screen on the mist page, hairlines not shadows,
   colour only for meaning (indigo = the agent's focus, held and links; vermilion = failed), Martian Mono for data, sentence case,
   one ink button per view. The mark is the tick: grey = nothing yet, hollow = suggested, solid ink = confirmed, indigo = being
   written or asked now. Every state also carries a word. Motion is arrival only (words writing in, a tick landing, a view folding
   into the next), 160-620ms, none under reduced motion. Everything is drawn from one view model (consult.js, "the view model"). */

/* ------------------------------------------------------------------ sign-in, fields and the older cards (kept from the chat page) */
/* sign-in, and the offline notice, share one layout */
.cs-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.cs-gate { min-height: 100%; display: flex; align-items: center; padding: 40px 28px; }
.cs-gate-in { width: 100%; max-width: 540px; margin: 0 auto; }
.cs-gate-h { font-size: clamp(1.9rem, 3.2vw, 2.5rem); line-height: 1.05; letter-spacing: -0.03em; }
.cs-gate-h .turn { display: block; }
.cs-lede { margin-top: 16px; max-width: 56ch; font-size: 1rem; }
.cs-form { margin-top: 28px; display: grid; gap: 16px; }
.cs-form + .cs-form { margin-top: 28px; }
.cs-fine { margin-top: 28px; font-size: 0.8125rem; color: var(--an-muted); }
.cs-fine a { color: inherit; }
.cs-sent { font-size: 1rem; color: var(--an-ink); }
.cs-sent b { font-weight: 600; overflow-wrap: anywhere; }
.cs-dev { margin: 0; padding: 10px 12px; border: 1px solid var(--an-line-2); border-radius: var(--an-r-s); font-size: 0.8125rem; color: var(--an-ink-2); }
.cs-dev b { color: var(--an-ink); font-weight: 500; letter-spacing: 0.08em; }
/* the page reads the address as you type: the company it will plan for, as Anshira's agent will name it */
.cs-co { margin: 0; min-height: 1.25rem; display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--an-muted); }
.cs-co:empty { display: none; }
.cs-co::before { content: ""; flex: none; width: 4px; height: 14px; border-radius: 1px; background: var(--an-ai); }
.cs-co b { font: 500 0.8125rem var(--an-sans); color: var(--an-ink); }
.cs-co.is-in { animation: cs-in var(--an-fast) var(--an-ease); }

/* fields: same as the call form */
.cs-field { display: grid; gap: 6px; border: 0; padding: 0; margin: 0; min-width: 0; }
.cs-field > label, .cs-field > legend, .cs-lab { padding: 0; font-size: 0.875rem; font-weight: 500; color: var(--an-ink); }
.cs-hint { margin: 0; font-size: 0.8125rem; color: var(--an-muted); }
.cs-input, .cs-field input:not([type="radio"]):not([type="checkbox"]):not([type="range"]), .cs-field select, .cs-composer textarea {
  width: 100%; min-height: 44px; font: 400 1rem var(--an-sans); color: var(--an-ink); background: var(--an-paper);
  border: 1px solid var(--an-faint); border-radius: var(--an-r-s); padding: 10px 12px; }
.cs-field input:focus-visible, .cs-field select:focus-visible, .cs-composer textarea:focus-visible { outline: 2px solid var(--an-ai); outline-offset: 1px; border-color: var(--an-ai); }
.cs-code { max-width: 11rem; font-size: 1.25rem !important; font-weight: 500 !important; font-variant-numeric: tabular-nums; letter-spacing: 0.28em; }
/* six ticks under the code: one lands per digit, like a tally */
.cs-code-ticks { display: flex; gap: 6px; width: 11rem; }
.cs-code-ticks i { flex: 1; height: 6px; border-radius: 1px; background: var(--an-line-2); transition: background var(--an-fast) var(--an-ease), transform var(--an-fast) var(--an-ease); transform-origin: bottom; }
.cs-code-ticks i.on { background: var(--an-ink); }
.cs-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.cs-err { margin: 0; min-height: 0; font-size: 0.875rem; color: var(--an-shu); }
.cs-err:empty { display: none; }
.cs-link { background: none; border: 0; padding: 4px 0; font: 500 0.875rem var(--an-sans); color: var(--an-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cs-link:hover { color: var(--an-ai); }
.cs-link:disabled { color: var(--an-faint); cursor: default; }
.cs-main .btn { min-height: 44px; }
.cs-main .btn-sm { min-height: 0; }

.cs-card { display: grid; gap: 14px; padding: 18px 20px; background: var(--an-paper); border: 1px solid var(--an-line-2); border-radius: var(--an-r-m); min-width: 0; margin: 0; }

.cs-card p { margin: 0; }
.cs-card-t { font-size: 0.9375rem; color: var(--an-ink-2); max-width: 56ch; }

/* the first question: what do you want to leave with. Each row says what it builds, and previews that shape on the plan. */

/* chips: hairline buttons, never pills */

.cs-opt { display: inline-flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 2px; min-height: 44px; padding: 10px 14px; font: 500 0.9375rem/1.3 var(--an-sans); color: var(--an-ink); text-align: left;
  background: var(--an-paper); border: 1px solid var(--an-line-2); border-radius: var(--an-r-s); cursor: pointer;
  transition: border-color var(--an-fast) var(--an-ease), background var(--an-fast) var(--an-ease); }
.cs-opt:hover { border-color: var(--an-ink); }
.cs-opt[aria-pressed="true"], .cs-opt:has(input:checked) { background: var(--an-ai-soft); border-color: var(--an-ai); }
.cs-opt:has(input:focus-visible) { outline: 2px solid var(--an-ai); outline-offset: 3px; }
.cs-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cs-opt:disabled { cursor: default; }
.cs-opt .why { font-size: 0.8125rem; line-height: 1.4; color: var(--an-muted); }
.cs-opt.is-first { border-color: var(--an-ink); }
.cs-hintrow { margin: 10px 0 0; font-size: 0.8125rem; color: var(--an-muted); }

/* checklist: a ledger of rows with a box each */
.cs-checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--an-line); }
.cs-checks li { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--an-line); }
.cs-checks label { flex: 1; display: flex; align-items: center; gap: 12px; padding: 11px 0; min-height: 44px; cursor: pointer; font-size: 0.9375rem; color: var(--an-ink); }
.cs-checks input[type="checkbox"], .cs-checks input[type="radio"] { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--an-ink); }
.cs-checks .cs-link { flex: none; font-size: 0.8125rem; color: var(--an-muted); }

.cs-count-l { font: 400 0.6875rem var(--an-mono); color: var(--an-muted); }

/* buyer fields, edit fields */

/* outcome and confirm cards: which of the three tiers this check is, then the check itself */

/* slider: the figure beside its definition, and what it means for every hundred counted cases */

/* booking */

/* after it's done: a quiet rating */

/* ------------------------------------------------------------------ the record the plan turns into */
/* ------------------------------------------------------------------ the record the plan turns into */
.cs-rc { display: grid; gap: 0; }
.cs-rc-in { animation: cs-in 260ms var(--an-ease) both; }
.cs-rc-head { display: grid; gap: 6px; padding: 14px 0 12px; border-bottom: 1px solid var(--an-line); }
.cs-rc-crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin: 0; font-size: 0.875rem; color: var(--an-muted); }
.cs-rc-crumbs img { flex: none; }
.cs-rc-crumbs .here { color: var(--an-ink); font-weight: 600; }
.cs-rc-crumbs .sep { color: var(--an-line-2); }
.cs-rc-crumbs .ag { min-width: 0; max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-rc-status { margin: 0; font: 400 0.6875rem/1.6 var(--an-mono); color: var(--an-muted); }
.cs-rc-status b { font-weight: 500; color: var(--an-ink); }
.cs-rc-fig { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start; padding: 18px 0 16px; border-bottom: 1px solid var(--an-line); }
.cs-rc-big { font-size: 4.5rem; line-height: 0.9; font-weight: 600; letter-spacing: -0.03em; color: var(--an-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-rc-big.is-dash { color: var(--an-ink); font-weight: 500; }
.cs-rc-bigw { display: grid; gap: 6px; justify-items: start; align-self: start; }
.cs-rc-bigc { margin: 0; font: 400 0.6875rem var(--an-mono); color: var(--an-muted); }
.cs-rc-done { display: grid; gap: 2px; }
.cs-rc-done .cs-list li { padding: 4px 0; }
.cs-rc-def { display: grid; gap: 4px; min-width: 0; }
.cs-rc-def p { font-size: 0.9375rem; line-height: 1.45; color: var(--an-ink); }
.cs-rc-def .k { color: var(--an-muted); }
.cs-rc-def .src { margin: 0; font: 400 0.6875rem/1.6 var(--an-mono); color: var(--an-muted); }
.cs-meter-w { margin: 6px 0 2px; max-width: 560px; }
.cs-meter { display: grid; grid-template-columns: repeat(100, minmax(0, 1fr)); gap: 1px; align-items: end; height: 26px; }
.cs-meter i { display: block; height: 12px; background: var(--an-line-2); border-radius: 1px; transform-origin: bottom; }
.cs-meter i.o { background: var(--an-line); }
.cs-meter i.t { height: 26px; background: var(--an-ink); }
.cs-rc-def .cs-meter-c { margin: 6px 0 0; font: 400 0.6875rem/1.5 var(--an-mono); color: var(--an-muted); max-width: 64ch; }
.cs-rc-def .cs-meter-c b { font-weight: 500; color: var(--an-ink); }
.cs-rc-play .cs-meter i { animation: cs-land 240ms var(--an-ease) calc(var(--k, 0) * 7ms + 420ms) backwards; }
.cs-rc-sec { padding: 14px 0 4px; }
.cs-rc-sh { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; font-size: 0.8125rem; color: var(--an-muted); }
.cs-rc-sh .legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 0.6875rem var(--an-mono); }
.cs-rc-sh .legend span { display: inline-flex; align-items: center; gap: 6px; }
.cs-rc-sh .legend i { display: inline-block; width: 4px; height: 12px; border-radius: 1px; background: var(--an-paper); box-shadow: inset 0 0 0 1px var(--an-ink); }
/* one case, counted three ways: the ticks every case in the record will get, armed and waiting for the first one */
.cs-armed { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--an-line); }
.cs-armed > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 24px; align-items: end; padding: 12px 0; border-bottom: 1px solid var(--an-line); }
.cs-armed .job { font-size: 0.9375rem; font-weight: 600; color: var(--an-ink); align-self: start; min-width: 0; overflow-wrap: anywhere; }
.cs-armed .job span { display: block; font: 400 0.6875rem var(--an-mono); color: var(--an-muted); margin-top: 2px; }
.cs-armed .cs-tri { display: grid; grid-template-columns: repeat(3, minmax(0, 5.6rem)); gap: 6px 14px; }
.cs-armed .tc { display: grid; grid-template-columns: 6px minmax(0, 1fr); gap: 8px; align-items: end; min-width: 0; }
.cs-armed .tk { display: block; width: 6px; height: 34px; border-radius: 1px; background: var(--an-paper); box-shadow: inset 0 0 0 1px var(--an-ink); transform-origin: bottom; }
.cs-armed .tc[data-none] .tk { box-shadow: inset 0 0 0 1px var(--an-line-2); }
.cs-armed .tt { display: grid; gap: 1px; min-width: 0; }
.cs-armed .tn { font: 500 0.6875rem var(--an-mono); color: var(--an-ink); }
.cs-armed .tw { font: 400 0.6875rem var(--an-mono); color: var(--an-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-rc-play .cs-armed .tk { animation: cs-land 360ms var(--an-ease) backwards; animation-delay: calc(var(--i, 0) * 90ms + 620ms); }
@keyframes cs-land { from { opacity: 0; transform: scaleY(0.15); } to { opacity: 1; transform: none; } }
/* what the record will count, as a ledger */
.cs-rc-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 28px; }
.cs-rc-two > div { min-width: 0; }
.cs-tally { margin: 0; border-top: 1px solid var(--an-line); }
.cs-tally div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--an-line); font-size: 0.875rem; }
.cs-tally dt { color: var(--an-ink-2); }
.cs-tally dd { margin: 0; text-align: right; font-weight: 600; color: var(--an-ink); font-variant-numeric: tabular-nums; }
.cs-tally dd.mono { font: 400 0.6875rem var(--an-mono); color: var(--an-muted); }
.cs-rc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--an-line); }
.cs-rc-list li { padding: 7px 0; border-bottom: 1px solid var(--an-line); font-size: 0.875rem; color: var(--an-ink); overflow-wrap: anywhere; }
.cs-rc-list li span { display: block; font: 400 0.6875rem var(--an-mono); color: var(--an-muted); margin-top: 1px; }
.cs-rc-note { margin: 8px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--an-muted); }
/* Anshira's own record, read live: the same tick for each request it has counted */
.cs-own { margin-top: 14px; padding: 14px 0 6px; border-top: 1px solid var(--an-line); }
.cs-own-strip { display: flex; flex-wrap: wrap; gap: 2px; height: 28px; overflow: hidden; }
.cs-own-strip i { display: block; flex: none; width: 5px; height: 28px; border-radius: 1px; background: var(--an-ai); transform-origin: bottom; }
.cs-own-strip i.pend { background: var(--an-paper); box-shadow: inset 0 0 0 1px var(--an-line-2); }
.cs-own-strip i.miss { background: var(--an-line-2); }
.cs-own-strip i.oth { background: var(--an-line); }
.cs-own-strip i.new { animation: cs-land 420ms var(--an-ease) both; }
.cs-rc-play .cs-own-strip i { animation: cs-land 320ms var(--an-ease) calc(var(--k, 0) * 22ms + 1000ms) backwards; }
.cs-own-line { margin: 8px 0 0; font: 400 0.6875rem/1.6 var(--an-mono); color: var(--an-muted); }
.cs-own-line a { color: var(--an-ink); text-underline-offset: 3px; }
.cs-own-line a:hover { color: var(--an-ai); }
.cs-own-line b { font-weight: 500; color: var(--an-ink); }
.cs-rc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--an-line); font-size: 0.875rem; }
.cs-rc-foot a:not(.btn) { color: var(--an-ink); }

/* the moment the plan turns into the record: head, figure, the armed ticks, the live strip, then the tally counts up */
.cs-rc-play [style*="--d"] { animation: cs-arrive 420ms var(--an-ease) var(--d, 0ms) backwards; }

/* ------------------------------------------------------------------ the intake: data notes, take it with you, consent */
/* ------------------------------------------------------------------ the self-serve intake (protocol/intake.yaml): dump, understood, gaps, proof plan, take it with you */
.cs-invite-only { margin-top: 20px; }
.cs-invite-only .cs-lede { margin-top: 10px; }
.cs-fine .dot { margin-inline: 0.3em; }
.cs-datanote { margin: 2px 0 0; font-size: 0.8125rem; color: var(--an-muted); max-width: 64ch; }
.cs-datanote .k { font-size: 0.8125rem; color: var(--an-muted); margin-right: 8px; }
.cs-datanote a { color: inherit; }
.cs-hintinline { color: var(--an-muted); font-size: 0.8125rem; }

/* 5. take it with you, and two separate, optional consents */
.cs-end { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 4px; border-top: 1px solid var(--an-line); }
.cs-consent { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--an-line); }
.cs-consent-h { margin: 0; font: 600 0.9375rem var(--an-sans); color: var(--an-ink); }
.cs-consent-o { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; padding: 6px 0; }
.cs-consent-o input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--an-ink); }
.cs-consent-o b { display: block; font-weight: 600; font-size: 0.9375rem; color: var(--an-ink); }
.cs-consent-o .d { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.5; color: var(--an-muted); max-width: 62ch; }
.cs-consent-f { display: grid; gap: 12px; padding-left: 30px; max-width: 420px; }
.cs-consent.is-done { padding-top: 14px; }
.cs-fixed { margin: 0; min-height: 44px; display: flex; align-items: center; padding: 10px 12px; background: var(--an-panel); border: 1px solid var(--an-line); border-radius: var(--an-r-s); font: 400 0.9375rem var(--an-sans); color: var(--an-ink); overflow-wrap: anywhere; }
.cs-copies { list-style: none; margin: 4px 0 0; padding: 0; border-top: 1px solid var(--an-line); }
.cs-copies li { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--an-line); font-size: 0.875rem; line-height: 1.5; color: var(--an-ink-2); }
.cs-copies b { font-weight: 600; color: var(--an-ink); }
.cs-linkrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.cs-linkshort { display: flex; align-items: center; min-width: 0; padding: 0 12px; min-height: 44px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 400 0.75rem var(--an-mono); color: var(--an-ink); background: var(--an-panel); border: 1px solid var(--an-line-2); border-radius: var(--an-r-s); }
.cs-linkbox { width: 100%; min-height: 44px; font: 400 0.75rem var(--an-mono); color: var(--an-ink); background: var(--an-panel); border: 1px solid var(--an-line-2); border-radius: var(--an-r-s); padding: 10px 12px; }
.cs-obo-out { display: grid; gap: 6px; }

/* goal rows: the parts a goal builds, in words beside the strip */

.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* [hidden] must win over the display set by component classes below */
.cs-main [hidden], .cs-main .btn[hidden] { display: none !important; }
#cs-live { position: fixed; top: 0; left: 0; }
.cs .nav .wrap { max-width: 1120px; }
.cs .nav .btn { margin-left: auto; }
.cs-nojs { max-width: 60ch; margin: 24px auto; padding-inline: 24px; }
.cs-main { max-width: 1120px; margin: 0 auto; padding: 16px 24px 24px; }

/* the screen: one white column on the mist page */
.cs-screen { position: relative; display: flex; flex-direction: column; overflow: clip; height: calc(100dvh - 56px - 40px); min-height: 540px; max-width: 1040px; margin: 0 auto;
  background: var(--an-paper); border: 1px solid var(--an-line-2); border-radius: var(--an-r-m); }
.cs-app { display: flex; flex-direction: column; flex: 1; min-height: 0; position: relative; }

/* head: who this is, whose plan it is, and the way into the conversation */
.cs-head { flex: none; display: flex; align-items: center; gap: 8px 16px; min-height: 52px; padding: 0 28px; border-bottom: 1px solid var(--an-line); }
.cs-title { margin: 0; font-size: 0.9375rem; min-width: 0; }
.cs-title a { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; text-decoration: none; }
.cs-title img { flex: none; }
.cs-title .here { color: var(--an-ink); font-weight: 600; }
.cs-title .sep { color: var(--an-line-2); }
.cs-title .rec { color: var(--an-ai); text-decoration: underline; text-underline-offset: 3px; }
.cs-title a:hover .rec { text-decoration-thickness: 2px; }
.cs-for { margin: 0 0 0 auto; min-width: 0; font-size: 0.8125rem; color: var(--an-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-for b { color: var(--an-ink); font-weight: 500; }
.cs-for .st { margin-left: 8px; }
.cs-head-r { flex: none; display: flex; align-items: center; gap: 4px 18px; margin-left: auto; }
.cs-for:not([hidden]) + .cs-head-r { margin-left: 0; }

/* the four groups, as words. The current one is marked; the ticks under each are a quiet mark of how far it is, never a menu. */
.cs-groupsnav { flex: none; border-bottom: 1px solid var(--an-line); }
.cs-groups { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; width: min(100%, 980px); margin: 0 auto; padding: 12px 28px 0; }
.cs-gi { min-width: 0; }
.cs-g { position: relative; display: grid; align-content: start; gap: 7px; width: 100%; padding: 0 0 11px; background: none; border: 0; text-align: left; font: 500 0.8125rem/1.25 var(--an-sans); color: var(--an-faint); cursor: default; }
.cs-g[data-go] { cursor: pointer; color: var(--an-muted); }
.cs-g[data-go]:hover { color: var(--an-ink); }
.cs-g[aria-current="step"] { color: var(--an-ink); font-weight: 600; }
.cs-g[aria-current="step"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--an-ai); }
.cs-g .lbl { display: block; text-wrap: balance; }
.cs-g .cs-ticks { display: flex; gap: 2px; height: 8px; }
.cs-g .cs-ticks i { display: block; flex: 0 1 18px; min-width: 3px; height: 8px; border-radius: 1px; background: var(--an-line-2); border: 1px solid transparent;
  transition: background var(--an-fast) var(--an-ease), border-color var(--an-fast) var(--an-ease); }
.cs-g .cs-ticks i[data-s="suggested"], .cs-g .cs-ticks i[data-s="check"] { background: var(--an-paper); border-color: var(--an-ink); }
.cs-g .cs-ticks i[data-s="confirmed"] { background: var(--an-ink); border-color: var(--an-ink); }
.cs-g .cs-ticks i[data-s="asking"], .cs-g .cs-ticks i[data-s="writing"] { background: var(--an-ai); border-color: var(--an-ai); }
.cs-g .cs-ticks i[data-s="writing"] { animation: cs-pulse 1.6s ease-in-out infinite; }
.cs-g .cs-ticks i[data-s="open"] { background: var(--an-paper); border-color: var(--an-line-2); }
@keyframes cs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes cs-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes cs-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes cs-flash { 0% { background-color: var(--an-ai-soft); } 100% { background-color: transparent; } }

/* the page: the focus while building, the whole plan at the end */
.cs-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--an-line-2) transparent; }
.cs-page { position: relative; width: min(100%, 980px); margin: 0 auto; padding: 36px 28px 56px; }
.cs-focus, .cs-sum, .cs-intro, .cs-stub, .cs-paste { max-width: 640px; }

/* headlines: the claim in ink, the turn in faint */
.cs-h { margin: 0; font-size: 1.75rem; line-height: 1.08; font-weight: 700; letter-spacing: -0.03em; color: var(--an-ink); text-wrap: balance; }
.cs-h .turn { display: block; color: var(--an-faint); }
.cs-pane { margin: 0 0 10px; font-size: 0.8125rem; line-height: 1.4; color: var(--an-muted); }
.cs-pane b { color: var(--an-ink); font-weight: 500; }
.cs-pane .st { margin-left: 8px; }

/* the lines: a tick and a sentence. Used for what I understood, and for the plan. */
.cs-sents { list-style: none; margin: 18px 0 0; padding: 0; }
.cs-s { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); padding: 12px 0; border-top: 1px solid var(--an-line); }
.cs-s:first-child { border-top: 0; padding-top: 4px; }
.cs-s > .tk { margin-top: 7px; }
.tk { display: block; width: 4px; height: 14px; border-radius: 1px; background: var(--an-line-2); border: 1px solid transparent;
  transition: background var(--an-fast) var(--an-ease), border-color var(--an-fast) var(--an-ease); }
.tk[data-s="none"] { opacity: 0; }
.tk[data-s="suggested"] { background: var(--an-paper); border-color: var(--an-ink); }
.tk[data-s="confirmed"] { background: var(--an-ink); border-color: var(--an-ink); }
.tk[data-s="asking"], .tk[data-s="writing"], .tk[data-s="check"] { background: var(--an-ai); border-color: var(--an-ai); }
.tk[data-s="writing"] { animation: cs-pulse 1.6s ease-in-out infinite; }
.tk[data-s="open"] { background: var(--an-paper); border-color: var(--an-line-2); }
.tk.land { animation: cs-land 380ms var(--an-ease); transform-origin: bottom; }
@keyframes cs-land { from { opacity: 0; transform: scaleY(0.15); } to { opacity: 1; transform: none; } }
.tx { margin: 0; font-size: 1.0625rem; line-height: 1.5; color: var(--an-ink-2); overflow-wrap: break-word; transition: color var(--an-mid) var(--an-ease); }
[data-s="confirmed"] > .cs-lb > .tx, [data-s="writing"] > .cs-lb > .tx, [data-s="asking"] > .cs-lb > .tx, [data-s="check"] > .cs-lb > .tx { color: var(--an-ink); }
.cs-lb { min-width: 0; }
.lead { font-weight: 600; color: var(--an-ink); }
.q { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--an-muted); overflow-wrap: anywhere; }
.q .how { margin-right: 8px; color: var(--an-muted); }
.q q { quotes: "\201C" "\201D"; color: var(--an-ink-2); }
.was { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.45; color: var(--an-muted); }
.was .st { margin-right: 6px; color: var(--an-muted); }
.cs-chg { color: var(--an-muted); font-weight: 400; white-space: nowrap; }
.tx.w, .w { animation: cs-word 260ms var(--an-ease) both; }
@keyframes cs-word { from { opacity: 0; } to { opacity: 1; } }
.caret { display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--an-ai); animation: cs-caret 1.1s ease-in-out infinite; }
@keyframes cs-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0.15; } }
.cs-s[data-tap], .cs-l[data-tap] { cursor: pointer; }
.cs-s[data-tap]:hover .tx, .cs-l[data-tap]:hover .tx { color: var(--an-ink); }
.cs-elink { margin-left: 10px; font: 500 0.8125rem var(--an-sans); color: var(--an-muted); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 4px 0; cursor: pointer; white-space: nowrap; }
.cs-elink:hover { color: var(--an-ai); }

/* a blank in a line: where the answer goes */
.blank { display: inline-block; min-width: 3.2em; text-align: center; color: var(--an-faint); border-bottom: 1px solid var(--an-faint); transition: color var(--an-fast) var(--an-ease), border-color var(--an-fast) var(--an-ease); }
.blank[data-s="open"] { color: var(--an-ai); border-bottom: 2px solid var(--an-ai); min-width: 4.6em; }
.blank[data-s="filled"] { min-width: 0; color: var(--an-ink); font-weight: 500; border-bottom-color: transparent; text-align: left; }
.cs-big { margin: 4px 0 0; font-size: 1.5rem; line-height: 1.22; font-weight: 600; letter-spacing: -0.02em; color: var(--an-ink); overflow-wrap: break-word; }

/* an understood line being corrected in place */
.cs-ed { display: grid; gap: 8px; padding: 2px 0 6px; }
.cs-ed label { font-size: 0.875rem; font-weight: 500; color: var(--an-ink); }
.cs-ed input, .cs-ed select, .cs-ed textarea { width: 100%; min-height: 44px; font: 400 1rem var(--an-sans); color: var(--an-ink); background: var(--an-paper); border: 1px solid var(--an-faint); border-radius: var(--an-r-s); padding: 10px 12px; }
.cs-ed textarea { resize: vertical; line-height: 1.45; }
.cs-ed :focus-visible { outline: 2px solid var(--an-ai); outline-offset: 1px; border-color: var(--an-ai); }

/* the agent's voice: one line under the focus. It is the live status while the agent works, the question when it asks, a note when it has one. */
.cs-voice { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: start; margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--an-line); min-height: 46px; }
.cs-voice .am { display: block; width: 16px; height: 16px; margin-top: 2px; color: var(--an-ink); }
.cs-voice .am svg { display: block; width: 100%; height: 100%; }
.cs-voice[data-s="working"] .am, .cs-voice[data-s="ask"] .am { animation: cs-pulse 2.4s ease-in-out infinite; }
.vt { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--an-ink-2); overflow-wrap: anywhere; }
.vt + .vt { margin-top: 6px; }
.vt b { font-weight: 600; color: var(--an-ink); }
.vt .k { display: block; margin-bottom: 1px; font: 500 0.8125rem/1.5 var(--an-sans); color: var(--an-ai); }
.vt .qq { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--an-ink); }
.vt .why { display: block; margin-top: 3px; font-size: 0.8125rem; font-weight: 400; color: var(--an-muted); }
.cs-voice .cs-count { display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: -1px; }
.cs-count { display: inline-flex; gap: 2px; }
.cs-count i { display: block; width: 3px; height: 12px; border-radius: 1px; background: var(--an-line-2); animation: cs-tick 1.2s var(--an-ease) infinite; }
.cs-count i:nth-child(2) { animation-delay: 0.15s; }
.cs-count i:nth-child(3) { animation-delay: 0.3s; }
@keyframes cs-tick { 0%, 100% { background: var(--an-line-2); } 40% { background: var(--an-ai); } }

/* suggestions and the one next thing */
.cs-sugg { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0 24px; }
.cs-sugg .cs-opt { min-height: 44px; }
.cs-sugg-l { margin: 14px 0 0 24px; }
.cs-acts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 20px; margin: 18px 0 0; }
.cs-voice + .cs-acts, .cs-sugg + .cs-acts, .cs-sugg-l + .cs-acts { margin-left: 24px; }
.cs-acts .btn { min-width: 168px; }
.cs-hintrow { margin: 10px 0 0 24px; font-size: 0.8125rem; color: var(--an-muted); }

/* 1. paste, drop a file, or read your website */
.cs-paste .cs-h { margin-bottom: 16px; }
.cs-dump-ta { display: block; width: 100%; height: 200px; resize: vertical; font: 400 1rem/1.5 var(--an-sans); color: var(--an-ink); background: var(--an-paper); border: 1px solid var(--an-faint); border-radius: var(--an-r-s); padding: 12px; }
.cs-dump-ta::placeholder { color: var(--an-muted); opacity: 1; }
.cs-dump-ta:focus-visible { outline: 2px solid var(--an-ai); outline-offset: 1px; border-color: var(--an-ai); }
.cs-drop.is-over .cs-dump-ta { border-color: var(--an-ai); outline: 2px solid var(--an-ai); outline-offset: 1px; background: var(--an-ai-soft); }
.cs-drop-hint { display: none; margin: 8px 0 0; font-size: 0.8125rem; color: var(--an-ai); }
.cs-drop.is-over .cs-drop-hint { display: block; }
.cs-paste-row { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; margin-top: 10px; }
.cs-paste-row .btn { min-height: 44px; padding: 0 16px; }
.cs-paste .cs-hint { margin-top: 10px; }
.cs-paste .cs-filenote { margin-top: 2px; }
.cs-paste-row .cs-count-l, .cs-count-l { font: 400 0.6875rem var(--an-mono); color: var(--an-muted); white-space: nowrap; }
.cs-filenote { margin: 6px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--an-muted); max-width: 64ch; }
.cs-file { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--an-line-2); border-radius: var(--an-r-s); font-size: 0.875rem; color: var(--an-ink); }
.cs-file .nm { font-weight: 500; overflow-wrap: anywhere; }
.cs-file .st { font-size: 0.8125rem; color: var(--an-muted); }
.cs-file[data-s="working"] .st { color: var(--an-ai); }
.cs-file .cs-link { margin-left: auto; font-size: 0.8125rem; }
.cs-fileinfo { margin: 8px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--an-ink); max-width: 64ch; }
.cs-paste .cs-acts { margin-top: 16px; }
.cs-paste .cs-acts .btn { width: 100%; }
.cs-paste .cs-site, .cs-paste .cs-obo { margin-top: 12px; }

.cs-site { display: grid; gap: 4px; }
.cs-site-t, .cs-obo-t { display: flex; align-items: center; gap: 12px; min-height: 36px; cursor: pointer; font-size: 0.9375rem; color: var(--an-ink); }
.cs-site-t input, .cs-obo-t input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--an-ink); }
.cs-site .cs-hint { padding-left: 30px; }

.cs-obo { display: grid; gap: 12px; padding: 12px 0; border-top: 1px solid var(--an-line); border-bottom: 1px solid var(--an-line); }
.cs-obo-f { display: grid; gap: 12px; padding-left: 30px; }

/* a plan opened for review starts with who prepared it, why, and what to do */
.cs-intro { margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--an-line); }
.cs-intro-l { margin: 0; max-width: 52ch; font-size: 1.0625rem; line-height: 1.45; font-weight: 600; letter-spacing: -0.01em; color: var(--an-ink); }
.cs-intro-s { margin: 6px 0 0; max-width: 56ch; font-size: 0.9375rem; line-height: 1.5; color: var(--an-ink-2); }

/* 5. the whole plan, on one page */
.cs-sum .cs-h { margin-bottom: 6px; }
.cs-sum-sub { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--an-muted); max-width: 54ch; }
.cs-cts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 18px 0 0; font-size: 1rem; line-height: 1.5; color: var(--an-ink); }
.cs-cts .sep { color: var(--an-faint); }
.cs-ct { padding: 0; font: inherit; color: var(--an-ink); background: none; border: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--an-line-2); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.cs-ct:hover, .cs-ct:focus-visible { text-decoration-color: var(--an-ink); }
.cs-ct[disabled] { color: var(--an-muted); text-decoration: none; cursor: default; }
.cs-sum-act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin: 18px 0 0; }
.cs-sum-act .btn { min-width: 200px; }
.cs-sum-act .cs-hint { flex: 1 1 14rem; }
.cs-part { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--an-line); scroll-margin-top: 12px; }
.cs-part-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; font-size: 1.25rem; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: var(--an-ink); }
.cs-part-h .st { font-weight: 400; color: var(--an-muted); white-space: nowrap; }
.cs-part-s { margin: 2px 0 0; font-size: 0.8125rem; color: var(--an-muted); }
.cs-pj { margin-top: 22px; }
.cs-pj + .cs-pj { margin-top: 26px; }
.cs-pj-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0; padding-left: 16px; }
.cs-pj-h h3 { margin: 0; font-size: 1.0625rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--an-ink); }
.cs-pj-h .st { color: var(--an-muted); white-space: nowrap; }
.cs-pj[data-s="check"] .cs-pj-h .st { color: var(--an-ai); }
.cs-ln { list-style: none; margin: 0; padding: 0; }
.cs-l { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); padding: 10px 0; }
.cs-l > .tk { margin-top: 6px; }
.cs-l .tx { font-size: 1.0625rem; line-height: 1.55; }
.cs-l .tx.small { font-size: 0.9375rem; line-height: 1.5; }
.cs-l .mid { font: 400 0.8125rem var(--an-sans); color: var(--an-muted); }
.cs-pj-a { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 2px 0 0 16px; }
.cs-pj-a .cs-link { font-size: 0.8125rem; }
.cs-fg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: end; padding: 6px 0 4px 16px; }
.cs-fg-n { font-size: 3.5rem; line-height: 0.9; font-weight: 600; letter-spacing: -0.03em; color: var(--an-ink); font-variant-numeric: tabular-nums; }
.cs-fg-b { min-width: 0; }
.cs-fg-d { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--an-ink-2); }
.cs-fg-d .k { color: var(--an-muted); }
.cs-fg[data-s="check"] .cs-fg-n { color: var(--an-ink); }
.cs-sublabel { margin: 18px 0 0; padding-left: 16px; font-size: 0.8125rem; font-weight: 500; color: var(--an-muted); }
.cs-more { margin: 4px 0 0 16px; font-size: 0.8125rem; color: var(--an-muted); }
.cs-det { margin: 6px 0 0 16px; font-size: 0.8125rem; color: var(--an-muted); }
.cs-det summary { cursor: pointer; width: max-content; font: 500 0.8125rem var(--an-sans); color: var(--an-ink); text-decoration: underline; text-underline-offset: 3px; list-style: none; }
.cs-det summary::-webkit-details-marker { display: none; }
.cs-det[open] summary { margin-bottom: 6px; }
.cs-det-t { width: 100%; border-collapse: collapse; margin-top: 4px; }
.cs-det-t th, .cs-det-t td { text-align: left; font: 400 0.6875rem/1.5 var(--an-mono); padding: 5px 10px 5px 0; border-top: 1px solid var(--an-line); color: var(--an-ink-2); overflow-wrap: anywhere; }
.cs-det-t th { color: var(--an-muted); white-space: nowrap; }

/* the agent's note, pinned to the line it is about: inline on a phone, in the margin on a wide screen. Never a bubble. */
.cs-pin { display: block; margin: 8px 0 2px; padding: 2px 0 2px 14px; background: none; border: 0; border-left: 2px solid var(--an-line-2); border-radius: 0; }
.cs-pin-k { margin: 0 0 2px; font-size: 0.8125rem; color: var(--an-muted); }
.cs-pin-t { margin: 0; font-size: 0.875rem; line-height: 1.5; color: var(--an-ink); }
.cs-pin-t + .cs-pin-t { margin-top: 4px; }
.cs-pin-u { margin: 4px 0 0; font-size: 0.8125rem; color: var(--an-ink-2); }
.cs-pin-u .st { margin-right: 6px; }
.cs-pin-f { margin: 4px 0 0; font-size: 0.875rem; font-weight: 600; color: var(--an-ink); }
.cs-pin-m { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-top: 8px; }
.cs-pin-m .cs-link { font-size: 0.875rem; }

/* what I understood, folded: the plan's first group, kept above the page */
.cs-und { margin-top: 8px; }
.cs-und > summary { cursor: pointer; list-style: none; font-size: 0.8125rem; color: var(--an-muted); }
.cs-und > summary::-webkit-details-marker { display: none; }

/* take it with you: one primary action, the rest quiet */
.cs-take { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--an-line); scroll-margin-top: 12px; }
.cs-take .cs-part-h { margin-bottom: 4px; }
.cs-take-a { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 14px 0 0; }
.cs-take-a .btn { min-width: 0; }

/* history: every change and every version */
.cs-hist { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--an-line); scroll-margin-top: 12px; }
.cs-hist-h { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--an-ink); }
.cs-hist-h .cs-link { font-size: 0.875rem; font-weight: 500; }
.cs-hist-l { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--an-line); }
.cs-hist-l li { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--an-line); font-size: 0.875rem; line-height: 1.5; color: var(--an-ink-2); }
.cs-hist-l time { font: 400 0.8125rem var(--an-sans); font-variant-numeric: tabular-nums; color: var(--an-muted); }
.cs-hist-l b { font-weight: 600; color: var(--an-ink); }
.cs-hist-l .fromto { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--an-muted); overflow-wrap: anywhere; }
.cs-hist-l .cs-ver { color: var(--an-ink); }
.cs-hist-l .hash { font: 400 0.6875rem var(--an-mono); color: var(--an-muted); }
.cs-hist-l .cs-link { font-size: 0.8125rem; white-space: nowrap; }

/* the conversation, behind a link: who, time, words */
.cs-conv { position: absolute; z-index: 6; inset: 52px 0 0 auto; width: min(440px, 100%); display: flex; flex-direction: column; background: var(--an-paper); border-left: 1px solid var(--an-line-2); border-top: 1px solid var(--an-line); }
.cs-conv-h { flex: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 20px 12px; border-bottom: 1px solid var(--an-line); }
.cs-conv-h h2 { margin: 0; font-size: 1rem; font-weight: 600; color: var(--an-ink); }
.cs-conv-b { flex: 1; min-height: 0; overflow-y: auto; padding: 4px 20px 20px; }
.cs-msg { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--an-line); }
.cs-msg:first-child { border-top: 0; }
.cs-who { margin: 0; display: flex; gap: 10px; font-size: 0.8125rem; line-height: 1.4; color: var(--an-muted); }
.cs-text { margin: 0; font-size: 0.9375rem; line-height: 1.55; color: var(--an-ink-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.cs-msg.is-visitor .cs-text { color: var(--an-ink); font-weight: 500; }
.cs-conv-e { margin: 14px 0 0; font-size: 0.875rem; color: var(--an-muted); }

/* a short reply above the box, then it folds away */
.cs-reply { flex: none; display: grid; grid-template-rows: 1fr; transition: grid-template-rows 420ms var(--an-ease), opacity 300ms var(--an-ease); }
.cs-reply > div { min-height: 0; overflow: hidden; }
.cs-reply.is-out { grid-template-rows: 0fr; opacity: 0; }
.cs-reply-in { display: grid; grid-template-columns: 24px minmax(0, 1fr); padding: 12px 28px 4px; border-top: 1px solid var(--an-line); }
.cs-reply-in .am { display: block; width: 16px; height: 16px; margin-top: 3px; }
.cs-reply-in .am svg { display: block; width: 100%; height: 100%; }
.cs-reply-t { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--an-ink); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.cs-reply-b { min-width: 0; }
.cs-reply-n { margin: 6px 0 0; font-size: 0.875rem; line-height: 1.45; color: var(--an-muted); }
.cs-reply-m { grid-column: 2; display: flex; gap: 4px 18px; margin: 4px 0 0; }
.cs-reply-m .cs-link { font-size: 0.8125rem; color: var(--an-muted); }

/* the dock: the one box, and what the agent is doing while you wait */
.cs-dock { flex: none; background: var(--an-paper); border-top: 1px solid var(--an-line); }
.cs-reply + .cs-notice { border-top: 0; }
.cs-notice { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; padding: 12px 28px; background: var(--an-panel); font-size: 0.9375rem; color: var(--an-ink); }
.cs-notice .cs-link { font-size: 0.9375rem; }
.cs-composer { padding: 12px 28px 4px; }
.cs-composer-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: end; max-width: 640px; }
.cs-composer-l { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cs-composer-l label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cs-chip { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 7px 10px; border: 1px solid var(--an-ai); border-radius: var(--an-r-s); font-size: 0.8125rem; color: var(--an-ink); }
.cs-chip .k { flex: none; font: 500 0.8125rem var(--an-sans); color: var(--an-ai); }
.cs-chip .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-chip button { flex: none; font: 500 0.8125rem var(--an-sans); color: var(--an-muted); background: none; border: 0; padding: 2px 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cs-composer textarea { display: block; width: 100%; resize: none; min-height: 46px; max-height: 144px; font: 400 1rem/1.45 var(--an-sans); color: var(--an-ink); background: var(--an-paper); border: 1px solid var(--an-faint); border-radius: var(--an-r-s); padding: 11px 12px; }
.cs-composer textarea::placeholder { color: var(--an-muted); opacity: 1; }
.cs-composer textarea:focus-visible { outline: 2px solid var(--an-ai); outline-offset: 1px; border-color: var(--an-ai); }
.cs-composer .btn { height: 46px; min-height: 0; }
.cs-composer .cs-err { margin-top: 4px; max-width: 640px; }
.cs-composer.is-off textarea { background: var(--an-panel); }
.cs-disc { margin: 0; padding: 6px 28px 10px; font-size: 0.6875rem; line-height: 1.4; color: var(--an-muted); }
.cs-disc .dot { margin-inline: 0.3em; }
.cs-disc a { color: inherit; text-decoration: underline; text-decoration-color: var(--an-line-2); text-underline-offset: 3px; }

/* a view folding into the next: the building view into the whole plan */
.cs-view-out { animation: cs-fade-out 200ms var(--an-ease) both; }
@keyframes cs-fade-out { to { opacity: 0; transform: translateY(-4px); } }
.cs-view-in { animation: cs-arrive 420ms var(--an-ease) 150ms both; }

/* "Your plans", and the founder workstation: the same screen, other doors */
.cs-stub .cs-h { margin-bottom: 6px; }
.cs-rows { list-style: none; margin: 22px 0 0; padding: 0; border-top: 1px solid var(--an-line); }
.cs-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; align-items: start; padding: 16px 0; border-bottom: 1px solid var(--an-line); }
.cs-row h3 { margin: 0; font-size: 1rem; line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; color: var(--an-ink); }
.cs-row .sub { margin: 2px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--an-ink-2); }
.cs-row .meta { margin: 4px 0 0; font-size: 0.8125rem; line-height: 1.5; color: var(--an-muted); }
.cs-row .acts { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-end; align-items: baseline; }
.cs-row .acts .cs-link { font-size: 0.875rem; }
.cs-life { display: flex; align-items: center; gap: 4px; margin: 8px 0 0; }
.cs-life i { display: block; width: 14px; height: 8px; border-radius: 1px; background: var(--an-line-2); }
.cs-life i[data-s="done"] { background: var(--an-ink); }
.cs-life i[data-s="now"] { background: var(--an-ai); }
.cs-life span { margin-left: 8px; font-size: 0.8125rem; color: var(--an-muted); }
.cs-wk-notes { display: grid; gap: 8px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--an-line); }
.cs-wk-notes textarea { width: 100%; min-height: 96px; resize: vertical; font: 400 1rem/1.45 var(--an-sans); color: var(--an-ink); background: var(--an-paper); border: 1px solid var(--an-faint); border-radius: var(--an-r-s); padding: 10px 12px; }
.cs-wk-notes textarea:focus-visible { outline: 2px solid var(--an-ai); outline-offset: 1px; border-color: var(--an-ai); }
.cs-wk-bar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 20px; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 1px solid var(--an-line); font-size: 0.8125rem; color: var(--an-muted); }
.cs-wk-bar b { color: var(--an-ink); font-weight: 500; }
.cs-wk-bar .cs-link { font-size: 0.8125rem; }

/* narrower screens: the screen is the whole page, edge to edge */
@media (max-width: 900px) {
  .cs-main { padding: 0; }
  .cs-screen { height: calc(100dvh - 56px); min-height: 0; max-width: none; border: 0; border-radius: 0; }
  .cs-head { padding: 0 16px; min-height: 44px; }
  .cs-groups { padding: 10px 16px 0; gap: 0 10px; }
  .cs-page { padding: 24px 16px 40px; }
  .cs-reply-in, .cs-notice { padding-inline: 16px; }
  .cs-composer { padding: 10px 16px 2px; }
  .cs-disc { padding: 6px 16px calc(8px + env(safe-area-inset-bottom)); }
  .cs-conv { inset: 44px 0 0 0; width: 100%; border-left: 0; }
  .cs-gate { padding: 28px 16px 40px; align-items: flex-start; }
  .cs-card { padding: 16px; }
  
  .cs-obo-f, .cs-consent-f { padding-left: 0; }
  .cs-rc-two { grid-template-columns: minmax(0, 1fr); }
  .cs-rc-fig { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .cs-rc-big { font-size: 3rem; }
  .cs-armed > li { grid-template-columns: minmax(0, 1fr); }
  .cs-armed .cs-tri { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cs-h { font-size: 1.75rem; }
  .cs-hist-l li { grid-template-columns: minmax(0, 1fr) auto; }
  .cs-hist-l time { grid-column: 1 / -1; }
  .cs-row { grid-template-columns: minmax(0, 1fr); }
  .cs-row .acts { justify-content: flex-start; }
}
@media (max-width: 520px) {
  .cs-title .sep, .cs-title .rec { display: none; }
  .cs-head-r { gap: 4px 14px; }
}
@media (max-width: 480px) {
  .cs-for { display: none; }
  .cs-dump-ta { height: 132px; }
  .cs-g { font-size: 0.8125rem; }
  .cs-opt { font-size: 1rem; }
  
  
  
  
  
  .cs-acts .btn, .cs-sum-act .btn { width: 100%; }
  .cs-sugg, .cs-sugg-l { margin-left: 24px; }
  .cs-fg-n { font-size: 3rem; }
}
@media (min-width: 901px) { .cs-groups { grid-template-columns: repeat(4, minmax(0, 156px)); justify-content: start; } .cs-h { font-size: 2.25rem; } .cs-big { font-size: 1.875rem; } .cs-s .tx { font-size: 1.1875rem; } .cs-pane { font-size: 0.875rem; } }
@media (prefers-reduced-motion: reduce) {
  .cs-reply, .cs-g .cs-ticks i, .tk, .tx, .blank, .cs-count i, .cs-voice .am, .cs-view-in, .cs-view-out, .w, .tx.w, .caret, .tk.land { animation: none !important; transition: none !important; }
}

/* the agent's voice above the box, when the plan is the page (while it builds, the voice sits under the focus) */
#cs-view { position: relative; }
.cs-view-out { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; }
.cs-voice-dock { margin: 0; padding: 10px 28px; min-height: 0; border-top: 1px solid var(--an-line); align-items: center; grid-template-columns: 24px minmax(0, 1fr); }
.cs-voice-dock .am { margin-top: 0; }
@media (max-width: 900px) { .cs-voice-dock { padding: 8px 16px; } }
.cs-sum-end { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--an-line); }

.cs-voice-dock .vt .k { display: inline; margin: 0 8px 0 0; }
@media (pointer: coarse) { .cs-l[data-tap], .cs-s[data-tap], .cs-fg[data-tap] { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; } }
.cs-opt:disabled, .cs-link:disabled, .btn:disabled { cursor: default; }

/* the one thing to press stays in reach while the focus is longer than the screen */
.cs-focus .cs-acts:has(.btn) { position: sticky; bottom: 0; z-index: 2; margin: 14px -4px 0; padding: 12px 4px 12px; background: var(--an-paper); border-top: 1px solid var(--an-line); }
.cs-focus .cs-acts:has(.btn) .btn { min-width: 0; flex: 1 1 12rem; }
@media (min-width: 901px) { .cs-focus .cs-acts:has(.btn) { position: static; border-top: 0; margin: 18px 0 0; padding: 0; } .cs-focus .cs-acts:has(.btn) .btn { flex: 0 0 auto; min-width: 168px; } }

/* wired to the agent: undo, notes about the whole, keep, the history's versions, Your plans */
.cs-undo { margin: 10px 0 0; font-size: 0.8125rem; }
.cs-undo .cs-link { text-align: left; }
.cs-sum-notes { margin-top: 14px; }
.cs-sum-notes[hidden] { display: none; }
.cs-sum-notes .cs-pin { margin: 0; }
.cs-keep { margin-top: 18px; }
.cs-sum > .cs-keep { margin-top: 28px; }
.cs-hist-l .is-version b { font-weight: 600; }
.cs-hist-l .cs-hist-now { color: var(--an-muted); }
.cs-hist-l .cs-hist-wait, .cs-hist-l .is-more { display: block; border-bottom: 0; color: var(--an-muted); font-size: 0.875rem; }
.cs-plans .cs-pane { margin-bottom: 16px; }
.cs-row.is-now h3::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-radius: 50%; background: var(--an-ai); vertical-align: middle; }
.cs-row .acts .cs-link[aria-pressed="true"] { color: var(--an-ink); }
.cs-blk { display: block; }

/* the founder workstation (/consult/founder/) */
.cs-wk-attn { margin: 16px 0 0; padding: 12px 14px; background: var(--an-panel); border: 1px solid var(--an-line); border-radius: var(--an-r-s); }
.cs-wk-attn .cs-pin-t + .cs-pin-t { margin-top: 4px; }
.cs-wk-filters { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 18px 0 0; font-size: 0.8125rem; }
.cs-wk-filters .cs-link[aria-pressed="true"] { color: var(--an-ink); font-weight: 600; text-decoration-thickness: 2px; }
.cs-wk-notelist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.cs-wk-notelist li { padding: 10px 14px; background: var(--an-panel); border: 1px solid var(--an-line); border-radius: var(--an-r-s); }
.cs-wk-notelist .cs-pin-k { margin: 0 0 2px; }
.cs-wk-notes-in { display: grid; gap: 6px; margin-top: 14px; }
.cs-fw-form { display: grid; gap: 14px; max-width: 440px; margin-top: 18px; }
.cs-fw .cs-part { margin-top: 28px; }
.cs-fw .cs-field select { width: 100%; min-height: 44px; padding: 0 12px; font: 400 1rem var(--an-sans); color: var(--an-ink); background: var(--an-paper); border: 1px solid var(--an-line-2); border-radius: var(--an-r-s); }
.cs-fw .cs-linkbox { width: 100%; margin-top: 8px; font: 400 0.75rem var(--an-mono); }
.cs-fw-page .cs-wk-bar { margin-top: 0; }
.cs-fw .cs-part-h .st { margin-left: 10px; }
.cs-fw .cs-part > .cs-field, .cs-fw .cs-part > label.cs-consent-o { margin-top: 16px; }
.cs-fw .cs-part > .cs-sum-act { margin-top: 18px; }
.cs-fw .cs-field .cs-hint { margin: 6px 0 0; }
.cs-fg[data-s="check"] { align-items: start; }

/* status words are words: the quiet small sans; the monospace is for data (times, counts, a link, a code) */
.st { font: 400 0.8125rem var(--an-sans); color: var(--an-muted); }
.cs-cts .st { font-size: inherit; }
.cs-chip { -webkit-user-select: none; user-select: none; }
.cs-chip .t { -webkit-user-select: none; user-select: none; }

/* history: one list, a row for each moment */
.cs-hist-l li { grid-template-columns: 5.2rem minmax(0, 1fr) auto; align-items: start; }
.cs-hist-l .what { display: block; color: var(--an-ink); }
.cs-hist-l .hsub { display: block; margin-top: 2px; font-size: 0.8125rem; line-height: 1.45; color: var(--an-muted); }
.cs-hist-l .will { color: var(--an-ink-2); }
.cs-hist-l .acts { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.cs-hist-l .cs-hist-now, .cs-hist-l .hash { display: none; }
@media (max-width: 900px) { .cs-hist-l li { grid-template-columns: minmax(0, 1fr) auto; } .cs-hist-l time { grid-column: 1 / -1; } .cs-hist-l .acts { align-items: flex-start; } }

/* send it to my buyer: what happened, in a line under the buttons */
.cs-take-note { margin: 10px 0 0; }
.cs-take-note:empty { display: none; }

/* the screens swap one after the other: the old one is gone before the new one comes in (never text on text) */
.cs-view-out { animation-duration: 160ms; }
.cs-view-in { animation: cs-arrive 380ms var(--an-ease) 300ms both; }

/* a wide screen: the notes stand in the right margin, in a column of their own, each as high as its line and spaced so none covers another */
.cs-sum { position: relative; }
.cs-margin { display: none; }
@media (min-width: 1100px) {
  .cs-margin { display: block; position: absolute; top: 0; left: calc(100% + 32px); width: 280px; }
  .cs-margin .cs-pin.is-margin { position: absolute; left: 0; right: 0; margin: 0; }
  .cs-focus-notes .cs-pin { max-width: 640px; }
}
.cs-fg { position: relative; }


/* ------------------------------------------------------------------ going back, and the questions as a set (25 Oct)
   Every step has a Back. A question is one panel: its words, its choices as rows (a bold label, one line of why, the suggested one first and marked),
   and Other for the visitor's own words. The questions run along the top of the panel as a slim row: answered, now, still to come. */
.cs-fnav { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 18px; margin: 0 0 10px; }
.cs-fnav .cs-pane { margin: 0; }
.cs-back { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 0; font: 500 0.8125rem/1.4 var(--an-sans); color: var(--an-ink); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cs-back:hover { color: var(--an-ai); }
.cs-back:focus-visible { outline: 2px solid var(--an-ai); outline-offset: 2px; }
.cs-sum-nav { margin: 0 0 4px; }
.cs-qtabs { position: relative; list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 0 6px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--an-line); }
.cs-qtabs::-webkit-scrollbar { display: none; }
.cs-qtabs li { flex: none; }
.cs-qt { display: flex; align-items: center; gap: 8px; max-width: 13rem; min-height: 40px; padding: 8px 10px 8px 0; font: 500 0.8125rem/1.3 var(--an-sans); color: var(--an-muted); background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.cs-qt:hover:not([disabled]) { color: var(--an-ink); }
.cs-qt[disabled] { cursor: default; color: var(--an-faint); }
.cs-qt:focus-visible { outline: 2px solid var(--an-ai); outline-offset: 1px; }
.cs-qt[aria-current="step"] { color: var(--an-ink); border-bottom-color: var(--an-ai); }
.cs-qtm { flex: none; width: 14px; height: 7px; border: 1px solid var(--an-faint); border-radius: 1px; }
.cs-qt[data-s="done"] .cs-qtm { background: var(--an-ink); border-color: var(--an-ink); }
.cs-qt[data-s="skipped"] .cs-qtm { border-style: dashed; }
.cs-qt[data-s="open"] .cs-qtm, .cs-qt[data-s="current"] .cs-qtm { border-color: var(--an-ai); }
.cs-qt[data-s="open"][aria-current="step"] .cs-qtm { background: var(--an-ai); }
.cs-qtl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-qask { margin: 14px 0 0; font-size: 1rem; line-height: 1.45; font-weight: 600; color: var(--an-ink); }
.cs-qwhy { margin: 4px 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--an-muted); }
.cs-gapctl .cs-err { margin-top: 10px; }
.cs-qopts { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.cs-qrow { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 52px; padding: 12px 14px; background: var(--an-paper); border: 1px solid var(--an-line-2); border-radius: var(--an-r-s); cursor: pointer; }
.cs-qrow:hover { border-color: var(--an-ink); }
.cs-qrow[data-on="1"] { background: var(--an-ai-soft); border-color: var(--an-ai); }
.cs-qrow:has(.cs-qin:focus-visible) { outline: 2px solid var(--an-ai); outline-offset: 2px; }
.cs-qin { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.cs-qm { flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1px solid var(--an-faint); border-radius: 50%; background: var(--an-paper); box-sizing: border-box; }
.cs-qopts[role="group"] .cs-qm { border-radius: 2px; }
.cs-qrow[data-on="1"] .cs-qm { border: 5px solid var(--an-ai); }
.cs-qopts[role="group"] .cs-qrow[data-on="1"] .cs-qm { border-width: 1px; background: var(--an-ai); border-color: var(--an-ai); }
.cs-qb { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cs-qk { font-size: 0.9375rem; line-height: 1.35; font-weight: 600; color: var(--an-ink); overflow-wrap: anywhere; }
.cs-qs { margin-left: 8px; font: 500 0.75rem/1.2 var(--an-sans); color: var(--an-ai); white-space: nowrap; }
.cs-qd { font-size: 0.8125rem; line-height: 1.4; color: var(--an-muted); }
.cs-qtext { width: 100%; min-height: 40px; margin-top: 6px; padding: 8px 10px; font: 400 1rem/1.4 var(--an-sans); color: var(--an-ink); background: var(--an-paper); border: 1px solid var(--an-faint); border-radius: var(--an-r-s); }
.cs-qtext::placeholder { color: var(--an-muted); opacity: 1; }
.cs-qtext:focus-visible { outline: 2px solid var(--an-ai); outline-offset: 1px; border-color: var(--an-ai); }
.cs-qrow.is-alone { cursor: default; background: var(--an-paper); }
.cs-qrow.is-alone:hover { border-color: var(--an-line-2); }
.cs-qrow.is-alone[data-on="1"] { background: var(--an-paper); border-color: var(--an-line-2); }
.cs-gapblock + .cs-voice, .cs-gapctl + .cs-acts { margin-left: 0; }
.cs-focus[data-kind="gap"] .cs-acts, .cs-focus[data-kind="past"] .cs-acts { margin-left: 0; }
.cs-past-t { margin: 14px 0 0; max-width: 56ch; font-size: 0.9375rem; line-height: 1.55; color: var(--an-ink-2); }
.cs-reply-n + .cs-reply-m { margin-top: 6px; }
@media (min-width: 901px) { .cs-qopts { max-width: 640px; } .cs-qtabs { max-width: 640px; } }
/* the primary of a question stays in reach, however many choices it has */
@media (min-width: 901px) {
  .cs-focus[data-kind="gap"] .cs-acts:has(.btn) { position: sticky; bottom: 0; z-index: 2; max-width: 640px; margin: 18px 0 0; padding: 12px 0; background: var(--an-paper); border-top: 1px solid var(--an-line); }
}