/* ctzn-desk — the follow-up desk.
   Design brief of record: one card, one screen, one breath. The person's words
   get the only serif. The draft is the hero and is already editable. No counts,
   no streaks, no progress. Motion only for direct manipulation. */

:root {
  /* dark (default): near-black tinted toward the accent family, never #000 */
  --ground: #0f1211;
  --card: #171b1a;
  --field: #1e2322;
  --hairline: #2a302e;
  --ink: #f3f6f5;
  --ink-muted: #c2cac7;
  --whisper: #a3b0a9;
  --accent: #19c39c;
  --accent-press: #12a585;
  --accent-ink: #08110e;
  --hand: #c7a15c;
  --clay: #cd8a76;
  --danger-soft: #3a2c27;
  /* coverage warning (Wave 0): a true, insistent red, brighter than --clay,
     reserved for degraded coverage and blindness only */
  --warn-red: #f50027;
  --warn-red-ink: #ff4d5b;
  --warn-red-field: #2b0b11;
}
@media (prefers-color-scheme: light) {
  :root {
    --ground: #f5f4f0;
    --card: #ffffff;
    --field: #faf9f5;
    --hairline: #e7e5de;
    --ink: #1a1d1c;
    --ink-muted: #565f5b;
    --whisper: #656d68;
    --accent: #0f766e;
    --accent-press: #0c5f58;
    --accent-ink: #ffffff;
    --hand: #8a6d2e;
    --clay: #b4634c;
    --danger-soft: #f6e8e2;
    --warn-red: #d5001f;
    --warn-red-ink: #bb0020;
    --warn-red-field: #fdeaec;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings: "cv01", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--accent); opacity: 0.7; z-index: 6;
  transition: width 200ms ease-out;
}
.brand-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 2px;
  background: #f50027; margin-right: 8px; vertical-align: 6%;
}

/* ── chrome ─────────────────────────────────────────────────────────── */
.chrome {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  padding: calc(12px + env(safe-area-inset-top)) 16px 8px;
  z-index: 5;
}
.chrome-inner {
  width: min(620px, 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.nav-cluster { display: inline-flex; align-items: center; gap: 4px; }
.nav-btn {
  appearance: none; border: none; background: none;
  color: var(--ink-muted); font-size: 22px; line-height: 1;
  width: 44px; height: 40px; border-radius: 10px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn:hover { background: var(--card); }
.nav-btn:disabled { color: var(--hairline); cursor: default; background: none; }
.wordmark {
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--whisper);
}
.chrome-right { font-size: 13px; color: var(--ink-muted); font-weight: 500;
  font-variant-numeric: tabular-nums; min-width: 52px; text-align: center; }
/* fast-clear / full mode toggle (U6) — subtle chrome, shows the current mode */
.mode-toggle {
  appearance: none; border: 1px solid var(--hairline); background: none;
  color: var(--whisper); font: inherit; font-size: 11px; font-weight: 550;
  letter-spacing: 0.08em; text-transform: uppercase;
  height: 28px; padding: 0 10px; margin-left: 4px; border-radius: 8px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mode-toggle:hover { color: var(--ink-muted); border-color: var(--whisper); }

/* ── banner stack ─────────────────────────────────────────────────────
   Wave 0 coverage + Wave 1 liveness (U2) + heartbeat (U1) compose in one fixed
   column; each is a static block inside it, so any number can show at once.
   The stage clears the whole stack via a JS-measured --stack-h (no hard-coded
   height that would break when two banners wrap). */
.banners {
  position: fixed;
  top: calc(52px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  width: min(620px, calc(100% - 24px));
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 7;
  pointer-events: none; /* empty gaps never eat a tap meant for the card */
}
.banners > * { pointer-events: auto; }

/* coverage warning (Wave 0) — the honest deck; now a block inside the stack */
.coverage-banner {
  background: var(--warn-red-field);
  color: var(--warn-red-ink);
  border: 1px solid var(--warn-red);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.45;
  text-align: center;
}

/* liveness (U2) — pipeline aliveness. loud (red/dark channel or stale stager) =
   insistent red like coverage; quiet (amber) = a muted "quieter than usual" note. */
.liveness-banner {
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.liveness-banner.loud {
  background: var(--warn-red-field);
  color: var(--warn-red-ink);
  border: 1px solid var(--warn-red);
  font-weight: 550;
}
.liveness-banner.quiet {
  background: transparent;
  color: var(--whisper);
  border: 1px solid var(--hairline);
  font-weight: 450;
}

/* heartbeat (U1) — the sender's pulse. Amber/warm, deliberately DISTINCT from
   coverage's insistent red: quiet = a muted reconnect note, loud = a warm warning. */
.heartbeat-banner {
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.heartbeat-banner.quiet {
  background: transparent;
  color: var(--whisper);
  border: 1px solid var(--hairline);
  font-weight: 450;
}
.heartbeat-banner.loud {
  background: var(--danger-soft);
  color: var(--hand);
  border: 1px solid color-mix(in srgb, var(--hand) 55%, var(--hairline));
  font-weight: 550;
}

/* ── stage + card ───────────────────────────────────────────────────── */
.stage {
  height: 100dvh;
  display: flex;
  justify-content: center;
  /* --stack-h (set in JS from the live banner-stack height) keeps the card clear
     of however many banners are showing — replaces Wave 0's fixed padding bump. */
  padding: calc(60px + env(safe-area-inset-top) + var(--stack-h, 0px)) 16px calc(34px + env(safe-area-inset-bottom));
}
.card {
  width: min(620px, 100%);
  max-height: 100%;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  touch-action: pan-y;
  will-change: transform;
  scrollbar-width: thin;
}
@media (min-width: 700px) { .card { padding: 32px; gap: 24px; } }

.card.entering { animation: enter 140ms ease-out; }
@keyframes enter { from { opacity: 0; } to { opacity: 1; } }
.card.leaving { transition: opacity 160ms ease-out; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .card.entering, .card.leaving { animation: none; transition: none; opacity: 1; }
}

/* header block */
.person { display: flex; flex-direction: column; gap: 6px; }
.person h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.3px;
  line-height: 1.15;
}
@media (min-width: 700px) { .person h1 { font-size: 28px; } }
.ask {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.1px;
  line-height: 1.45;
  color: var(--ink-muted);
}
.source-line {
  margin: 0;
  font-size: 12px;
  font-weight: 550;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--whisper);
}
/* per-card provenance + age (Wave 0), inside the header block */
.built-blind {
  margin: 0;
  font-size: 14px;
  font-weight: 550;
  line-height: 1.5;
  color: var(--warn-red-ink);
}
.age {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--whisper);
}
.age.age-old { color: var(--hand); }

/* their words — the only serif in the app */
.quote {
  margin: 0;
  border-left: 2px solid var(--hairline);
  padding: 2px 0 2px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.quote p {
  margin: 0;
  font-family: "Newsreader", Georgia, serif;
  font-style: italic;
  font-size: 19px;
  font-weight: 420;
  line-height: 1.55;
  color: var(--ink-muted);
}
@media (min-width: 700px) { .quote p { font-size: 20px; } }
.quote .meta { font-size: 13px; font-weight: 450; color: var(--whisper); font-family: "Inter", sans-serif; font-style: normal; }

/* the desk's read */
.whisper-line { font-size: 14px; font-weight: 450; line-height: 1.55; color: var(--whisper); }

/* the draft — the hero */
.draft { display: flex; flex-direction: column; gap: 8px; position: relative; }
.draft .draft-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13px;
  font-weight: 450;
  color: var(--whisper);
}
.draft .channel { display: inline-flex; gap: 6px; align-items: baseline; }
.edited-tag {
  appearance: none; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--hand);
  padding: 0; text-decoration: underline; text-underline-offset: 3px;
}
.draft textarea {
  width: 100%;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--field);
  color: var(--ink);
  font-family: "Inter", -apple-system, sans-serif;
  font-feature-settings: "cv01", "cv11";
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -0.05px;
  padding: 14px 16px;
  resize: none;
  outline: none;
  overflow: hidden;
  transition: height 120ms ease-out;
}
@media (min-width: 700px) { .draft textarea { font-size: 18px; } }
.draft textarea:focus { border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.draft.readonly textarea { color: var(--ink-muted); }
.draft .posting-edge {
  position: absolute; left: 12px; right: 12px; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 200% 100%;
  animation: shimmer 1.2s linear infinite;
  display: none;
}
.posting .posting-edge { display: block; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* hold / caveat notes */
.hold {
  font-size: 14px;
  line-height: 1.5;
  color: var(--hand);
}
.footnote { font-size: 14px; line-height: 1.55; color: var(--whisper); }

/* ── actions ────────────────────────────────────────────────────────── */
.actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  align-items: center;
  position: sticky;
  bottom: -24px;
  margin: 0 -24px -24px;
  padding: 14px 24px 24px;
  background: linear-gradient(to top, var(--card) 78%, transparent);
}
@media (min-width: 700px) {
  .actions { bottom: -32px; margin: 0 -32px -32px; padding: 14px 32px 32px; }
}
.btn {
  appearance: none;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  min-height: 48px;
  padding: 0 18px;
  cursor: pointer;
  transition: transform 120ms ease-out, background 120ms ease-out;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.98); }
.btn.send, .btn.link { grid-column: 1 / -1; }
@media (max-width: 480px) {
  .actions { grid-template-columns: repeat(2, 1fr); }
}
.btn.send {
  flex: 1;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 550;
}
.btn.send:hover { background: var(--accent-press); }
.btn.send:disabled { background: var(--field); color: var(--whisper); cursor: default; }
.btn.ghost {
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid var(--hairline);
}
.btn.ghost:hover { border-color: var(--whisper); }
.btn.take { color: var(--hand); border-color: color-mix(in srgb, var(--hand) 45%, var(--hairline)); }
.btn.link { background: var(--field); color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; justify-content: center; flex: 1; border: 1px solid var(--hairline); }
.kbd-hint { font-size: 11px; color: var(--whisper); opacity: 0.8; margin-left: 6px; }
@media (hover: none) { .kbd-hint { display: none; } }

/* swipe overlays */
.card .drag-label {
  position: absolute;
  top: 18px;
  font-size: 14px;
  font-weight: 550;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0;
  pointer-events: none;
}
.card .drag-skip { right: 20px; color: var(--whisper); }
.card .drag-take { left: 50%; transform: translateX(-50%); color: var(--hand); }
.card-wrap { position: relative; width: min(620px, 100%); margin: auto; max-height: 100%; display: flex; }

.note-row {
  display: flex; gap: 10px; align-items: center;
}
.note-row input {
  flex: 1; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--field);
  color: var(--ink); font: inherit; font-size: 15px; padding: 0 14px; outline: none;
}
.note-row input:focus { border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); }
.note-row .note-go { min-height: 44px; flex: 0 0 auto; }
.links-row { display: flex; flex-wrap: wrap; gap: 8px; }
.link-chip {
  display: inline-flex; align-items: center; min-height: 38px;
  padding: 0 14px; border-radius: 10px; background: var(--field);
  border: 1px solid var(--hairline); color: var(--accent);
  font-size: 14px; font-weight: 500; text-decoration: none;
}
.link-chip:hover { border-color: var(--accent); }
.inline-link { color: var(--accent); text-underline-offset: 3px; }

/* ── toast ──────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(18px + env(safe-area-inset-bottom));
  background: var(--card);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 12px 10px 16px;
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-muted);
  z-index: 10;
}
.toast .undo {
  appearance: none; border: none; cursor: pointer;
  background: var(--accent); color: var(--card);
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 8px 16px; border-radius: 8px;
}

.deskfoot {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  bottom: calc(8px + env(safe-area-inset-bottom));
  width: min(620px, calc(100% - 32px));
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--whisper);
  pointer-events: none; z-index: 4;
}
.foot-ver { opacity: 0.7; }

/* ── rest states ────────────────────────────────────────────────────── */
.rest {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  max-width: 40ch;
}
.rest .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.rest h1 { margin: 0; font-size: 22px; font-weight: 550; letter-spacing: -0.2px; }
.rest p { margin: 0; font-size: 14px; color: var(--whisper); line-height: 1.5; }

.error-banner {
  position: fixed;
  top: calc(52px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  background: var(--danger-soft);
  color: var(--clay);
  font-size: 13px;
  border-radius: 10px;
  padding: 8px 14px;
  z-index: 8;
}

/* ── help ───────────────────────────────────────────────────────────── */
.help {
  position: fixed; inset: 0;
  background: color-mix(in srgb, var(--ground) 80%, transparent);
  display: flex; align-items: center; justify-content: center;
  z-index: 20;
}
.help-card {
  background: var(--card); border: 1px solid var(--hairline); border-radius: 16px;
  padding: 28px 32px; min-width: 260px;
}
.help-card h2 { margin: 0 0 14px; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--whisper); font-weight: 550; }
.help-card dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.help-card dl div { display: flex; gap: 16px; align-items: baseline; }
.help-card dt { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; color: var(--accent); min-width: 42px; }
.help-card dd { margin: 0; font-size: 14px; color: var(--ink-muted); }
.help-close { margin: 16px 0 0; font-size: 12px; color: var(--whisper); }

/* ══ Wave 1 additions ═════════════════════════════════════════════════ */

/* U6 fast-clear: the compact card renders the SAME DOM as full, then hides the
   heavy sections so only person / source / built-blind / age / ask / draft /
   Send / Later show; "more" reveals everything in place. Hiding (never omitting)
   is what guarantees the decide payload is byte-identical between the two modes. */
.card.compact .quote,
.card.compact .links-row,
.card.compact .whisper-line,
.card.compact .footnote,
.card.compact .hold,
.card.compact .actions .heavy { display: none; }
.card:not(.compact) .more-toggle { display: none; }
.card.compact .actions { grid-template-columns: repeat(2, 1fr); }
.more-toggle { color: var(--whisper); }

/* U2 unmatched-events lane — read-only, rest-state only. Content-free
   descriptors, no decide verbs, no buttons, no counts (article, never a number). */
.rest-wrap {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; width: min(620px, 100%); margin: auto;
}
.unmatched {
  width: 100%;
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px solid var(--hairline);
  text-align: left;
}
.unmatched-head { margin: 0 0 8px; font-size: 13px; font-weight: 550; color: var(--ink-muted); }
.unmatched-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.unmatched-list li { font-size: 13px; line-height: 1.5; color: var(--whisper); }

/* ══ Wave 4 reach-out lane ═════════════════════════════════════════════
   The proactive half: a separate, OPT-IN lane. Soft, non-urgent, ZERO guilt — no
   urgency color, no count, no badge, no position, no progress. A reach-out is never
   owed, so nothing here ever reads as a pile waiting on him. */

/* the doorway under a calm empty desk — a gentle link into the lane, never a card.
   Its copy says "a few", never a number (the string carries no digit). */
.doorway { width: 100%; display: flex; justify-content: center; margin-top: 2px; }
.doorway-link {
  appearance: none; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1.5; color: var(--accent);
  text-align: center; padding: 8px 14px; border-radius: 10px; max-width: 40ch;
  text-underline-offset: 3px; -webkit-tap-highlight-color: transparent;
}
.doorway-link:hover { text-decoration: underline; }

/* the persistent, low-key lane toggle in the chrome — mirrors the mode-toggle look.
   Created lazily by app.js (index.html takes only the ?v= bump). */
.lane-toggle {
  appearance: none; border: 1px solid var(--hairline); background: none;
  color: var(--whisper); font: inherit; font-size: 11px; font-weight: 550;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  height: 28px; padding: 0 10px; margin-left: 4px; border-radius: 8px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lane-toggle:hover { color: var(--ink-muted); border-color: var(--whisper); }
.lane-toggle.in-lane {
  color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline));
}

/* the reach-out / circle-review card is a normal .card with soft accents. It never
   carries .compact, so its "heavy" actions always show. The draft reuses .draft. */
.reachout-kicker {
  margin: 0; font-size: 11px; font-weight: 550; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--whisper);
}
.reachout-name { margin: 0; }
.reachout-occasion { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.reachout-prompt {
  margin: 0; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--ink-muted);
}
.reachout-donothing { color: var(--whisper); }
.circle-framing { color: var(--whisper); }

/* lane action grids: Send / Keep span the full width (.btn.send), the rest flow under */
.reachout-lane-actions { grid-template-columns: repeat(3, 1fr); }
.circle-review-actions { grid-template-columns: repeat(2, 1fr); }
.circle-move-row { display: flex; gap: 10px; margin: 0 0 2px; }
.circle-move-row .btn { flex: 1; min-height: 44px; }
@media (max-width: 480px) {
  .reachout-lane-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ══ Wave 3 workbench ═════════════════════════════════════════════════ */

/* Workbench-only sections (transcript + edit-by-instruction) render in the same DOM
   in both modes and hide in fast-clear, exactly like the Wave 1 heavy sections;
   "more" removes .compact and reveals them in place. */
.card.compact .workbench-only { display: none; }

/* the full thread transcript — a read surface, no decide verb. Bounded height with its
   own scroll so a long thread never pushes the draft off-screen. */
.thread-wrap { display: flex; flex-direction: column; }
.thread {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 34vh; overflow-y: auto;
  padding: 2px 2px 2px 14px; border-left: 2px solid var(--hairline);
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.thread-seg { display: flex; flex-direction: column; gap: 3px; max-width: 100%; }
.thread-seg.them { align-items: flex-start; }
.thread-seg.daniel { align-items: flex-end; }
.thread-seg.system, .thread-seg.withheld { align-items: center; }
.thread-bubble {
  margin: 0; max-width: 86%;
  font-size: 14.5px; line-height: 1.5;
  padding: 8px 12px; border-radius: 12px;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.thread-seg.them .thread-bubble { background: var(--field); color: var(--ink-muted); border-bottom-left-radius: 4px; }
.thread-seg.daniel .thread-bubble {
  background: color-mix(in srgb, var(--accent) 16%, var(--field));
  color: var(--ink); border-bottom-right-radius: 4px;
}
.thread-seg.system .thread-bubble {
  background: transparent; color: var(--whisper); font-size: 13px; text-align: center; padding: 2px 0;
}
.thread-withheld {
  margin: 0; font-style: italic; font-size: 13px; color: var(--whisper);
  padding: 2px 0; text-align: center;
}
.thread-ts { font-size: 11px; color: var(--whisper); letter-spacing: 0.03em; padding: 0 4px; }

/* edit-by-instruction — beneath the draft, workbench-only. Native input so the iOS
   keyboard mic works; the mic button just focuses it. Enqueue-only; Rewrite locks the
   draft and shows the rewriting state until the fresh card lands. */
.edit-instruct { display: flex; flex-direction: column; gap: 8px; }
.edit-row { display: flex; gap: 8px; align-items: stretch; }
.edit-input {
  flex: 1; min-width: 0; min-height: 44px; border-radius: 10px;
  border: 1px solid var(--hairline); background: var(--field);
  color: var(--ink); font: inherit; font-size: 15px; padding: 0 14px; outline: none;
}
.edit-input:focus { border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); }
.edit-mic {
  flex: 0 0 auto; min-height: 44px; width: 46px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.edit-mic svg { width: 18px; height: 18px; }
.edit-go { flex: 0 0 auto; min-height: 44px; padding: 0 16px; }
.edit-rewriting {
  margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--hand);
}
.draft textarea:disabled { opacity: 0.6; cursor: default; }

/* top-level capture ("just talked to someone") — a chrome button + a panel. Always
   available, both modes; a read/input surface, never a decide verb, never a count. */
.capture-btn {
  appearance: none; border: 1px solid var(--hairline); background: none;
  color: var(--ink-muted); cursor: pointer;
  height: 28px; padding: 0 10px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.capture-btn:hover { color: var(--ink); border-color: var(--whisper); }
.capture-btn svg { width: 18px; height: 18px; }
.capture-wrap { position: fixed; inset: 0; z-index: 12; }
.capture-backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--ground) 55%, transparent); }
.capture-panel {
  position: absolute;
  top: calc(56px + env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  width: min(560px, calc(100% - 24px));
  background: var(--card); border: 1px solid var(--hairline); border-radius: 14px;
  padding: 16px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
}
.capture-prompt { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-muted); }
.capture-text {
  width: 100%; border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--field); color: var(--ink);
  font-family: "Inter", -apple-system, sans-serif; font-feature-settings: "cv01", "cv11";
  font-size: 16px; line-height: 1.55; padding: 12px 14px; resize: none; outline: none;
}
.capture-text:focus { border-color: color-mix(in srgb, var(--accent) 40%, var(--hairline)); }
.capture-actions { display: flex; gap: 10px; justify-content: flex-end; }
.capture-actions .btn { min-height: 44px; flex: 0 0 auto; padding: 0 20px; }

/* ══ Wave 5 ═══════════════════════════════════════════════════════════════════
   Routing (R8), the away line (A4), and the car skin (C1). No counts, no
   progress, no position anywhere in here. */

/* ── routing ────────────────────────────────────────────────────────────────
   The reason line sits above the actions in the "hand" family: this is a
   hand-off, warm and deliberate, never an alarm. */
.route-reason {
  border-left: 2px solid color-mix(in srgb, var(--hand) 55%, var(--hairline));
  padding: 2px 0 2px 14px;
}
.route-reason-line {
  margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-muted);
}

/* "Route to …" is a first-class decide button, not a ghost: handing someone to
   the person who can actually carry them is not the lesser move. It reads in the
   hand family so it is instantly distinguishable from Send under a thumb. */
.btn.route {
  grid-column: 1 / -1;
  background: var(--field);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--hand) 55%, var(--hairline));
  font-weight: 550;
}
.btn.route:hover { border-color: var(--hand); }
.btn.route:disabled { color: var(--whisper); border-color: var(--hairline); cursor: default; }
/* Both offered → side by side, equal width. Daniel picks one; one decision per card. */
.actions.route-and-send .btn.send,
.actions.route-and-send .btn.route { grid-column: span 2; }
@media (max-width: 480px) {
  .actions.route-and-send .btn.send,
  .actions.route-and-send .btn.route { grid-column: span 1; }
}

/* the route note-row: an optional line for the connector + "keep me posted".
   The checkbox is never pre-checked (route-and-release is the default). */
.route-note-row { flex-wrap: wrap; }
.route-note-row input[type="text"] { flex: 1 1 200px; }
.route-keep {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13.5px; color: var(--ink-muted);
  flex: 0 0 auto; cursor: pointer; user-select: none;
  padding: 0 2px;
}
.route-keep input { width: 18px; height: 18px; accent-color: var(--hand); cursor: pointer; }

/* the car flag, seen at the desk on a card flagged while driving */
.car-flag { margin: 0; font-size: 13px; color: var(--hand); }

/* ── away (A4) ──────────────────────────────────────────────────────────────
   Quiet and muted, never red. Away is a chosen state, not a failure. */
.away-banner {
  font-size: 13px; line-height: 1.45; color: var(--ink-muted);
  padding: 8px 16px; text-align: center;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-bottom: 1px solid var(--hairline);
}
.rest.away-rest .dot { background: var(--hand); }

/* ── car mode (C1) ──────────────────────────────────────────────────────────
   A phone in a cradle: very large targets, very low visual density, high
   contrast, no chrome to read. Honest scope — this is not CarPlay. */
body.car-mode .chrome-right,
body.car-mode .nav-btn,
body.car-mode .progress,
body.car-mode .deskfoot { display: none !important; }
body.car-mode .stage { padding: 12px; }

.car-wrap {
  width: min(620px, 100%); margin: auto;
  display: flex; flex-direction: column; gap: 18px;
  padding: 8px 4px;
}
.car-kicker {
  margin: 0; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--whisper);
}
.car-name {
  margin: 0; font-family: "Newsreader", Georgia, serif;
  font-size: clamp(34px, 9vw, 52px); font-weight: 500; line-height: 1.1;
  color: var(--ink);
}
.car-line {
  margin: 0; font-size: clamp(19px, 4.6vw, 24px); line-height: 1.45;
  color: var(--ink-muted);
}
.car-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.car-btn {
  appearance: none; border-radius: 14px; border: 1px solid var(--hairline);
  background: var(--field); color: var(--ink);
  font-family: inherit; font-size: 21px; font-weight: 550;
  min-height: 82px; padding: 0 22px; width: 100%;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease-out;
}
.car-btn:active { transform: scale(0.99); }
.car-hear { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.car-hold { color: var(--hand); border-color: color-mix(in srgb, var(--hand) 45%, var(--hairline)); }
.car-foot {
  margin: 4px 0 0; font-size: 14px; line-height: 1.5;
  color: var(--whisper); text-align: center;
}
.car-rest {
  width: min(620px, 100%); margin: auto; text-align: center;
  display: flex; flex-direction: column; gap: 10px;
}
.car-rest h1 {
  margin: 0; font-family: "Newsreader", Georgia, serif;
  font-size: clamp(28px, 7vw, 40px); font-weight: 500; color: var(--ink);
}
.car-rest p { margin: 0; font-size: 18px; color: var(--ink-muted); }