:root {
    --paper: #fbfcfc;
    --surface: #ffffff;
    --ink: #16292f;
    --muted: #5d7076;
    --rule: #dbe3e4;
    --seal: #1f6b58;   /* consent recorded */
    --live: #a8362b;   /* recording in progress */
    --focus: #2f6f8f;
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --paper: #101b1f; --surface: #16252a; --ink: #e8eff0; --muted: #9bb0b5;
      --rule: #2b3d43; --seal: #4bb094; --live: #e07568; --focus: #7fc0e0;
    }
  }

  * { box-sizing: border-box; }
  /* A class that sets `display` would otherwise beat the browser's own
     [hidden] rule, and elements hidden from script would stay visible. */
  [hidden] { display: none !important; }
  body {
    margin: 0; padding: 3rem 1.5rem 5rem;
    background: var(--paper); color: var(--ink);
    font-family: var(--sans); font-size: 16px; line-height: 1.5;
  }
  .console { max-width: 44rem; margin: 0 auto; }

  h1 { font-family: var(--serif); font-weight: 600; font-size: 2rem; margin: 0 0 .4rem; letter-spacing: -0.01em; }
  h2 { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; margin: 0; }
  .lede { color: var(--muted); margin: 0 0 2.5rem; max-width: 34rem; }

  .steps { list-style: none; margin: 0; padding: 0; }
  .step { border-top: 1px solid var(--rule); padding: 1.75rem 0; }
  .step:last-child { border-bottom: 1px solid var(--rule); }
  .step-head { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1rem; }
  .step-number {
    font-family: var(--serif); font-size: .95rem; color: var(--muted);
    border: 1px solid var(--rule); border-radius: 50%;
    width: 1.75rem; height: 1.75rem; flex: none;
    display: grid; place-items: center; transform: translateY(.15rem);
  }
  .step[data-done="true"] .step-number { color: var(--seal); border-color: var(--seal); }
  .step[data-live="true"] .step-number { color: var(--live); border-color: var(--live); }

  .controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
  button {
    font: inherit; font-weight: 500; color: var(--surface); background: var(--ink);
    border: 1px solid var(--ink); border-radius: .3rem; padding: .5rem 1rem; cursor: pointer;
  }
  button.quiet { background: transparent; color: var(--ink); }
  button:disabled { opacity: .4; cursor: not-allowed; }
  button:focus-visible, input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .consent-choice { display: flex; gap: .55rem; align-items: flex-start; margin-bottom: 1rem; max-width: 32rem; }
  .consent-choice input { margin-top: .3rem; }

  .detail { color: var(--muted); font-size: .9rem; margin: 1rem 0 0; }
  .detail code { font-size: .85rem; }
  .detail[data-tone="good"] { color: var(--seal); }
  .detail[data-tone="bad"] { color: var(--live); }

  .meter {
    height: 3.5rem; margin: 1.5rem 0 1rem; background: var(--surface);
    border: 1px solid var(--rule); border-radius: .3rem; overflow: hidden;
  }
  .meter-fill {
    height: 100%; width: 0%; background: var(--live); opacity: .85;
    transition: width 60ms linear;
  }
  @media (prefers-reduced-motion: reduce) { .meter-fill { transition: none; } }

  .readout { display: flex; gap: 2.5rem; margin: 0; flex-wrap: wrap; }
  .readout div { margin: 0; }
  .readout dt { color: var(--muted); font-size: .85rem; }
  .readout dd {
    margin: .1rem 0 0; font-family: var(--serif); font-size: 1.5rem;
    font-variant-numeric: tabular-nums;
  }

  .panel { margin-top: 2.5rem; }
  .panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
  .panel-meta { color: var(--muted); font-size: .85rem; margin: 0; font-variant-numeric: tabular-nums; }

  .transcript {
    border: 1px solid var(--rule); border-radius: .3rem; background: var(--surface);
    padding: .5rem 1.15rem; min-height: 7rem; max-height: 24rem; overflow-y: auto;
  }
  .turn { display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem; padding: .6rem 0; }
  .turn + .turn { border-top: 1px solid var(--rule); }
  .turn-meta { color: var(--muted); font-size: .8rem; line-height: 1.35; }
  .turn-time { display: block; font-variant-numeric: tabular-nums; }
  .turn-text { margin: 0; }
  .turn[data-interim="true"] .turn-text { color: var(--muted); font-style: italic; }
  .turn[data-saved="false"] .turn-meta::after { content: "not saved"; color: var(--live); display: block; }
  .uncertain { border-bottom: 2px dotted var(--live); cursor: help; }
  .transcript .empty { color: var(--muted); padding: 1rem 0; margin: 0; }

  .messages { margin-top: 2.5rem; }
  .messages h2 { margin-bottom: .75rem; }
  .log { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
  .log li { display: flex; gap: .75rem; padding: .4rem 0; border-bottom: 1px solid var(--rule); }
  .log time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
  .log li[data-kind="bad"] span { color: var(--live); }
  .log li[data-kind="good"] span { color: var(--seal); }
  .log .empty { color: var(--muted); }
  /* --- shared chrome --- */
  .nav { display: flex; gap: 1.25rem; margin-bottom: 2rem; font-size: .9rem; }
  .nav a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: .15rem; }
  .nav a:hover { color: var(--ink); border-bottom-color: var(--rule); }
  .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }
  .back { display: inline-block; margin-bottom: 1.25rem; color: var(--muted); text-decoration: none; font-size: .9rem; }
  .back:hover { color: var(--ink); }

  /* --- encounter table --- */
  table { width: 100%; border-collapse: collapse; font-size: .9rem; }
  th, td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--rule); }
  th { font-weight: 500; color: var(--muted); font-size: .8rem; }
  td { font-variant-numeric: tabular-nums; }
  tbody tr:hover { background: var(--surface); }
  td a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }

  .tag { display: inline-block; font-size: .75rem; padding: .1rem .5rem; border: 1px solid var(--rule); border-radius: 1rem; color: var(--muted); }
  .tag[data-state="completed"] { color: var(--seal); border-color: var(--seal); }
  .tag[data-state="in_progress"] { color: var(--live); border-color: var(--live); }
  .tag[data-state="no-consent"] { color: var(--live); border-color: var(--live); }
  .tag[data-state="escalated"] { color: var(--live); border-color: var(--live); }
  /* Needs a person to follow up: strong, but not the colour of danger. */
  .tag[data-state="handed_off"] { color: var(--paper); background: var(--ink); border-color: var(--ink); }

  /* --- review page --- */
  .facts { display: flex; flex-wrap: wrap; gap: 2rem; margin: 0 0 2rem; }
  .facts div { margin: 0; }
  .facts dt { color: var(--muted); font-size: .8rem; }
  .facts dd { margin: .15rem 0 0; font-family: var(--serif); font-size: 1.15rem; font-variant-numeric: tabular-nums; }

  .audit { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
  .audit li { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
  .audit time { color: var(--muted); font-variant-numeric: tabular-nums; }
  .audit .what { color: var(--ink); }
  .audit .detail { color: var(--muted); }

  .review-link { display: inline-block; margin-top: .75rem; color: var(--ink); font-size: .9rem;
    text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .1rem; }
  .review-link:hover { border-bottom-color: var(--ink); }

  /* --- replaying a file --- */
  .replay { margin-top: 2rem; }

  .replay-zone {
    border: 1.5px dashed var(--rule); border-radius: .4rem;
    padding: 1.1rem 1.25rem;
  }
  .replay-zone[data-state="decoding"],
  .replay-zone[data-state="connecting"],
  .replay-zone[data-state="replaying"],
  .replay-zone[data-state="finishing"],
  .replay-zone[data-state="done"],
  .replay-zone[data-state="stopped"],
  .replay-zone[data-state="uploading"],
  .replay-zone[data-state="transcribing"],
  .replay-zone[data-state="transcribed"] {
    border-style: solid; background: var(--surface);
  }
  .replay-zone[data-state="error"] { border-color: var(--live); }

  .replay-idle { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; }
  .replay-idle-text { flex: 1 1 18rem; }
  .replay-glyph { width: 2.75rem; height: 1.75rem; fill: var(--ink); opacity: .8; flex: none; }
  .replay-glyph.large { width: 5rem; height: 3.2rem; opacity: 1; }
  .replay-title { font-family: var(--serif); font-weight: 600; font-size: 1.05rem; margin: 0 0 .2rem; }
  .replay-hint { color: var(--muted); font-size: .875rem; margin: 0; max-width: 32rem; }

  .replay-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
  .replay-card-name { min-width: 0; }
  .replay-file {
    font-family: var(--serif); font-weight: 600; margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .replay-meta { color: var(--muted); font-size: .85rem; margin: .15rem 0 0; font-variant-numeric: tabular-nums; }

  .replay-wave { display: block; width: 100%; height: 4rem; margin: 1rem 0 .6rem; }

  .replay-card-foot { display: flex; align-items: center; gap: 1rem; }
  .replay-time { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; min-width: 2.5rem; }
  .replay-time:last-child { text-align: right; margin-left: auto; }
  .replay-actions { flex: 1; display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; }
  .replay-review { color: var(--ink); font-size: .9rem; text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: .1rem; }
  .replay-review:hover { border-bottom-color: var(--ink); }

  .replay-error { margin: .75rem 0 0; color: var(--live); font-size: .875rem; }

  .tag[data-state="decoding"], .tag[data-state="stopped"] { color: var(--muted); }

  /* speed: a segmented control, because the three options are one choice */
  .replay-speed { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-top: .8rem; font-size: .85rem; color: var(--muted); }
  .segmented { display: inline-flex; border: 1px solid var(--rule); border-radius: .3rem; overflow: hidden; }
  .segmented button {
    font: inherit; font-size: .85rem; font-weight: 500;
    background: transparent; color: var(--muted);
    border: 0; border-radius: 0; padding: .3rem .8rem;
  }
  .segmented button + button { border-left: 1px solid var(--rule); }
  .segmented button[aria-checked="true"] { background: var(--ink); color: var(--surface); }
  .segmented button:disabled { opacity: .5; }
  .replay-speed-note { flex: 1 1 14rem; }

  /* the whole page becomes the drop target while a file is dragged over it */
  .drop-overlay {
    position: fixed; inset: 0; z-index: 10;
    display: grid; place-items: center; padding: 1.5rem;
    background: color-mix(in srgb, var(--paper) 90%, transparent);
  }
  .drop-overlay[hidden] { display: none; }
  .drop-overlay-panel {
    width: min(34rem, 100%); padding: 2.75rem 2rem; text-align: center;
    border: 2px dashed var(--ink); border-radius: .6rem; background: var(--surface);
  }
  .drop-overlay[data-busy="true"] .drop-overlay-panel { border-color: var(--live); }
  .drop-overlay-title { font-family: var(--serif); font-weight: 600; font-size: 1.6rem; margin: 1rem 0 .35rem; }
  .drop-overlay-hint { color: var(--muted); margin: 0; }

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

  @media (max-width: 34rem) {
    .replay-card-foot { flex-wrap: wrap; }
    .replay-actions { order: 3; flex-basis: 100%; justify-content: flex-start; }
  }

  /* --- review page: the note beside its transcript --- */
  .console.wide { max-width: 76rem; }

  .evidence {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5rem; align-items: start;
  }
  .evidence .panel { margin-top: 1.5rem; }
  /* The transcript stays in view while the note scrolls past it. */
  .transcript-panel { position: sticky; top: 1rem; }
  .evidence .transcript { position: relative; max-height: calc(100vh - 7rem); }

  @media (max-width: 56rem) {
    .evidence { grid-template-columns: 1fr; gap: 0; }
    .transcript-panel { position: static; }
    .evidence .transcript { max-height: 28rem; }
  }

  .note-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
  .note-actions .detail { margin: 0; }
  .note-hint { color: var(--muted); font-size: .85rem; margin: 1.25rem 0 0; }
  .note[data-busy="true"] { opacity: .5; }

  .note-section + .note-section { margin-top: 1.5rem; }
  .note-section h3 {
    font-family: var(--serif); font-weight: 600; font-size: 1rem;
    margin: 0 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule);
  }
  .note-section .none { color: var(--muted); font-size: .875rem; margin: .5rem 0 0; }

  .statements { list-style: none; margin: 0; padding: 0; }
  .statements li + li { margin-top: .15rem; }

  /* A statement is a button: selecting it shows its evidence. */
  button.statement {
    display: flex; gap: 1rem; align-items: baseline; justify-content: space-between;
    width: 100%; text-align: left; font: inherit; font-weight: 400; line-height: 1.5;
    color: var(--ink); background: transparent;
    border: 0; border-left: 3px solid transparent; border-radius: 0 .25rem .25rem 0;
    padding: .45rem .6rem .45rem .75rem; cursor: pointer;
  }
  button.statement:hover { background: var(--surface); }
  button.statement[aria-pressed="true"] {
    border-left-color: var(--seal);
    background: color-mix(in srgb, var(--seal) 9%, transparent);
  }
  button.statement[data-linked="true"] {
    border-left-color: var(--seal);
    background: color-mix(in srgb, var(--seal) 14%, transparent);
  }
  button.statement[data-supported="false"] { border-left: 3px dashed var(--live); }
  .statement-sources {
    flex: none; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  button.statement[data-supported="false"] .statement-sources { color: var(--live); }

  /* The cited lines, quoted directly under the statement. */
  .statement-evidence {
    margin: .2rem 0 .6rem .75rem; padding: .5rem .8rem;
    border-left: 3px solid var(--seal); background: var(--surface);
    border-radius: 0 .25rem .25rem 0; font-size: .9rem;
  }
  .statement-evidence[data-supported="false"] { border-left: 3px dashed var(--live); color: var(--live); }
  .statement-evidence blockquote { margin: 0; }
  .statement-evidence blockquote + blockquote { margin-top: .45rem; }
  .statement-evidence cite { display: block; font-style: normal; color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; }

  /* Transcript lines are selectable, and light up when cited. */
  .utterance { border-radius: .2rem; padding: .05rem .1rem; cursor: pointer; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
  .utterance:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .utterance:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .utterance[data-cited="true"] { background: color-mix(in srgb, var(--seal) 24%, transparent); }
  .utterance[aria-pressed="true"] { outline: 2px solid var(--seal); outline-offset: 1px; background: color-mix(in srgb, var(--seal) 14%, transparent); }

  /* Red, not green, when the selected statement has no evidence. */
  button.statement[data-supported="false"][aria-pressed="true"] {
    background: color-mix(in srgb, var(--live) 8%, transparent);
  }
  /* Supported, but by a line transcribed with low confidence. */
  button.statement[data-uncertain="true"] .statement-sources { color: var(--live); }
  .statement-evidence blockquote[data-uncertain="true"] cite { color: var(--live); }

  /* --- review page: the intake's answers, above the note and transcript --- */
  .intake-review { margin-top: 0; max-width: 50rem; }
  .intake-review .panel-head { flex-wrap: wrap; row-gap: .15rem; }
  .answer-list { list-style: none; margin: 0; padding: 0; }
  .answer-list li + li { margin-top: .15rem; }

  /* An answer is a button, like a statement: selecting it shows its source. */
  button.answer {
    display: grid; grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr) max-content;
    gap: 1rem; align-items: baseline;
    width: 100%; text-align: left; font: inherit; font-weight: 400; line-height: 1.5;
    color: var(--ink); background: transparent;
    border: 0; border-left: 3px solid transparent; border-radius: 0 .25rem .25rem 0;
    padding: .45rem .6rem .45rem .75rem; cursor: pointer;
  }
  button.answer:hover { background: var(--surface); }
  button.answer[aria-pressed="true"] {
    border-left-color: var(--seal);
    background: color-mix(in srgb, var(--seal) 9%, transparent);
  }
  button.answer[data-linked="true"] {
    border-left-color: var(--seal);
    background: color-mix(in srgb, var(--seal) 14%, transparent);
  }
  button.answer[data-sourced="false"] { border-left: 3px dashed var(--live); }
  button.answer[data-sourced="false"][aria-pressed="true"] {
    background: color-mix(in srgb, var(--live) 8%, transparent);
  }
  .answer-label { color: var(--muted); font-size: .88rem; }
  /* Shrink to the words, so an unclear-audio underline sits under them only. */
  .answer-value { justify-self: start; }
  button.answer .uncertain { cursor: inherit; }
  .answer-status {
    color: var(--muted); font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  button.answer[data-check="true"] .answer-status { color: var(--live); }
  .answer-caution { margin: .45rem 0 0; color: var(--live); font-size: .85rem; }
  .answer-list .statement-evidence[data-supported="false"] .answer-caution { margin-top: .3rem; }
  .answers-missing { color: var(--muted); font-size: .875rem; margin: 1rem 0 0 .75rem; }

  /* Red flags noted without stopping: quieter than an emergency, still in view. */
  .mentions { margin: 1.5rem 0 0; }
  .mentions h3 {
    font-family: var(--serif); font-weight: 600; font-size: 1rem;
    margin: 0 0 .4rem; padding-bottom: .3rem; border-bottom: 1px solid var(--rule);
  }
  .mention-list { list-style: none; margin: 0; padding: 0; }
  .mention-list li + li { margin-top: .15rem; }
  button.mention {
    display: block; width: 100%; text-align: left; font: inherit; font-weight: 400; line-height: 1.45;
    color: var(--ink); background: transparent;
    border: 0; border-left: 3px solid var(--rule); border-radius: 0 .25rem .25rem 0;
    padding: .4rem .6rem .45rem .75rem; cursor: pointer;
  }
  button.mention:hover { background: var(--surface); }
  button.mention:disabled { opacity: 1; cursor: default; }
  button.mention[data-linked="true"] {
    border-left-color: var(--seal);
    background: color-mix(in srgb, var(--seal) 14%, transparent);
  }
  .mention-label { display: block; font-weight: 500; }
  .mention-words { display: block; color: var(--muted); font-size: .88rem; }
  .mention-by { display: block; color: var(--muted); font-size: .78rem; margin-top: .1rem; }

  /* An intake handed to a person: the clinic team must follow up. Ink, not red. */
  .intake-handoff {
    border-left: 3px solid var(--ink); border-radius: 0 .25rem .25rem 0;
    background: var(--surface); padding: .75rem 1rem .85rem; margin: 0 0 1.25rem;
  }
  .intake-handoff-title { margin: 0; font-weight: 600; }
  .intake-phone { margin: -.25rem 0 1rem; }
  .intake-handoff blockquote { margin: .65rem 0 .65rem; }
  .intake-handoff cite {
    display: block; font-style: normal; color: var(--muted); font-size: .78rem;
    font-variant-numeric: tabular-nums;
  }

  /* An intake stopped for an emergency: said first, with the words that stopped it. */
  .intake-alarm {
    border-left: 3px solid var(--live); border-radius: 0 .25rem .25rem 0;
    background: color-mix(in srgb, var(--live) 7%, transparent);
    padding: .75rem 1rem .85rem; margin: 0 0 1.25rem;
  }
  .intake-alarm-title { margin: 0; color: var(--live); font-weight: 600; }
  .intake-alarm-detail { margin: .15rem 0 0; }
  .intake-alarm blockquote { margin: .65rem 0 .65rem; }
  .intake-alarm cite {
    display: block; font-style: normal; color: var(--muted); font-size: .78rem;
    font-variant-numeric: tabular-nums;
  }

  @media (max-width: 40rem) {
    button.answer { grid-template-columns: 1fr; gap: .05rem; }
    .answer-status { white-space: normal; }
  }

  /* Read by screen readers, not shown. */
  .visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }

  /* --- phone test page --- */
  .phone { max-width: 26rem; }
  .phone-state { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .35rem; }
  .phone-state[data-tone="good"] { color: var(--seal); }
  .phone-state[data-tone="bad"] { color: var(--live); }
  .phone-timer { margin: 0 0 1.25rem; color: var(--muted); font-variant-numeric: tabular-nums; }
  .phone-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
  .keypad { display: grid; grid-template-columns: repeat(3, 4.25rem); gap: .5rem; }
  .keypad button {
    height: 3.25rem; font-size: 1.25rem; font-variant-numeric: tabular-nums;
    border: 1px solid var(--rule); border-radius: .4rem;
  }
  .keypad button:active { background: var(--surface); }
  .phone-log-section { margin-top: 2.5rem; max-width: 40rem; }
  .phone-log-section h2 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .5rem; }
  .phone-log { list-style: none; margin: 0; padding: 0; font-size: .9rem; }
  .phone-log li { display: flex; gap: .85rem; padding: .3rem 0; border-bottom: 1px solid var(--rule); }
  .phone-log li[data-tone="bad"] { color: var(--live); }
  .phone-log-time { color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }

  /* Room for "Sep 28, 09:12 PM" on one line. */
  .audit li { grid-template-columns: minmax(9.5rem, max-content) 1fr; }

  /* --- reviewing statements --- */
  button.small { font-size: .8rem; padding: .28rem .7rem; }
  .statement-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .65rem; }
  /* Quiet on purpose: one per section, so it must not compete with the note. */
  button.add-statement {
    margin-top: .35rem; padding: .3rem .1rem; border: 0; background: none;
    color: var(--muted); font-size: .82rem; font-weight: 500;
  }
  button.add-statement:hover { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
  .evidence-message { margin: 0; }

  /* Vouched for rather than evidenced: resolved, but visibly different. */
  button.statement[data-accepted="true"] { border-left: 3px dashed var(--muted); }
  button.statement[data-accepted="true"] .statement-sources { color: var(--muted); }
  .statement-evidence[data-accepted="true"] { border-left: 3px dashed var(--muted); color: var(--ink); }

  .statement-editor {
    padding: .7rem .8rem; background: var(--surface);
    border-left: 3px solid var(--focus); border-radius: 0 .25rem .25rem 0;
  }
  .editor-label { display: block; font-size: .8rem; color: var(--muted); margin-bottom: .35rem; }
  .statement-editor textarea {
    display: block; width: 100%; font: inherit; line-height: 1.5; color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule); border-radius: .25rem;
    padding: .45rem .55rem; resize: vertical;
  }
  .statement-editor textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .editor-evidence, .editor-original { font-size: .82rem; color: var(--muted); margin: .5rem 0 0; }
  .editor-error { color: var(--live); font-size: .85rem; margin: .5rem 0 0; }

  /* While editing, the transcript becomes a citation picker. */
  .transcript[data-citing="true"] { outline: 2px dashed var(--focus); outline-offset: -2px; }
  .transcript[data-citing="true"] .utterance { cursor: copy; }

  .deleted-statements { margin-top: 1.5rem; font-size: .875rem; color: var(--muted); }
  .deleted-statements summary { cursor: pointer; }
  .deleted-statements ul { list-style: none; padding: 0; margin: .5rem 0 0; }
  .deleted-statements li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: .4rem 0; border-bottom: 1px solid var(--rule);
  }
  .deleted-statements li span { text-decoration: line-through; }
  #note-status button { margin-left: .35rem; }

  /* --- sign-off --- */
  .sign-off {
    margin-top: 2rem; padding: 1.1rem 1.2rem 1.2rem;
    border: 1px solid var(--rule); border-radius: .4rem; background: var(--surface);
  }
  .sign-off h3 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .75rem; }
  .sign-off[data-state="signed"] { border-color: var(--seal); }

  .checklist { list-style: none; margin: 0 0 1.1rem; padding: 0; }
  .checklist li { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; padding: .3rem 0; font-size: .92rem; }
  .check-mark {
    flex: none; width: 1.15rem; height: 1.15rem; border-radius: 50%;
    border: 1.5px solid var(--live); display: inline-grid; place-items: center;
    font-size: .7rem; line-height: 1; transform: translateY(.15rem);
  }
  .checklist li[data-done="true"] .check-mark { border-color: var(--seal); background: var(--seal); color: var(--surface); }
  .checklist li[data-done="false"] .check-text { color: var(--live); }

  .sign-field { display: block; font-size: .82rem; color: var(--muted); margin-bottom: .3rem; }
  .sign-off input[type="text"], .addendum-form textarea {
    display: block; width: 100%; max-width: 24rem; font: inherit; color: var(--ink);
    background: var(--paper); border: 1px solid var(--rule); border-radius: .25rem; padding: .4rem .55rem;
  }
  .addendum-form textarea { max-width: none; resize: vertical; }
  .sign-off input:focus-visible, .addendum-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .attest { display: flex; gap: .55rem; align-items: flex-start; margin: .85rem 0 1rem; font-size: .92rem; }
  .attest input { margin-top: .3rem; }
  #sign-status { margin: .75rem 0 0; }

  .signature { margin: 0 0 .5rem; color: var(--seal); }
  .signature strong { font-weight: 600; }
  .fingerprint { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: .85rem; color: var(--muted); margin: 0; }
  .fingerprint code { font-size: .8rem; color: var(--ink); background: var(--paper); padding: .1rem .35rem; border-radius: .2rem; }
  .verify-result[data-intact="true"] { color: var(--seal); }
  .verify-result[data-intact="false"] { color: var(--live); font-weight: 600; }

  .addenda { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
  .addenda h4 { font-family: var(--serif); font-size: .95rem; margin: 0 0 .5rem; }
  .addenda .none { color: var(--muted); font-size: .875rem; margin: 0 0 .75rem; }
  .addenda-list { margin: 0 0 1rem; padding-left: 1.2rem; }
  .addenda-list li + li { margin-top: .6rem; }
  .addendum-meta { margin: 0; font-size: .78rem; color: var(--muted); }
  .addendum-text { margin: .1rem 0 0; }
  .addendum-form { display: grid; gap: .5rem; }
  .addendum-form input[type="text"] { max-width: 20rem; }
  .addendum-form button { justify-self: start; }

  .tag[data-state="none"] { color: var(--muted); }

  /* Verification failed: the panel stops looking reassuring. */
  .sign-off[data-integrity="failed"] { border-color: var(--live); border-width: 2px; }
  .sign-off[data-integrity="failed"] .signature { color: var(--live); }
  .addendum-form .sign-field { margin-bottom: -.2rem; }

  /* --- the patient's intake page --- */
  body.patient { font-size: 18px; }
  .intake { max-width: 38rem; margin: 0 auto; }
  .intake-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .6rem; }
  .intake-brand { font-family: var(--serif); font-weight: 600; margin: 0; }
  .intake-progress-text { color: var(--muted); font-size: .85rem; margin: 0; font-variant-numeric: tabular-nums; }

  /* The steps are a real sequence, so the bar is segmented, one piece per step. */
  .intake-progress { display: grid; grid-auto-flow: column; gap: .3rem; margin-bottom: 2.75rem; }
  .intake-progress span { height: .3rem; border-radius: .15rem; background: var(--rule); }
  .intake-progress span[data-state="done"] { background: var(--seal); }
  .intake-progress span[data-state="current"] { background: var(--ink); }

  .intake-consent h1 { font-size: 1.75rem; line-height: 1.25; margin: 1rem 0 1rem; }
  .intake-consent p { max-width: 34rem; }
  .intake-facts { padding-left: 1.2rem; margin: 1rem 0 1.25rem; }
  .intake-facts li + li { margin-top: .3rem; }
  .intake-urgent {
    border-left: 3px solid var(--live); padding: .5rem .9rem; margin: 0 0 1.5rem;
    background: color-mix(in srgb, var(--live) 6%, transparent); font-size: .95rem;
  }
  .intake-agree { display: flex; gap: .65rem; align-items: flex-start; margin-bottom: 1.25rem; }
  .intake-agree input { margin-top: .35rem; width: 1.1rem; height: 1.1rem; flex: none; }
  body.patient button { font-size: 1rem; padding: .65rem 1.4rem; }

  /* The one bold element: the question being asked right now. */
  .intake-question {
    font-family: var(--serif); font-size: 1.85rem; line-height: 1.3; font-weight: 500;
    margin: 0 0 1.5rem; min-height: 2.6em;
  }
  .intake-question[data-waiting="true"] { color: var(--muted); }
  .intake-talk textarea {
    display: block; width: 100%; font: inherit; line-height: 1.5; color: var(--ink);
    background: var(--surface); border: 1.5px solid var(--rule); border-radius: .4rem;
    padding: .75rem .9rem; resize: vertical;
  }
  .intake-talk textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: transparent; }
  .intake-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .9rem; }
  .intake-hint { color: var(--muted); font-size: .8rem; }

  .intake-history { margin-top: 3.5rem; }
  .intake-history h2, .intake-end h2 { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .75rem; }
  .intake-history-list { list-style: none; margin: 0; padding: 0; }
  .intake-history-list li { padding: .7rem 0; border-top: 1px solid var(--rule); }
  .intake-history-q { margin: 0; color: var(--muted); font-size: .88rem; }
  .intake-history-a { margin: .2rem 0 0; }

  .intake-closing { font-family: var(--serif); font-size: 1.5rem; line-height: 1.35; margin: 0 0 2rem; }
  .intake-answers { display: grid; grid-template-columns: minmax(8rem, max-content) 1fr; gap: .45rem 1.25rem; margin: 0 0 2rem; }
  .intake-answers dt { color: var(--muted); font-size: .9rem; }
  .intake-answers dd { margin: 0; }
  .intake-staff { color: var(--muted); font-size: .85rem; }
  .intake-staff a { color: var(--ink); }

  /* An emergency replaces the page: one instruction, unmissable. */
  .intake-emergency { border: 3px solid var(--live); border-radius: .5rem; padding: 1.75rem 1.5rem; margin-top: 1rem; }
  .intake-emergency h1 { color: var(--live); font-size: 1.9rem; margin: 0 0 .75rem; }
  .intake-emergency p { font-size: 1.2rem; line-height: 1.5; margin: 0; }
  body[data-state="emergency"] .intake-progress span { background: var(--rule); }

  .intake-foot { color: var(--muted); font-size: .8rem; margin-top: 3.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }

  @media (max-width: 34rem) {
    body.patient { font-size: 17px; }
    .intake-question { font-size: 1.5rem; }
    .intake-answers { grid-template-columns: 1fr; gap: .1rem; }
    .intake-answers dd { margin-bottom: .6rem; }
  }

  .intake-call {
    display: inline-block; margin-top: 1.25rem; padding: .8rem 1.6rem; border-radius: .4rem;
    background: var(--live); color: #fff; font-weight: 600; font-size: 1.15rem; text-decoration: none;
  }
  .intake-call:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

  /* --- answering by voice --- */
  .intake-voice { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
  .intake-voice-live { margin-top: 1rem; }
  .intake-voice-state { margin: 0 0 .5rem; font-weight: 500; }
  .intake-voice-live[data-state="listening"] .intake-voice-state { color: var(--seal); }
  .intake-voice-live[data-state="speaking"] .intake-voice-state { color: var(--ink); }
  .intake-voice-live[data-state="thinking"] .intake-voice-state,
  .intake-voice-live[data-state="connecting"] .intake-voice-state { color: var(--muted); }
  .intake-level { height: .35rem; border-radius: .2rem; background: var(--rule); overflow: hidden; max-width: 20rem; }
  .intake-level span { display: block; height: 100%; width: 0; background: var(--seal); transition: width 60ms linear; }
  .intake-heard { margin: .8rem 0 0; font-size: 1.05rem; color: var(--muted); font-style: italic; }
  #done-speaking { margin-top: .6rem; }
  @media (prefers-reduced-motion: reduce) { .intake-level span { transition: none; } }

  /* One set of elements, two orders. With voice on, what the assistant is doing
     comes straight after the question, and typing steps back. */
  .intake-talk { display: flex; flex-direction: column; }
  .intake-talk > .intake-question { order: 0; }
  .intake-talk > #answer { order: 1; }
  .intake-talk > .intake-actions { order: 2; }
  .intake-talk > .intake-voice { order: 3; }
  .intake-talk > #talk-error { order: 4; }

  .intake-talk[data-voice="on"] > .intake-voice { order: 1; margin: 0 0 1.75rem; padding-top: 0; border-top: 0; }
  .intake-talk[data-voice="on"] > #answer { order: 2; min-height: 3.2rem; height: 3.2rem; font-size: .95rem; }
  .intake-talk[data-voice="on"] > .intake-actions { order: 3; margin-top: .6rem; }
  .intake-talk[data-voice="on"] .intake-hint { display: none; }
  .intake-talk[data-voice="on"] #send { background: transparent; color: var(--ink); font-size: .9rem; padding: .45rem 1rem; }

  .intake-voice { display: flex; flex-direction: column; align-items: flex-start; }
  .intake-talk[data-voice="on"] .intake-voice-live { order: 0; margin-top: 0; width: 100%; }
  .intake-talk[data-voice="on"] #voice-toggle { order: 1; margin-top: 1rem; font-size: .88rem; padding: .4rem .9rem; }
  .intake-talk[data-voice="on"] .intake-voice-state { font-size: 1.2rem; }
  .intake-voice-state::before {
    content: ""; display: inline-block; width: .6rem; height: .6rem; border-radius: 50%;
    margin-right: .55rem; vertical-align: .1em; background: var(--rule);
  }
  .intake-voice-live[data-state="listening"] .intake-voice-state::before { background: var(--seal); }
  .intake-voice-live[data-state="speaking"] .intake-voice-state::before { background: var(--ink); }

  /* --- sign-in (D1) --- */
  .nav-who { margin-left: auto; display: flex; gap: .6rem; align-items: center; color: var(--muted); }
  .login { max-width: 24rem; }
  .login-form { display: grid; gap: .45rem; }
  .login-form label { font-size: .9rem; color: var(--muted); margin-top: .5rem; }
  .login-form input, .link-box input {
    font: inherit; color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: .3rem; padding: .5rem .65rem; width: 100%;
  }
  .login-form button { margin-top: 1rem; justify-self: start; }

  /* --- private patient links (D1) --- */
  .link-actions { display: flex; gap: .75rem; align-items: center; margin: 0 0 1.5rem; flex-wrap: wrap; }
  .link-box {
    border: 1px solid var(--rule); border-radius: .3rem; background: var(--surface);
    padding: 1rem 1.15rem; margin: 0 0 2rem;
  }
  .link-box h2 { margin-bottom: .5rem; }
  .link-row { display: flex; gap: .5rem; align-items: center; margin: .5rem 0; }
  .link-row input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
  .link-box .detail { margin-top: .5rem; }
  .intake-nolink { margin-top: 1rem; }

  /* --- patient records --- */
  .console.roomy { max-width: 60rem; }
  /* A link that does a button's job (it opens another page). */
  a.button {
    display: inline-block; font-weight: 500; text-decoration: none;
    color: var(--surface); background: var(--ink); border: 1px solid var(--ink);
    border-radius: .3rem; padding: .5rem 1rem;
  }
  a.button:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  .toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: 0 0 1.25rem; }
  .toolbar .search { flex: 1 1 14rem; }
  .toolbar .segmented button { padding: .45rem .9rem; }

  .search input, .field input, .field select, .field textarea, .pick input[type="search"] {
    font: inherit; color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: .3rem; padding: .5rem .65rem; width: 100%;
  }
  .field textarea { resize: vertical; }

  .record-box {
    border: 1px solid var(--rule); border-radius: .3rem; background: var(--surface);
    padding: 1.25rem 1.25rem 1.1rem; margin: 0 0 2rem;
  }
  .record-box h2 { margin-bottom: 1rem; }

  .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.25rem; }
  .field { display: grid; gap: .3rem; align-content: start; }
  .field.full { grid-column: 1 / -1; }
  .field label { font-size: .85rem; color: var(--muted); }
  .field .required { font-size: .75rem; }
  .field-hint { font-size: .78rem; color: var(--muted); }
  .field-group {
    grid-column: 1 / -1; border: 0; margin: .25rem 0 0; padding: 0; min-width: 0;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.25rem;
  }
  .field-group legend { font-family: var(--serif); font-weight: 600; font-size: 1rem; padding: 0; margin-bottom: .6rem; }
  .form-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1.25rem; }
  .form-actions .detail { margin: 0; flex: 1 1 14rem; }

  .patient-head { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; justify-content: space-between; margin-bottom: 2rem; }
  .patient-head .lede { margin: 0; }
  .patient-head h1 { margin-bottom: .3rem; }

  .details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2rem; margin: 0; }
  .details div { margin: 0; }
  .details .full { grid-column: 1 / -1; }
  .details dt { color: var(--muted); font-size: .8rem; }
  .details dd { margin: .15rem 0 0; white-space: pre-line; }
  .details dd[data-empty="true"] { color: var(--muted); }

  /* Narrow screens scroll a wide table sideways rather than crushing its cells. */
  .table-wrap { overflow-x: auto; }
  /* Keeps a visually hidden column heading (.sr-only, absolutely placed) inside
     the scrolling box, so it cannot widen the page on a phone. */
  .table-wrap { position: relative; }
  .table-wrap th, .table-wrap td { white-space: nowrap; }
  .panel-tools { display: flex; gap: .75rem; align-items: baseline; }
  .panel-meta[data-tone="good"] { color: var(--seal); }
  .panel-meta[data-tone="bad"] { color: var(--live); }
  .facts dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .facts dd a:hover { border-bottom-color: var(--ink); }
  td .sub { display: block; color: var(--muted); font-size: .8rem; }

  /* the recording console's patient chooser */
  .pick { max-width: 32rem; margin-bottom: 1rem; }
  .pick-label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .3rem; }
  .pick-results { list-style: none; margin: .4rem 0 0; padding: 0; border: 1px solid var(--rule); border-radius: .3rem; background: var(--surface); }
  .pick-results li + li { border-top: 1px solid var(--rule); }
  .pick-results button {
    display: block; width: 100%; text-align: left; font-weight: 400;
    background: transparent; color: var(--ink); border: 0; border-radius: 0; padding: .55rem .75rem;
  }
  .pick-results button:hover { background: var(--paper); }
  .pick-results .sub { color: var(--muted); font-size: .82rem; }
  .pick-chosen { display: flex; flex-wrap: wrap; gap: .75rem; align-items: baseline; margin: 0 0 1rem; }
  .pick-chosen strong { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
  .pick-chosen .sub { color: var(--muted); font-size: .85rem; }

  @media (max-width: 40rem) {
    .form-grid, .field-group, .details { grid-template-columns: minmax(0, 1fr); }
  }

  /* --- note types --- */
  .inline-label { font-size: .85rem; color: var(--muted); }
  .inline-select {
    font: inherit; color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: .3rem; padding: .45rem .6rem;
  }
  .inline-select:disabled { opacity: .5; }

  /* --- medications --- */
  .meds-status:empty { display: none; }
  .med-form-title { font-family: var(--serif); font-weight: 600; font-size: 1rem; margin: 0 0 .9rem; }
  .med-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .med-list { list-style: none; margin: 0; padding: 0; }
  .med { border-top: 1px solid var(--rule); padding: .85rem 0 .75rem; }
  .med-list > .med:last-child { border-bottom: 1px solid var(--rule); }
  .med-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; }
  .med-name { font-family: var(--serif); font-weight: 600; font-size: 1.08rem; }
  .med-regimen { font-variant-numeric: tabular-nums; }
  .med-regimen[data-empty="true"], .med-when { color: var(--muted); font-size: .9rem; }
  /* Read from a transcript and not yet checked: marked at the edge, like an unresolved statement. */
  .med[data-reviewed="false"] { border-left: 3px solid var(--live); padding-left: .85rem; border-radius: 0; }
  .med-source { color: var(--muted); font-size: .85rem; margin: .35rem 0 0; }
  .med-source a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .med-quote {
    margin: .35rem 0 0; padding: .1rem 0 .1rem .7rem; border-left: 2px solid var(--seal);
    border-radius: 0; font-size: .9rem;
  }
  .med-speaker { color: var(--muted); font-size: .8rem; margin-right: .5rem; }
  .med-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
  .med-history { margin-top: .5rem; font-size: .85rem; }
  .med-history summary { color: var(--muted); cursor: pointer; }
  .med-history ul { list-style: none; margin: .4rem 0 0; padding: 0; }
  .med-history li { display: grid; grid-template-columns: 8.5rem 1fr; gap: .75rem; padding: .25rem 0; }
  .med-history time { color: var(--muted); font-variant-numeric: tabular-nums; }
  .med-stopped { margin-top: 1rem; }
  .med-stopped > summary { color: var(--muted); cursor: pointer; font-size: .9rem; margin-bottom: .5rem; }
  .med-stopped .med-name { color: var(--muted); }
  .panel-tools button { white-space: nowrap; }
  @media (max-width: 40rem) {
    .med-grid { grid-template-columns: minmax(0, 1fr); }
    .med-history li { grid-template-columns: minmax(0, 1fr); gap: 0; }
    /* A heading with several tools: the tools drop below it rather than squeezing. */
    .panel-head, .panel-tools { flex-wrap: wrap; row-gap: .5rem; }
  }

  /* --- tests and reports; note downloads (patient records step 3) --- */
  a.button.quiet { background: transparent; color: var(--ink); }
  a.button.small { font-size: .8rem; padding: .28rem .7rem; }
  .docs-status:empty { display: none; }
  .doc-file { margin-bottom: 1rem; }
  .doc-file input[type="file"] { font: inherit; font-size: .9rem; color: var(--ink); }
  .doc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-list { list-style: none; margin: 0; padding: 0; }
  .doc { border-top: 1px solid var(--rule); padding: .85rem 0 .75rem; }
  .doc-list > .doc:last-child { border-bottom: 1px solid var(--rule); }
  .doc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .9rem; }
  .doc-title {
    font-family: var(--serif); font-weight: 600; font-size: 1.05rem; color: var(--ink);
    text-decoration: none; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere;
  }
  .doc-title:hover { border-bottom-color: var(--ink); }
  .doc-facts { color: var(--muted); font-size: .85rem; margin: .35rem 0 0; }
  .doc-notes { font-size: .9rem; margin: .35rem 0 0; white-space: pre-line; }
  .note-cell { display: inline-flex; align-items: baseline; gap: .6rem; }
  .table-link { font-size: .85rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .table-link:hover { border-bottom-color: var(--ink); }
  @media (max-width: 40rem) {
    .doc-grid { grid-template-columns: minmax(0, 1fr); }
  }

  /* --- the note type picker (patient records step 4) --- */
  .picker-source { display: none; }
  .picker-button { cursor: pointer; text-align: left; font-weight: 500; max-width: 100%; }
  .picker-button:disabled { cursor: not-allowed; }
  dialog.picker {
    width: min(58rem, calc(100vw - 2rem)); max-height: min(88vh, 60rem);
    padding: 0; border: 1px solid var(--rule); border-radius: .5rem;
    background: var(--paper); color: var(--ink);
  }
  dialog.picker[open] { display: flex; flex-direction: column; }
  dialog.picker::backdrop { background: rgb(10 20 24 / .55); }
  .picker-head {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1.1rem 1.5rem .6rem;
  }
  .picker-head h2 { font-family: var(--serif); font-size: 1.2rem; margin: 0; }
  .picker-search {
    margin: 0 1.5rem .9rem; font: inherit; color: var(--ink); background: var(--surface);
    border: 1px solid var(--rule); border-radius: .4rem; padding: .65rem .8rem;
  }
  .picker-search:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
  .picker-body { overflow-y: auto; padding: 0 1.5rem 1.5rem; }
  .picker-group + .picker-group { margin-top: 1.4rem; }
  .picker-group h3 { font-size: .85rem; font-weight: 600; color: var(--muted); margin: 0 0 .6rem; }
  .picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .65rem; }
  button.picker-card {
    display: flex; flex-direction: column; align-items: flex-start; gap: .25rem; text-align: left;
    background: var(--surface); color: var(--ink); font-weight: 400;
    border: 1px solid var(--rule); border-left: 3px solid var(--rule); border-radius: .4rem;
    padding: .75rem .9rem;
  }
  button.picker-card:hover { border-color: var(--muted); }
  button.picker-card[aria-pressed="true"] { border-color: var(--ink); border-left-color: var(--seal); box-shadow: 0 0 0 1px var(--ink); }
  .picker-name { font-weight: 600; }
  .picker-desc { color: var(--muted); font-size: .85rem; }
  .picker-card .tag { margin-top: .2rem; }
  .tag[data-state="badge"] { color: var(--ink); }
  .picker-none { margin: 0 1.5rem 1.5rem; }
  .section-required { font-family: var(--sans); font-weight: 400; font-size: .75rem; color: var(--muted); margin-left: .5rem; }
  /* A long checklist line wraps beside its mark, not below it. */
  .checklist .check-text { flex: 1 1 12rem; }

  /* --- follow-up notes (patient records step 5) --- */
  /* Carried forward from an earlier signed note: sourced, but from another visit. */
  button.statement[data-carried="true"] { border-left: 3px solid var(--focus); }
  button.statement[data-carried="true"] .statement-sources { color: var(--focus); }
  button.statement[data-carried="true"][data-accepted="true"] { border-left-style: dotted; }
  .statement-evidence blockquote.earlier-quote { border-left-color: var(--focus); }
  .earlier-quote cite a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
  .note-combine { margin: -0.5rem 0 1rem; }
  .note-combine .detail { margin-top: .25rem; }
  .combine { display: inline-flex; gap: .5rem; align-items: center; font-size: .92rem; }
  .combine input:disabled + span { color: var(--muted); }
  #step-note .combine { margin-top: .8rem; }
  #step-note #combine-detail { margin-top: .25rem; }
  .note-context { margin: -0.4rem 0 1.1rem; }
  .note-context a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .statement-evidence[data-carried="true"] { border-left: 3px solid var(--focus); color: var(--ink); }

  /* --- the request queue (front desk phase 3) --- */
  .nav-count {
    display: inline-block; min-width: 1.35rem; margin-left: .35rem; padding: 0 .4rem;
    font-size: .75rem; line-height: 1.35rem; text-align: center; font-variant-numeric: tabular-nums;
    color: var(--surface); background: var(--muted); border-radius: 1rem;
  }
  .nav-count[data-safety="true"] { background: var(--live); }
  .queue-notice {
    margin: -1.25rem 0 1.75rem; max-width: 40rem; font-size: .9rem; color: var(--ink);
    border-left: 3px solid var(--rule); padding: .35rem 0 .35rem .85rem;
  }
  .cell-line { display: block; }
  .cell-line.muted { color: var(--muted); font-size: .85rem; }
  #table tr[data-kind] td { white-space: normal; vertical-align: top; }
  #table tr[data-kind="safety"] td:first-child { box-shadow: inset 3px 0 0 var(--live); }
  #table tr[data-kind] td:last-child { min-width: 16rem; }
  #table tr[data-kind] .tag, .request-panel .tag { white-space: nowrap; }
  @media (max-width: 40rem) {
    .nav { flex-wrap: wrap; row-gap: .5rem; }
    /* One request per block on a phone, rather than a table to scroll sideways. */
    #table thead { display: none; }
    #table tr[data-kind] { display: block; padding: .6rem 0 .7rem; border-bottom: 1px solid var(--rule); }
    #table tr[data-kind] td { display: block; border: 0; padding: .15rem .75rem; min-width: 0; }
    #table tr[data-kind="safety"] { box-shadow: inset 3px 0 0 var(--live); }
    #table tr[data-kind="safety"] td:first-child { box-shadow: none; }
  }

  .request-panel {
    margin: 0 0 2rem; padding: 1rem 1.15rem 1.1rem;
    border: 1px solid var(--rule); border-left: 3px solid var(--ink); border-radius: 0 .3rem .3rem 0;
    background: var(--surface);
  }
  .request-panel[data-kind="safety"] { border-left-color: var(--live); }
  .request-panel[data-status="done"] { border-left-color: var(--seal); }
  .request-panel h2 { display: flex; flex-wrap: wrap; gap: .45rem; align-items: baseline; }
  .request-panel h2 .tag { font-family: var(--sans); font-weight: 400; }
  .request-reason { margin: 0 0 .9rem; }
  .request-facts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; }
  .request-facts dt { color: var(--muted); font-size: .8rem; }
  .request-facts dd { margin: .1rem 0 0; font-variant-numeric: tabular-nums; }
  .request-facts dd a { color: var(--ink); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--rule); }
  .request-facts dd a:hover { border-bottom-color: var(--ink); }
  .request-given { margin: .5rem 0 0; font-size: .8rem; }
  .request-called-from { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; }
  .request-outcome { margin: .9rem 0 0; }
  .request-form { margin-top: 1rem; }
  .request-form textarea {
    display: block; width: 100%; font: inherit; color: var(--ink); resize: vertical;
    background: var(--paper); border: 1px solid var(--rule); border-radius: .25rem; padding: .4rem .55rem;
  }
  .request-actions { display: flex; gap: .75rem; align-items: center; margin-top: .65rem; }
  .request-panel .detail { margin-top: .5rem; }
  .request-panel .detail:empty { display: none; }

  /* --- roles: clinician and front desk (21 Oct 2026) ---
     The server writes the account's role on <body> (data-role) as it sends a
     staff page, so these apply before anything is drawn. They only hide what
     the server refuses front desk anyway (app/roles.py). */
  body[data-role="front_desk"] [data-clinician-only] { display: none !important; }
  body:not([data-role="front_desk"]) [data-front-desk-only] { display: none !important; }
  /* Without the note beside it, the transcript takes the full width. */
  body[data-role="front_desk"] .evidence { grid-template-columns: minmax(0, 1fr); }
  .nav-role {
    font-size: .75rem; letter-spacing: .02em; color: var(--muted);
    border: 1px solid var(--rule); border-radius: 999px; padding: .05rem .5rem;
  }

  /* --- staff accounts and invites (21 Oct 2026) ---
     Administrators get data-admin="true" on <body> from the server. */
  body:not([data-admin="true"]) [data-admin-only] { display: none !important; }
  .lede[data-tone="bad"] { color: var(--live); }
  .login-form .field-hint { margin-top: -.1rem; }
  .login-new, .join-signin { margin-top: 1.75rem; }
  .join-signin a { color: var(--ink); }
  .invite-intro { margin: 0 0 1rem; max-width: 40rem; }
  .invite-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.25rem; }
  .invite-form .form-actions { grid-column: 1 / -1; margin-top: 0; }
  .invite-form + .link-box { margin-top: 1.25rem; }
  .link-box h3 { margin: 0 0 .5rem; font-size: 1rem; }
  .account-admin { margin-top: .25rem; }
  #accounts tr[data-active="false"] td { color: var(--muted); }
  .account-editor td { background: var(--surface); white-space: normal; }
  .account-form { display: grid; gap: .8rem; max-width: 34rem; padding: .35rem 0; }
  .account-form .form-actions { margin-top: .25rem; }
  .account-check { display: flex; gap: .55rem; align-items: baseline; font-size: .9rem; cursor: pointer; }
  .account-check input:disabled + span { color: var(--muted); }
  @media (max-width: 40rem) {
    .invite-form { grid-template-columns: minmax(0, 1fr); }
  }

  /* --- scheduling (patient records step 6, 27 Oct 2026) --- */
  .console.schedule-page { max-width: 76rem; }
  .schedule-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
  .schedule-head .lede { margin-bottom: 1.5rem; }
  .schedule-toolbar { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: flex-end; margin-bottom: .5rem; }
  .schedule-who { min-width: 14rem; }
  .schedule-nav { display: flex; gap: .4rem; }
  .schedule-range { font-family: var(--serif); font-size: 1.05rem; margin: 0 0 .35rem; flex: 1 1 14rem; }
  .schedule-wrap { overflow-x: auto; position: relative; margin-top: 1rem; border: 1px solid var(--rule); border-radius: .3rem; background: var(--surface); }
  .schedule-grid {
    display: grid; grid-template-columns: 4.5rem repeat(var(--cols, 1), minmax(9rem, 1fr));
    min-width: calc(4.5rem + var(--cols, 1) * 9rem);
  }
  .schedule-corner, .schedule-col-head {
    position: sticky; top: 0; z-index: 2; background: var(--surface);
    border-bottom: 1px solid var(--rule); padding: .55rem .6rem; font-size: .85rem; font-weight: 600;
  }
  .schedule-col-head { border-left: 1px solid var(--rule); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .schedule-col-head[data-today="true"] { color: var(--seal); }
  .schedule-axis { position: relative; }
  .schedule-hour {
    position: absolute; right: .5rem; transform: translateY(-50%); font-size: .72rem; color: var(--muted);
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .schedule-hour:first-child { transform: none; }
  .schedule-col {
    position: relative; border-left: 1px solid var(--rule);
    background: repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--rule) 45%, transparent) 6px 7px);
  }
  .schedule-line { position: absolute; left: 0; right: 0; border-top: 1px solid color-mix(in srgb, var(--rule) 70%, transparent); pointer-events: none; }
  .schedule-open { position: absolute; left: 0; right: 0; background: var(--paper); pointer-events: none; }
  button.schedule-slot {
    position: absolute; left: 0; right: 0; padding: 0; margin: 0; border: 0; border-radius: 0;
    background: transparent; cursor: pointer; font-size: 0; min-height: 0;
  }
  button.schedule-slot:hover, button.schedule-slot:focus-visible {
    background: color-mix(in srgb, var(--seal) 18%, transparent); outline: none;
  }
  button.schedule-appt {
    position: absolute; left: 3px; right: 3px; z-index: 1; overflow: hidden;
    display: flex; flex-direction: column; align-items: flex-start; gap: 0; text-align: left;
    padding: .2rem .45rem; font: inherit; font-size: .78rem; line-height: 1.25; font-weight: 400;
    color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--ink);
    border-radius: .25rem; box-shadow: 0 1px 2px rgb(0 0 0 / .06);
  }
  button.schedule-appt[data-type="new_patient"] { border-left-color: var(--focus); }
  button.schedule-appt[data-state="seen"] { border-left-color: var(--seal); color: var(--muted); }
  button.schedule-appt:hover { border-color: var(--muted); }
  button.schedule-appt > span { flex: none; } /* lines clip at the bottom, never shrink away */
  .schedule-appt-time { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .72rem; }
  .schedule-appt-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .schedule-appt-type { color: var(--muted); font-size: .72rem; }
  button.schedule-appt[data-short="true"] { flex-direction: row; gap: .4rem; align-items: center; padding-top: 0; padding-bottom: 0; }
  button.schedule-appt[data-short="true"] .schedule-appt-type { display: none; }
  .schedule-now { position: absolute; left: 0; right: 0; z-index: 1; border-top: 2px solid var(--live); pointer-events: none; }
  .schedule-key { margin-top: .6rem; }
  .hours-intro { margin: 0 0 1rem; max-width: 42rem; }
  .table-wrap td.hours-summary { white-space: normal; }
  .hours-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem 1rem; padding: .35rem 0; }
  .hours-form .hours-hint, .hours-form .form-actions { grid-column: 1 / -1; }
  .hours-form .form-actions { margin-top: 0; }

  /* the booking dialog */
  dialog.picker.booking { width: min(62rem, calc(100vw - 2rem)); }
  dialog.picker.booking.booking-narrow { width: min(34rem, calc(100vw - 2rem)); }
  .booking-body { overflow-y: auto; padding: 0 1.5rem 1.25rem; flex: 1 1 auto; min-height: 0; }
  .booking-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 1.5rem 2rem; }
  .booking-left { display: grid; gap: .9rem; align-content: start; }
  .booking-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
  .booking-label { display: block; font-size: .8rem; color: var(--muted); }
  .booking-chosen { margin: 0 0 .35rem; }
  .booking-chosen strong { font-size: 1.05rem; }
  .booking-results { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
  button.booking-result {
    width: 100%; display: flex; justify-content: space-between; gap: .75rem; text-align: left; font-weight: 400;
    background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: .3rem; padding: .45rem .65rem;
  }
  button.booking-result:hover { border-color: var(--muted); }
  .booking-result-sub { color: var(--muted); font-size: .85rem; }
  .booking-search-status { margin: .35rem 0 0; }
  .booking-search-status:empty { display: none; }
  .booking-add { margin-top: .75rem; border-top: 1px solid var(--rule); padding-top: .6rem; }
  .booking-add summary { cursor: pointer; font-size: .9rem; }
  .booking-add[open] { display: grid; gap: .6rem; }
  .booking-add > button { justify-self: start; }
  .booking-add .detail:empty { display: none; }
  .booking-month-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
  .booking-month-title { margin: 0; font-size: 1rem; font-family: var(--serif); }
  .booking-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; margin: .6rem 0 1rem; }
  .booking-weekday { font-size: .75rem; color: var(--muted); text-align: center; padding-bottom: .15rem; }
  button.booking-day {
    height: 2.35rem; padding: 0; font-weight: 400; font-variant-numeric: tabular-nums;
    background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: .3rem;
  }
  button.booking-day[data-free="true"] { border-color: var(--seal); font-weight: 600; }
  button.booking-day:disabled { opacity: 1; color: var(--muted); background: transparent; border-color: transparent; cursor: default; text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); }
  button.booking-day[data-today="true"] { box-shadow: inset 0 -2px 0 var(--focus); }
  button.booking-day[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .booking-times-title { margin: 0 0 .5rem; font-size: .95rem; }
  .booking-times { display: grid; gap: .7rem; }
  .booking-times .detail { margin: 0; }
  .booking-time-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .25rem; }
  button.booking-time {
    min-width: 5.5rem; padding: .4rem .6rem; font-weight: 400; font-variant-numeric: tabular-nums;
    background: var(--surface); color: var(--ink); border: 1px solid var(--seal); border-radius: .3rem;
  }
  button.booking-time[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
  .booking-footer {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; flex: none;
    padding: .85rem 1.5rem 1rem; border-top: 1px solid var(--rule); background: var(--paper);
  }
  .booking-summary { margin: 0; flex: 1 1 18rem; }
  .booking-footer .detail { margin: 0; flex-basis: 100%; }
  .booking-footer .detail:empty { display: none; }
  .booking-done { display: grid; gap: .25rem; }
  .booking-done p { margin: 0; }
  .booking-done-title { font-family: var(--serif); font-size: 1.3rem; color: var(--seal); }
  .booking-done .form-actions { margin-top: 1rem; }
  .booking-facts { margin: 0 0 .5rem; }
  .booking-confirm { display: inline-flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
  @media (max-width: 48rem) {
    .booking-columns { grid-template-columns: minmax(0, 1fr); }
    .booking-body { padding: 0 1rem 1rem; }
    .booking-footer { padding: .75rem 1rem; }
    .picker-head { padding: 1rem 1rem .5rem; }
  }

  /* appointments on the Request panel and the patient record */
  .request-booked { margin: .9rem 0 0; }
  .request-booked:empty { display: none; }
  .appointment-list { list-style: none; margin: 0; padding: 0; }
  .appointment-list li { border-bottom: 1px solid var(--rule); }
  button.appointment-row {
    width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .25rem 1rem;
    text-align: left; font-weight: 400; background: transparent; color: var(--ink); border: 0; border-radius: 0; padding: .6rem .2rem;
  }
  button.appointment-row:hover { background: var(--surface); }
  .appointment-when { font-weight: 600; font-variant-numeric: tabular-nums; }
  .appointment-who { color: var(--muted); font-size: .9rem; flex: 1 1 12rem; }
  button.link-button {
    display: inline; padding: 0; margin: 0; border: 0; border-radius: 0; background: none;
    font: inherit; font-weight: 600; color: var(--ink); text-align: left; cursor: pointer;
    border-bottom: 1px solid var(--rule);
  }
  button.link-button:hover { border-bottom-color: var(--ink); }
  .request-book-row { margin-top: .9rem; }

  /* --- one sign-in per browser (28 Oct 2026) ---
     A staff page whose browser is now signed in as someone else, or signed
     out, stops behind this (staff.js). */
  dialog.session-stopped {
    width: min(32rem, calc(100vw - 2rem)); padding: 1.4rem 1.5rem 1.25rem;
    border: 1px solid var(--rule); border-top: 3px solid var(--live); border-radius: .5rem;
    background: var(--paper); color: var(--ink);
  }
  dialog.session-stopped::backdrop { background: rgb(10 20 24 / .6); }
  dialog.session-stopped h2 { font-family: var(--serif); font-size: 1.25rem; margin: 0 0 .6rem; }
  dialog.session-stopped p { margin: 0 0 .75rem; }
  dialog.session-stopped .form-actions { margin-top: 1rem; }
  .login-current {
    margin: 0 0 1.1rem; padding: .7rem .85rem; border: 1px solid var(--rule);
    border-left: 3px solid var(--focus); border-radius: .3rem; background: var(--surface);
  }
  /* Who signs a note or writes an addendum: the account signed in. */
  .sign-as { margin: 0 0 .25rem; }
  .sign-as strong { color: var(--ink); font-weight: 600; }

  /* --- email sign-in, sign-up and approval (28 Oct 2026) --- */
  .join-steps {
    display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; list-style: none; counter-reset: step;
    margin: 0 0 1.1rem; padding: 0; font-size: .85rem; color: var(--muted);
  }
  .join-steps li { counter-increment: step; }
  .join-steps li::before { content: counter(step) ". "; }
  .join-steps li[data-current="true"] { color: var(--ink); font-weight: 600; }
  .code-actions { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin: .25rem 0 0; }
  .code-actions button.link-button { font-weight: 500; font-size: .9rem; }
  .code-actions button.link-button:disabled { color: var(--muted); border-bottom-color: transparent; cursor: default; }
  #code { letter-spacing: .3em; font-variant-numeric: tabular-nums; font-size: 1.15rem; max-width: 11rem; }
  .login-forgot { margin: .25rem 0 0; }
  .login-forgot a, .login-new a, .join-signin a { color: var(--ink); }
  .join-email { margin: 0 0 .4rem; }
  .join-email .tag { margin-left: .35rem; }
  .join-done { margin-top: .5rem; }
  .join-done h2 { font-family: var(--serif); font-size: 1.2rem; margin: 0 0 .5rem; }
  .approve-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
  .approve-row select { font: inherit; padding: .3rem .4rem; border: 1px solid var(--rule); border-radius: .25rem; background: var(--paper); color: var(--ink); }