/* Rung — shared design system.
   Warm, editorial, high-contrast. Serif display against sans body: reads credible rather
   than startup-y, and looks like nothing else in home-care software.

   The app screens carry one hard constraint: the worker may be tired, mid-shift, and reading
   in her second language. Large targets, generous line height, colour never alone. */

/* Display face: Fraunces (SIL OFL), self-hosted — no third-party request, works offline.
   Georgia stays in the stack as the swap-period fallback. */
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-600-italic.woff2") format("woff2");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Warm neutrals — paper, not clinic. */
  --bg: #faf8f5;
  --surface: #ffffff;
  --raised: #f4f1ec;
  --ink: #14120f;
  --ink-soft: #3d3833;
  --muted: #6b645c;
  --line: #e4ded5;
  --line-strong: #cdc5b8;

  --accent: #17564a;
  --accent-hover: #1d6b5c;
  --accent-ink: #ffffff;
  --accent-wash: #eaf2ef;

  /* Escalation ramp. Reserved for triage and risk only, so colour keeps its meaning. */
  --routine: #2c6b4f;
  --concern: #8a6410;
  --urgent: #a2440f;
  --emergency: #93211c;

  --radius: 12px;
  --radius-sm: 8px;

  /* Type scale, 1.25 ratio off 17px. */
  --t-xs: 13px;
  --t-sm: 15px;
  --t-base: 17px;
  --t-lg: 21px;
  --t-xl: 26px;
  --t-2xl: 33px;
  --t-3xl: 41px;
  --t-4xl: 52px;

  /* Spacing rhythm — 4px base, only these values used. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  --serif: "Fraunces", ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Depth — warm-tinted, never pure black. */
  --shadow-sm: 0 1px 2px rgba(46, 38, 28, .06), 0 2px 8px rgba(46, 38, 28, .05);
  --shadow-lg: 0 2px 4px rgba(46, 38, 28, .07), 0 12px 32px rgba(46, 38, 28, .11),
               0 32px 64px rgba(46, 38, 28, .07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131110;
    --surface: #1c1917;
    --raised: #241f1c;
    --ink: #f4f0ea;
    --ink-soft: #ddd6cd;
    --muted: #a8a098;
    --line: #332e29;
    --line-strong: #4a423b;

    --accent: #4fae94;
    --accent-hover: #63c2a8;
    --accent-ink: #0b1512;
    --accent-wash: #16241f;

    --routine: #6cc79b;
    --concern: #d8ab4a;
    --urgent: #e8894f;
    --emergency: #ef7b72;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 32px rgba(0, 0, 0, .4),
                 0 32px 64px rgba(0, 0, 0, .3);
  }
}

/* Grain — an SVG turbulence field at whisper opacity. What makes flat colour read as
   paper instead of a css rectangle. Apply to sections, never to text containers. */
.grain { position: relative; }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  .grain::after { mix-blend-mode: screen; opacity: .05; }
}

* { box-sizing: border-box; }

/* The hidden attribute always wins — author display values must never resurrect
   an element the JS hid (the stage system depends on this). */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--t-base)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: var(--accent); }

::selection { background: var(--accent); color: var(--accent-ink); }

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

/* ---------- chrome ---------- */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  position: sticky; top: 0; z-index: 10;
  transition: box-shadow .2s ease;
}
.site-header.scrolled { box-shadow: var(--shadow-sm); }

.brand {
  display: inline-flex; align-items: center; gap: var(--s3);
  font-family: var(--serif); font-size: var(--t-lg); font-weight: 600;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}

/* The mark: three rungs of a ladder. Pure CSS — no asset to load or lose. */
.mark {
  width: 20px; height: 20px; flex: none;
  display: flex; flex-direction: column; justify-content: space-between;
}
.mark span { display: block; height: 3px; border-radius: 2px; background: var(--accent); }
.mark span:nth-child(1) { width: 100%; }
.mark span:nth-child(2) { width: 72%; }
.mark span:nth-child(3) { width: 44%; }

.site-nav { display: flex; align-items: center; gap: var(--s5); }
.site-nav a {
  color: var(--muted); text-decoration: none;
  font-size: var(--t-sm); font-weight: 600;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); }
.nav-signout {
  background: none; border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
  color: var(--muted); font: 600 var(--t-sm)/1 var(--sans);
}
.nav-signout:hover { color: var(--ink); border-color: var(--ink-soft); }

.banner {
  margin: 0; padding: var(--s3) var(--s5);
  background: #fdf3d8; color: #4a3a07;
  border-bottom: 1px solid #e9d7a4;
  font-size: var(--t-sm);
}
@media (prefers-color-scheme: dark) {
  .banner { background: #2b2412; color: #f0dfae; border-bottom-color: #46391a; }
}

main { max-width: 720px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s9); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s5);
  margin-bottom: var(--s5);
  box-shadow: var(--shadow-sm);
}

h1 { font-size: var(--t-2xl); margin-bottom: var(--s2); }
h2 { font-size: var(--t-xl); margin-bottom: var(--s3); }
h3 { font-size: var(--t-lg); margin-bottom: var(--s2); }

.sub { color: var(--muted); margin-bottom: var(--s5); }
.hint { color: var(--muted); font-size: var(--t-sm); font-weight: 400; }

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

label {
  display: block; font-weight: 600; font-size: var(--t-sm);
  margin: var(--s5) 0 var(--s2);
}

select, input, textarea {
  width: 100%; padding: var(--s3) var(--s4);
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
input[readonly], textarea[readonly] {
  background: var(--raised); color: var(--ink-soft); border-color: var(--line);
}
input:not([readonly]), textarea:not([readonly]) {
  background: var(--surface); border-color: var(--accent);
}
textarea { resize: vertical; line-height: 1.55; }

/* The microphone is the primary control. Unmissable, thumb-sized. */
.mic {
  display: flex; align-items: center; justify-content: center; gap: var(--s3);
  width: 100%; margin: var(--s5) 0 var(--s2); padding: var(--s6) var(--s5);
  font: 600 var(--t-lg)/1 var(--sans);
  color: var(--accent-ink); background: var(--accent);
  border: none; border-radius: var(--radius); cursor: pointer;
  transition: background .15s ease;
}
.mic { box-shadow: var(--shadow-sm); }
.mic:hover { background: var(--accent-hover); box-shadow: var(--shadow-lg); }
.mic:disabled { background: var(--muted); cursor: not-allowed; }
.mic .mic-icon { font-size: var(--t-xl); line-height: 1; }
.mic.listening { background: var(--emergency); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .mic.listening { animation: none; } }

.state { margin: var(--s2) 0 0; color: var(--muted); font-size: var(--t-sm); }

button.primary, button.secondary {
  padding: var(--s3) var(--s5); font: 600 var(--t-base)/1.2 var(--sans);
  border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
  transition: background .15s ease;
}
button.primary {
  background: var(--accent); color: var(--accent-ink);
  width: 100%; margin-top: var(--s5);
}
button.primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-sm); }
button.secondary {
  background: var(--surface); color: var(--ink); border-color: var(--line-strong);
}
button.secondary:hover { background: var(--raised); }
button.link {
  background: none; border: none; color: var(--accent); cursor: pointer;
  font: 600 var(--t-sm)/1 var(--sans);
  padding: var(--s2) 0; margin-right: var(--s5); text-decoration: underline;
}

/* ---------- triage ---------- */

.triage {
  display: inline-flex; align-items: center;
  padding: var(--s2) var(--s4); border-radius: 999px; margin-bottom: var(--s4);
  font-weight: 700; font-size: var(--t-sm); color: #fff; letter-spacing: .01em;
  box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 0%, var(--raised)), var(--shadow-sm);
}
/* Never colour alone — the label always carries the meaning. */
.triage.routine   { background: var(--routine); }
.triage.concern   { background: var(--concern); }
.triage.urgent    { background: var(--urgent); }
.triage.emergency { background: var(--emergency); }
.triage.not_applicable { background: var(--muted); }

.field { margin-bottom: var(--s2); }

.why {
  margin: var(--s5) 0; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
  background: var(--raised);
}
.why summary { cursor: pointer; font-weight: 600; color: var(--accent); font-size: var(--t-sm); }
.why dl { margin: var(--s3) 0 0; }
.why dt { font-weight: 600; font-size: var(--t-xs); margin-top: var(--s3);
          text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.why dd { margin: var(--s1) 0 0; color: var(--ink-soft); font-size: var(--t-sm); }

.readback {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  border-left: 4px solid var(--accent);
  background: var(--accent-wash); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: var(--shadow-sm);
}
.readback p { margin: 0 0 var(--s2); font-size: var(--t-lg); line-height: 1.5; }

.coaching { margin: var(--s5) 0; }
.coaching h3 { margin-top: var(--s4); font-size: var(--t-base); }
.coaching ul { margin: var(--s2) 0; padding-left: var(--s5); }
.coaching li { margin-bottom: var(--s1); }
.coaching .escalation {
  padding: var(--s3) var(--s4); border-radius: var(--radius-sm); margin-top: var(--s3);
  background: #fdecea; color: #7a1a15; border: 1px solid #f2c6c2; font-weight: 600;
}
@media (prefers-color-scheme: dark) {
  .coaching .escalation { background: #2e1715; color: #f5b8b3; border-color: #562823; }
}

.actions { display: flex; gap: var(--s3); margin-top: var(--s5); }
.actions button { flex: 1; margin-top: 0; }

pre {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s4);
  overflow-x: auto; font-size: var(--t-xs); max-height: 400px; line-height: 1.5;
}

.site-footer {
  border-top: 1px solid var(--line); padding: var(--s6) var(--s5);
  text-align: center; background: var(--surface);
}
.site-footer p { margin: 0 auto; max-width: 640px; color: var(--muted); font-size: var(--t-sm); }

/* ---------- tables + metrics ---------- */

table { width: 100%; border-collapse: collapse; margin-top: var(--s3); }
th, td {
  text-align: left; padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--line); font-size: var(--t-sm);
}
th {
  font-size: var(--t-xs); text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); font-weight: 600;
}
.metric-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s3);
}
.metric {
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: var(--s4);
}
.metric .n {
  font-family: var(--serif); font-size: var(--t-xl); font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.metric .k { font-size: var(--t-xs); color: var(--muted); }
.tag {
  font-size: var(--t-xs); padding: var(--s1) var(--s3); border-radius: 999px;
  background: var(--raised); border: 1px solid var(--line);
}

/* ---------- supervisor worklist ---------- */

.wl {
  border: 1px solid var(--line); border-left-width: 5px;
  border-radius: var(--radius-sm);
  padding: var(--s4) var(--s5); margin-bottom: var(--s3); background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease;
}
.wl:hover { transform: translateY(-1px); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { .wl, .wl:hover { transform: none; } }
.wl-notify_nurse { border-left-color: var(--urgent); }
.wl-watch        { border-left-color: var(--concern); }
.wl-none         { border-left-color: var(--routine); }
.wl-head {
  display: flex; align-items: center; gap: var(--s3);
  flex-wrap: wrap; margin-bottom: var(--s3);
}
.wl-client { font-family: var(--serif); font-size: var(--t-lg); font-weight: 600; }
.wl-badge {
  font-size: var(--t-xs); font-weight: 700; color: #fff;
  padding: var(--s1) var(--s3); border-radius: 999px; white-space: nowrap;
  letter-spacing: .02em;
}
.wl-badge.wl-notify_nurse { background: var(--urgent); }
.wl-badge.wl-watch        { background: var(--concern); }
.wl-badge.wl-none         { background: var(--routine); }
.wl-reasons { margin: var(--s2) 0 0; padding-left: var(--s5); }
.wl-reasons li { margin-bottom: var(--s3); }

/* ---------- worker: noticed + paperwork ---------- */

.noticed, .paperwork {
  margin: var(--s5) 0; padding: var(--s4) var(--s5);
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--raised);
}
.noticed ul { margin: var(--s2) 0 0; padding-left: var(--s5); }
.noticed li { margin-bottom: var(--s1); }
.pw-row {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: var(--s2) 0; border-bottom: 1px solid var(--line); font-size: var(--t-sm);
}
.pw-row:last-child { border-bottom: none; }
.pw-label { flex: 0 0 34%; font-weight: 600; text-transform: capitalize; }
.pw-value { flex: 1; }
.pw-src { font-size: var(--t-xs); color: var(--muted); white-space: nowrap; }
#paperwork-gaps {
  margin-top: var(--s4); padding-top: var(--s3);
  border-top: 1px dashed var(--line-strong);
}
#paperwork-gaps h4 { margin: 0 0 var(--s1); font-size: var(--t-base); font-family: var(--serif); }
#gap-list { margin: var(--s2) 0 0; padding-left: var(--s5); }
#gap-list li { margin-bottom: var(--s2); }

@media (max-width: 560px) {
  main { padding: var(--s5) var(--s3) var(--s8); }
  .card { padding: var(--s4); }
  .site-header { padding: var(--s3) var(--s4); }
  .pw-row { flex-wrap: wrap; }
  .pw-label { flex-basis: 100%; }
}

/* ---------- engine mode toggle ---------- */
.mode-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-top: var(--s4); }
.mode-label { font-weight: 600; font-size: var(--t-sm); }
.mode-toggle {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: 999px; overflow: hidden; background: var(--surface);
}
.mode-btn {
  border: none; background: transparent; color: var(--muted);
  font: 600 var(--t-sm)/1 var(--sans); padding: var(--s2) var(--s4); cursor: pointer;
}
.mode-btn.active { background: var(--accent); color: var(--accent-ink); }
.result-mode {
  display: inline-block; margin-left: var(--s3);
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}

/* ---------- the visit record document ---------- */
.vr {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden; box-shadow: var(--shadow-sm);
}
.vr::before {
  content: ""; display: block; height: 8px;
  background-image: radial-gradient(circle at 8px 0, transparent 5px, var(--raised) 5px);
  background-size: 16px 8px; background-repeat: repeat-x;
}
.vr-head {
  display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4);
  border-bottom: 2px solid var(--line-strong);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: var(--t-xs); letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
}
.vr-meta { padding: var(--s2) var(--s4); border-bottom: 1px solid var(--line); }
.vr-meta .pw-row { border-bottom: 1px dashed var(--line); }
.vr-sec-title {
  padding: var(--s3) var(--s4) var(--s1);
  font-family: var(--serif); font-weight: 600; font-size: var(--t-base);
}
.vr-sec-cite { padding: 0 var(--s4) var(--s1); font-size: var(--t-xs); color: var(--muted); }
.vr-rows { padding: 0 var(--s4) var(--s2); }
.vr-row {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: var(--s2) 0; border-bottom: 1px dashed var(--line);
  font-size: var(--t-sm);
}
.vr-row:last-child { border-bottom: none; }
.vr-row-label { flex: 1; }
.vr-status { font-size: var(--t-xs); font-weight: 700; white-space: nowrap; color: var(--muted); }
.vr-status.ok { color: var(--routine); }
.vr-status.flag { color: var(--urgent); }
.vr-note { flex-basis: 100%; font-size: var(--t-xs); color: var(--muted); padding-left: var(--s2); }
.vr-report {
  margin: var(--s3) var(--s4); padding: var(--s3) var(--s4);
  border: 1.5px dashed var(--urgent); border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--urgent) 5%, var(--surface));
  font-size: var(--t-sm);
}
.vr-report.quiet { border-color: var(--line-strong); background: var(--raised); color: var(--muted); }
.vr-report-cite { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s2); }
.vr-report li { margin-bottom: var(--s1); }
.vr-att {
  padding: var(--s3) var(--s4); border-top: 1px solid var(--line);
  font-size: var(--t-xs); color: var(--muted);
}
.vr-cite { padding: var(--s2) var(--s4) var(--s3); font-size: var(--t-xs); color: var(--muted); font-style: italic; }

/* ---------- client picker ---------- */
.client-row { display: flex; gap: var(--s3); }
.client-row select { flex: 1; }
.client-row button { flex: none; margin-top: 0; }

/* ---------- chart browser + handoff ---------- */
.chip-btn {
  font: 600 var(--t-sm)/1 var(--sans); color: var(--ink);
  background: var(--raised); border: 1px solid var(--line-strong);
  border-radius: 999px; padding: var(--s2) var(--s4);
  margin: 0 var(--s2) var(--s2) 0; cursor: pointer;
}
.chip-btn.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.chart-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s4) 0 var(--s3); }
.chart-entry {
  padding: var(--s3) 0; border-bottom: 1px dashed var(--line);
  font-size: var(--t-sm); line-height: 1.55;
}
.chart-entry:last-child { border-bottom: none; }
.ce-head { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.ce-hash { font-family: ui-monospace, Menlo, monospace; font-size: var(--t-xs); color: var(--muted); }
.handoff-controls { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; margin-top: var(--s4); }
.handoff-controls label { margin: 0 0 var(--s2); }
.handoff-controls input { width: auto; }
.handoff-controls button { width: auto; margin-top: 0; }
.handoff-doc { margin-top: var(--s5); }
.ho-line { align-items: baseline; }
.src-btn {
  font: 600 var(--t-xs)/1 ui-monospace, Menlo, monospace; color: var(--accent);
  background: var(--accent-wash); border: 1px solid var(--line);
  border-radius: 6px; padding: 2px var(--s2); cursor: help; white-space: nowrap;
}

/* Print: the handoff is the artifact that goes to the checkup. */
@media print {
  .site-header, .banner, .site-footer, .no-print, #client-chips,
  #chart-panel, .card:not(#charts-card), .metric-grid { display: none !important; }
  #charts-card { border: none; box-shadow: none; padding: 0; }
  body { background: #fff; }
  .handoff-doc { box-shadow: none; }
}

/* ---------- login + onboarding: split-screen ---------- */
.login-split {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: calc(100vh - 140px);
  max-width: none; margin: 0; padding: 0;
}
.login-brand {
  background:
    radial-gradient(50rem 30rem at 20% 110%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--accent-wash);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s7) var(--s6);
}
.lb-inner { max-width: 340px; }
.lb-mark { width: 44px; height: 44px; margin-bottom: var(--s5); }
.lb-mark span { height: 6px; border-radius: 3px; }
.login-brand h2 { font-size: var(--t-2xl); margin-bottom: var(--s3); }
.login-brand p { color: var(--ink-soft); font-size: var(--t-base); line-height: 1.6; }
.login-flow {
  display: flex; align-items: center; justify-content: center;
  padding: var(--s7) var(--s5);
}
.login-card { width: 100%; max-width: 420px; }
@media (max-width: 820px) {
  .login-split { grid-template-columns: 1fr; min-height: 0; }
  .login-brand { display: none; }
  .login-flow { padding: var(--s6) var(--s4) var(--s8); }
}
.login-card h1 { margin-bottom: var(--s2); }
.member-btn {
  display: block; width: 100%; text-align: left;
  font: 600 var(--t-base)/1.3 var(--sans); color: var(--ink);
  background: var(--raised); border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
  margin-top: var(--s3); cursor: pointer;
}
.member-btn:hover { border-color: var(--accent); background: var(--accent-wash); }
.ob-step { margin: var(--s5) 0; padding-top: var(--s4); border-top: 1px solid var(--line); }
.ob-step h3 { font-size: var(--t-base); margin-bottom: var(--s2); }
.invite-code {
  font-family: ui-monospace, Menlo, monospace; font-size: var(--t-xl); font-weight: 700;
  letter-spacing: .1em; color: var(--accent);
  background: var(--accent-wash); border: 1.5px dashed var(--accent);
  border-radius: var(--radius-sm); padding: var(--s3) var(--s4);
  text-align: center; margin-top: var(--s3); user-select: all;
}
.invite-inline { font-family: ui-monospace, Menlo, monospace; letter-spacing: .06em; color: var(--accent); }
.err { color: var(--emergency); font-weight: 600; }

/* ---------- identity, far right of the header ---------- */
.auth-box { display: inline-flex; align-items: center; gap: var(--s3); flex: none; }
.auth-chip {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--t-sm); font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; cursor: default;
}
.auth-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font: 700 var(--t-sm)/1 var(--serif);
}
.auth-out {
  font: 600 var(--t-xs)/1 var(--sans); color: var(--muted);
  background: none; border: none; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}
.auth-out:hover { color: var(--accent); }


/* ---------- chooser choice cards ---------- */
.choice {
  display: flex; align-items: center; gap: var(--s4);
  width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: var(--s4) var(--s5);
  margin-top: var(--s4); cursor: pointer;
  font: inherit; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.choice:hover { transform: translateY(-2px); border-color: var(--accent); box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: reduce) { .choice:hover { transform: none; } }
.choice-icon {
  flex: none; width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-wash); color: var(--accent);
}
.choice-icon svg { width: 24px; height: 24px; }
.choice-body { flex: 1; display: block; }
.choice-body strong { display: block; font-family: var(--serif); font-size: var(--t-lg); }
.choice-body span { display: block; color: var(--muted); font-size: var(--t-sm); }
.choice-arrow { font-size: var(--t-xl); color: var(--muted); }

/* ---------- client roster + context ---------- */
.client-chip-card {
  padding: var(--s3) var(--s4); margin-top: var(--s2);
  background: var(--raised); border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: var(--t-sm);
}
.client-context {
  margin-top: var(--s3); padding: var(--s3) var(--s4);
  background: var(--accent-wash); border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--t-sm);
}
.watch-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin: var(--s2) 0; }
.watch {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-weight: 400; font-size: var(--t-sm); margin: 0;
}
.watch input { width: auto; }
.client-form { border-top: 1px solid var(--line); margin-top: var(--s4); padding-top: var(--s2); }

/* ============================================================================
   THE PATIENT NOTEBOOK — a literal notebook in the house design language.
   ========================================================================= */

.nb-wrap { max-width: 1040px; margin: 0 auto; padding: var(--s6) var(--s4) var(--s9); }

.nb {
  display: grid; grid-template-columns: 300px minmax(0, 1fr);
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden; position: relative;
}

/* cover: the left board of the notebook */
.nb-cover {
  position: relative;
  background:
    radial-gradient(40rem 30rem at -10% 110%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--accent-wash);
  padding: var(--s6) var(--s5) var(--s6) calc(var(--s5) + 18px);
  border-right: 1px solid var(--line);
}
/* the stitched spine: the perforation motif, turned vertical */
.nb-spine {
  position: absolute; left: 6px; top: 0; bottom: 0; width: 10px;
  background-image: radial-gradient(circle at 5px 8px, var(--surface) 3px, transparent 3.5px);
  background-size: 10px 22px; background-repeat: repeat-y;
  border-right: 1.5px dashed var(--line-strong);
}
.nb-kicker {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s3);
}
.nb-cover h1 { font-size: var(--t-2xl); line-height: 1.15; margin-bottom: var(--s2); }
.nb-lang { color: var(--ink-soft); font-size: var(--t-sm); margin-bottom: var(--s4); }

/* the integrity seal: a stamp, because this is the one thing worth stamping */
.nb-seal {
  width: 86px; height: 86px; border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font: 700 var(--t-xs)/1.25 var(--sans); letter-spacing: .06em;
  text-transform: uppercase; white-space: pre-line;
  transform: rotate(-8deg); margin: var(--s4) 0;
}
.nb-seal.ok { border: 2.5px solid var(--routine); color: var(--routine); }
.nb-seal.broken { border: 2.5px dashed var(--emergency); color: var(--emergency); }

.nb-facts { margin: var(--s4) 0; }
.nb-facts dt {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); margin-top: var(--s3);
}
.nb-facts dd { margin: 0; font-family: var(--serif); font-size: var(--t-lg); }
.nb-cover button { margin-top: var(--s4); width: 100%; }

/* pages: the right side */
.nb-pages { padding: var(--s5) var(--s6) var(--s6); min-height: 480px; }

.nb-tabs {
  display: flex; gap: var(--s2); margin-bottom: var(--s5);
  border-bottom: 1px solid var(--line);
}
.nb-tab {
  font: 600 var(--t-sm)/1 var(--sans); color: var(--muted);
  background: var(--raised); border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  padding: var(--s3) var(--s4); cursor: pointer;
  position: relative; top: 1px;
}
.nb-tab.active {
  color: var(--ink); background: var(--surface);
  border-color: var(--line); border-top: 3px solid var(--accent);
  padding-top: calc(var(--s3) - 2px);
}

.nb-h { font-size: var(--t-xl); margin-bottom: var(--s4); }

/* profile rows */
.nb-prow {
  display: flex; gap: var(--s4); padding: var(--s3) 0;
  border-bottom: 1px dashed var(--line); font-size: var(--t-sm);
}
.nb-plabel { flex: 0 0 160px; font-weight: 600; }
.nb-pvalue { flex: 1; color: var(--ink-soft); }

/* a visit is a journal page: margin column + ruled body */
.nb-visit {
  display: flex; gap: var(--s5);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
}
.nb-visit:last-child { border-bottom: none; }
.nb-margin {
  flex: 0 0 110px; text-align: right;
  border-right: 2px solid color-mix(in srgb, var(--urgent) 24%, var(--line));
  padding-right: var(--s3);
}
.nb-date {
  font-family: var(--serif); font-weight: 600; font-size: var(--t-base);
  white-space: nowrap;
}
.nb-time { font-size: var(--t-xs); color: var(--muted); margin-bottom: var(--s2); }
.nb-vbody { flex: 1; min-width: 0; }
/* faint ruled baselines under the observations — the notebook feel, whisper-quiet */
.nb-obs {
  font-size: var(--t-base); line-height: 28px; margin-bottom: var(--s1);
  background-image: repeating-linear-gradient(
    to bottom, transparent 0 27px, color-mix(in srgb, var(--line) 55%, transparent) 27px 28px);
}
.nb-change { font-size: var(--t-sm); color: var(--ink-soft); font-style: italic; margin: var(--s2) 0; }
.nb-flags { display: flex; flex-wrap: wrap; gap: var(--s2); margin: var(--s2) 0; }
.nb-flag {
  font-size: var(--t-xs); font-weight: 700; color: var(--urgent);
  border: 1px solid var(--urgent); border-radius: 999px; padding: 2px var(--s3);
  background: color-mix(in srgb, var(--urgent) 6%, var(--surface));
}
.nb-hash {
  font-family: ui-monospace, Menlo, monospace; font-size: 10px;
  color: var(--muted); opacity: .7; margin-top: var(--s2);
}

/* signals + handoffs */
.nb-level {
  display: inline-block; font-weight: 700; font-size: var(--t-sm); color: #fff;
  padding: var(--s2) var(--s4); border-radius: 999px; margin-bottom: var(--s4);
}
.nb-level.none { background: var(--routine); }
.nb-level.watch { background: var(--concern); }
.nb-level.notify_nurse { background: var(--urgent); }
.nb-reason { padding: var(--s3) 0; border-bottom: 1px dashed var(--line); }
.nb-reason:last-of-type { border-bottom: none; }
.nb-ho { padding: var(--s3) 0; border-bottom: 1px dashed var(--line); }
.nb-ho-head { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; }
.nb-foot { margin-top: var(--s6); padding-top: var(--s3); border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .nb { grid-template-columns: 1fr; }
  .nb-cover { border-right: none; border-bottom: 1px solid var(--line); }
  .nb-pages { padding: var(--s5) var(--s4); }
  .nb-margin { flex-basis: 72px; }
}

@media print {
  .nb { box-shadow: none; border: none; grid-template-columns: 1fr; }
  .nb-cover { border: none; }
  .nb-tabs, .no-print { display: none !important; }
  .nb-page { display: block !important; }
  .nb-page[hidden] { display: block !important; }
}
.nb-open {
  display: inline-block; margin-top: var(--s2);
  font-size: var(--t-sm); font-weight: 600; color: var(--accent); text-decoration: none;
}
.nb-open:hover { text-decoration: underline; }
.nb-cg { font-size: var(--t-xs); font-weight: 700; color: var(--accent); margin-bottom: var(--s1); }
.nb-spoken {
  font-family: var(--serif); font-size: var(--t-lg); line-height: 1.5;
  color: var(--ink); margin-bottom: var(--s2);
}

/* =========================================================================
   THE BOOKSHELF — every client's notebook, as a book you open.
   ========================================================================= */

.bookshelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 210px));
  justify-content: start;
  gap: var(--s6) var(--s5);
  margin-top: var(--s5);
}

.book-slot { perspective: 1200px; }

.book {
  position: relative; display: block;
  aspect-ratio: 3 / 3.9;
  text-decoration: none; color: var(--ink);
  transform-style: preserve-3d;
  transform: rotateY(0deg);
  transition: transform .45s cubic-bezier(.22, .8, .3, 1);
  filter: drop-shadow(0 10px 18px rgba(46, 38, 28, .16));
}
.book:hover, .book:focus-visible { transform: rotateY(-6deg) translateY(-4px); }

/* the block of pages behind the cover */
.book-pages {
  position: absolute; inset: 3px 2px 3px 12px;
  background:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--ink) 12%, var(--surface)) 0 1px, var(--surface) 1px 3px);
  border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
  border: 1px solid var(--line-strong);
}

/* the spine, always visible at the left edge */
.book-spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: color-mix(in srgb, var(--accent) 82%, black);
  border-radius: 3px 0 0 3px;
  z-index: 3;
}
.bk-spine-label {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  font: 700 10px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--accent-ink) 85%, transparent);
  max-height: calc(100% - 20px); overflow: hidden; white-space: nowrap;
}

/* the front board — this is what swings open */
.book-cover {
  position: absolute; inset: 0 0 0 12px;
  display: flex; flex-direction: column;
  padding: var(--s5) var(--s4) var(--s4);
  background:
    radial-gradient(24rem 20rem at -20% 120%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%),
    var(--accent-wash);
  border: 1px solid var(--line-strong);
  border-left: 2px solid color-mix(in srgb, var(--accent) 45%, var(--line-strong));
  border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
  transform-origin: left center;
  transition: transform .5s cubic-bezier(.3, .7, .3, 1);
  backface-visibility: hidden;
  z-index: 2;
}
.book:hover .book-cover, .book:focus-visible .book-cover { transform: rotateY(-26deg); }
.book.opening { transform: rotateY(-10deg) scale(1.04); }
.book.opening .book-cover { transform: rotateY(-105deg); transition-duration: .5s; }

.bk-kicker {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s3);
}
.bk-name {
  font-family: var(--serif); font-size: var(--t-lg); line-height: 1.2;
  margin-bottom: var(--s2); overflow-wrap: anywhere;
}
.bk-lang { font-size: var(--t-xs); color: var(--ink-soft); }
.bk-meta { font-size: var(--t-xs); color: var(--muted); margin-top: auto; }
.bk-seal {
  position: absolute; right: var(--s3); bottom: var(--s3);
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px solid var(--routine); color: var(--routine);
  display: grid; place-items: center; font-size: 14px;
  transform: rotate(-10deg); opacity: .85;
}

.book-tools { text-align: center; margin-top: var(--s3); }
.book-tools .link {
  background: none; border: none; cursor: pointer;
  font: 600 var(--t-xs)/1 var(--sans); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.book-tools .link:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .book, .book-cover { transition: none; }
}

/* =========================================================================
   MY TEAM
   ========================================================================= */

.team-hero .kicker-line {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2);
}
.team-facts { display: flex; gap: var(--s6); margin: var(--s4) 0 var(--s5); flex-wrap: wrap; }
.team-fact { display: flex; flex-direction: column; }
.tf-n { font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.1; }
.tf-k {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted);
}
.invite-box {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  background: var(--raised); border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm); padding: var(--s4); flex-wrap: wrap;
}
.invite-box .hint { display: block; margin-bottom: var(--s1); }

.member-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--s4); margin-top: var(--s4);
}
.member-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: var(--s4);
}
.member-card.me { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.mc-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.mc-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: var(--accent-ink);
  font: 700 var(--t-lg)/1 var(--serif);
}
.mc-avatar.client { background: var(--accent-wash); color: var(--accent); border: 1px solid var(--line-strong); }
.mc-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mc-id strong { overflow-wrap: anywhere; }
.mc-id .tag { align-self: flex-start; }
.tag.role-sup { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); color: var(--accent); }

/* =========================================================================
   COACHING — the pre-visit guide + own-language correction
   ========================================================================= */

.guide-h {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s2);
}
.guide-list { list-style: none; margin: var(--s3) 0; padding: 0; }
.guide-list li {
  padding: var(--s2) 0 var(--s2) var(--s4);
  border-left: 2px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  margin-bottom: var(--s2); font-size: var(--t-sm);
}
.guide-why {
  display: block; color: var(--muted); font-size: var(--t-xs); margin-top: 2px;
}

.own-correction {
  margin-top: var(--s4); padding: var(--s4);
  background: var(--accent-wash); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

/* =========================================================================
   WORKFORCE — matching, coverage, training
   ========================================================================= */

.wf-warning {
  padding: var(--s3) var(--s4); margin-bottom: var(--s3);
  background: color-mix(in srgb, var(--emergency) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--emergency) 35%, var(--line));
  border-radius: var(--radius-sm); font-size: var(--t-sm);
}
.wf-rank { padding: var(--s2) 0; font-size: var(--t-sm); border-top: 1px solid var(--line); }
.wf-rank:first-of-type { border-top: none; }
.wf-rank.best strong { color: var(--accent); }

.wf-member {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); padding: var(--s4); margin-top: var(--s4);
}
.wf-req {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s2) 0; border-top: 1px solid var(--line); font-size: var(--t-sm);
}
.wf-req-body { flex: 1; min-width: 0; }
.wf-req .link {
  background: none; border: none; cursor: pointer; flex: none;
  font: 600 var(--t-xs)/1 var(--sans); color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px;
}
.tr-chip {
  flex: none; font: 700 10px/1 var(--sans); letter-spacing: .06em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--muted); min-width: 84px;
  text-align: center;
}
.tr-chip.tr-done { border-color: var(--routine); color: var(--routine); }
.tr-chip.tr-due  { border-color: var(--urgent, #b8860b); color: var(--urgent, #b8860b); }
.tr-chip.tr-over { border-color: var(--emergency); color: var(--emergency); }

/* AI-read signals in the notebook */
.nb-ai { margin-top: var(--s5); border-top: 1px solid var(--line); padding-top: var(--s4); }
.nb-ai-h { font-size: var(--t-lg); }
.nb-ai-summary {
  font-family: var(--serif); font-size: var(--t-lg); line-height: 1.45;
  margin: var(--s2) 0 var(--s3);
}
.nb-reason-ai { border-left: 3px solid var(--accent); padding-left: var(--s3); }
.nb-ai-q { margin: var(--s2) 0 0; padding-left: 20px; }
.nb-ai-q li { font-size: var(--t-sm); margin-bottom: var(--s1); }
.nb-ai-line { margin-top: var(--s3); }

.hear-btn { margin-top: var(--s2); width: auto; padding: var(--s2) var(--s4); }
/* =========================================================================
   THE RECORD FLOW — three full-height stages, orb first
   ========================================================================= */

.record-flow { max-width: none; padding: 0; margin: 0; }

.stage {
  min-height: calc(100svh - 66px);
  display: flex; align-items: center; justify-content: center;
  padding: var(--s6) var(--s4);
  position: relative;
  background:
    radial-gradient(52rem 36rem at 18% 8%,
      color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    radial-gradient(46rem 32rem at 86% 92%,
      color-mix(in srgb, var(--concern) 6%, transparent), transparent 60%),
    var(--bg);
}
.stage-inner { width: 100%; max-width: 620px; text-align: center; position: relative; z-index: 1; }

.stage-kicker {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: color-mix(in srgb, var(--accent) 75%, var(--muted));
  margin-bottom: var(--s3);
}
.stage-q { font-size: var(--t-3xl); margin-bottom: var(--s6); }

/* ---------- stage 1: the storybook, hero-sized ---------- */

.client-cards {
  display: flex; flex-wrap: wrap; gap: var(--s6); justify-content: center;
  margin-bottom: var(--s7); perspective: 1200px;
}
.client-card {
  position: relative;
  width: 182px; height: 242px;
  border: none; background: none; padding: 0;
  cursor: pointer; font: inherit;
  filter: drop-shadow(0 14px 22px rgba(35, 30, 22, .28));
  transform-style: preserve-3d;
  transform: rotateY(-5deg);
  transition: transform .35s cubic-bezier(.22, .8, .3, 1), filter .35s;
}
.client-card:hover { transform: translateY(-7px) rotateY(-9deg); }
.client-card.selected {
  transform: translateY(-9px) rotateY(-12deg);
  filter: drop-shadow(0 20px 34px color-mix(in srgb, var(--accent) 38%, rgba(35,30,22,.3)));
}
/* page block behind the cover */
.client-card::before {
  content: ""; position: absolute; inset: 4px 2px 4px 12px;
  background:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--ink) 14%, #f7f2e9) 0 1px, #f7f2e9 1px 3px);
  border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
  border: 1px solid var(--line-strong);
}
/* spine */
.client-card::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px;
  background: linear-gradient(to right,
    color-mix(in srgb, var(--accent) 55%, black),
    color-mix(in srgb, var(--accent) 78%, black) 60%,
    color-mix(in srgb, var(--accent) 60%, black));
  border-radius: 4px 0 0 4px;
}
/* the clothbound cover */
.cc-cover {
  position: absolute; inset: 0 0 0 11px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2); padding: var(--s5) var(--s4);
  background:
    radial-gradient(22rem 18rem at 78% -10%, color-mix(in srgb, white 14%, transparent), transparent 55%),
    radial-gradient(20rem 16rem at -10% 115%, color-mix(in srgb, black 26%, transparent), transparent 60%),
    color-mix(in srgb, var(--accent) 88%, black);
  border-radius: 2px var(--radius-sm) var(--radius-sm) 2px;
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.3, .7, .3, 1);
  /* embossed double frame */
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, #f4efe2 26%, transparent),
    inset 0 0 0 2px transparent,
    inset 8px 8px 0 -7px color-mix(in srgb, #f4efe2 18%, transparent);
}
.cc-cover::after {
  content: ""; position: absolute; inset: 9px;
  border: 1px solid color-mix(in srgb, #f4efe2 30%, transparent);
  border-radius: 2px 6px 6px 2px;
  pointer-events: none;
}
.client-card.selected .cc-cover { transform: rotateY(-14deg); }
.cc-kicker {
  font-size: 9px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: color-mix(in srgb, #f4efe2 62%, transparent);
}
.client-card strong {
  font-family: var(--serif); font-size: var(--t-xl); line-height: 1.15;
  color: #f4efe2; overflow-wrap: anywhere; text-wrap: balance;
}
.cc-meta { font-size: var(--t-xs); color: color-mix(in srgb, #f4efe2 55%, transparent); }
/* the three-rung mark at the cover's foot */
.cc-mark {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 15px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.cc-mark span {
  display: block; height: 2px; border-radius: 2px;
  background: color-mix(in srgb, var(--accent-hover) 80%, white);
}
.cc-mark span:nth-child(1) { width: 100%; }
.cc-mark span:nth-child(2) { width: 72%; }
.cc-mark span:nth-child(3) { width: 44%; }
/* ribbon bookmark hanging past the bottom edge */
.cc-ribbon {
  position: absolute; right: 26px; top: 62%; bottom: -26px; width: 14px;
  background: linear-gradient(to bottom,
    var(--accent-hover), color-mix(in srgb, var(--accent-hover) 75%, black));
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 9px), 0 100%);
  filter: drop-shadow(0 3px 4px rgba(35, 30, 22, .25));
}

/* today's focus: a ruled page slipped out of the book above */
.who-guide {
  position: relative;
  text-align: left; max-width: 470px; margin: 0 auto var(--s7);
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 27px, color-mix(in srgb, var(--accent) 14%, transparent) 27px 28px),
    linear-gradient(#fffdf7, #fbf7ee);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: var(--s5) var(--s5) var(--s4) 44px;
  transform: rotate(-0.7deg);
  box-shadow: 0 12px 26px rgba(35, 30, 22, .12), 0 2px 6px rgba(35, 30, 22, .08);
}
@media (prefers-color-scheme: dark) {
  .who-guide {
    background:
      repeating-linear-gradient(to bottom,
        transparent 0 27px, color-mix(in srgb, var(--accent) 22%, transparent) 27px 28px),
      linear-gradient(#221e1a, #1d1a16);
  }
}
/* the notebook's margin rule */
.who-guide::before {
  content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 2px;
  background: color-mix(in srgb, var(--urgent) 30%, transparent);
}
/* index tab poking off the page's top edge */
.who-guide::after {
  content: "Today's focus";
  position: absolute; top: -13px; left: 26px;
  padding: 4px 14px;
  background: var(--accent); color: var(--accent-ink);
  font: 700 10px/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  border-radius: 5px 5px 0 0;
  transform: rotate(0.7deg);
  box-shadow: 0 -2px 6px rgba(35, 30, 22, .08);
}
.who-guide .hint {
  font-family: var(--serif); font-style: italic;
  line-height: 28px; margin: 0;
  color: color-mix(in srgb, var(--accent) 60%, var(--muted));
}
.who-guide .guide-list { list-style: none; margin: 0; padding: 0; }
.who-guide .guide-list li {
  padding: 0; margin: 0;
  color: var(--ink-soft); font-size: var(--t-sm); line-height: 28px;
}
.who-guide .guide-list li strong {
  font-family: var(--serif); color: var(--ink); font-size: var(--t-base);
}

.who-lang { max-width: 320px; margin: 0 auto; }
.stage-microlabel {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); margin-bottom: var(--s2);
}
.who-lang select {
  border-radius: 999px; padding: var(--s3) var(--s6) var(--s3) var(--s5);
  background: var(--surface); border: 1.5px solid var(--line-strong);
  text-align: center; appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b645c' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.who-lang .hint:empty { display: none; }
.who-lang .hint { margin-top: var(--s2); }
button.stage-cta {
  margin-top: var(--s6); padding: var(--s4) var(--s8);
  font-size: var(--t-lg); border-radius: 999px;
  width: auto; display: inline-block;
}
.whisper-line { margin-top: var(--s5); font-size: var(--t-xs); color: var(--muted); }

/* ---------- stage 2: the speak stage ---------- */

.speak-col {
  width: 100%; max-width: 660px;
  min-height: calc(100svh - 66px - 2 * var(--s6));
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  gap: var(--s4); text-align: center;
  position: relative; z-index: 1;
}

.speak-line {
  font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.2;
  color: var(--ink); min-height: 1.2em; text-wrap: balance;
  transition: font-size .3s ease, color .3s ease, letter-spacing .3s ease;
  margin-top: auto;
}
/* once words exist, the state line steps back and the words lead */
.speak-col.has-text .speak-line {
  font-family: var(--sans); font-size: var(--t-xs); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

.speak-transcript {
  width: min(860px, 92vw);
  align-self: center;
}
.speak-transcript textarea {
  width: 100%; border: none; background: transparent; resize: none;
  font-family: var(--serif); font-size: var(--t-2xl); line-height: 1.4;
  color: var(--ink); text-align: center; overflow-y: auto;
  min-height: 2.9em;
}
/* paragraph-length dictation reads as text, not a headline */
.speak-transcript textarea.long {
  font-size: var(--t-lg); line-height: 1.55; text-align: left;
}
.speak-transcript textarea:focus-visible {
  outline: none;
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 0;
}

/* ---------- the orb: bloom + sphere + inner life ---------- */

.orb-wrap { position: relative; padding: var(--s6); }

/* the halo behind everything — breathes, and swells with the voice */
.orb-wrap::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 380px; height: 380px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--accent) 12%, transparent) 45%,
    transparent 70%);
  filter: blur(28px);
  animation: bloom-breathe 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bloom-breathe {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.94); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}

.speak-col .orb {
  --level: 0;
  position: relative;
  width: 200px; height: 200px; border-radius: 50%;
  border: none; cursor: pointer; padding: 0;
  transform: scale(calc(1 + var(--level) * 0.08));
  transition: transform .09s linear;
  overflow: hidden;
  background:
    radial-gradient(circle at 31% 24%,
      #cfe9dd 0%,
      color-mix(in srgb, var(--accent) 55%, #cfe9dd) 22%,
      var(--accent) 55%,
      color-mix(in srgb, var(--accent) 45%, black) 86%,
      color-mix(in srgb, var(--accent) 28%, black) 100%);
  box-shadow:
    0 0 calc(46px + var(--level) * 110px)
      color-mix(in srgb, var(--accent) calc(30% + var(--level) * 45%), transparent),
    0 22px 44px rgba(15, 28, 23, .28),
    inset 0 -22px 40px color-mix(in srgb, black 30%, transparent),
    inset 0 -4px 14px color-mix(in srgb, var(--accent-hover) 45%, transparent);
}
@media (prefers-color-scheme: dark) {
  .speak-col .orb {
    background:
      radial-gradient(circle at 31% 24%,
        #d8f2e7 0%,
        color-mix(in srgb, var(--accent) 60%, #d8f2e7) 20%,
        var(--accent) 52%,
        color-mix(in srgb, var(--accent) 40%, black) 88%,
        color-mix(in srgb, var(--accent) 22%, black) 100%);
  }
}

/* crisp specular highlight */
.speak-col .orb::before {
  content: ""; position: absolute; left: 22%; top: 13%;
  width: 34%; height: 22%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%);
  filter: blur(3px);
  transform: rotate(-18deg);
}
/* bounce light on the lower rim */
.speak-col .orb::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: 3%;
  height: 26%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    color-mix(in srgb, var(--accent-hover) 55%, transparent) 0%, transparent 70%);
  filter: blur(8px);
}
/* the inner life: a soft blob drifting inside the sphere */
.speak-col .orb .orb-core {
  position: absolute; inset: auto;
  left: 16%; top: 34%;
  width: 62%; height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 40%,
    color-mix(in srgb, var(--accent-hover) 85%, white) 0%,
    color-mix(in srgb, var(--accent-hover) 40%, transparent) 45%,
    transparent 72%);
  filter: blur(14px);
  opacity: .5;
  animation: core-drift 9s ease-in-out infinite;
}
@keyframes core-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(14%, -16%) scale(1.12); }
  60% { transform: translate(-10%, 8%) scale(.94); }
}
.speak-col .orb.listening .orb-core { animation-duration: 3.5s; opacity: .75; }
.speak-col .orb.listening {
  box-shadow:
    0 0 calc(60px + var(--level) * 130px)
      color-mix(in srgb, var(--accent) calc(40% + var(--level) * 45%), transparent),
    0 22px 44px rgba(15, 28, 23, .28),
    inset 0 -22px 40px color-mix(in srgb, black 30%, transparent),
    inset 0 -4px 14px color-mix(in srgb, var(--accent-hover) 45%, transparent);
}
/* ripple ring lives OUTSIDE the sphere so overflow:hidden can't clip it */
.orb-wrap .ring {
  position: absolute; left: 50%; top: 50%;
  width: 200px; height: 200px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--accent) 50%, transparent);
  opacity: 0; pointer-events: none;
}
.orb-wrap.recording .ring { animation: ring-out 1.6s ease-out infinite; }
.orb-wrap.recording .ring:nth-child(2) { animation-delay: .8s; }
@keyframes ring-out {
  from { opacity: .6; transform: translate(-50%, -50%) scale(1); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.55); }
}
.speak-col .orb.thinking .orb-core { animation-duration: 1.4s; opacity: .9; }

/* the orb steps back once words are on screen */
.speak-col.has-text .orb-wrap { transform: scale(.72); margin: calc(-1 * var(--s5)) 0; }
.orb-wrap { transition: transform .4s cubic-bezier(.22, .8, .3, 1), margin .4s; }
.speak-col.has-text .tip-chip { animation: none; opacity: 0; transition: opacity .4s; }

/* floating tips: whispers with a dot, wide of the sphere */
.tip-chip {
  position: absolute; z-index: 1;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .07em;
  text-transform: lowercase;
  color: color-mix(in srgb, var(--accent) 62%, var(--ink-soft));
  background: color-mix(in srgb, var(--accent-wash) 78%, transparent);
  border-radius: 999px; padding: 7px 14px;
  opacity: 0; pointer-events: none;
  max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  animation: tip-in .6s ease forwards, tip-drift 7s ease-in-out infinite;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 10%, transparent);
}
.tip-chip::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); flex: none;
}
.tip-1 { left: -118px; top: 12%; animation-delay: .2s, 0s; }
.tip-2 { right: -128px; top: 48%; animation-delay: .45s, 2.3s; }
.tip-3 { left: -104px; bottom: 8%; animation-delay: .7s, 4.1s; }
@keyframes tip-in { to { opacity: .85; } }
@keyframes tip-drift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@media (max-width: 760px) {
  .tip-1 { left: -22px; top: -16px; }
  .tip-2 { right: -18px; top: 26%; }
  .tip-3 { left: -12px; bottom: -10px; }
}

/* the translation, below the orb */
.speak-translation { max-width: 540px; }
.speak-translation .note-kicker { display: block; margin-bottom: var(--s1); }
.note-kicker {
  font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
.speak-translation p {
  font-size: var(--t-base); color: var(--ink-soft); line-height: 1.55;
}

/* the button row: even pills */
.speak-actions { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.speak-actions .primary { margin-top: 0; }
.ghost-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 48px; padding: 0 var(--s5);
  white-space: nowrap;
  background: color-mix(in srgb, var(--surface) 75%, transparent);
  border: 1.5px solid var(--line-strong); border-radius: 999px;
  cursor: pointer;
  font: 600 var(--t-sm)/1 var(--sans); color: var(--ink-soft);
  transition: border-color .2s, color .2s, background .2s;
}
.ghost-btn:hover { border-color: var(--accent); color: var(--accent); }
.send-btn {
  height: 48px; display: inline-flex; align-items: center;
  border-radius: 999px; padding: 0 var(--s6); font-size: var(--t-base);
}

.speak-sub { min-height: 1.4em; }
.speak-whispers { display: flex; gap: var(--s6); margin-top: auto; padding-top: var(--s5); }
.speak-whispers .link {
  background: none; border: none; cursor: pointer;
  font: 600 var(--t-xs)/1 var(--sans); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
}
.speak-whispers .link:hover { color: var(--accent); }

/* engine pill: frosted, quiet */
.mode-corner { position: absolute; top: var(--s4); right: var(--s4); z-index: 2; }
.mode-corner .mode-toggle {
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-radius: 999px; border: 1px solid var(--line);
  padding: 3px; display: inline-flex;
}
.mode-corner .mode-btn {
  border: none; background: none; border-radius: 999px;
  padding: 6px 14px; cursor: pointer;
  font: 600 var(--t-xs)/1 var(--sans); color: var(--muted);
}
.mode-corner .mode-btn.active { background: var(--accent); color: var(--accent-ink); }

/* stage 3 keeps the card look, centered */
#result { max-width: 720px; margin: var(--s6) auto var(--s9); }

@media (prefers-reduced-motion: reduce) {
  .orb-wrap::before, .speak-col .orb .orb-core, .tip-chip,
  .orb-wrap.recording .ring { animation: none; }
  .tip-chip { opacity: .85; }
}


/* ---------- WebGL orb (three.js) — the CSS sphere becomes the fallback ---------- */
.orb-canvas {
  position: absolute; left: 50%; top: 50%;
  width: 260px; height: 260px;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.speak-col .orb:not(.orb-fallback) {
  background: none;
  overflow: visible;
  transform: none;               /* the blob deforms itself; no 60 Hz button scaling */
  box-shadow: 0 0 calc(46px + var(--level, 0) * 110px)
    color-mix(in srgb, var(--accent) calc(26% + var(--level, 0) * 45%), transparent);
}
.speak-col .orb:not(.orb-fallback)::before,
.speak-col .orb:not(.orb-fallback)::after,
.speak-col .orb:not(.orb-fallback) .orb-core { display: none; }

/* sign-in: remembered team chips */
.team-chip {
  display: block; width: 100%; text-align: left;
  margin-bottom: var(--s2); padding: var(--s3) var(--s4);
  background: var(--accent-wash); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: var(--radius-sm); cursor: pointer;
  font: 600 var(--t-sm)/1.3 var(--sans); color: var(--ink);
}
.team-chip:hover { border-color: var(--accent); }