/* =====================================================================
   Clark design system: shared components ("Instrument", NHS blue)
   Adapted from Clare's static/css/design-system.css and its handoff spec,
   "Shared components (spec)".

   Linked LAST on every user page (after page CSS and inline <style>), so
   ties go to the components. Screens adopting a component delete or rename
   the legacy rule it replaces rather than fighting it with !important.

   Tokens only (static/css/theme.css), never colour literals or the
   transitional aliases. Square (radius 0; buttons --radius-1, 2px), flat
   (hairline --border dividers; only dialogs carry --shadow-modal).
   --accent is a fill (text on it: --accent-ink); --accent-fg is blue text,
   edges and focus rings. Markup is sentence case; mono labels are
   uppercased here.

   State: prefer the native or ARIA state on the control (:checked,
   :disabled, aria-pressed, aria-selected, aria-invalid, aria-current);
   .is-selected / .is-active / .is-error / .is-on for hosts without one.

   Tones: a component sets --c-tone; its parts read it.

   Specificity: clark-shared.css styles bare input[type=…], textarea, a and
   a:hover, and theme.css restyles [data-theme="dark"] input[type=…] (0,2,1)
   and its :focus (0,3,1). Field and search inputs are written
   ":root input.c-…" to tie those, and linked components reset
   text-decoration, so these rules win on source order.

   Guarded by tests/unit/test_design_system_css.py.
   ===================================================================== */

/* ----- Typography helpers ----- */
.c-title {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 48px;
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}
.c-h1 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 30px;
    line-height: 1.2;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.c-h2 {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.c-lead {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 18px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* ----- Label: .c-label (mono uppercase), --sm, .c-eyebrow ----- */
.c-label {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.c-label--sm { font-size: 11px; }
.c-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent-fg);
}

/* ----- Button: .c-btn (+ size and variant modifiers) ----- */
.c-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 10px 16px;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid var(--border);
    border-radius: var(--radius-1);
    background: var(--surface-card);
    color: var(--text-primary);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: filter var(--dur-fast) var(--ease-standard);
}
.c-btn--sm { padding: 7px 12px; font-size: 11px; }
.c-btn--md { padding: 10px 16px; font-size: 13px; }
.c-btn--lg { padding: 14px 20px; font-size: 13px; }

.c-btn--primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.c-btn--secondary {
    background: var(--surface-card);
    border-color: var(--border-strong);
    color: var(--text-primary);
}
.c-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--text-primary);
}
/* Text on the danger fill: the card colour (white on the light red, near
   black on the dark theme's pale red). */
.c-btn--danger {
    background: var(--status-danger);
    border-color: var(--status-danger);
    color: var(--surface-card);
}
.c-btn--danger-outline {
    background: transparent;
    border-color: var(--status-danger);
    color: var(--status-danger);
}
.c-btn--inverse {
    background: var(--surface-inverse);
    border-color: var(--surface-inverse);
    color: var(--text-inverse);
}
.c-btn:hover { text-decoration: none; }
.c-btn:hover:not(:disabled):not([aria-disabled="true"]) { filter: brightness(1.1); }
/* Brightness does nothing on a white or card fill: the default and secondary
   buttons show hover as a sunken fill instead. */
.c-btn:not(.c-btn--primary, .c-btn--danger, .c-btn--danger-outline, .c-btn--inverse, .c-btn--ghost):hover:not(:disabled):not([aria-disabled="true"]) {
    filter: none;
    background: var(--surface-sunken);
}
/* Light theme only: brightening the light danger red drops its white text
   below 4.5:1, so it darkens. The dark theme's pale red with near-black text
   keeps brightness(1.1), which raises the contrast. */
:root:not([data-theme="dark"]) .c-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) {
    filter: brightness(.9);
}
.c-btn--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
    filter: none;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.c-btn:disabled,
.c-btn[aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
    filter: none;
    text-decoration: none;
}
.c-btn:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
}

/* ----- Field: .c-field > .c-field__label + .c-field__input + .c-field__msg
   .c-field__input works on <input>, <select> and <textarea>. ----- */
.c-field {
    --c-tone: initial;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.c-field__label {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--c-tone, var(--text-muted));
}
:root input.c-field__input,
:root select.c-field__input,
:root textarea.c-field__input {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 11px 12px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
    background: var(--surface-page);
    border: 1px solid var(--c-tone, var(--border));
    border-radius: 0;
    box-shadow: none;
    outline: none;
    transition: border-color var(--dur-fast) var(--ease-standard);
}
textarea.c-field__input { resize: vertical; min-height: 96px; }
/* Square select; the chevron is two gradients in the muted ink. */
:root select.c-field__input {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 36px;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
        linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 19px) 50%, calc(100% - 14px) 50%;
    background-size: 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.c-field__input::placeholder { color: var(--text-muted); opacity: 1; }
:root input.c-field__input:focus,
:root select.c-field__input:focus,
:root textarea.c-field__input:focus {
    background-color: var(--surface-page);
    border-color: var(--c-tone, var(--accent-fg));
    border-radius: 0;
    box-shadow: none;
    transition: border-color var(--dur-fast) var(--ease-standard);
}
:root input.c-field__input:focus-visible,
:root select.c-field__input:focus-visible,
:root textarea.c-field__input:focus-visible {
    outline: 1px solid var(--c-tone, var(--accent-fg));
    outline-offset: -2px;
}
.c-field__input:disabled { opacity: .4; cursor: not-allowed; }
.c-field__msg {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.4;
    color: var(--c-tone, var(--text-muted));
}
.c-field.is-error,
.c-field:has([aria-invalid="true"]) { --c-tone: var(--status-danger); }

/* ----- Search: .c-search > .c-search__input (+ optional .c-search__button) */
.c-search {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    min-width: 0;
    background: var(--surface-page);
    border: 1px solid var(--border);
    border-radius: 0;
    transition: border-color var(--dur-fast) var(--ease-standard);
}
.c-search:focus-within { border-color: var(--accent-fg); }
:root input.c-search__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 11px 12px;
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    transition: none;
}
:root input.c-search__input:focus {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    outline: none;
}
.c-search__input::placeholder { color: var(--text-muted); opacity: 1; }
.c-search__button {
    flex: none;
    margin: 0;
    padding: 0 16px;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    cursor: pointer;
}
.c-search__button:hover { color: var(--text-primary); }
.c-search__button:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: -2px;
}

/* ----- Segmented control: .c-seg > .c-seg__option ----- */
.c-seg {
    display: inline-flex;
    flex: none;
    border: 1px solid var(--border);
    border-radius: 0;
}
.c-seg__option {
    position: relative;
    margin: 0;
    padding: 7px 12px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.c-seg__option + .c-seg__option { border-left: 1px solid var(--border); }
.c-seg__option:hover { color: var(--text-primary); }
.c-seg__option.is-selected,
.c-seg__option[aria-pressed="true"],
.c-seg__option[aria-checked="true"] {
    background: var(--text-primary);
    color: var(--surface-page);
}
.c-seg__option:focus-visible {
    z-index: 1;
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
}

/* ----- Toggle: .c-toggle (a real <input type="checkbox" role="switch">)
   <label class="c-toggle"><input class="c-toggle__input" type="checkbox" role="switch">
     <span class="c-toggle__track" aria-hidden="true"></span> Label</label>
   The off track's edge is --text-muted so the boundary reaches 3:1. ----- */
.c-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}
.c-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.c-toggle__track {
    box-sizing: border-box;
    flex: none;
    display: flex;
    justify-content: flex-start;
    width: 44px;
    height: 24px;
    padding: 2px;
    background: var(--surface-sunken);
    border: 1px solid var(--text-muted);
    border-radius: 0;
    transition: background var(--dur-fast) var(--ease-standard);
}
.c-toggle__track::after {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: var(--text-muted);
}
.c-toggle__input:checked + .c-toggle__track {
    justify-content: flex-end;
    background: var(--accent);
    border-color: var(--accent);
}
.c-toggle__input:checked + .c-toggle__track::after { background: var(--accent-ink); }
.c-toggle__input:focus-visible + .c-toggle__track {
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
}
.c-toggle__input:disabled + .c-toggle__track { opacity: .4; }
.c-toggle:has(.c-toggle__input:disabled) { cursor: not-allowed; }

/* ----- Checkbox: .c-check on the <input type="checkbox"> itself ----- */
.c-check {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: none;
    display: inline-grid;
    place-content: center;
    width: 16px;
    height: 16px;
    margin: 0;
    background: var(--surface-card);
    border: 1px solid var(--text-muted);
    border-radius: 0;
    cursor: pointer;
}
.c-check:checked {
    background: var(--accent);
    border-color: var(--accent);
}
.c-check:checked::after {
    content: "\2713";
    font-family: var(--font-sans);
    font-size: 11px;
    line-height: 1;
    color: var(--accent-ink);
}
.c-check:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
}
.c-check:disabled { opacity: .4; cursor: not-allowed; }

/* ----- Chip: .c-chip (+ .is-selected, tone modifiers) ----- */
.c-chip {
    --c-tone: var(--text-muted);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 3px 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
    color: var(--c-tone);
    border: 1px solid var(--border);
    border-radius: 0;
}
button.c-chip { cursor: pointer; }
.c-chip:hover { text-decoration: none; }
.c-chip--danger { --c-tone: var(--status-danger); border-color: var(--status-danger); }
.c-chip--caution { --c-tone: var(--status-caution); border-color: var(--status-caution); }
.c-chip--ok { --c-tone: var(--status-ok); border-color: var(--status-ok); }
.c-chip.is-selected,
.c-chip[aria-pressed="true"],
.c-chip[aria-checked="true"] {
    background: var(--accent-tint);
    border-color: var(--accent-fg);
    color: var(--accent-fg);
}
.c-chip:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
}

/* ----- State panel: .c-panel (errors, empty states, notices) -----
   <div class="c-panel c-panel--danger"><span class="c-label">Error</span>
     <h2 class="c-panel__title">…</h2><p class="c-panel__text">…</p>
     <div class="c-panel__actions">…</div></div> */
.c-panel {
    --c-tone: var(--text-muted);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 820px;
    padding: 22px 24px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-top: 3px solid var(--c-tone);
    border-radius: 0;
}
.c-panel--danger { --c-tone: var(--status-danger); }
.c-panel--caution { --c-tone: var(--status-caution); }
.c-panel--ok { --c-tone: var(--status-ok); }
.c-panel--accent { --c-tone: var(--accent-fg); }
.c-panel--neutral { --c-tone: var(--text-muted); }
.c-panel > .c-label:first-child { color: var(--c-tone); }
.c-panel__title {
    margin: 0;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}
.c-panel__text {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-muted);
}
.c-panel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 6px;
}

/* ----- Dialog: .c-scrim > .c-dialog (560; --wide 800 with a 300px
   inverse .c-dialog__aside beside .c-dialog__main) ----- */
.c-scrim {
    box-sizing: border-box;
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--scrim);
}
.c-scrim[hidden] { display: none; }
.c-dialog {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 90vh;
    overflow: hidden;
    background: var(--surface-card);
    color: var(--text-primary);
    border: 1px solid var(--border);
    border-radius: 0;
    box-shadow: var(--shadow-modal);
}
.c-dialog--wide {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    max-width: 800px;
}
.c-dialog--danger { border-top: 3px solid var(--status-danger); }
.c-dialog__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px;
    overflow-y: auto;
    background: var(--surface-inverse);
    color: var(--text-inverse);
}
/* clark-shared.css colours bare <p> and <h1>-<h6> for the page fill, which
   is unreadable on the inverse fill; text here takes the aside's ink. */
.c-dialog__aside :is(p, h1, h2, h3, h4, h5, h6) { color: inherit; }
.c-dialog__aside .c-label { color: var(--text-inverse-muted); }
/* Blue is under 3:1 on the inverse fill; ring in the inverse ink there. */
.c-dialog .c-dialog__aside :focus-visible { outline-color: var(--text-inverse); }
.c-dialog__main {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.c-dialog__header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px 56px 0 32px;
}
.c-dialog__header > .c-eyebrow { margin: 0; }
.c-dialog__title {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 26px;
    line-height: 1.15;
    font-weight: 500;
    letter-spacing: -0.02em;
    color: var(--text-primary);
}
.c-dialog__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 18px 32px;
    font-size: 15px;
    line-height: 1.5;
}
.c-dialog__footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding: 0 32px 32px;
}
.c-dialog__close {
    position: absolute;
    z-index: 1;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 22px;
    line-height: 1;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    border-radius: 0;
    cursor: pointer;
}
.c-dialog__close:hover { color: var(--text-primary); }
.c-dialog__close:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: -2px;
}
@media (max-width: 720px) {
    .c-dialog--wide { display: flex; overflow-y: auto; }
    .c-dialog__aside { padding: 24px; }
}

/* ----- Session notice: .c-dialog.session-timeout (#session-timeout-warning,
   built by session-timeout.js on every page that loads it). Not modal:
   fixed bottom-right, above everything; --caution / --danger tone. ----- */
.c-dialog.session-timeout {
    --c-tone: var(--status-caution);
    position: fixed;
    z-index: var(--z-dialog);
    right: 24px;
    bottom: 48px;
    width: calc(100% - 32px);
    max-width: 440px;
    border-top: 3px solid var(--c-tone);
}
.c-dialog.session-timeout--danger { --c-tone: var(--status-danger); }
.session-timeout .c-dialog__header { padding: 24px 24px 0; }
.session-timeout .c-dialog__title { font-size: 22px; }
.session-timeout .c-dialog__body { padding: 12px 24px 24px; }
.session-timeout .c-dialog__footer { padding: 0 24px 24px; }
.session-timeout__eyebrow { color: var(--c-tone); }
.session-timeout__text {
    margin: 0;
    color: var(--text-muted);
}
.session-timeout .c-dialog__body:has(+ .c-dialog__footer) { padding-bottom: 18px; }
@media (max-width: 720px) {
    .c-dialog.session-timeout { right: 16px; bottom: 16px; }
}

/* ----- Dots: .c-dots > span x3 (working / writing) ----- */
.c-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.c-dots > span {
    display: block;
    width: 6px;
    height: 6px;
    background: currentColor;
    opacity: .25;
    animation: c-pulse 1s var(--ease-standard) infinite;
}
.c-dots > span:nth-child(2) { animation-delay: .15s; }
.c-dots > span:nth-child(3) { animation-delay: .3s; }
@keyframes c-pulse {
    0%, 100% { opacity: .25; }
    50% { opacity: 1; }
}

/* ----- Tabs: .c-tabs > .c-tab ----- */
.c-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid var(--border);
}
.c-tab {
    margin: 0 0 -1px;
    padding: 10px 0;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    background: transparent;
    color: var(--text-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
}
.c-tab:hover { color: var(--text-primary); text-decoration: none; }
.c-tab.is-active,
.c-tab[aria-selected="true"],
.c-tab[aria-current="page"] {
    color: var(--text-primary);
    border-bottom-color: var(--accent-fg);
}
.c-tab:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
}

/* ----- Table: .c-table ----- */
.c-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-primary);
}
.c-table th {
    padding: 10px 12px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-strong);
}
.c-table td {
    padding: 12px;
    vertical-align: top;
    border-bottom: 1px solid var(--border);
}
.c-table tbody tr:hover { background: var(--surface-sunken); }

/* ----- Key-value: .c-kv > (dt, dd) pairs, or .c-kv__key / .c-kv__value ----- */
.c-kv {
    display: grid;
    grid-template-columns: minmax(120px, max-content) minmax(0, 1fr);
    margin: 0;
}
.c-kv > dt,
.c-kv__key {
    padding: 10px 24px 10px 0;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.9;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--border);
}
.c-kv > dd,
.c-kv__value {
    margin: 0;
    padding: 10px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-primary);
    border-top: 1px solid var(--border);
}
.c-kv > :nth-child(-n + 2) { border-top: 0; }

/* ----- Note section: .c-section > .c-label + body ----- */
.c-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-primary);
    border-top: 1px solid var(--border);
}
.c-section:first-child { border-top: 0; }
.c-section > .c-label { font-size: 11px; }

/* ----- VU meter: .c-vu > span bars (.is-on lit) ----- */
.c-vu {
    display: inline-flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
}
.c-vu > span {
    display: block;
    width: 5px;
    height: 100%;
    background: var(--border);
    transition: background var(--dur-fast) var(--ease-standard);
}
.c-vu > span.is-on { background: var(--accent-fg); }

/* ----- Transcript turn: .c-turn > .c-turn__speaker + .c-turn__text ----- */
.c-turn {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 16px;
    padding: 12px 0;
    border-top: 1px solid var(--border);
}
.c-turn__speaker {
    padding-top: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.c-turn--patient .c-turn__speaker { color: var(--accent-fg); }
.c-turn__text {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-primary);
}

/* ----- App shell ----- */
.c-appbar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    height: var(--appbar-height);
    padding: 0 20px;
    background: var(--surface-card);
    border-bottom: 1px solid var(--border);
}
.c-sidebar {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: none;
    width: var(--sidebar-width);
    min-height: 0;
    overflow-y: auto;
    background: var(--surface-sunken);
    border-right: 1px solid var(--border);
}
.c-nav,
.c-history {
    box-sizing: border-box;
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 18px;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    text-decoration: none;
    color: var(--text-primary);
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background var(--dur-fast) var(--ease-standard);
}
.c-history {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 8px;
}
.c-nav:hover,
.c-history:hover {
    background: var(--surface-card);
    text-decoration: none;
}
.c-nav.is-active,
.c-nav[aria-current="page"],
.c-history.is-active,
.c-history[aria-current="page"] {
    background: var(--surface-card);
    border-left-color: var(--accent-fg);
    font-weight: 500;
}
.c-nav:focus-visible,
.c-history:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: -2px;
}
.c-history__time {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.9;
    color: var(--text-muted);
}
.c-main {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 24px;
    min-width: 0;
    padding: 36px 48px 48px;
}
.c-rail {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: none;
    width: var(--rail-width);
    min-height: 0;
    overflow-y: auto;
    border-left: 1px solid var(--border);
}
.c-statusbar {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    /* Grows by the home-indicator inset on phones; contents keep 32px */
    height: calc(var(--statusbar-height) + env(safe-area-inset-bottom, 0px));
    padding: 0 20px env(safe-area-inset-bottom, 0px);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--surface-card);
    border-top: 1px solid var(--border);
}
@media (max-width: 720px) {
    .c-main { padding: 24px 16px 32px; }
    .c-appbar { padding: 0 16px; }
    .c-statusbar { padding: 0 16px env(safe-area-inset-bottom, 0px); }
}

/* ----- Workbench shell layout (templates/partials/app_shell.html) -----
   Used by the capture page (index.html) and the archive pages. App bar,
   then a row of sidebar | main column (| guidance rail on the capture
   page). The shell is the viewport's height; the main column scrolls. The
   capture controls, Today list and status bar are in clark-main.css. */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
}
.app-body {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}
.app-body > .c-main { overflow-y: auto; }

/* App bar: never squeezed by a tall main column */
.app-bar.c-appbar { flex: none; }
.app-bar__brand {
    display: inline-flex;
    align-items: center;
    flex: none;
}
.app-bar__brand:hover { text-decoration: none; }
.c-appbar__logo {
    display: block;
    height: 28px;
    width: auto;
}
/* Light/dark wordmark pair: the inline theme script sets data-theme before
   paint, so the right one shows without a flash. */
.c-appbar__logo--dark { display: none; }
[data-theme="dark"] .c-appbar__logo--light { display: none; }
[data-theme="dark"] .c-appbar__logo--dark { display: block; }
.app-bar__product {
    padding-left: 16px;
    border-left: 1px solid var(--border);
    white-space: nowrap;
}
.app-bar__spacer { flex: 1 1 auto; }
/* The signed-in user, as in Clare's app bar */
.app-bar__user {
    min-width: 0;
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--text-muted);
}

/* Sidebar frame: capture block, spacer, the Archive label and nav rows,
   Settings · Sign out. Every row's text starts 20px from the edge, as in
   Clare. */
.app-sidebar__capture {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border-bottom: 1px solid var(--border);
}
.app-sidebar__capture .c-btn { width: 100%; }
/* Section labels (What are you writing?, Today, Archive): text in line with
   the rows' */
.app-sidebar__label {
    display: block;
    padding: 12px 20px 6px;
}
.app-sidebar__spacer { flex: 1 1 auto; }
/* The archive group: its label 20px under the hairline, as the others */
.app-sidebar__nav {
    display: flex;
    flex-direction: column;
    padding: 8px 0 12px;
    border-top: 1px solid var(--border);
}
.app-sidebar__archive {
    display: flex;
    flex-direction: column;
}
/* Nav rows (Clare's .sidebar-nav-row): mono capitals; the current page has
   the card fill and a 2px blue left edge. The legal page's contents keep
   the plain .c-nav look. */
.app-sidebar .c-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 18px;
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.app-sidebar .c-nav:hover { color: var(--text-primary); }
.app-sidebar .c-nav[aria-current="page"] {
    color: var(--text-primary);
    font-weight: 400;
}
.app-sidebar .c-nav:disabled {
    opacity: .4;
    cursor: not-allowed;
    background: transparent;
    color: var(--text-muted);
}
/* A count beside a row (the mobile inbox), as Clare's bookmarks count */
.app-sidebar__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    font-size: 11px;
    letter-spacing: 0;
    background: var(--accent);
    color: var(--accent-ink);
}
.app-sidebar__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 10px;
    padding: 10px 20px 12px;
    border-top: 1px solid var(--border);
}
.app-sidebar__foot-link,
.app-sidebar__foot-sep {
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.app-sidebar__foot-link {
    margin: 0;
    padding: 5px 0;
    background: none;
    border: 0;
    border-radius: 0;
    text-decoration: none;
    cursor: pointer;
}
.app-sidebar__foot-link:hover { color: var(--text-primary); text-decoration: none; }
.app-sidebar__foot-link:disabled { opacity: .4; cursor: not-allowed; }
.app-sidebar__foot-link:focus-visible {
    outline: 2px solid var(--accent-fg);
    outline-offset: 2px;
}
/* Settings is accent while its view is open */
.app-body.settings-open #settingsBtn { color: var(--accent-fg); }

/* Status bar and footer: in the shell's flow, never over content. The
   copyright line and legal links sit on the right (legal_links() in
   partials/app_shell.html); narrower screens drop the copyright line, then
   show one "Legal" link for the four. */
.app-statusbar { flex: none; }
.app-statusbar__spacer { flex: 1 1 auto; }
.app-legal {
    display: flex;
    flex: none;
    align-items: center;
    gap: 20px;
    white-space: nowrap;
}
.app-legal__links {
    display: flex;
    align-items: center;
    gap: 16px;
}
.app-legal a {
    color: var(--text-muted);
    text-decoration: none;
}
.app-legal a:hover { color: var(--text-primary); text-decoration: none; }
@media (min-width: 901px) {
    .app-legal .app-legal__narrow { display: none; }
}
@media (max-width: 1199px) {
    .app-legal__copy { display: none; }
}

/* App bar menu button: only on narrow screens, where the sidebar is a drawer */
.app-bar__menu {
    display: none;
    position: relative;
    font-size: 18px;
    letter-spacing: 0;
}
/* The mobile inbox's count on it (capture page; the row is in the drawer):
   a small accent badge on its corner, out of the flow, so the 44px target
   and the app bar's layout don't change */
.app-bar__menu-count {
    box-sizing: border-box;
    position: absolute;
    top: 4px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    font-size: 10px;
    line-height: 1;
    background: var(--accent);
    color: var(--accent-ink);
    pointer-events: none;
}
.app-bar__menu-count[hidden] { display: none; }
.app-drawer-scrim { display: none; }

/* [narrow-drawer] Narrow screens (Task 16): the sidebar becomes a drawer opened by the app
   bar's menu (static/js/app-drawer.js). It appears without motion under the
   app bar, over a scrim; the main column (and the rail on the capture page)
   fill the width and the whole body scrolls. Closed, the drawer is only
   visibility: hidden, so a child can still show on its own: the capture
   page's Stop button (clark-main.css). */
@media (max-width: 900px) {
    .app-bar__menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: -8px;
    }
    .app-body {
        flex-direction: column;
        overflow-y: auto;
    }
    .app-body > .c-sidebar.app-sidebar {
        position: fixed;
        top: var(--appbar-height);
        left: 0;
        bottom: 0;
        z-index: 10;
        width: min(320px, 85vw);
        visibility: hidden;
        border-right: 1px solid var(--border);
        box-shadow: var(--shadow-modal);
    }
    .app-body > .c-sidebar.app-sidebar.is-open {
        z-index: calc(var(--z-overlay) + 1); /* above its scrim */
        visibility: visible;
    }
    .app-drawer-scrim {
        display: block;
        position: fixed;
        top: var(--appbar-height);
        left: 0;
        right: 0;
        bottom: 0;
        z-index: var(--z-overlay);
        background: var(--scrim);
    }
    .app-drawer-scrim[hidden] { display: none; }
    body.app-drawer-open,
    body.app-drawer-open .app-body { overflow: hidden; }
    .app-body > .c-main { flex: none; overflow: visible; }
    .app-bar__product { display: none; }

    /* 44px touch targets in the app bar and the drawer */
    .app-bar.c-appbar .c-btn { min-height: 44px; min-width: 44px; }
    .app-sidebar .c-btn,
    .app-sidebar .c-nav,
    .app-sidebar .c-history,
    .app-sidebar .mode-option,
    .app-sidebar__options-change,
    .app-sidebar__foot-link { min-height: 44px; }

    .app-legal a { display: inline-flex; align-items: center; min-height: 32px; }
    .app-legal .app-legal__wide { display: none; }
}
@media (max-width: 480px) {
    .app-bar.c-appbar { gap: 2px; padding: 0 12px; }
    .c-appbar__logo { height: 22px; }
    .app-bar.c-appbar .c-btn--sm { padding: 7px 6px; }
    .app-bar__wide { display: none; }
    .app-bar__user { display: none; }
}
/* 16px text in form fields stops iOS zooming in on focus. !important: field
   components (.c-field__input, .c-search, page sheets) set smaller sizes with
   class selectors. */
@media (max-width: 600px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea { font-size: 16px !important; }
}

/* ----- Visually hidden (still read by screen readers): .sr-only ----- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .c-dots > span { animation: none; opacity: .6; }
    .c-btn,
    .c-field__input,
    .c-search,
    .c-toggle__track,
    .c-vu > span,
    .c-nav,
    .c-history { transition: none; }
}