/* ---- Transcript / recording ---- */
    #micControlCard { display: flex; flex-direction: column; }
    #micStateRow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    #micStatePill { display: flex; align-items: center; gap: 9px; }
    #micStateDot { width: 8px; height: 8px; border-radius: 50%; animation: rh-pulse 1.6s ease-in-out infinite; }
    #micStateLabel { font-weight: 700; font-size: var(--text-base); }
    #micTimer { font-size: var(--text-md); font-weight: 600; color: var(--ink-2); letter-spacing: 0.02em; }

    #waveform { display: flex; align-items: center; gap: 3px; height: 48px; padding: 0 2px; margin-bottom: 18px; }
    #waveform .bar {
      width: 5px; flex: none; border-radius: var(--radius-sm); transform-origin: center;
      animation: rh-wave 1.1s ease-in-out infinite; animation-play-state: paused; opacity: 0.18; background: var(--ink-2);
    }
    #waveform.waving .bar { animation-play-state: running; }

    #micControlsRow { display: flex; align-items: center; gap: 16px; }
    .mic-btn {
      width: 52px; height: 52px; border-radius: 50%; border: none; background: var(--ink-2); color: var(--cream);
      display: flex; align-items: center; justify-content: center; flex: none; box-shadow: 0 4px 14px rgba(101, 95, 93, 0.18);
    }
    .mic-btn.recording { background: var(--cherry); box-shadow: 0 4px 14px rgba(207, 66, 74, 0.35); }
    .mic-btn.locked { background: var(--garnet); box-shadow: 0 4px 14px rgba(107, 15, 30, 0.3); }
    .mic-btn svg { display: block; }
    .mic-btn .icon-stop { display: none; }
    .mic-btn.recording .icon-mic, .mic-btn.locked .icon-mic { display: none; }
    .mic-btn.recording .icon-stop, .mic-btn.locked .icon-stop { display: block; }
    #micLabel { font-weight: 600; font-size: var(--text-base); margin-bottom: 2px; }
    #micHint { font-size: var(--text-sm); color: var(--ink-2); max-width: 480px; line-height: 1.5; }
    #micUnsupported { font-size: var(--text-sm); color: var(--ink-2); display: none; }

    #transcriptListeningPill {
      display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-xs); color: var(--ink-2);
      background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: 3px 9px 3px 7px;
      margin-left: 8px; visibility: hidden;
    }
    #transcriptListeningPill.visible { visibility: visible; }
    #transcriptListeningPill .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cherry); animation: rh-pulse 1.6s ease-in-out infinite; }

    #transcript {
      width: 100%; min-height: 200px; font-family: var(--font-sans); font-size: var(--text-base);
      line-height: 1.65; padding: 12px 14px; box-sizing: border-box; border: 1px solid var(--border-strong);
      border-radius: var(--radius-md); background: var(--field); color: var(--ink); resize: vertical;
    }
    #transcript:focus { outline: 2px solid var(--ruby); outline-offset: 1px; }
    #micInterim { font-style: italic; color: var(--ink-2); min-height: 1.2em; margin-top: 6px; font-size: var(--text-sm); }

    .summary-callout { background: rgba(255, 184, 200, 0.32); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: 16px; }
    .summary-callout-head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
    .summary-callout-head .label { font-weight: 700; font-size: var(--text-sm); color: var(--plum); }
    .summary-callout-head .badge {
      font-size: var(--text-xs); font-weight: 600; color: var(--ink-2); background: var(--card);
      border: 1px solid var(--border-soft); border-radius: var(--radius-pill); padding: 2px 8px;
    }
    .summary-callout-text { font-size: var(--text-base); line-height: 1.6; color: var(--ink-2); }

    @keyframes rh-wave { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
    @keyframes rh-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

    /* ---- Facts: chips & quotes ---- */
    .section-body + .section-body { margin-top: 20px; }
    .chip-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .chip {
      display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-sm); font-weight: 500;
      padding: 6px 8px 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
    }
    .chip.diagnosis { border-color: rgba(255, 184, 200, 0.7); background: rgba(255, 184, 200, 0.32); color: var(--plum); }
    .chip-remove {
      width: 16px; height: 16px; border-radius: 50%; border: none; background: none; color: inherit; opacity: 0.6;
      display: flex; align-items: center; justify-content: center; padding: 0; flex: none;
    }
    .chip-remove:hover { opacity: 1; }
    .chip-input {
      border: 1px dashed var(--border); border-radius: var(--radius-pill); padding: 6px 12px; font-size: var(--text-sm); background: transparent;
      color: var(--ink); min-width: 160px; flex: 1;
    }
    .chip-input:focus { border-color: var(--ruby); }
    .chief-complaint-row { display: flex; align-items: center; gap: 12px; }
    #chiefComplaintInput {
      flex: 1; font-family: var(--font-sans); font-size: var(--text-lg); font-weight: 600; color: var(--ink);
      border: none; border-bottom: 1px solid transparent; background: transparent; padding: 2px 0;
    }
    #chiefComplaintInput:focus { border-bottom-color: var(--ruby); }

    .quote-list { display: flex; flex-direction: column; gap: 8px; }
    .quote-card { display: flex; gap: 10px; padding: 10px 14px; background: var(--surface); border-radius: var(--radius-md); align-items: flex-start; }
    .quote-card svg { flex: none; margin-top: 3px; color: var(--ink-2); }
    .quote-card textarea {
      flex: 1; border: none; background: transparent; font-size: var(--text-sm); font-style: italic; color: var(--ink-2);
      line-height: 1.55; resize: none; overflow: hidden; padding: 0; min-height: 1.6em; width: 100%;
    }
    .quote-card textarea:focus:not(:focus-visible) { outline: none; }
    .quote-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
    .quote-flag {
      align-self: flex-start; font-size: var(--text-xs); letter-spacing: 0.07em; text-transform: uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      padding: 2px 7px; border-radius: var(--radius-sm); border: 1px solid transparent; white-space: nowrap;
    }
    .quote-flag.verified { color: var(--ink-2); border-color: var(--border-soft); background: transparent; }
    .quote-flag.paraphrased { color: var(--gold-text); border-color: var(--gold); background: rgba(184, 150, 90, 0.09); }
    .quote-flag.unsupported { color: var(--garnet); border-color: var(--accent); background: rgba(219, 42, 51, 0.07); }
    .quote-flag.unchecked { color: var(--ink-3); border-color: var(--border-soft); background: transparent; }

    .claim-warnings { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
    .claim-warning .btn { margin-left: auto; flex: none; }
    .claim-insurance-editor:not(:empty) { margin: 10px 0 4px; }
    /* Payer-rule questions sit under the scrub findings, inside the same slot. */
    [data-provider-questions] { margin-top: 22px; }
    [data-provider-questions] .field-grid { grid-template-columns: 1fr; }
    [data-provider-questions] .submit-actions { display: flex; gap: 8px; flex-wrap: wrap; }
    .claim-warning {
      display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; border-radius: var(--radius-md);
      border: 1px solid var(--accent); background: rgba(219, 42, 51, 0.06); font-size: var(--text-sm); color: var(--ink);
      line-height: 1.5;
    }
    .claim-warning .w-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--text-xs); letter-spacing: 0.07em;
      color: var(--garnet); flex: none; padding-top: 2px;
    }
    /* A review item, not a blocker: quieter so the blockers stay the loud thing. */
    .claim-warning.check { border-color: var(--border-soft); background: transparent; }
    .claim-warning.check .w-code { color: var(--ink-3); }
    .quote-add-row { display: flex; gap: 10px; align-items: center; }
    .quote-add-row .chip-input { border-radius: var(--radius-md); }

    /* ---- Codes: insight cards ---- */
    .code-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 16px 20px; margin-bottom: 12px; }
    .code-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
    .code-card-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
    .code-badge-select {
      font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm);
      padding: 5px 8px; border-radius: var(--radius-sm); border: none; appearance: none; cursor: pointer; flex: none;
    }
    .code-badge-select.icd10 { background: rgba(255, 184, 200, 0.4); color: var(--plum); }
    .code-badge-select.cpt { background: rgba(184, 150, 90, 0.2); color: var(--ink); }
    .code-validation {
      font-size: var(--text-xs); letter-spacing: 0.07em; text-transform: uppercase;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      padding: 2px 7px; border-radius: var(--radius-sm); border: 1px solid transparent; white-space: nowrap;
    }
    .code-validation.unrecognised { color: var(--garnet); border-color: var(--accent); background: rgba(219, 42, 51, 0.07); }
    .code-validation.known { color: var(--ink-3); border-color: var(--border-soft); }
    .code-validation.invalid { color: var(--garnet); border-color: var(--garnet); background: rgba(107, 15, 30, 0.08); }
    .code-input { font-family: var(--font-mono); font-weight: 600; font-size: var(--text-sm); border: none; background: transparent; color: inherit; width: 72px; }
    .code-input:focus:not(:focus-visible) { outline: none; }
    .code-card-actions { display: flex; align-items: center; gap: 8px; flex: none; }
    .desc-row { margin-top: 8px; }
    .desc-input {
      font-family: var(--font-sans); font-weight: 600; font-size: var(--text-base); color: var(--ink);
      border: none; background: transparent; width: 100%; padding: 2px 0; resize: none; overflow: hidden;
      line-height: 1.4; display: block;
      /* autoGrow measures 0 when codes are drawn on a hidden tab -- the usual
         case, since they fill while the provider is on Facts. */
      min-height: calc(1.4em + 4px);
    }
    .desc-input:focus:not(:focus-visible) { outline: none; }
    /* Read-only: confidence is computed from checks, not chosen. */
    .confidence-select {
      font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); border: none; background: transparent;
      padding-left: 14px; background-repeat: no-repeat; background-position: left center; background-size: 8px 8px;
      cursor: help; white-space: nowrap;
    }
    .confidence-select.high { background-image: radial-gradient(circle, var(--gold) 3.5px, transparent 3.6px); }
    .confidence-select.medium { background-image: radial-gradient(circle, transparent 2px, var(--gold) 2px, var(--gold) 3.5px, transparent 3.6px); }
    .confidence-select.low { color: var(--garnet); background-image: radial-gradient(circle, transparent 2.5px, var(--garnet) 2.5px, var(--garnet) 3.5px, transparent 3.6px); }
    .confidence-select.unset { background-image: radial-gradient(circle, transparent 2.5px, var(--border) 2.5px, var(--border) 3.5px, transparent 3.6px); }
    .rationale-row { display: flex; gap: 8px; margin-top: 10px; padding: 9px 12px; background: var(--surface); border-radius: var(--radius-md); align-items: flex-start; }
    .rationale-row svg { flex: none; margin-top: 2px; color: var(--ink-2); }
    .rationale-input {
      flex: 1; border: none; background: transparent; font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5;
      resize: none; overflow: hidden; min-height: 1.5em; padding: 0; width: 100%;
    }
    .rationale-input:focus:not(:focus-visible) { outline: none; }
    #codesDivider { height: 1px; background: var(--gold); opacity: 0.35; margin: 20px 0; }

    /* ---- Claim tab ---- */
    fieldset.rh-fieldset {
      margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px 18px;
      background: var(--card); box-shadow: var(--shadow-card);
    }
    fieldset.rh-fieldset legend { font-family: var(--font-sans); font-weight: 700; font-size: var(--text-sm); color: var(--plum); padding: 0 6px; }
    .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-top: 4px; }
    .field-grid label { display: flex; flex-direction: column; font-size: var(--text-xs); color: var(--ink-2); gap: 5px; font-weight: 600; }
    .field-grid input, .field-grid textarea, .field-grid select {
      font-size: var(--text-base); padding: 7px 9px; box-sizing: border-box; border: 1px solid var(--border-strong);
      border-radius: var(--radius-md); background: var(--field); color: var(--ink);
    }
    .field-grid input:disabled, .field-grid textarea:disabled, .field-grid select:disabled { color: var(--ink-2); background: var(--border-soft); }

    /* NPI and tax ID are masked until asked for -- they identify the provider,
       and this app is demoed on a shared screen. type="password" rather than a
       CSS text-security rule so a browser that does not support the rule fails
       closed (masked) instead of open (readable). */
    .masked-field { display: flex; gap: 6px; align-items: center; }
    .masked-field input { flex: 1; min-width: 0; }
    .masked-toggle {
      flex: none; font-size: var(--text-xs); font-weight: 600; padding: 6px 9px; border-radius: var(--radius-sm);
      border: 1px solid var(--border); background: var(--field); color: var(--ink-2);
    }
    .masked-toggle:hover { background: var(--border-soft); color: var(--ink); }
    table.rh-table { border-collapse: collapse; width: 100%; margin-top: 8px; }
    table.rh-table th, table.rh-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
    table.rh-table th { font-size: var(--text-xs); color: var(--ink-2); font-weight: 700; }
    /* Buttons side by side, and a labelled field: the Payments forms used both
       before either was defined, so their buttons touched. */
    .drop-zone { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-5); margin-bottom: var(--space-4); border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--field); font-size: var(--text-sm); color: var(--ink-2); }
    .row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }
    .stacked-label { display: flex; flex-direction: column; gap: 5px; font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
    input[type="range"] { accent-color: var(--ruby); }
    .multiplier-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--ink-2); }
    .multiplier-row input[type="range"] { flex: 1; min-width: 120px; }
    .multiplier-row .field-hint { font-size: var(--text-lg); font-variant-numeric: tabular-nums; color: var(--ink); }
    .row-input { width: 100%; box-sizing: border-box; font-size: var(--text-sm); padding: 5px 7px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--field); color: var(--ink); }
    .charge-cell { display: flex; flex-direction: column; gap: 2px; }
    .charge-hint { font-size: var(--text-xs); color: var(--ink-2); }
    .charge-hint.charge-hint-needed { color: var(--gold-text); }
    .remove-row { padding: 4px 9px; font-size: var(--text-xs); }
    .add-row { padding: 6px 12px; margin-top: 10px; font-size: var(--text-sm); }

    .step-nav { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
    .step-nav-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
    .step-nav .status { text-align: right; }
    #reviewActions { margin-top: 16px; }
    #reviewedBadge {
      display: none; margin-top: 12px; padding: 9px 14px; background: rgba(184, 150, 90, 0.2); color: var(--plum);
      border: 1px solid var(--gold); border-radius: var(--radius-md); font-size: var(--text-sm); font-weight: 600;
    }
    #stediSubmitRow { display: none; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-soft); }
    #stediSubmitRow .stedi-note { font-size: var(--text-sm); color: var(--ink-2); margin-bottom: 10px; }
    .stedi-result {
      margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-md); font-size: var(--text-sm);
    }
    .stedi-result.accepted {
      background: rgba(184, 150, 90, 0.2); color: var(--plum); border: 1px solid var(--gold);
    }
    .stedi-result.denied {
      background: rgba(107, 15, 30, 0.08); color: var(--garnet); border: 1px solid var(--garnet);
    }
    .stedi-result .stedi-result-title { font-weight: 700; margin-bottom: 4px; }
    .stedi-result pre {
      margin-top: 8px; padding: 8px 10px; background: rgba(37, 28, 27, 0.05); border-radius: var(--radius-sm);
      font-size: var(--text-xs); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto;
    }
  

    /* ---- Visit page: the pinned header and the step tabs ----
       The patient is the page's title, and stays pinned with their visit date,
       payer and how far the claim has got. The four steps run across it as
       underlined tabs (the active one is plum with a ruby underline, so the
       one ruby fill on the page is the step's main button). */
    #railMark { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; flex: none; }
    #railMark svg { display: block; }
    #visitHeader {
      position: sticky; top: 0; z-index: 5; background: var(--surface);
      margin: -32px -44px 20px; padding: 24px 44px 0; border-bottom: 1px solid var(--border-soft);
    }
    .visit-head-top { display: flex; justify-content: flex-start; align-items: flex-start; gap: 56px; flex-wrap: wrap; }
    .visit-head-who { min-width: 0; }
    /* On the tab row, where the right-hand side is empty, so it takes no row of its own. */
    .visit-discard { position: absolute; right: 44px; bottom: 6px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
    .visit-discard .discard-ask { font-size: var(--text-sm); color: var(--ink-2); }
    #visitHeader .page-title { margin: 0; }
    .visit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; color: var(--ink-2); }
    #visitTrackerSlot .visit-tracker { min-width: 360px; }
    #visitHeader #patientCaseBar { margin: 8px 0 0; padding: 0; border: none; background: none; display: flex; gap: 8px; align-items: center; }
    #visitHeader #patientCaseLabel { display: none; }
    #visitHeader #patientCaseBar .btn { padding: 4px 10px; font-size: var(--text-sm); font-weight: 500; color: var(--ink-2); }
    /* A visit a payer has seen or rejected is no longer run through the pipeline:
       the steps show what was stored, and the Claim step carries the claims and
       the payer's response. */
    #appShell.visit-record .visit-discard, #appShell.visit-record .step-nav, #appShell.visit-record #reviewActions, #appShell.visit-record #openIntakeBtn { display: none !important; }
    /* The payer's answer is what a sent visit is about, so it leads the Claim step;
       the claim as sent follows it. */
    #appShell.visit-record #panelClaim.active { display: flex; flex-direction: column; }
    #appShell.visit-record #visitClaimsSection { order: -1; margin: 0 0 18px; }
    .visit-save { font-size: var(--text-sm); color: var(--ink-2); }
    #visitHeader #patientCaseBar { flex-wrap: wrap; }
    .visit-steps { display: flex; flex-direction: row; gap: 2px; margin-top: 14px; }
    .visit-steps .nav-item {
      width: auto; flex: none; border-radius: 0; background: none; padding: 10px 16px 11px;
      border-bottom: 3px solid transparent; color: var(--ink-2); white-space: nowrap;
    }
    .visit-steps .nav-item svg { display: none; }
    .visit-steps .nav-item:hover { background: var(--border-soft); }
    .visit-steps .nav-item.active, .visit-steps .nav-item.active:hover { background: none; color: var(--plum); border-bottom-color: var(--ruby); }
    .visit-steps .nav-item .nav-dot { width: 9px; height: 9px; order: -1; }
    .visit-steps .nav-item.has-data .nav-dot { background: var(--plum); border-color: var(--plum); }
    .visit-steps .nav-item.active.has-data .nav-dot { background: var(--plum); border-color: var(--plum); }


    /* The record's steps look like the Visit page's: numbered, underlined, the
       active one plum with a ruby underline. Same four steps, same place. */


    #historyEncounterView .record-header {
      position: sticky; top: 0; z-index: 5; background: var(--surface);
      margin: 0 -44px 16px; padding: 12px 44px 0; border-bottom: 1px solid var(--border-soft);
    }
    #historyEncounterView .record-header .page-title { margin: 0; }
    #historyEncounterView .record-header .tabs { margin-bottom: 0; border-bottom: none; }
    .record-header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; }
    .record-header-top .visit-tracker { min-width: 360px; }

    /* ---- Narrow windows (half a laptop screen and down) ----
       The rail stays: it is how you move between routes. The sidebar, which
       is a 240px column at full width, becomes a strip across the top of the
       content, so the content gets the width instead of a sliver. The grid
       puts the rail in its own column and stacks whatever follows it. */
    @media (max-width: 900px) {
      #appRoot { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; }
      #appRail { grid-column: 1; grid-row: 1 / span 20; width: 64px; }
      #appRoot > :not(#appRail) { grid-column: 2; }
      #sidebar {
        width: auto; height: auto; position: static; flex-direction: row; align-items: center; gap: 12px;
        padding: 8px 12px; border-right: none; border-bottom: 1px solid var(--border); overflow-x: auto;
      }
      #logoRow { padding: 0; flex: none; }
      #logoRow .wordmark { display: none; }
      #navList, .nav-group { flex-direction: row; gap: 4px; }
      .nav-item { width: auto; white-space: nowrap; flex: none; }
      #visitHeader { margin: -20px -16px 16px; padding: 16px 16px 0; }
      #historyEncounterView .record-header { margin: 0 -16px 16px; padding: 12px 16px 0; }
      .record-header-top .visit-tracker { min-width: 0; width: 100%; }
      #visitTrackerSlot .visit-tracker { min-width: 0; width: 100%; }
      .visit-steps { overflow-x: auto; }
      /* Pinned to the bottom right of the header, which on a wide screen is
         past the end of the steps and on a phone is on top of them -- it was
         covering Facts and Codes. Back into the flow, on its own line: a
         control that throws the visit away should not be sitting over the
         navigation in the first place. */
      .visit-discard { position: static; justify-content: flex-end; margin: 10px 0 0; }
      #main, #historyView, #patientsView, #recordView, #providerView, #libraryView, #billingView { padding: 20px 16px; max-width: none; }
    }
    @media (max-width: 640px) {
      /* Two columns of labelled fields do not fit a phone: the inputs cannot
         shrink past their own minimum, so the claim form ends up about twice
         the width of the screen and the whole page scrolls sideways. */
      .field-grid { grid-template-columns: 1fr; }
      /* A grid item will not shrink below its content by default, and an input
         counts its own default size as content -- so a one-column grid still
         came out wider than the column it was in. */
      .field-grid > * { min-width: 0; }
      /* A code's heading row -- the code, its confidence and its controls --
         is wider than a phone in one line, and nowrap printed them on top of
         each other rather than wrapping. */
      .code-card-top { flex-wrap: wrap; }
      /* Four numbered steps do not fit across a phone. Scrolling the strip
         keeps every step reachable; letting it push the page sideways would
         hide the last two behind the edge with no way to get to them. */
      .visit-steps { overflow-x: auto; }
      /* Pinned to the bottom right of the header, which on a wide screen is
         past the end of the steps and on a phone is on top of them -- it was
         covering Facts and Codes. Back into the flow, on its own line: a
         control that throws the visit away should not be sitting over the
         navigation in the first place. */
      .visit-discard { position: static; justify-content: flex-end; margin: 10px 0 0; }
      /* A fixed row of bars, decorative: clipped rather than widening the page. */
      #waveform { overflow: hidden; }
      /* A table cannot reflow the way a grid can -- a service line's columns
         have a width below which they stop being readable -- so the table
         scrolls inside itself rather than taking the page sideways with it.
         The fieldset has to be allowed to shrink first: a fieldset's default
         min-width is min-content, which is the browser's own rule and not one
         of ours, and it was holding the claim form open at the full width of
         the table inside it however the table behaved. */
      fieldset.rh-fieldset { min-width: 0; }
      table.rh-table { display: block; overflow-x: auto; }
    }
    @media (max-width: 520px) {
      #appRoot { grid-template-columns: 52px minmax(0, 1fr); }
      #appRail { width: 52px; }
      .rail-item { width: 46px; }
    }

    /* First-run tour (tour.js): a card beside the rail item it describes,
       and that item ringed in cream so it reads on the plum rail. */
    #tour { position: fixed; inset: 0; z-index: 900; pointer-events: none; }
    #tour .tour-bubble {
      position: absolute; width: 320px; max-width: calc(100vw - 32px);
      pointer-events: auto; box-shadow: var(--shadow-card);
    }
    #tour .tour-count { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--ink-3); }
    #tour .tour-body { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); color: var(--ink-2); line-height: 1.5; }
    #tour .tour-actions { display: flex; align-items: center; gap: var(--space-2); }
    #tour .tour-spacer { flex: 1; }
    .rail-item.tour-target { outline: 2px solid var(--cream); outline-offset: 2px; border-radius: var(--radius-md); }
    /* Next pulses: the tour only moves when it is pressed. */
    #tour [data-tour-next] { animation: tour-pulse 1.6s ease-out infinite; }
    @keyframes tour-pulse {
      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ruby) 55%, transparent); }
      70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--ruby) 0%, transparent); }
      100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ruby) 0%, transparent); }
    }
    @media (prefers-reduced-motion: reduce) {
      #tour [data-tour-next] { animation: none; }
    }