/* ClinoVoice app. The website's palette and type (website/styles.css, copied
   here by hand, not imported: the website shares no code with the product).
   Sage is the one accent, peach is attention, red is failure and the live
   recording dot. Every colour is a token: the light values are this :root,
   the dark ones the two blocks after it (docs/theme-plan.md); outside them a
   rule names a token, never a colour (test/unit/theme_tokens.test.js).
   Layout follows docs/app-wireframes.html and docs/wireframes/app-theme-mockups.html. */
:root {
  --bg: #FBF8F3; --card: #FFFFFF; --card-2: #F6F1E9;
  --line: #E8E1D6; --line-strong: #CFC5B7;
  --ink: #1F3A34; --mute: #5C6E68; --placeholder: #8A9792;
  --accent: #2E6F62; --accent-hover: #245A4F; --accent-ink: #FFFFFF; --accent-soft: #DDEFE8;
  --attn: #8A4D2B; --attn-soft: #F9E6DA;
  --ok: #2E6F62; --ok-soft: #DDEFE8;
  --fail: #A32D2D; --fail-soft: #F8E3E1;
  --rec: #A32D2D;
  --level-low: #CFC5B7; --level-edge: #E0B48E; --level-good: #7FB5A6;
  --shadow: 0 10px 40px rgba(31,58,52,.10);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 8px; --radius-card: 12px; --radius-btn: 999px;
  /* Derived from the palette above, so each theme block sets only the palette. */
  --warn: var(--attn); --hover: var(--card-2); --active: var(--line);
  --accent-line: transparent; --accent-text: var(--ink);
  --attn-faint: color-mix(in srgb, var(--attn-soft) 40%, var(--card)); --attn-strong: var(--attn);
  --attn-line: color-mix(in srgb, var(--attn) 40%, transparent);
  --ok-line: color-mix(in srgb, var(--ok) 40%, transparent); --fail-line: color-mix(in srgb, var(--fail) 40%, transparent);
  --mark: var(--attn-soft); --diff-added: var(--accent-soft); --diff-removed: var(--fail-soft);
  --overlay: color-mix(in srgb, var(--bg) 70%, transparent);
  --time-ink: var(--ink); --dot-idle: var(--line-strong);
  --meter-track-low: var(--card-2); --meter-track-edge: var(--attn-soft); --meter-track-good: var(--accent-soft); --meter-mark: var(--mute);
  --player-bg: var(--card-2); --range-track: var(--line-strong); --chart-grid: var(--line);
  /* White in both themes: a QR code must stay scannable. */
  --paper: #FFFFFF; --paper-line: #E8E1D6;
  font-family: var(--sans); color: var(--ink);
}
/* Light unless dark is chosen in this browser (theme.js sets data-theme
   from localStorage before the stylesheets load) or, with no choice, the
   system prefers dark. The dark block is the mockup's, written twice. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  --bg: #141C1A; --card: #1C2624; --card-2: #22302C;
  --line: #2E3B37; --line-strong: #43534E;
  --ink: #E9E4DA; --mute: #9FADA7; --placeholder: #71807A;
  --accent: #6FB7A6; --accent-hover: #86C8B8; --accent-ink: #0F1E1A; --accent-soft: #23403A;
  --attn: #E8B08E; --attn-soft: #3A2A20;
  --ok: #6FB7A6; --ok-soft: #23403A;
  --fail: #E48D86; --fail-soft: #3D2321;
  --rec: #E48D86;
  --level-low: #43534E; --level-edge: #8A6A4E; --level-good: #4E8F80;
  --shadow: 0 10px 40px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #141C1A; --card: #1C2624; --card-2: #22302C;
    --line: #2E3B37; --line-strong: #43534E;
    --ink: #E9E4DA; --mute: #9FADA7; --placeholder: #71807A;
    --accent: #6FB7A6; --accent-hover: #86C8B8; --accent-ink: #0F1E1A; --accent-soft: #23403A;
    --attn: #E8B08E; --attn-soft: #3A2A20;
    --ok: #6FB7A6; --ok-soft: #23403A;
    --fail: #E48D86; --fail-soft: #3D2321;
    --rec: #E48D86;
    --level-low: #43534E; --level-edge: #8A6A4E; --level-good: #4E8F80;
    --shadow: 0 10px 40px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); font-size: 15px; line-height: 1.45; }
a { color: var(--accent); }
button, input, select, textarea { font: inherit; }
input[type=text], input[type=search], input[type=email], input[type=date], input[type=time], select, textarea {
  border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 7px 10px; background: var(--card); color: var(--ink); line-height: 1.3; vertical-align: middle; }
input::placeholder, textarea::placeholder { color: var(--placeholder); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input[type=date], input[type=time], select { min-height: 38px; }
input[type=checkbox] { width: 16px; height: 16px; vertical-align: middle; }
.narrow { display: none; }

.topbar { display: flex; align-items: center; gap: 24px; padding: 10px 24px; min-height: 60px; background: var(--card); border-bottom: 1px solid var(--line); }
.topbar .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 18px; color: var(--ink); text-decoration: none; }
.brand-mark { width: 26px; height: 26px; flex: 0 0 auto; }
.brand-mark .bg { fill: var(--accent-soft); }
.brand-mark .bar { fill: var(--accent); }
.topbar nav { display: flex; gap: 2px; }
.topbar nav a { color: var(--mute); text-decoration: none; padding: 8px 14px; border-radius: var(--radius-btn); white-space: nowrap; }
.topbar nav a:hover { color: var(--ink); background: var(--hover); }
.topbar nav a.on { color: var(--accent); background: var(--accent-soft); font-weight: 500; }
.badge { background: var(--warn); color: var(--accent-ink); border-radius: 10px; font-size: 12px; padding: 1px 7px; margin-left: 6px; font-weight: 600; }
.topbar .right { margin-left: auto; color: var(--mute); font-size: 14px; }

.device { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--card); color: var(--mute);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.device:hover:not([disabled]) { border-color: var(--line-strong); color: var(--ink); }
.device[disabled] { cursor: default; }
.device-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.device[data-status="connected"] { color: var(--ink); }
.device[data-status="connected"] .device-dot { background: var(--level-good); }
.device[data-status="disconnected"] .device-dot { background: var(--level-edge); }
.device[data-status="microphone"] { color: var(--ink); cursor: default; }
.device[data-status="microphone"] .device-dot { background: var(--level-good); }
.site-foot { max-width: 1180px; margin: 0 auto; padding: 8px 24px 28px; font-size: 13px; color: var(--mute); display: flex; flex-wrap: wrap; gap: 4px 16px; }
.site-foot a { color: var(--mute); }
.site-foot .build { margin-left: auto; font-variant-numeric: tabular-nums; }

.page { padding: 24px; max-width: 1180px; margin: 0 auto; }
h1 { font-family: var(--serif); font-weight: 500; font-size: 26px; letter-spacing: -0.01em; margin: 0 0 16px; }
h2 { font-size: 13px; margin: 0; color: var(--mute); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.grow { flex: 1; }
.mute { color: var(--mute); font-size: 13px; }
.message { background: var(--accent-soft); border: 1px solid var(--accent-line); color: var(--accent-text); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 14px; }
.error { background: var(--fail-soft); border: 1px solid transparent; color: var(--fail); border-radius: var(--radius); padding: 8px 12px; margin-bottom: 14px; }
.inline { display: inline; margin: 0; }

.btn { display: inline-block; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); padding: 8px 16px; font-weight: 500; border-radius: var(--radius-btn); font-size: 14px; white-space: nowrap; cursor: pointer; text-decoration: none; line-height: 1.3; }
.btn:hover { border-color: var(--mute); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.danger { border-color: var(--fail); color: var(--fail); }
.btn.ghost { border-color: transparent; color: var(--mute); background: transparent; }
.btn.ghost:hover { color: var(--ink); background: var(--hover); }
.btn[disabled] { opacity: .5; cursor: default; }
.link { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font-size: 13px; }

.pill { display: inline-block; padding: 3px 11px; border-radius: 12px; font-size: 13px; border: 1px solid var(--line); color: var(--mute); background: var(--card); white-space: nowrap; }
.pill.work { border-color: var(--accent); color: var(--accent); background: var(--card); }
.pill .spinner, .notice .spinner { display: inline-block; width: 9px; height: 9px; border: 2px solid var(--accent-soft); border-top-color: var(--accent); border-radius: 50%; margin-right: 6px; vertical-align: -1px; animation: spin 0.9s linear infinite; }
.pill.queued::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--accent); margin-right: 6px; box-sizing: border-box; }
@keyframes spin { to { transform: rotate(360deg); } }
th.select, td.select { width: 40px; padding-right: 0; }
.pill.ready, .pill.warn { border-color: transparent; color: var(--attn); background: var(--attn-soft); font-weight: 500; }
.pill.ok { border-color: transparent; color: var(--ok); background: var(--ok-soft); }
.pill.fail { border-color: transparent; color: var(--fail); background: var(--fail-soft); }
@keyframes breathe { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: 13px; color: var(--mute); font-weight: 500; padding: 12px 16px; border-bottom: 1px solid var(--line); }
td { padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
td .sub { color: var(--mute); font-size: 13px; margin-top: 2px; }
tr.cancelled td { color: var(--mute); text-decoration: line-through; }
td.actions { text-align: right; white-space: nowrap; }
td.actions form { display: inline; }
td.actions > * + * { margin-left: 6px; }
.location { padding: 12px 16px; background: var(--card-2); border-bottom: 1px solid var(--line); font-weight: 600; font-size: 13px; color: var(--mute); border-radius: var(--radius-card) var(--radius-card) 0 0; }

.daybar { display: flex; align-items: center; gap: 12px 14px; padding: 14px 16px; margin-bottom: 16px; flex-wrap: wrap; }
.daybar .date { font-family: var(--serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-btn); overflow: hidden; }
.seg a, .seg button { padding: 8px 14px; font-size: 14px; border: 0; border-right: 1px solid var(--line); color: var(--ink); text-decoration: none; background: var(--card); cursor: pointer; }
.seg a:last-child, .seg button:last-child { border-right: 0; }
.seg .on { background: var(--ink); color: var(--bg); }
.seg .off { padding: 8px 14px; font-size: 14px; border-right: 1px solid var(--line); color: var(--line-strong); background: var(--card); cursor: default; }
.seg .off:last-child { border-right: 0; }

/* Forms */
.form { display: grid; grid-template-columns: 220px 1fr; gap: 14px 18px; align-items: center; padding: 20px; }
.form label { color: var(--mute); font-size: 14px; }
.form input[type=text], .form input[type=email], .form input[type=date], .form input[type=time], .form select, .form textarea { width: 100%; max-width: 440px; }
.form .full { grid-column: 1 / -1; }
.form .choices { display: flex; gap: 16px; }
.form .choices label { color: var(--ink); }
fieldset { border: 0; padding: 0; margin: 0; }

/* Recording overlay and wrap-up sheet */
.overlay { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; z-index: 10; }
.console { width: 480px; max-width: calc(100% - 32px); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 24px 28px 22px; box-shadow: var(--shadow); }
.console .who { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.console .meta { color: var(--mute); font-size: 14px; margin-top: 2px; }
.console .state { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; color: var(--mute); font-size: 14px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--rec); animation: breathe 2.5s ease-in-out infinite; box-sizing: border-box; }
.dot.idle { background: transparent; border: 2px solid var(--dot-idle); animation: none; }
.dot.paused { background: transparent; border: 2px solid var(--rec); animation: none; }
.console .source { margin-top: 14px; }
.console .source .controls { margin-top: 10px; flex-wrap: wrap; }
.console .source .controls .btn { flex: 1 1 180px; white-space: normal; }
.console .mic-input { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 14px; }
.console .mic-input select { flex: 1; min-width: 0; }
.console .mic-choose { display: block; margin-top: 12px; }
.console .source .hint a { color: var(--mute); }
.time { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 34px; letter-spacing: .02em; line-height: 1; color: var(--time-ink); }
/* Level meter, -60 to 0 dBFS. Zones by position: grey below the mark (-36 dBFS,
   too quiet to transcribe), amber for the first 6 dB above it, green from
   -30 dBFS. The bar is the full strip clipped to the level (--level, set by
   record.js), so a colour always means the same level. The track carries the
   same zones faintly so they read before anyone speaks. */
.meter { height: 10px; border-radius: 5px; margin: 20px 0 8px; position: relative; overflow: hidden;
  background: linear-gradient(to right, var(--meter-track-low) 0 40%, var(--meter-track-edge) 40% 50%, var(--meter-track-good) 50%); }
.meter .bar { height: 100%; width: 100%; border-radius: 5px; clip-path: inset(0 calc(100% - var(--level, 0%)) 0 0); transition: clip-path .3s;
  background: linear-gradient(to right, var(--level-low) 0 40%, var(--level-edge) 40% 50%, var(--level-good) 50%); }
.meter.quiet { box-shadow: 0 0 0 1px var(--warn); }
.meter .mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--meter-mark); left: 40%; }
.console .hint { font-size: 13px; color: var(--mute); }
.console .hint.warn { color: var(--warn); }
.console .saving { background: var(--attn-soft); border: 1px solid var(--warn); color: var(--attn); border-radius: var(--radius); padding: 8px 12px; margin: 12px 0 0; font-size: 13px; }
.controls { display: flex; gap: 10px; margin-top: 20px; }
.controls .btn { flex: 1; text-align: center; padding: 10px 12px; font-size: 14px; }
.console textarea { width: 100%; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; font-size: 14px; min-height: 90px; resize: vertical; }
.ico { display: inline-block; width: 11px; height: 11px; vertical-align: -1px; margin-right: 7px; }
.ico.stop { background: currentColor; border-radius: 2px; }
.ico.pause { background: linear-gradient(to right, currentColor 0 36%, transparent 36% 64%, currentColor 64%); }
.ico.play { width: 0; height: 0; border-left: 11px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.confirm { margin-top: 12px; padding: 10px; border: 1px solid var(--fail); border-radius: var(--radius); background: var(--fail-soft); font-size: 13px; }

/* Review */
.banner { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; flex-wrap: wrap; }
.banner .who { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.01em; }
.subline { font-size: 14px; color: var(--mute); margin-bottom: 16px; line-height: 2.4; }
.subline form.inline { margin-left: 6px; }
.panes { display: grid; grid-template-columns: 1fr; gap: 14px; }
.panes.with-facts { grid-template-columns: 7fr 5fr; }
.pane { padding: 16px; }
.pane h2 { margin-bottom: 10px; }
.letter { font-size: 14px; line-height: 1.55; white-space: pre-wrap; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-height: 330px; background: var(--card); }
textarea.letter { width: 100%; font-family: inherit; resize: vertical; min-height: 420px; }
.letter mark, mark.check { background: var(--mark); color: var(--attn); padding: 0 2px; border-radius: 2px; }
[data-letter-view][title] { cursor: text; }
[data-letter-view][title]:hover { border-color: var(--accent); }
.fact { padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.fact:last-child { border-bottom: 0; }
.fact .k { color: var(--mute); font-size: 13px; }
.fact .v { margin-top: 2px; white-space: pre-wrap; }
.fact .flag { color: var(--warn); font-size: 12px; margin-left: 6px; }
.fact .src { color: var(--mute); font-size: 12px; margin-top: 2px; }
.fact.changed { background: var(--attn-soft); margin: 0 -16px; padding: 10px 16px; }
.fact details textarea { width: 100%; min-height: 60px; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; }
.drawer { margin-top: 14px; padding: 10px 14px; }
.drawer summary { cursor: pointer; font-size: 14px; }
.details { margin: 0 0 16px; }
.details > summary .mute { font-size: 14px; }
.details .form { padding: 14px 0 6px; }
.recording { padding: 10px 0; border-top: 1px solid var(--line); }
.recording .row { gap: 14px; align-items: center; }
.recording audio { display: block; width: 100%; margin-top: 8px; }
.drawer .transcript, .card .transcript { white-space: pre-wrap; font-size: 14px; line-height: 1.5; max-height: 360px; overflow: auto; margin-top: 10px; }
.drawer audio { width: 100%; margin-top: 10px; }

/* Audio player (public/app.js replaces the native controls). Played is the
   accent blue, unplayed a light grey, so progress reads at a glance. */
.player { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding: 8px 14px 8px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--player-bg); }
.player .player-toggle { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--accent); color: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.player .player-toggle .ico { margin: 0; }
.player .player-toggle .ico.play { margin-left: 3px; }
.player .time-label { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--mute); font-size: 14px; white-space: nowrap; }
.player input[type=range] { flex: 1; min-width: 60px; margin: 0; height: 6px; border-radius: 3px; cursor: pointer;
  -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, var(--accent) 0 var(--played, 0%), var(--range-track) var(--played, 0%) 100%); }
.player input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--accent); }
.player input[type=range]::-moz-range-track { background: transparent; }
.player input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--card); border: 2px solid var(--accent); }
.player input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.footer { display: flex; gap: 10px; margin-top: 14px; align-items: center; flex-wrap: wrap; }
.footer.top { margin: 0 0 12px; }
.notice { background: var(--attn-soft); border: 1px solid transparent; color: var(--attn); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }

.prose { max-width: 720px; line-height: 1.55; }
.prose h2 { margin-top: 20px; }

/* Phone-only pieces, hidden on a desktop. */
.nav-pill, .topbar .account-link, .phone-day, .phone-title, td.phone, .facts-fold, .float-actions { display: none; }

/* Phones. Not the desktop squeezed (docs/theme-plan.md section 4): content
   edge to edge, type and hairlines instead of boxes, and one piece of
   floating translucent chrome in the thumb zone. Forms are one column and
   touch targets reach about 44 px; 16 px text in fields stops iOS zooming on
   focus. */
@media (max-width: 720px) {
  body { font-size: 16px; }
  input, select, textarea { font-size: 16px; }
  .narrow { display: inline; }
  /* The top bar keeps the brand mark, the recorder dot and the avatar. */
  .topbar { flex-wrap: nowrap; gap: 12px; padding: calc(12px + env(safe-area-inset-top)) 20px 6px; min-height: 0; background: transparent; border-bottom: 0; }
  .topbar .brand > span, .topbar nav, .topbar .account .org, .feedback-menu, .account-menu.has-account-page { display: none; }
  .topbar .brand-mark { width: 30px; height: 30px; }
  .topbar .account { gap: 6px; }
  .topbar .account-link { display: inline-flex; text-decoration: none; }
  .topbar .device { border: 0; background: transparent; padding: 10px; }
  .topbar .device-dot { width: 10px; height: 10px; box-shadow: 0 0 0 4px var(--accent-soft); }
  .topbar .device-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* The sections: one translucent pill, which shrinks to the active label
     while scrolling down (app.js). */
  .nav-pill { display: flex; position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6;
    gap: 2px; padding: 5px; border-radius: 999px;
    background: color-mix(in srgb, var(--card) 74%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--shadow); }
  .nav-pill a { padding: 9px 14px; border-radius: 999px; color: var(--mute); text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; }
  .nav-pill a.on { background: var(--accent-soft); color: var(--accent); }
  .nav-pill .badge { font-size: 11px; padding: 0 6px; line-height: 17px; }
  .nav-pill.compact a:not(.on) { display: none; }
  .site-foot { padding: 4px 20px calc(110px + env(safe-area-inset-bottom)); }
  .details .form { padding: 10px 0 4px; }
  .page { padding: 8px 20px 24px; }
  h1 { font-size: 30px; line-height: 1.1; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; }
  .seg a, .seg button, .seg .off { padding: 11px 14px; }
  /* The clinic day: a serif title, a line of counts, a text filter and round
     day controls; no card and no table, each appointment one hairline row.
     Of the daybar only sending letters stays: bulk processing, the clinic
     steps, booking and importing are for a desktop. */
  .phone-day { display: block; margin: 6px 0 4px; }
  .phone-day h1 { margin: 0; font-size: 32px; letter-spacing: -0.015em; line-height: 1.08; }
  .phone-day .counts { color: var(--mute); font-size: 14px; margin: 10px 0 0; line-height: 1.5; }
  .phone-day .counts .ready { color: var(--attn); font-weight: 500; }
  .phone-day .tools { display: flex; align-items: center; margin: 22px 0 2px; font-size: 14px; }
  .phone-day .filter { display: flex; gap: 18px; }
  .phone-day .filter a { color: var(--mute); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
  .phone-day .filter a.on { color: var(--ink); font-weight: 500; border-bottom-color: var(--accent); }
  .phone-day .daynav { margin-left: auto; display: flex; gap: 6px; }
  .phone-day .daynav a { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ink); text-decoration: none; background: var(--card-2); font-size: 16px; }
  .phone-day .daynav a.today { padding: 0 14px; font-size: 14px; font-weight: 500; }
  .daybar { background: none; border: 0; padding: 0; margin: 0; }
  .daybar > :not([data-send-letters]) { display: none; }
  .daybar.patient-search > form { display: flex; }
  .daybar.meetings-bar { display: none; }
  .daybar [data-send-letters] { margin: 14px 0 4px; flex-wrap: wrap; }
  .phone-list { background: none; border: 0; border-radius: 0; }
  .phone-list > .mute { padding: 14px 0 !important; }
  .phone-list .location { background: none; border: 0; border-radius: 0; padding: 22px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
  .phone-list table.list thead { display: none; }
  .phone-list table.list tbody > tr { display: block; padding: 0; border-bottom: 1px solid var(--line); }
  .phone-list table.list tbody > tr:last-child { border-bottom: 0; }
  .phone-list table.list tbody > tr > td { display: none; }
  .phone-list table.list tbody > tr > td.phone { display: flex; align-items: center; gap: 12px; text-decoration: none; }
  .phone-row { flex: 1; min-width: 0; display: grid; grid-template-columns: 50px 1fr; column-gap: 12px; padding: 15px 0; color: var(--ink); text-decoration: none; }
  .phone-row .t { font-variant-numeric: tabular-nums; font-weight: 500; font-size: 15px; padding-top: 1px; }
  .phone-row .n { display: block; font-size: 16px; line-height: 1.3; }
  .phone-row .s { display: block; color: var(--mute); font-size: 13px; margin-top: 3px; }
  .phone-row .st { font-weight: 500; }
  .phone-row .st.ready { color: var(--attn); }
  .phone-row .st.ok { color: var(--ok); }
  .phone-row .st.fail { color: var(--fail); }
  .phone-row .st.work { color: var(--accent); }
  .phone-row .st.work::before { content: ""; display: inline-block; width: 7px; height: 7px; border: 1.5px solid var(--accent); border-top-color: transparent; border-radius: 50%; margin-right: 5px; animation: spin .9s linear infinite; }
  .phone-row.quiet .n, .phone-row.quiet .t { color: var(--mute); }
  .phone-row.plain { grid-template-columns: 1fr; }
  /* Patients and meetings: the title with the page's one create action, then
     the same hairline rows. */
  .phone-title { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
  .phone-title h1 { margin: 0; flex: 1; font-size: 32px; }
  .phone-title .btn { min-height: 0; }
  .daybar.patient-search { display: block; }
  .daybar.patient-search > form { display: flex; }
  .daybar.patient-search input[type=search] { max-width: none !important; }
  td.phone form { margin: 0; }
  td.phone .btn { min-height: 0; padding: 8px 16px; font-size: 14px; }

  table.list, table.list thead, table.list tbody { display: block; }
  table.list thead tr { display: block; padding: 10px 16px; border-bottom: 1px solid var(--line); }
  table.list thead tr:not(:has(input)) { display: none; }
  table.list th { display: none; }
  table.list th.select { display: block; width: auto; padding: 0; border: 0; }
  table.list th.select label { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 14px; }
  table.list tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
  table.list tbody tr:last-child { border-bottom: 0; }
  table.list td { display: block; flex: 1 1 100%; padding: 0; border: 0; }
  table.list td:empty { display: none; }
  table.list td.select, table.list td.when { flex: 0 0 auto; width: auto; }
  table.list td.when { font-weight: 600; }
  table.list td.meta { flex: 0 0 auto; color: var(--mute); font-size: 14px; }
  table.list td.actions { display: flex; flex-wrap: wrap; gap: 8px; text-align: left; white-space: normal; margin-top: 4px; }
  table.list td.actions > * + * { margin-left: 0; }
  table.list td.actions form { display: flex; flex-wrap: wrap; gap: 8px; }

  .form { grid-template-columns: 1fr; gap: 6px; padding: 16px; }
  .form > label { margin-top: 10px; }
  .form input[type=text], .form input[type=email], .form input[type=date], .form input[type=time], .form select, .form textarea { max-width: none; }
  .form .choices { flex-wrap: wrap; }

  /* Review: the letter is the page. The facts pane gives way to a fold at
     its end; Edit and Approve float bottom-right where the nav pill was. */
  .panes, .panes.with-facts { grid-template-columns: 1fr; }
  .banner { display: block; margin: 4px 0 0; }
  .banner .who { display: block; font-size: 32px; line-height: 1.08; letter-spacing: -0.015em; margin-bottom: 8px; }
  .banner .mute { font-size: 14px; }
  .banner .pill { margin-left: 6px; }
  .subline { line-height: 1.5; margin: 10px 0 16px; }
  .panes > .pane { background: none; border: 0; border-radius: 0; padding: 0; }
  [data-facts-pane], [data-facts-toggle] { display: none; }
  .letter { min-height: 0; }
  textarea.letter { min-height: 320px; }
  [data-letter-view] { border: 0; padding: 0; background: none; font-size: 16px; line-height: 1.65; margin-top: 8px; }
  body:has([data-float-actions]) [data-letter-actions], body:has([data-float-actions]) [data-letter-edit] .footer { display: none; }
  textarea.letter { font-size: 16px; line-height: 1.65; }
  .facts-fold { display: block; margin-top: 24px; border-top: 1px solid var(--line); }
  .facts-fold > summary { display: flex; align-items: center; gap: 6px; padding: 16px 0; font-size: 15px; cursor: pointer; }
  .facts-fold > summary .count { color: var(--attn); font-weight: 500; }
  .facts-fold .fact { border-bottom: 0; border-top: 1px solid var(--line); font-size: 15px; }
  .facts-fold .fact.changed { margin: 0; padding: 10px 0; background: none; }
  .facts-fold .fact.changed .v { color: var(--attn); }
  .float-actions { display: flex; position: fixed; right: 20px; bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 6; }
  .float-actions .view-pair, .float-actions .edit-pair { display: flex; gap: 8px; align-items: center; }
  .float-actions .edit-pair, .float-actions.editing .view-pair { display: none; }
  .float-actions.editing .edit-pair { display: flex; }
  .float-actions form { margin: 0; }
  .float-actions .btn { min-height: 0; padding: 12px 22px; font-size: 15px; box-shadow: var(--shadow); }
  .float-actions .btn.ghost { color: var(--ink); background: color-mix(in srgb, var(--card) 74%, transparent);
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-color: color-mix(in srgb, var(--line) 80%, transparent); }
  .float-actions .more { position: relative; }
  .float-actions .more > summary { list-style: none; padding: 12px 16px; }
  .float-actions .more > summary::-webkit-details-marker { display: none; }
  .float-actions .more > .card { position: absolute; right: 0; bottom: calc(100% + 8px); padding: 6px; box-shadow: var(--shadow); white-space: nowrap; }
  .float-actions .more > .card .btn { box-shadow: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-color: transparent; }
  .message.ask { flex-direction: column; align-items: stretch; }
  .message.ask input[type=text] { flex: 0 0 auto; }

  .controls { flex-wrap: wrap; }
  /* Recording and wrap-up: a full-screen takeover, not a sheet. Whose
     recording it is at the top, the state and a large clock in the middle,
     and one round Stop whose halo rings follow the input level (record.js
     sets --level-ratio), so on a phone the meter is the button. */
  .overlay { background: var(--bg); -webkit-backdrop-filter: none; backdrop-filter: none; align-items: stretch; justify-content: stretch; overflow-y: auto; }
  .overlay .console { width: 100%; max-width: none; min-height: 100dvh; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: var(--bg);
    display: flex; flex-direction: column; padding: calc(56px + env(safe-area-inset-top)) 24px calc(32px + env(safe-area-inset-bottom)); }
  .overlay .console .who { font-family: var(--sans); font-size: 17px; font-weight: 500; letter-spacing: 0; color: var(--ink); }
  .overlay .console .meta { font-size: 15px; }
  [data-overlay=recording] .console { text-align: center; }
  [data-overlay=recording] .console .state { justify-content: center; margin: auto 0 14px; font-size: 15px; }
  [data-overlay=recording] .time { font-size: 72px; font-weight: 300; letter-spacing: -0.01em; }
  [data-overlay=recording] .meter { display: none; }
  [data-overlay=recording] .console .hint { font-size: 14px; margin: 14px 0 0; }
  [data-overlay=recording] .console .source { margin-top: auto; }
  [data-overlay=recording] .console .source .controls { flex-direction: column; }
  [data-overlay=recording] .console .source .controls .btn { flex: 0 0 auto; }
  [data-overlay=recording] .console textarea { text-align: left; }
  [data-overlay=recording] [data-record-controls] { margin-top: auto; padding-top: 24px; flex-direction: column; align-items: center; gap: 14px; }
  [data-overlay=recording] [data-record-controls] .btn { align-self: stretch; }
  [data-overlay=recording] [data-record-controls] [data-stop] { order: -1; align-self: center; position: relative; flex: 0 0 auto; width: 88px; height: 88px; min-height: 0; padding: 0; border-radius: 50%; font-size: 0; }
  [data-stop] .ico.stop { margin: 0; }
  [data-overlay=recording] [data-stop] .ico.stop { width: 26px; height: 26px; border-radius: 6px; }
  [data-overlay=recording] [data-stop]::before, [data-overlay=recording] [data-stop]::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 1.5px solid var(--accent); opacity: .35; transform: scale(calc(1 + var(--level-ratio, 0) * .5)); transition: transform .2s; pointer-events: none; }
  [data-overlay=recording] [data-stop]::after { opacity: .15; transform: scale(calc(1 + var(--level-ratio, 0))); }
  [data-overlay=recording] [data-record-controls] [data-pause] { align-self: center; margin-top: 18px; flex: 0 0 auto; border: 0; background: none; color: var(--mute); font-size: 15px; font-weight: 400; }
  [data-overlay=recording] [data-pause] .ico { display: none; }
  [data-overlay=wrapup] .console form { flex: 1; display: flex; flex-direction: column; }
  [data-overlay=wrapup] .console textarea { min-height: 160px; }
  [data-overlay=wrapup] .console .controls { margin-top: auto; padding-top: 24px; flex-direction: column-reverse; }
  [data-overlay=wrapup] .console .controls .btn { flex: 0 0 auto; }
  .player .player-toggle { width: 44px; height: 44px; }
  .player input[type=range]::-webkit-slider-thumb { width: 22px; height: 22px; }
}