/*
 * Transfer Center — live conversation + Transfer Arc.
 *
 * Loaded only with ENABLE_TC_CLINICAL_CANVAS. The projection remains the
 * source of truth; this file gives it a continuous visual grammar instead of
 * reproducing the legacy form as nested cards.
 */

.tc-clinical-canvas {
    --tc-arc-void: #071014;
    --tc-arc-deep: #0a1519;
    --tc-arc-surface: #0e1b20;
    --tc-arc-surface-soft: #13242a;
    --tc-arc-text: #eef7f4;
    --tc-arc-muted: #98aaa9;
    --tc-arc-faint: #637878;
    --tc-arc-line: rgb(142 176 175 / 22%);
    --tc-arc-line-strong: rgb(174 207 203 / 40%);
    --tc-arc-live: #59e1cf;
    --tc-arc-live-soft: rgb(89 225 207 / 12%);
    --tc-arc-blue: #8ab4ff;
    --tc-arc-blue-soft: rgb(138 180 255 / 12%);
    --tc-arc-critical: #ff7474;
    --tc-arc-critical-soft: rgb(255 116 116 / 12%);
    --tc-arc-warning: #ffc46b;
    --tc-arc-warning-soft: rgb(255 196 107 / 12%);
    --tc-arc-improving: #7ee2a8;
    --tc-arc-improving-soft: rgb(126 226 168 / 12%);
    --tc-arc-shadow: 0 24px 70px rgb(0 0 0 / 32%);
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 51fr) minmax(28rem, 49fr);
    min-width: 0;
    height: min(76vh, 58rem);
    min-height: 40rem;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid var(--tc-arc-line-strong);
    border-radius: 1.4rem;
    color: var(--tc-arc-text);
    background:
        radial-gradient(circle at 82% 0%, rgb(89 225 207 / 9%), transparent 34rem),
        linear-gradient(145deg, var(--tc-arc-deep), var(--tc-arc-void) 64%);
    box-shadow: var(--tc-arc-shadow);
}

.tc-clinical-canvas::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgb(255 255 255 / 2%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 2%) 1px, transparent 1px);
    background-size: 3.25rem 3.25rem;
    mask-image: linear-gradient(to right, transparent 38%, #000 72%);
    content: "";
}

.tc-clinical-canvas__transcript-pane,
.tc-clinical-canvas__story-pane {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 0;
}

.tc-clinical-canvas__transcript-pane {
    border-right: 1px solid var(--tc-arc-line);
    background: rgb(7 16 20 / 62%);
}

.tc-clinical-canvas__story-pane {
    background: linear-gradient(180deg, rgb(14 27 32 / 72%), rgb(7 16 20 / 44%));
}

.tc-clinical-canvas__switcher,
.tc-clinical-now-ribbon {
    display: none;
}

.tc-clinical-canvas-on .tc-recorder > .tc-clinical-canvas {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-top: 0.55rem;
}

/* Compatibility nodes stay mounted for the legacy generator and autosave but
   never compete with the live clinical surface. */
.tc-clinical-canvas-on #tcLiveIntake,
.tc-clinical-canvas-on #tcTranscriptPanel {
    display: none !important;
}

.tc-clinical-canvas-on .tc-recorder--split #tcChartMaterialsField {
    grid-column: 1 / -1;
    grid-row: auto;
    max-height: 15rem;
}

/*
 * During an active call, conversation and the Transfer Arc own the viewport.
 * The hidden fields remain mounted and writable. They return for wrap-up when
 * the call ends.
 */
body.tc-clinical-canvas-on.tc-clinical-live {
    --tc-arc-void: #071014;
    --tc-arc-deep: #0a1519;
    --tc-arc-surface: #0e1b20;
    --tc-arc-surface-soft: #13242a;
    --tc-arc-text: #eef7f4;
    --tc-arc-muted: #98aaa9;
    --tc-arc-faint: #637878;
    --tc-arc-line: rgb(142 176 175 / 22%);
    --tc-arc-line-strong: rgb(174 207 203 / 40%);
    --tc-arc-live: #59e1cf;
    --tc-arc-live-soft: rgb(89 225 207 / 12%);
    --tc-arc-critical: #ff7474;
    grid-template-columns: 0 minmax(0, 1fr);
}

/* Live capture is a focused clinical instrument. Preserve the app identity and
   current module, but contract navigation and setup chrome until the call ends. */
body.tc-clinical-canvas-on.tc-clinical-live .tc-header {
    min-height: 3.25rem;
    padding: 0.45rem 1rem;
    flex-wrap: nowrap;
    gap: 0.8rem;
    border-bottom-color: var(--tc-arc-line-strong) !important;
    background:
        linear-gradient(90deg, rgb(89 225 207 / 5%), transparent 24rem),
        var(--tc-arc-void);
}

body.tc-clinical-canvas-on.tc-clinical-live .tc-header::after {
    right: 4%;
    left: 4%;
    background: linear-gradient(
        90deg,
        transparent,
        rgb(89 225 207 / 45%),
        transparent
    );
}

body.tc-clinical-canvas-on.tc-clinical-live .tc-logo-mark,
body.tc-clinical-canvas-on.tc-clinical-live .tc-logo-accent,
body.tc-clinical-canvas-on.tc-clinical-live .tc-section-prefix {
    color: var(--tc-arc-live);
    text-shadow: 0 0 12px rgb(89 225 207 / 24%);
}

body.tc-clinical-canvas-on.tc-clinical-live .tc-logo-link,
body.tc-clinical-canvas-on.tc-clinical-live .tc-section-link.active {
    color: var(--tc-arc-text) !important;
}

body.tc-clinical-canvas-on.tc-clinical-live .tc-section-switcher {
    gap: 0;
    margin-left: 0.25rem;
}

body.tc-clinical-canvas-on.tc-clinical-live
    .tc-section-link:not(.active),
body.tc-clinical-canvas-on.tc-clinical-live .sn-mode-chip,
body.tc-clinical-canvas-on.tc-clinical-live .tc-header-controls,
body.tc-clinical-canvas-on.tc-clinical-live .tc-quick-start {
    display: none !important;
}

body.tc-clinical-canvas-on.tc-clinical-live .tc-section-link.active {
    padding-block: 0.35rem;
    border-bottom-color: var(--tc-arc-live) !important;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-list-panel,
.tc-clinical-canvas-on.tc-clinical-live .tc-columns,
.tc-clinical-canvas-on.tc-clinical-live .tc-decision-spine,
.tc-clinical-canvas-on.tc-clinical-live .tc-decision-detail,
.tc-clinical-canvas-on.tc-clinical-live .tc-workspace-footer,
.tc-clinical-canvas-on.tc-clinical-live #tcChartMaterialsField {
    display: none !important;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-workspace {
    grid-column: 2;
    padding: 0.55rem 0.75rem 0.75rem;
    overflow: hidden;
    background:
        radial-gradient(circle at 78% 0%, rgb(89 225 207 / 4%), transparent 34rem),
        var(--tc-arc-void);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-workspace-form {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    overflow: hidden;
}

/* Active-call mode has one explicit ownership tree. Legacy form siblings stay
   mounted for state continuity, but none may create implicit grid rows that
   push the patient strip, call rail, or clinical canvas out of the viewport. */
.tc-clinical-canvas-on.tc-clinical-live
    .tc-workspace-form > :not(.tc-topbar):not(.tc-bottom-panel),
.tc-clinical-canvas-on.tc-clinical-live
    .tc-recorder > :not(.tc-recorder-controls):not(.tc-clinical-canvas) {
    display: none !important;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-topbar {
    grid-row: 1;
    min-height: 3.15rem;
    margin-bottom: 0.45rem;
    padding: 0.38rem 0.6rem;
    gap: 0.4rem;
    border: 1px solid var(--tc-arc-line);
    border-radius: 0.75rem;
    background: rgb(14 27 32 / 78%);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 3%);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-topbar::before {
    flex: 0 0 auto;
    color: var(--tc-arc-live);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    content: "Patient";
}

.tc-clinical-canvas-on.tc-clinical-live .tc-topbar .tc-input,
.tc-clinical-canvas-on.tc-clinical-live .tc-topbar .tc-select {
    min-height: 2.25rem;
    margin: 0;
    border-color: transparent;
    color: var(--tc-arc-muted);
    background: transparent;
    box-shadow: none;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-topbar .tc-input:hover,
.tc-clinical-canvas-on.tc-clinical-live .tc-topbar .tc-select:hover {
    border-color: var(--tc-arc-line);
    background: rgb(255 255 255 / 2%);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-topbar .tc-input:focus,
.tc-clinical-canvas-on.tc-clinical-live .tc-topbar .tc-select:focus {
    border-color: var(--tc-arc-live);
    outline: none;
    background: var(--tc-arc-surface-soft);
    box-shadow: 0 0 0 2px rgb(89 225 207 / 12%);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-topbar .tc-topbar-name {
    color: var(--tc-arc-text);
    font-size: 1.08rem;
    font-weight: 650;
}

.tc-topbar-mrn-label {
    display: none;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-topbar-mrn-label {
    display: inline;
    margin-left: 0.25rem;
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.tc-clinical-canvas-on.tc-clinical-live
    .tc-topbar .tc-input::placeholder {
    color: var(--tc-arc-faint);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-bottom-panel {
    grid-row: 2;
    min-height: 0;
    height: 100%;
    margin: 0;
    border: 0;
    overflow: hidden;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-bottom-panel > .tc-section,
.tc-clinical-canvas-on.tc-clinical-live .tc-bottom-panel .tc-section-body {
    min-height: 0;
    height: 100%;
    margin: 0;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-recorder {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
    height: 100%;
    margin: 0;
    padding: 0.65rem;
    overflow: hidden;
    border: 1px solid var(--tc-arc-line-strong);
    border-radius: 1.1rem;
    background:
        radial-gradient(circle at 82% 0%, rgb(89 225 207 / 7%), transparent 30rem),
        linear-gradient(145deg, var(--tc-arc-deep), var(--tc-arc-void) 68%);
    box-shadow:
        0 1.25rem 3rem rgb(0 0 0 / 28%),
        inset 0 1px 0 rgb(255 255 255 / 3%);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-recorder::before {
    background: linear-gradient(
        90deg,
        transparent,
        rgb(89 225 207 / 55%),
        transparent
    );
}

.tc-clinical-canvas-on.tc-clinical-live .tc-recorder-controls {
    z-index: 10;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    min-height: 3.6rem;
    padding: 0.48rem 0.58rem;
    border: 1px solid var(--tc-arc-line-strong);
    border-radius: 0.8rem;
    background:
        linear-gradient(90deg, rgb(89 225 207 / 8%), transparent 42%),
        rgb(14 27 32 / 92%);
    box-shadow:
        0 0.55rem 1.4rem rgb(0 0 0 / 22%),
        inset 0 1px 0 rgb(255 255 255 / 4%);
    isolation: isolate;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-live-control-rail-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    color: var(--tc-arc-live);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.67rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding-right: 0.72rem;
    border-right: 1px solid var(--tc-arc-line);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-live-control-rail-pulse {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--tc-arc-live);
    box-shadow: 0 0 0 0.3rem rgb(89 225 207 / 10%);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-call-setup-control {
    display: none !important;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-call-end-controls {
    margin-left: auto;
    padding-left: 0.58rem;
    border-left: 1px solid var(--tc-arc-line);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-call-end-controls > button {
    min-height: 2.75rem;
    padding-inline: 1rem;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-twilio-status {
    color: var(--tc-arc-muted);
    border-color: var(--tc-arc-line);
    background: rgb(7 16 20 / 54%);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-twilio-status--active {
    color: var(--tc-arc-live);
    border-color: rgb(89 225 207 / 36%);
    background: var(--tc-arc-live-soft);
}

.tc-clinical-canvas-on.tc-clinical-live .tc-record-timer {
    min-width: 4.7em;
    padding: 0.35rem 0.6rem;
    color: var(--tc-arc-live);
    border-color: rgb(89 225 207 / 28%);
    background: rgb(89 225 207 / 7%);
    font-size: 0.88rem;
    font-weight: 700;
    text-shadow: none;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-audio-meter {
    border-color: var(--tc-arc-line);
    background: rgb(7 16 20 / 72%);
}

body.tc-clinical-canvas-on.tc-clinical-live .tc-stop-btn {
    color: var(--tc-arc-critical);
    border-color: rgb(255 116 116 / 62%);
    background: rgb(255 116 116 / 7%) !important;
    box-shadow: none;
}

body.tc-clinical-canvas-on.tc-clinical-live .tc-stop-btn:hover {
    color: #fff;
    border-color: var(--tc-arc-critical);
    background: rgb(255 116 116 / 18%) !important;
    box-shadow: 0 0 0 2px rgb(255 116 116 / 10%);
}

body.tc-clinical-canvas-on.tc-clinical-live .tc-twilio-hangup-btn {
    border-color: var(--tc-arc-critical);
    background: var(--tc-arc-critical) !important;
    color: #16090a;
    box-shadow: 0 0 1rem rgb(255 116 116 / 18%);
}

body.tc-clinical-canvas-on.tc-clinical-live .tc-twilio-hangup-btn:hover {
    border-color: #ff8a8a;
    background: #ff8a8a !important;
    box-shadow: 0 0 1.2rem rgb(255 116 116 / 28%);
}

/* A recovered call can briefly coexist with a legacy no-selection/read-only
   recorder state. The clinical canvas stays available in that state, and the
   terminal call actions must too: never let the wrapper's pointer lock trap a
   live microphone or phone bridge. */
.tc-clinical-canvas-on.tc-clinical-live
    .tc-recorder.tc-recorder--disabled > .tc-recorder-controls {
    opacity: 1;
    pointer-events: auto;
}

.tc-clinical-canvas-on.tc-clinical-live
    .tc-recorder.tc-recorder--disabled .tc-call-end-controls,
.tc-clinical-canvas-on.tc-clinical-live
    .tc-recorder.tc-recorder--disabled .tc-call-end-controls > button {
    opacity: 1;
    pointer-events: auto;
}

.tc-clinical-canvas-on.tc-clinical-live .tc-recorder > .tc-clinical-canvas {
    grid-column: 1;
    grid-row: 2;
    min-height: 0;
    height: auto;
    align-self: stretch;
    margin-top: 0.62rem;
    border-radius: 0.9rem;
    box-shadow: none;
}

/* The legacy recorder can be disabled for a closed/read-only transfer. Its
   opacity and pointer lock must not dim or disable the independent clinical
   review surface nested inside it. Keep every legacy child inert while
   restoring the Transfer Arc as a readable, navigable surface. */
.tc-clinical-canvas-on .tc-recorder.tc-recorder--disabled {
    opacity: 1;
    pointer-events: auto;
}

.tc-clinical-canvas-on .tc-recorder.tc-recorder--disabled > :not(.tc-clinical-canvas) {
    opacity: 0.4;
    pointer-events: none;
}

.tc-clinical-canvas-on .tc-recorder.tc-recorder--disabled > .tc-clinical-canvas {
    pointer-events: auto;
}

/* -------------------------------------------------------------------------
   Live transcript
   ------------------------------------------------------------------------- */

.tc-live-transcript,
.tc-story-map {
    display: flex;
    min-width: 0;
    min-height: 0;
    height: 100%;
    flex-direction: column;
    color: var(--tc-arc-text);
}

.tc-live-transcript__header,
.tc-transfer-arc__header {
    display: grid;
    min-height: 4.9rem;
    align-items: center;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.15rem 0.9rem;
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--tc-arc-line);
    background: rgb(7 16 20 / 72%);
    backdrop-filter: blur(18px);
}

.tc-live-transcript__title,
.tc-transfer-arc__title {
    margin: 0;
    font-family: var(--term-font-display, "Outfit", sans-serif);
    font-size: 1.05rem;
    font-weight: 550;
    line-height: 1.25;
    letter-spacing: 0.01em;
}

.tc-live-transcript__title::before {
    display: inline-block;
    width: 0.48rem;
    height: 0.48rem;
    margin-right: 0.48rem;
    border-radius: 50%;
    background: var(--tc-arc-live);
    box-shadow: 0 0 0 0.3rem rgb(89 225 207 / 10%);
    content: "";
}

.tc-live-transcript__status,
.tc-transfer-arc__status {
    grid-column: 1;
    margin: 0;
    color: var(--tc-arc-muted);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.68rem;
    line-height: 1.4;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.tc-live-transcript__follow {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-height: 2.45rem;
    padding: 0.4rem 0.75rem;
    border: 1px solid rgb(89 225 207 / 48%);
    border-radius: 999px;
    color: var(--tc-arc-live);
    background: rgb(89 225 207 / 6%);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
}

.tc-live-transcript__follow.is-paused {
    color: var(--tc-arc-void);
    background: var(--tc-arc-live);
}

.tc-live-transcript__viewport {
    flex: 1;
    min-height: 0;
    padding: 0.55rem 0 1.5rem;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.tc-live-transcript__turns {
    display: flex;
    flex-direction: column;
}

/* Density ladder (2026-07-25) — see live-transcript.js.
 *
 * The transcript showed ~8 turns against 32-40 turns in a call. A line recedes
 * as it ages (data-tier 0..3) unless it carries clinical signal, which holds it
 * open (is-held / is-signal). SIZE and COLOUR only: text is never truncated,
 * folded, or hidden, because the transcript is a record.
 *
 * font-size lives on the row, not the paragraph, so one custom property drives
 * the whole line box and the meta row scales with it. */
.tc-live-transcript__turn {
    position: relative;
    max-width: 92%;
    margin: 0;
    padding: var(--tc-turn-pad-y, 0.38rem) 1.1rem var(--tc-turn-pad-y, 0.38rem) 1.25rem;
    border-left: 3px solid var(--tc-arc-blue);
    font-size: var(--tc-turn-size, 1rem);
    cursor: pointer;
    /* Deliberately no font-size transition: animating it animates LAYOUT across
     * every row in a scrolling container while _scrollToLatest measures. Tiers
     * snap, and they only change when a turn arrives — already a visual event. */
    transition:
        border-color 160ms ease,
        background 160ms ease,
        transform 160ms ease;
}

/* An unresolved speaker must not silently read as "referring". Roles resolve
 * from direction of transfer now (f50e17a2) and `unknown` is a real state. */
.tc-live-transcript__turn[data-speaker-role="unknown"] {
    border-left-color: var(--tc-arc-line);
}

.tc-live-transcript__turn[data-tier="0"] {
    --tc-turn-size: 1rem;
    --tc-turn-lh: 1.55;
    --tc-turn-pad-y: 0.38rem;
}

.tc-live-transcript__turn[data-tier="1"] {
    --tc-turn-size: 0.94rem;
    --tc-turn-lh: 1.5;
    --tc-turn-pad-y: 0.3rem;
}

.tc-live-transcript__turn[data-tier="2"] {
    --tc-turn-size: 0.86rem;
    --tc-turn-lh: 1.42;
    --tc-turn-pad-y: 0.24rem;
    --tc-turn-ink: var(--tc-arc-muted);
}

/* Legibility floor. 0.8rem is small but readable, and only a line with no
 * number, no citation and no flag is ever allowed to reach it.
 *
 * Ink stops at --tc-arc-muted (7.6:1). --tc-arc-faint measures 3.96:1 on this
 * ground and FAILS WCAG 1.4.3 for body text — it is fine for a timestamp glyph,
 * not for transcript prose at 12.8px. */
.tc-live-transcript__turn[data-tier="3"] {
    --tc-turn-size: 0.8rem;
    --tc-turn-lh: 1.35;
    --tc-turn-pad-y: 0.2rem;
    --tc-turn-ink: var(--tc-arc-muted);
}

/* A held line is not merely un-shrunk — it is the thing worth finding again.
 *
 * The mark is a SECOND inset stripe, never the border-left: that rail encodes
 * WHO IS SPEAKING, and recolouring it made a held *referring* line read as
 * accepting. Two meanings must not share one channel. Numerals additionally set
 * in tabular figures at a heavier weight so vitals and doses pop out of the
 * column when the doctor scans for them. */
.tc-live-transcript__turn.is-held {
    box-shadow: inset 3px 0 0 var(--tc-arc-live);
}

.tc-live-transcript__turn.is-held[data-rank-reason~="critical"] {
    box-shadow: inset 3px 0 0 var(--tc-arc-critical);
}

.tc-live-transcript__turn.is-held .tc-live-transcript__text,
.tc-live-transcript__turn.is-signal .tc-live-transcript__text {
    font-variant-numeric: tabular-nums;
}

.tc-live-transcript__turn.is-held .tc-live-transcript__text {
    font-weight: 500;
}

/* Continuation of the same speaker: the bubble side and rail colour already say
 * who is talking, so the meta row collapses and buys back ~1rem per turn. The
 * speaker name stays in the a11y tree via .tc-visually-hidden (set in JS).
 *
 * The row is taken OUT OF FLOW rather than expanded on hover. An earlier
 * revision restored height on :hover, which pushed every row below it down 32px
 * as the cursor crossed the column — the same reflow-under-the-doctor that the
 * no-resize-on-hover rule elsewhere in this file exists to forbid. */
.tc-live-transcript__turn.is-continuation .tc-live-transcript__turn-meta {
    position: absolute;
    inset-block-start: 0.1rem;
    inset-inline-end: 0.35rem;
    height: auto;
    margin: 0;
    opacity: 0;
    pointer-events: none;
}

.tc-live-transcript__turn.is-continuation:hover .tc-live-transcript__turn-meta,
.tc-live-transcript__turn.is-continuation:focus-within .tc-live-transcript__turn-meta {
    opacity: 1;
    pointer-events: auto;
}

.tc-live-transcript__turn[data-speaker-role="accepting"],
.tc-live-transcript__turn[data-speaker-role="transfer_center"] {
    align-self: flex-end;
    margin-right: 0.8rem;
    border-left-color: var(--tc-arc-live);
}

.tc-live-transcript__turn + .tc-live-transcript__turn {
    margin-top: 0.15rem;
}

.tc-live-transcript__turn:hover,
.tc-live-transcript__turn.is-related {
    background: linear-gradient(90deg, rgb(89 225 207 / 9%), transparent 88%);
}

.tc-live-transcript__turn.is-selected {
    border-left-color: var(--tc-arc-live);
    background: linear-gradient(90deg, rgb(89 225 207 / 15%), transparent 92%);
    box-shadow: inset 0.3rem 0 1.6rem rgb(89 225 207 / 5%);
}

.tc-live-transcript__turn-meta {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.45rem;
}

.tc-live-transcript__speaker {
    color: var(--tc-arc-blue);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.72rem;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tc-live-transcript__turn[data-speaker-role="accepting"] .tc-live-transcript__speaker,
.tc-live-transcript__turn[data-speaker-role="transfer_center"] .tc-live-transcript__speaker {
    color: var(--tc-arc-live);
}

.tc-live-transcript__time {
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.66rem;
}

.tc-live-transcript__flag {
    padding: 0.12rem 0.38rem;
    border-radius: 999px;
    color: var(--tc-arc-muted);
    background: rgb(255 255 255 / 5%);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.tc-live-transcript__flag.is-critical {
    color: var(--tc-arc-critical);
    background: var(--tc-arc-critical-soft);
}

.tc-live-transcript__flag.is-clarify {
    color: var(--tc-arc-warning);
    background: var(--tc-arc-warning-soft);
}

.tc-live-transcript__flag.is-corrected {
    color: var(--tc-arc-blue);
    background: var(--tc-arc-blue-soft);
}

.tc-live-transcript__edit {
    /* Out of flow: its 2rem min-height was setting the height of the entire
     * meta row on every run head, which late in a call is taller than the line
     * of speech it labels. Absolute keeps the 2.75rem hit target without
     * charging every turn for it. Revealed on hover/focus so it stays reachable
     * by keyboard; always visible on touch, where there is no hover. */
    position: absolute;
    inset-block-start: 0.1rem;
    inset-inline-end: 0.25rem;
    min-width: 2.75rem;
    min-height: 1.7rem;
    opacity: 0;
    padding: 0.25rem 0.45rem;
    border: 0;
    color: var(--tc-arc-muted);
    background: transparent;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    cursor: pointer;
}

.tc-live-transcript__turn:hover .tc-live-transcript__edit,
.tc-live-transcript__edit:focus-visible {
    opacity: 1;
}

@media (pointer: coarse) {
    .tc-live-transcript__edit {
        position: static;
        min-height: 2.75rem;
        margin-left: auto;
        opacity: 1;
    }
}

.tc-live-transcript__edit:hover {
    color: var(--tc-arc-live);
}

/* Size/leading/ink come from the row's tier (see the density ladder above).
 * font-size: 1em inherits the row so the whole line box scales together. */
.tc-live-transcript__text {
    margin: 0.1rem 0 0;
    max-width: 76ch;
    color: var(--tc-turn-ink, var(--tc-arc-text));
    font-size: 1em;
    font-weight: 390;
    line-height: var(--tc-turn-lh, 1.55);
    text-wrap: pretty;
    transition: color 240ms ease;
}

/* Recovering a receded line restores INK ONLY, never size: re-sizing on hover
 * would reflow the column under the doctor's cursor mid-scroll. Mirrors the
 * bedside stale-reading precedent, which is likewise opacity-only. */
.tc-live-transcript__turn:hover .tc-live-transcript__text,
.tc-live-transcript__turn:focus-within .tc-live-transcript__text,
.tc-live-transcript__turn.is-selected .tc-live-transcript__text,
.tc-live-transcript__turn.is-related .tc-live-transcript__text {
    color: var(--tc-arc-text);
}

.tc-live-transcript__evidence {
    padding: 0.04em 0.12em;
    border-radius: 0.2rem;
    color: var(--tc-arc-text);
    background: rgb(89 225 207 / 22%);
    box-shadow: 0 0 0 1px rgb(89 225 207 / 24%);
    box-decoration-break: clone;
}

.tc-live-transcript__partials {
    position: relative;
    margin: 0.65rem 1rem 0;
    padding: 0.85rem 0.95rem 0.85rem 1.2rem;
    border-left: 2px solid var(--tc-arc-live);
    color: var(--tc-arc-muted);
    background: linear-gradient(90deg, rgb(89 225 207 / 9%), transparent);
    font-size: 0.96rem;
    line-height: 1.55;
}

.tc-live-transcript__partials::after {
    display: inline-block;
    width: 0.12rem;
    height: 1.05em;
    margin-left: 0.3rem;
    vertical-align: -0.12em;
    background: var(--tc-arc-live);
    animation: tc-caret 900ms steps(1) infinite;
    content: "";
}

.tc-live-transcript__partial {
    opacity: 0.92;
}

.tc-live-transcript__partial-speaker {
    margin-right: 0.35rem;
    color: var(--tc-arc-live);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

@keyframes tc-caret {
    50% { opacity: 0; }
}

/* -------------------------------------------------------------------------
   Transfer Arc header and empty state
   ------------------------------------------------------------------------- */

.tc-transfer-arc {
    overflow: hidden;
}

.tc-transfer-arc__identity {
    min-width: 0;
}

.tc-transfer-arc__eyebrow {
    display: block;
    margin-bottom: 0.12rem;
    color: var(--tc-arc-live);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.tc-transfer-arc__header {
    grid-template-columns: minmax(0, 1fr);
}

.tc-transfer-arc__status {
    grid-column: 1;
}

.tc-transfer-arc__stage {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}

.tc-transfer-arc__empty {
    display: grid;
    min-height: 100%;
    place-items: center;
    align-content: center;
    gap: 2.1rem;
    padding: 3rem clamp(1.5rem, 5vw, 4.5rem);
    text-align: center;
}

.tc-transfer-arc__empty-visual {
    position: relative;
    width: min(100%, 22rem);
    height: 4rem;
}

.tc-transfer-arc__empty-path {
    position: absolute;
    top: 50%;
    right: 1.1rem;
    left: 1.1rem;
    height: 1px;
    background: linear-gradient(90deg, var(--tc-arc-blue), var(--tc-arc-live));
    box-shadow: 0 0 1.2rem rgb(89 225 207 / 24%);
}

.tc-transfer-arc__empty-origin,
.tc-transfer-arc__empty-horizon {
    position: absolute;
    z-index: 1;
    top: calc(50% - 0.55rem);
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--tc-arc-blue);
    border-radius: 50%;
    background: var(--tc-arc-void);
}

.tc-transfer-arc__empty-origin {
    left: 0;
}

.tc-transfer-arc__empty-horizon {
    right: 0;
    border-color: var(--tc-arc-live);
    border-radius: 0.2rem;
    transform: rotate(45deg);
}

.tc-transfer-arc__empty-copy {
    max-width: 34rem;
}

.tc-transfer-arc__empty-kicker,
.tc-transfer-arc__empty-note {
    margin: 0;
    color: var(--tc-arc-muted);
}

.tc-transfer-arc__empty-kicker {
    font-family: var(--term-font-mono, monospace);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tc-transfer-arc__empty-title {
    margin: 0.65rem 0 0.75rem;
    font-family: var(--term-font-display, "Outfit", sans-serif);
    font-size: clamp(1.35rem, 2.4vw, 2rem);
    font-weight: 420;
    line-height: 1.18;
    text-wrap: balance;
}

.tc-transfer-arc__empty-note {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* -------------------------------------------------------------------------
   Current-state nucleus
   ------------------------------------------------------------------------- */

.tc-now-nucleus {
    position: relative;
    padding: 1.4rem 1.35rem 1.2rem;
    overflow: hidden;
    border-bottom: 1px solid var(--tc-arc-line);
    background:
        radial-gradient(circle at 88% 26%, rgb(89 225 207 / 14%), transparent 17rem),
        linear-gradient(110deg, rgb(255 255 255 / 3%), transparent 72%);
}

.tc-now-nucleus::after {
    position: absolute;
    top: 1.65rem;
    right: 1.45rem;
    width: 4.6rem;
    height: 4.6rem;
    border: 1px solid rgb(89 225 207 / 18%);
    border-radius: 50%;
    box-shadow:
        0 0 0 0.7rem rgb(89 225 207 / 3%),
        0 0 0 1.4rem rgb(89 225 207 / 2%);
    content: "";
}

.tc-now-nucleus.is-critical {
    background:
        radial-gradient(circle at 88% 26%, rgb(255 116 116 / 14%), transparent 17rem),
        linear-gradient(110deg, rgb(255 255 255 / 3%), transparent 72%);
}

.tc-now-nucleus__label {
    display: block;
    margin-bottom: 0.45rem;
    color: var(--tc-arc-live);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.tc-now-nucleus__fact {
    max-width: 88%;
}

.tc-now-nucleus__fact .tc-clinical-knot__value {
    font-family: var(--term-font-display, "Outfit", sans-serif);
    font-size: clamp(1.25rem, 2.3vw, 1.8rem);
    font-weight: 430;
    line-height: 1.22;
}

.tc-now-nucleus__movement {
    display: block;
    max-width: 88%;
    margin: 0.65rem 0 0;
    color: var(--tc-arc-muted);
}

.tc-now-nucleus__movement .tc-clinical-knot__button {
    min-height: 0;
    padding: 0;
}

.tc-now-nucleus__movement .tc-clinical-knot__shape {
    display: none;
}

.tc-now-nucleus__movement .tc-clinical-knot__copy {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.15rem 0.5rem;
}

.tc-now-nucleus__movement .tc-clinical-knot__label {
    align-self: baseline;
    color: var(--tc-arc-faint);
    font-size: 0.58rem;
}

.tc-now-nucleus__movement .tc-clinical-knot__value {
    align-self: baseline;
    color: var(--tc-arc-muted);
    font-size: 0.83rem;
    font-weight: 480;
    line-height: 1.45;
}

.tc-now-nucleus__movement .tc-clinical-knot__meta {
    grid-column: 2;
}

.tc-now-nucleus__movement.is-worsening .tc-clinical-knot__value {
    color: var(--tc-arc-critical);
}

.tc-now-nucleus__movement.is-improving .tc-clinical-knot__value {
    color: var(--tc-arc-improving);
}

.tc-now-nucleus__provenance {
    display: block;
    margin-top: 0.8rem;
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.59rem;
    letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------
   Evidence-time river
   ------------------------------------------------------------------------- */

.tc-evidence-river {
    padding: 0.8rem 1.3rem 1rem;
    border-bottom: 1px solid var(--tc-arc-line);
    background: rgb(7 16 20 / 36%);
}

.tc-evidence-river__header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    margin-bottom: 0.6rem;
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.55rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.tc-evidence-river__header strong {
    color: var(--tc-arc-muted);
    font-weight: 700;
}

.tc-evidence-river__header span:last-child {
    text-align: right;
}

.tc-evidence-river__track {
    position: relative;
    height: 2.3rem;
}

.tc-evidence-river__line {
    position: absolute;
    top: calc(50% - 0.5px);
    right: 0;
    left: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--tc-arc-blue), var(--tc-arc-live));
    opacity: 0.48;
}

.tc-evidence-river__line::after {
    position: absolute;
    top: -0.22rem;
    right: -0.05rem;
    width: 0.45rem;
    height: 0.45rem;
    border-top: 1px solid var(--tc-arc-live);
    border-right: 1px solid var(--tc-arc-live);
    transform: rotate(45deg);
    content: "";
}

.tc-evidence-river__marker {
    position: absolute;
    z-index: 1;
    top: calc(50% + var(--tc-lane, 0rem));
    left: var(--tc-moment);
    width: 0.72rem;
    height: 0.72rem;
    padding: 0;
    border: 2px solid var(--tc-arc-muted);
    border-radius: 50%;
    background: var(--tc-arc-void);
    box-shadow: 0 0 0 0.2rem rgb(7 16 20 / 92%);
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.tc-evidence-river__marker.is-chevron {
    border-radius: 0.1rem;
    clip-path: polygon(0 0, 68% 0, 100% 50%, 68% 100%, 0 100%, 28% 50%);
}

.tc-evidence-river__marker.is-diamond {
    border-radius: 0.08rem;
    transform: translate(-50%, -50%) rotate(45deg);
}

.tc-evidence-river__marker.is-fork {
    border-style: dashed;
    border-color: var(--tc-arc-warning);
}

.tc-evidence-river__marker.is-critical,
.tc-evidence-river__marker.is-worsening {
    border-color: var(--tc-arc-critical);
}

.tc-evidence-river__marker.is-improving,
.tc-evidence-river__marker.is-confirmed {
    border-color: var(--tc-arc-improving);
}

.tc-evidence-river__marker.is-actionable {
    border-color: var(--tc-arc-live);
}

.tc-evidence-river__marker[aria-pressed="true"] {
    background: currentColor;
    box-shadow:
        0 0 0 0.22rem var(--tc-arc-void),
        0 0 0 0.32rem var(--tc-arc-live);
}

/* -------------------------------------------------------------------------
   Continuous clinical flow
   ------------------------------------------------------------------------- */

.tc-transfer-flow {
    position: relative;
    padding: 0.4rem 1.25rem 0.25rem;
}

.tc-transfer-flow::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 1.82rem;
    width: 1px;
    background: linear-gradient(
        to bottom,
        transparent,
        var(--tc-arc-line-strong) 8%,
        var(--tc-arc-line-strong) 92%,
        transparent
    );
    content: "";
}

.tc-flow-scene {
    position: relative;
    display: grid;
    grid-template-columns: 1.2rem minmax(0, 1fr);
    gap: 0 0.85rem;
    padding: 1rem 0 1.1rem;
}

.tc-flow-scene + .tc-flow-scene {
    border-top: 1px solid var(--tc-arc-line);
}

.tc-flow-scene__marker {
    position: relative;
    z-index: 1;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 0.75rem;
    height: 0.75rem;
    margin-top: 0.18rem;
    border: 2px solid var(--tc-arc-blue);
    border-radius: 50%;
    background: var(--tc-arc-deep);
    box-shadow: 0 0 0 0.24rem var(--tc-arc-deep);
}

.tc-flow-scene--problems .tc-flow-scene__marker {
    border-color: var(--tc-arc-critical);
}

.tc-flow-scene--care .tc-flow-scene__marker {
    border-color: var(--tc-arc-live);
    border-radius: 0.12rem;
    clip-path: polygon(0 0, 68% 0, 100% 50%, 68% 100%, 0 100%, 28% 50%);
}

.tc-flow-scene--open .tc-flow-scene__marker {
    border-color: var(--tc-arc-warning);
    border-style: dashed;
}

.tc-flow-scene__heading {
    grid-column: 2;
    margin-bottom: 0.65rem;
}

.tc-flow-scene__heading h3 {
    margin: 0;
    font-family: var(--term-font-display, "Outfit", sans-serif);
    font-size: 0.93rem;
    font-weight: 550;
    line-height: 1.25;
}

.tc-flow-scene__heading p {
    margin: 0.16rem 0 0;
    color: var(--tc-arc-faint);
    font-size: 0.7rem;
    line-height: 1.4;
}

.tc-flow-scene__content {
    display: grid;
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem 1rem;
}

/* Clinical knots are visual marks on the story, not cards. */
.tc-clinical-knot {
    min-width: 0;
    color: var(--tc-arc-text);
}

.tc-clinical-knot__button {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    align-items: flex-start;
    gap: 0.65rem;
    padding: 0.42rem 0.5rem;
    border: 0;
    border-radius: 0.55rem;
    color: inherit;
    background: transparent;
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition:
        background 150ms ease,
        transform 150ms ease;
}

.tc-clinical-knot__button:hover,
.tc-clinical-knot.is-related .tc-clinical-knot__button {
    background: rgb(255 255 255 / 4%);
}

.tc-clinical-knot.is-selected .tc-clinical-knot__button {
    background: linear-gradient(90deg, var(--tc-arc-live-soft), transparent 92%);
    box-shadow: inset 2px 0 0 var(--tc-arc-live);
}

.tc-clinical-knot__shape {
    position: relative;
    width: 0.72rem;
    height: 0.72rem;
    flex: 0 0 auto;
    margin-top: 0.26rem;
    border: 2px solid var(--tc-arc-muted);
    border-radius: 50%;
    color: var(--tc-arc-muted);
    background: var(--tc-arc-deep);
}

.tc-clinical-knot.is-chevron .tc-clinical-knot__shape {
    border: 0;
    border-radius: 0.08rem;
    background: currentColor;
    clip-path: polygon(0 0, 68% 0, 100% 50%, 68% 100%, 0 100%, 28% 50%);
}

.tc-clinical-knot.is-diamond .tc-clinical-knot__shape {
    border-radius: 0.08rem;
    transform: rotate(45deg);
}

.tc-clinical-knot.is-fork .tc-clinical-knot__shape {
    border-color: var(--tc-arc-warning);
    border-style: dashed;
}

.tc-clinical-knot.is-wave .tc-clinical-knot__shape {
    height: 0.45rem;
    margin-top: 0.38rem;
    border-width: 2px 0 0;
    border-radius: 50%;
    transform: rotate(-12deg);
}

.tc-clinical-knot.is-critical .tc-clinical-knot__shape,
.tc-clinical-knot.is-worsening .tc-clinical-knot__shape {
    border-color: var(--tc-arc-critical);
    color: var(--tc-arc-critical);
}

.tc-clinical-knot.is-actionable .tc-clinical-knot__shape {
    border-color: var(--tc-arc-live);
    color: var(--tc-arc-live);
}

.tc-clinical-knot.is-improving .tc-clinical-knot__shape,
.tc-clinical-knot.is-confirmed .tc-clinical-knot__shape {
    border-color: var(--tc-arc-improving);
    color: var(--tc-arc-improving);
}

.tc-clinical-knot.is-conflict .tc-clinical-knot__shape,
.tc-clinical-knot.is-uncertain .tc-clinical-knot__shape {
    border-color: var(--tc-arc-warning);
    color: var(--tc-arc-warning);
}

.tc-clinical-knot.is-negated {
    opacity: 0.78;
}

.tc-clinical-knot__copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 0.12rem;
}

.tc-clinical-knot__label {
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tc-clinical-knot__value {
    color: var(--tc-arc-text);
    font-size: 0.88rem;
    font-weight: 560;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.tc-clinical-knot__meta {
    color: var(--tc-arc-muted);
    font-size: 0.65rem;
    line-height: 1.4;
}

.tc-clinical-knot.is-new {
    animation: tc-knot-enter 420ms cubic-bezier(0.18, 0.84, 0.28, 1);
}

@keyframes tc-knot-enter {
    from {
        opacity: 0;
        transform: translateY(0.6rem) scale(0.97);
    }
}

.tc-clinical-knot__detail {
    margin: 0.2rem 0.5rem 0.55rem 1.85rem;
    padding: 0.55rem 0.65rem;
    border-left: 1px solid rgb(89 225 207 / 42%);
    background: linear-gradient(90deg, rgb(89 225 207 / 7%), transparent);
}

.tc-clinical-knot__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.tc-clinical-knot__source,
.tc-clinical-knot__correct {
    min-height: 2rem;
    padding: 0.28rem 0.48rem;
    border: 1px solid var(--tc-arc-line-strong);
    border-radius: 999px;
    color: var(--tc-arc-muted);
    background: rgb(7 16 20 / 64%);
    font: inherit;
    font-size: 0.64rem;
    font-weight: 700;
    cursor: pointer;
}

.tc-clinical-knot__source[aria-pressed="true"] {
    border-color: var(--tc-arc-live);
    color: var(--tc-arc-live);
    background: var(--tc-arc-live-soft);
}

.tc-clinical-knot__correct {
    margin-left: auto;
}

.tc-clinical-knot__quote {
    margin: 0.5rem 0 0;
    color: var(--tc-arc-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.tc-clinical-knot__quote[data-source-kind="chart"]::before {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--tc-arc-blue);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    content: "Chart material";
}

/* -------------------------------------------------------------------------
   Explicit intervention ↔ response weave
   ------------------------------------------------------------------------- */

.tc-care-weave {
    grid-column: 2;
}

.tc-care-arc {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 4.6rem minmax(0, 1fr);
    gap: 0.4rem;
    align-items: center;
    padding: 0.55rem 0;
}

.tc-care-arc + .tc-care-arc {
    border-top: 1px dashed var(--tc-arc-line);
}

.tc-care-arc__label {
    grid-column: 1 / -1;
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.55rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tc-care-arc__actions,
.tc-care-arc__responses {
    min-width: 0;
}

.tc-care-arc__connector {
    position: relative;
    min-width: 0;
    color: var(--tc-arc-faint);
    text-align: center;
}

.tc-care-arc__connector-line {
    display: flex;
    min-height: 1.25rem;
    align-items: center;
    justify-content: center;
    font-family: var(--term-font-mono, monospace);
    font-size: 0.46rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.tc-care-arc.is-connected .tc-care-arc__connector::before {
    position: absolute;
    top: 50%;
    right: 0.2rem;
    left: 0.2rem;
    height: 1px;
    border-top: 1px dashed var(--tc-arc-live);
    content: "";
}

.tc-care-arc.is-connected .tc-care-arc__connector::after {
    position: absolute;
    top: calc(50% - 0.22rem);
    right: 0.05rem;
    width: 0.4rem;
    height: 0.4rem;
    border-top: 1px solid var(--tc-arc-live);
    border-right: 1px solid var(--tc-arc-live);
    transform: rotate(45deg);
    content: "";
}

.tc-care-arc.is-connected .tc-care-arc__connector-line {
    position: relative;
    z-index: 1;
    width: max-content;
    margin: auto;
    padding: 0 0.25rem;
    color: var(--tc-arc-live);
    background: var(--tc-arc-deep);
}

.tc-care-arc__awaiting {
    margin: 0;
    padding: 0.45rem 0.5rem;
    border-left: 1px dashed var(--tc-arc-warning);
    color: var(--tc-arc-warning);
    font-size: 0.7rem;
    line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Open branches and transfer horizon
   ------------------------------------------------------------------------- */

.tc-open-branches {
    display: grid;
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
}

.tc-open-turn {
    display: flex;
    min-height: 2.75rem;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.5rem;
    border: 0;
    border-left: 1px dashed var(--tc-arc-warning);
    color: var(--tc-arc-text);
    background: transparent;
    text-align: left;
    font: inherit;
    font-size: 0.78rem;
    line-height: 1.45;
    cursor: pointer;
}

.tc-open-turn__label {
    flex: 0 0 auto;
    color: var(--tc-arc-warning);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.53rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tc-transfer-horizon {
    position: relative;
    margin-top: 0.35rem;
    padding: 1.2rem 1.35rem 1.35rem;
    border-top: 1px solid rgb(89 225 207 / 48%);
    background:
        linear-gradient(180deg, rgb(89 225 207 / 9%), transparent 72%),
        rgb(7 16 20 / 48%);
}

.tc-transfer-horizon::before {
    position: absolute;
    top: -0.3rem;
    left: 1.55rem;
    width: 0.58rem;
    height: 0.58rem;
    border: 1px solid var(--tc-arc-live);
    background: var(--tc-arc-deep);
    transform: rotate(45deg);
    content: "";
}

.tc-transfer-horizon__kicker {
    color: var(--tc-arc-live);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tc-transfer-horizon__title {
    margin: 0.18rem 0 0.75rem;
    font-family: var(--term-font-display, "Outfit", sans-serif);
    font-size: 1.05rem;
    font-weight: 500;
}

.tc-transfer-horizon__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.45rem 0.8rem;
}

.tc-transfer-seal {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--tc-arc-line-strong);
}

.tc-transfer-seal__status {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 0.5rem;
    color: var(--tc-arc-muted);
    font-size: 0.72rem;
    font-weight: 650;
}

.tc-transfer-seal__mark {
    width: 0.75rem;
    height: 0.75rem;
    flex: 0 0 auto;
    border: 1px solid var(--tc-arc-muted);
    border-radius: 50%;
}

.tc-transfer-seal.is-acknowledged .tc-transfer-seal__mark {
    border-color: var(--tc-arc-improving);
    background: var(--tc-arc-improving);
    box-shadow: 0 0 0 0.22rem var(--tc-arc-improving-soft);
}

.tc-transfer-seal.is-stale .tc-transfer-seal__mark {
    border-color: var(--tc-arc-warning);
    border-style: dashed;
    border-radius: 0;
    transform: rotate(45deg);
}

.tc-transfer-seal__action {
    min-height: 2.6rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--tc-arc-live);
    border-radius: 999px;
    color: var(--tc-arc-void);
    background: var(--tc-arc-live);
    font: inherit;
    font-size: 0.68rem;
    font-weight: 800;
    cursor: pointer;
}

.tc-transfer-seal__error,
.tc-inline-correction__error {
    margin: 0.35rem 0 0;
    color: var(--tc-arc-critical);
    font-size: 0.72rem;
    line-height: 1.4;
}

/* -------------------------------------------------------------------------
   Inline correction
   ------------------------------------------------------------------------- */

.tc-inline-correction {
    margin: 0.35rem 0.5rem 0.6rem 1.85rem;
}

.tc-inline-correction__label {
    display: grid;
    gap: 0.35rem;
    color: var(--tc-arc-muted);
    font-size: 0.68rem;
    font-weight: 700;
}

.tc-inline-correction__input {
    width: 100%;
    min-height: 4.75rem;
    resize: vertical;
    padding: 0.6rem;
    border: 1px solid var(--tc-arc-line-strong);
    border-radius: 0.45rem;
    color: var(--tc-arc-text);
    background: var(--tc-arc-surface);
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.5;
}

.tc-inline-correction__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.tc-inline-correction__cancel,
.tc-inline-correction__save {
    min-height: 2.5rem;
    padding: 0.4rem 0.65rem;
    border: 1px solid var(--tc-arc-line-strong);
    border-radius: 999px;
    color: var(--tc-arc-text);
    background: var(--tc-arc-deep);
    font: inherit;
    font-size: 0.7rem;
    font-weight: 750;
    cursor: pointer;
}

.tc-inline-correction__save {
    border-color: var(--tc-arc-live);
    color: var(--tc-arc-void);
    background: var(--tc-arc-live);
}

.tc-clinical-canvas button:focus-visible,
.tc-clinical-canvas [tabindex]:focus-visible,
.tc-inline-correction__input:focus-visible {
    outline: 3px solid var(--tc-arc-blue);
    outline-offset: 2px;
}

.tc-clinical-canvas button:disabled {
    cursor: wait;
    opacity: 0.6;
}

/* -------------------------------------------------------------------------
   Responsive shell and compact modes
   ------------------------------------------------------------------------- */

@media (max-width: 1099.98px) {
    html {
        height: auto;
        overflow: auto;
    }

    body.tc-clinical-canvas-on {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(9rem, 22vh) auto;
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .tc-clinical-canvas-on .tc-header {
        grid-column: 1;
        grid-row: 1;
    }

    .tc-clinical-canvas-on .tc-list-panel {
        display: block;
        grid-column: 1;
        grid-row: 2;
        max-height: 22vh;
        overflow-y: auto;
        border-right: 0;
        border-bottom: 1px solid var(--term-boundary);
        box-shadow: 0 1px 0 rgb(0 0 0 / 60%);
    }

    .tc-clinical-canvas-on.tc-clinical-live .tc-list-panel {
        display: none;
    }

    body.tc-clinical-canvas-on.tc-clinical-live {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        height: 100vh;
        min-height: 0;
        overflow: hidden;
    }

    .tc-clinical-canvas-on .tc-workspace,
    .tc-clinical-canvas-on.tc-clinical-live .tc-workspace {
        grid-column: 1;
        grid-row: 3;
        min-width: 0;
        overflow: visible;
    }

    .tc-clinical-canvas-on.tc-clinical-live .tc-workspace {
        grid-row: 2;
        min-height: 0;
        height: 100%;
        overflow: hidden;
    }

    .tc-clinical-canvas-on .tc-workspace-form,
    .tc-clinical-canvas-on .tc-recorder {
        min-width: 0;
    }

    .tc-clinical-canvas {
        grid-template-columns: minmax(0, 1fr) minmax(24rem, 1fr);
        min-height: 38rem;
    }

    .tc-clinical-canvas-on.tc-clinical-live .tc-recorder > .tc-clinical-canvas {
        min-height: 0;
        height: auto;
    }

    .tc-flow-scene__content,
    .tc-transfer-horizon__facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 1099.98px) {
    .tc-clinical-canvas {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr);
        height: min(72vh, 52rem);
        min-height: 36rem;
    }

    .tc-clinical-canvas__switcher {
        display: grid;
        z-index: 3;
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.25rem;
        padding: 0.3rem;
        border-bottom: 1px solid var(--tc-arc-line);
        background: var(--tc-arc-deep);
    }

    .tc-clinical-canvas__switcher button {
        min-height: 2.8rem;
        border: 0;
        border-radius: 0.5rem;
        color: var(--tc-arc-muted);
        background: transparent;
        font: inherit;
        font-size: 0.78rem;
        font-weight: 750;
        cursor: pointer;
    }

    .tc-clinical-canvas__switcher button[aria-pressed="true"] {
        color: var(--tc-arc-text);
        background: var(--tc-arc-surface-soft);
        box-shadow: inset 0 -2px 0 var(--tc-arc-live);
    }

    .tc-clinical-now-ribbon {
        display: grid;
        z-index: 2;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 0.4rem 0.65rem;
        align-items: center;
        min-height: 3.2rem;
        padding: 0.55rem 0.75rem;
        border: 0;
        border-bottom: 1px solid var(--tc-arc-line);
        color: var(--tc-arc-text);
        background: linear-gradient(90deg, var(--tc-arc-live-soft), var(--tc-arc-deep));
        text-align: left;
        font: inherit;
        cursor: pointer;
    }

    .tc-clinical-now-ribbon[hidden] {
        display: none;
    }

    .tc-clinical-now-ribbon span {
        color: var(--tc-arc-live);
        font-family: var(--term-font-mono, monospace);
        font-size: 0.58rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
    }

    .tc-clinical-now-ribbon strong {
        overflow: hidden;
        font-size: 0.76rem;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .tc-clinical-now-ribbon em {
        color: var(--tc-arc-warning);
        font-family: var(--term-font-mono, monospace);
        font-size: 0.56rem;
        font-style: normal;
    }

    .tc-clinical-canvas__transcript-pane,
    .tc-clinical-canvas__story-pane {
        grid-column: 1;
        grid-row: 3;
        border-right: 0;
    }

    .tc-clinical-canvas[data-clinical-view="transcript"] .tc-clinical-canvas__story-pane,
    .tc-clinical-canvas[data-clinical-view="story"] .tc-clinical-canvas__transcript-pane {
        display: none;
    }

    .tc-clinical-canvas-on.tc-clinical-live .tc-recorder > .tc-clinical-canvas {
        min-height: 0;
        height: auto;
    }
}

@media (max-width: 600px) {
    .tc-clinical-canvas-on .tc-workspace,
    .tc-clinical-canvas-on.tc-clinical-live .tc-workspace {
        padding: 0.55rem;
    }

    .tc-clinical-canvas-on .tc-topbar {
        flex-wrap: wrap;
    }

    .tc-clinical-canvas-on .tc-topbar-name {
        width: 100%;
        flex: 1 1 100%;
    }

    .tc-clinical-canvas-on .tc-decision-buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tc-clinical-canvas-on .tc-decision-btn {
        min-width: 0;
    }

    .tc-clinical-canvas {
        min-height: 34rem;
        border-radius: 0.9rem;
    }

    .tc-live-transcript__header,
    .tc-transfer-arc__header {
        min-height: 4.5rem;
        padding-inline: 0.8rem;
    }

    .tc-live-transcript__turn {
        max-width: 96%;
        padding-inline: 0.85rem;
    }

    .tc-live-transcript__turn[data-speaker-role="accepting"],
    .tc-live-transcript__turn[data-speaker-role="transfer_center"] {
        margin-right: 0.3rem;
    }

    .tc-live-transcript__turn-meta {
        flex-wrap: wrap;
    }

    .tc-now-nucleus {
        padding: 1.15rem 0.9rem 1rem;
    }

    .tc-now-nucleus::after {
        right: 0.7rem;
    }

    .tc-now-nucleus__fact,
    .tc-now-nucleus__movement {
        max-width: 92%;
    }

    .tc-evidence-river {
        padding-inline: 0.9rem;
    }

    .tc-transfer-flow {
        padding-inline: 0.75rem;
    }

    .tc-transfer-flow::before {
        left: 1.3rem;
    }

    .tc-flow-scene {
        grid-template-columns: 1rem minmax(0, 1fr);
        gap: 0 0.55rem;
    }

    .tc-flow-scene__content {
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-care-arc {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.3rem;
    }

    .tc-care-arc__label,
    .tc-care-arc__actions,
    .tc-care-arc__connector,
    .tc-care-arc__responses {
        grid-column: 1;
    }

    .tc-care-arc__connector {
        width: 1.1rem;
        height: 1.6rem;
        margin-left: 0.6rem;
    }

    .tc-care-arc.is-connected .tc-care-arc__connector::before {
        top: 0;
        bottom: 0;
        left: 50%;
        width: 1px;
        height: auto;
        border-top: 0;
        border-left: 1px dashed var(--tc-arc-live);
    }

    .tc-care-arc.is-connected .tc-care-arc__connector::after {
        top: auto;
        right: auto;
        bottom: 0.05rem;
        left: calc(50% - 0.2rem);
        transform: rotate(135deg);
    }

    .tc-care-arc__connector-line {
        display: none;
    }

    .tc-transfer-horizon {
        padding-inline: 0.9rem;
    }

    .tc-transfer-horizon__facts {
        grid-template-columns: minmax(0, 1fr);
    }

    .tc-transfer-seal {
        align-items: stretch;
        flex-direction: column;
    }

    .tc-transfer-seal__action {
        width: 100%;
    }

    .tc-clinical-knot__detail,
    .tc-inline-correction {
        margin-left: 1.35rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tc-clinical-canvas *,
    .tc-clinical-canvas *::before,
    .tc-clinical-canvas *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media (forced-colors: active) {
    .tc-clinical-canvas,
    .tc-clinical-knot__shape,
    .tc-evidence-river__marker,
    .tc-flow-scene__marker,
    .tc-transfer-seal__mark {
        border-color: CanvasText;
    }

    .tc-live-transcript__turn.is-selected,
    .tc-clinical-knot.is-selected {
        outline: 2px solid Highlight;
    }
}

/* -------------------------------------------------------------------------
 * Bedside rail — the room layer (2026-07-18).
 *
 * Door card, stated-measurement monitor, voice presence, and the call clock.
 * Every value restates projection data or doctor-entered workspace fields.
 * Movement glyphs restate value pairs the fact itself asserts; the rail never
 * charts, extrapolates, or invents a trend.
 * ------------------------------------------------------------------------- */

.tc-clinical-canvas {
    grid-template-rows: auto minmax(0, 1fr);
}

.tc-clinical-canvas__bedside {
    z-index: 2;
    grid-column: 1 / -1;
    grid-row: 1;
    min-width: 0;
}

.tc-clinical-canvas__transcript-pane,
.tc-clinical-canvas__story-pane {
    grid-row: 2;
}

.tc-bedside {
    display: flex;
    align-items: stretch;
    gap: 0.9rem;
    min-height: 3.3rem;
    padding: 0.45rem 0.9rem;
    border-bottom: 1px solid var(--tc-arc-line);
    background: linear-gradient(180deg, rgb(14 27 32 / 88%), rgb(10 21 25 / 62%));
}

.tc-bedside.is-empty {
    display: none;
}

.tc-bedside__door {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    max-width: 15rem;
}

.tc-bedside__name {
    overflow: hidden;
    color: var(--tc-arc-text);
    font-size: 0.86rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tc-bedside__descriptor {
    color: var(--tc-arc-muted);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tc-bedside__signals {
    display: flex;
    flex: 1 1 auto;
    align-items: stretch;
    gap: 0.45rem;
    min-width: 0;
    padding-block: 0.1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.tc-bedside__signal {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    justify-content: center;
    gap: 0.14rem;
    min-width: 7.5rem;
    max-width: 13rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--tc-arc-line);
    border-radius: 0.6rem;
    color: var(--tc-arc-text);
    background: rgb(7 16 20 / 72%);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.tc-bedside__signal:hover,
.tc-bedside__signal:focus-visible {
    border-color: var(--tc-arc-line-strong);
}

.tc-bedside__signal.is-selected {
    border-color: var(--tc-arc-live);
    box-shadow: 0 0 0 1px var(--tc-arc-live), 0 0 18px rgb(89 225 207 / 22%);
}

.tc-bedside__signal.is-critical {
    border-color: rgb(255 116 116 / 55%);
    box-shadow: 0 0 14px rgb(255 116 116 / 14%);
}

.tc-bedside__signal.is-worsening {
    border-color: rgb(255 196 107 / 45%);
}

.tc-bedside__signal.is-improving {
    border-color: rgb(126 226 168 / 40%);
}

.tc-bedside__signal-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--tc-arc-muted);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.tc-bedside__movement {
    font-size: 0.7rem;
    line-height: 1;
}

.tc-bedside__movement.is-down { color: var(--tc-arc-warning); }
.tc-bedside__movement.is-up { color: var(--tc-arc-blue); }

.tc-bedside__signal-value {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    color: var(--tc-arc-text);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.25;
}

.tc-bedside__signal-time {
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.55rem;
}

/* Stated-reading run: "68 → 61 → 54". Quieter than the current value, which
 * stays the thing the eye lands on. Every number here was spoken on the call. */
.tc-bedside__signal-series {
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.58rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Aged reading: still the latest thing said, so it dims rather than hides.
 * Opacity only — no reordering, no motion, nothing that pulls the eye. */
.tc-bedside__signal.is-stale {
    opacity: 0.55;
}

.tc-bedside__signal.is-stale:hover,
.tc-bedside__signal.is-stale:focus-visible,
.tc-bedside__signal.is-stale.is-selected {
    opacity: 1;
}

/* -------------------------------------------------------------------------
 * Capture health (2026-07-25).
 *
 * Renders only when capture is NOT healthy. A degraded pipeline used to look
 * exactly like a quiet room; this is the line that tells the two apart, and it
 * says what to do rather than naming a state.
 * ---------------------------------------------------------------------- */

.tc-bedside__capture {
    display: flex;
    flex: 0 0 auto;
    /* Sits beside the door card, so it must NOT stretch to rail height — the
     * patient's name is the thing that should dominate this strip. Rendering it
     * showed a transient warning taking a third of the rail with a tall empty
     * box under two words of text. */
    align-self: center;
    max-width: 22rem;
    align-items: baseline;
    gap: 0.4rem;
    padding: 0.24rem 0.55rem;
    border: 1px solid var(--term-status-editing, #d79921);
    border-radius: 0.55rem;
    background: color-mix(in srgb, var(--term-status-editing, #d79921) 12%, transparent);
}

.tc-bedside__capture.is-severe {
    border-color: var(--term-red, #cc241d);
    background: color-mix(in srgb, var(--term-red, #cc241d) 14%, transparent);
}

.tc-bedside__capture-label {
    color: var(--tc-arc-text);
    font-size: 0.66rem;
    font-weight: 600;
}

.tc-bedside__capture-detail {
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.58rem;
}

/* -------------------------------------------------------------------------
 * Collapsed call-noise run (2026-07-25, ENABLE_TC_NOISE_TRIAGE).
 *
 * Content-free chatter is grouped, never removed. The chip is deliberately
 * plain — it is a seam in the conversation, not an alert — and one click opens
 * the run verbatim.
 * ---------------------------------------------------------------------- */

.tc-live-transcript__noise-run {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.16rem 0.5rem;
    border: 1px dashed var(--tc-arc-line);
    border-radius: 0.5rem;
    background: transparent;
    color: var(--tc-arc-faint);
    font-family: inherit;
    font-size: 0.62rem;
    text-align: left;
    cursor: pointer;
}

.tc-live-transcript__noise-run:hover,
.tc-live-transcript__noise-run:focus-visible {
    border-style: solid;
    color: var(--tc-arc-text);
}

.tc-live-transcript__noise-caret {
    font-family: var(--term-font-mono, monospace);
}

/* An expanded noise line stays legible but recedes — the doctor opened it, so
 * it must be readable; it is still not the clinical thread.
 *
 * Ink is pinned back to full white here so noise dims on the opacity channel
 * ALONE. Darkened ink and reduced opacity are independent dimming channels and
 * they multiply in perceived contrast: tier-3 muted ink at 0.6 measures 3.5:1,
 * and the original faint ink measured 2.19:1. Dimming twice is how a line
 * becomes unreadable while every individual rule still looks defensible. */
.tc-live-transcript__turn.is-noise {
    --tc-turn-ink: var(--tc-arc-text);
    opacity: 0.6;
}

.tc-live-transcript__turn.is-noise:hover,
.tc-live-transcript__turn.is-noise:focus-within,
.tc-live-transcript__turn.is-noise.is-selected {
    opacity: 1;
}

.tc-bedside__presence {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.55rem;
}

.tc-bedside__voice {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    color: var(--tc-arc-muted);
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}

.tc-bedside__voice-dot {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--tc-arc-faint);
    transition: background-color 300ms ease, box-shadow 300ms ease;
}

.tc-bedside__voice[data-speaker-role="accepting"] .tc-bedside__voice-dot,
.tc-bedside__voice[data-speaker-role="transfer_center"] .tc-bedside__voice-dot {
    background: rgb(89 225 207 / 55%);
}

.tc-bedside__voice[data-speaker-role="referring"] .tc-bedside__voice-dot {
    background: rgb(138 180 255 / 55%);
}

.tc-bedside__voice.is-speaking {
    color: var(--tc-arc-text);
}

.tc-bedside__voice.is-speaking .tc-bedside__voice-dot {
    background: var(--tc-arc-live);
    box-shadow: 0 0 8px rgb(89 225 207 / 55%);
    animation: tc-voice-breathe 1.6s ease-in-out infinite;
}

.tc-bedside__voice[data-speaker-role="referring"].is-speaking .tc-bedside__voice-dot {
    background: var(--tc-arc-blue);
    box-shadow: 0 0 8px rgb(138 180 255 / 55%);
}

@keyframes tc-voice-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.35); opacity: 0.72; }
}

.tc-bedside__clock {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.1rem;
}

.tc-bedside__elapsed {
    color: var(--tc-arc-live);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.82rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
}

.tc-bedside__quiet {
    color: var(--tc-arc-warning);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.58rem;
    letter-spacing: 0.05em;
}

/* Reduced motion: the ladder still applies, it just snaps instead of easing.
 * Substitution rather than relying on the canvas-wide blanket, so the intent is
 * explicit at the rule that owns the motion. */
@media (prefers-reduced-motion: reduce) {
    .tc-live-transcript__turn,
    .tc-live-transcript__text,
    .tc-live-transcript__turn-meta {
        transition: none;
    }
}

.tc-visually-hidden {
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* -------------------------------------------------------------------------
 * Room lighting — the canvas ambient follows the patient's stated state.
 * A tint layer eases in when critical facts are active (or, when the
 * projection states it, a worsening/improving trajectory). Color is never
 * the sole signal: the same facts render as text in the nucleus and arc.
 * ------------------------------------------------------------------------- */

.tc-clinical-canvas::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1400ms ease;
    content: "";
}

.tc-clinical-canvas[data-room-tone]::after {
    opacity: 1;
}

.tc-clinical-canvas[data-room-tone="critical"]::after {
    background: radial-gradient(circle at 12% 8%, rgb(255 116 116 / 8%), transparent 30rem);
}

.tc-clinical-canvas[data-room-tone="critical"] {
    border-color: rgb(255 116 116 / 34%);
}

.tc-clinical-canvas[data-room-tone="worsening"]::after {
    background: radial-gradient(circle at 12% 8%, rgb(255 196 107 / 7%), transparent 30rem);
}

.tc-clinical-canvas[data-room-tone="improving"]::after {
    background: radial-gradient(circle at 12% 8%, rgb(126 226 168 / 6%), transparent 30rem);
}

/* -------------------------------------------------------------------------
 * Critical arrivals flare once, then rest. Open branches hold a lantern.
 * ------------------------------------------------------------------------- */

.tc-clinical-knot.is-new.is-critical .tc-clinical-knot__shape {
    animation: tc-critical-flare 1.5s ease-out 1;
}

@keyframes tc-critical-flare {
    0% { box-shadow: 0 0 0 0 rgb(255 116 116 / 60%); }
    100% { box-shadow: 0 0 0 1.1rem rgb(255 116 116 / 0%); }
}

.tc-evidence-river__marker.is-critical {
    box-shadow: 0 0 10px rgb(255 116 116 / 45%);
}

.tc-flow-scene--open .tc-flow-scene__marker {
    box-shadow: 0 0 12px rgb(255 196 107 / 30%);
}

/* Provisional speech breathes with the speaker while words settle. */
.tc-live-transcript__partial {
    border-left: 2px solid rgb(138 180 255 / 45%);
    animation: tc-partial-breathe 2.2s ease-in-out infinite;
}

@keyframes tc-partial-breathe {
    0%, 100% { opacity: 0.92; }
    50% { opacity: 0.62; }
}

/* Responsive: the rail compresses to one scrollable line under the mobile
   switcher/ribbon rows; panes drop one row down. */
@media (max-width: 1099.98px) {
    .tc-clinical-canvas {
        grid-template-rows: auto auto auto minmax(0, 1fr);
    }

    .tc-clinical-canvas__bedside {
        grid-column: 1;
        grid-row: 3;
    }

    .tc-clinical-canvas__transcript-pane,
    .tc-clinical-canvas__story-pane {
        grid-row: 4;
    }

    .tc-bedside {
        gap: 0.6rem;
        min-height: 2.9rem;
        padding: 0.35rem 0.6rem;
    }

    .tc-bedside__door {
        max-width: 9.5rem;
    }

    .tc-bedside__presence {
        gap: 0.4rem;
    }

    .tc-bedside__voice span:not(.tc-bedside__voice-dot) {
        display: none;
    }

    .tc-bedside__voice.is-speaking span:not(.tc-bedside__voice-dot) {
        display: inline;
    }
}

@media (forced-colors: active) {
    .tc-bedside,
    .tc-bedside__signal,
    .tc-bedside__voice-dot {
        border: 1px solid CanvasText;
    }

    .tc-bedside__signal.is-selected {
        outline: 2px solid Highlight;
    }
}

/* The renderer toggles [hidden] on rail sections; flex must not defeat it. */
.tc-bedside__signals[hidden],
.tc-bedside__presence[hidden],
.tc-bedside__clock[hidden] {
    display: none !important;
}

/* Phones: the monitor compresses to single-line readings so the rail stays
   one compact strip between the ribbon and the panes. */
@media (max-width: 1099.98px) {
    .tc-bedside__signal {
        min-width: 6.5rem;
        padding-block: 0.24rem;
    }

    .tc-bedside__signal-value {
        -webkit-line-clamp: 1;
        line-clamp: 1;
    }

    .tc-bedside__signal-time {
        display: none;
    }
}

/* -------------------------------------------------------------------------
 * Negative-space agenda (2026-07-18, ENABLE_TC_NEGATIVE_SPACE).
 *
 * The call's remaining agenda: ten registry-static need-slots, fixed order,
 * open or answered. Calm by design — answered dims via a slow opacity-only
 * transition; open is neutral, never alarmed. No keyframes, no reordering.
 * ------------------------------------------------------------------------- */

.tc-clinical-canvas {
    grid-template-rows: auto minmax(0, 1fr) auto;
}

.tc-clinical-canvas__agenda {
    z-index: 2;
    grid-column: 1 / -1;
    grid-row: 3;
    min-width: 0;
}

.tc-agenda {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.4rem;
    padding: 0.3rem 0.9rem;
    border-top: 1px solid var(--tc-arc-line);
    background: rgb(7 16 20 / 78%);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--term-border-default, #2A2720) transparent;
    /* Phase 1 (2026-08-01): the last chip hard-clipped at the panel edge with
       no continuation signal — fade the trailing edge. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 2.2rem), transparent 100%);
}

/* Phase 1 (2026-08-01): the ten slots always overflow this strip, so the raw
   native horizontal scrollbar sat permanently under the bottom band. Give it
   the app's thin custom treatment (pattern: transfer-center.css S22). */
.tc-agenda::-webkit-scrollbar {
    height: 6px;
}

.tc-agenda::-webkit-scrollbar-track {
    background: transparent;
}

.tc-agenda::-webkit-scrollbar-thumb {
    background: var(--term-border-default, #2A2720);
    border-radius: 3px;
}

.tc-agenda::-webkit-scrollbar-thumb:hover {
    background: var(--term-border-strong, #3A352F);
}

.tc-agenda__slot {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.34rem;
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--tc-arc-line);
    border-radius: 1rem;
    color: var(--tc-arc-text);
    background: transparent;
    font: inherit;
    font-size: 0.66rem;
    font-weight: 600;
    white-space: nowrap;
    transition: opacity 450ms ease, border-color 450ms ease;
}

.tc-agenda__slot.is-answered {
    opacity: 0.45;
    border-color: var(--tc-arc-line);
}

/* Only fact-backed answered chips are clickable (rendered as <button>); a
   disposition-only answered "logistics" chip is a non-interactive <span> and
   must not show a hand cursor. */
button.tc-agenda__slot.is-answered {
    cursor: pointer;
}

.tc-agenda__slot.is-open {
    opacity: 1;
}

.tc-agenda__dot {
    width: 0.4rem;
    height: 0.4rem;
    border: 1px solid var(--tc-arc-muted);
    border-radius: 50%;
    background: transparent;
}

.tc-agenda__slot.is-answered .tc-agenda__dot {
    border-color: var(--tc-arc-live);
    background: var(--tc-arc-live);
}

.tc-agenda__open-copy {
    color: var(--tc-arc-faint);
    font-family: var(--term-font-mono, monospace);
    font-size: 0.56rem;
    font-weight: 500;
}

@media (max-width: 1099.98px) {
    .tc-clinical-canvas {
        grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    }

    .tc-clinical-canvas__agenda {
        grid-column: 1;
        grid-row: 5;
    }

    .tc-agenda {
        padding: 0.28rem 0.6rem;
    }
}

@media (forced-colors: active) {
    .tc-agenda__slot,
    .tc-agenda__dot {
        border-color: CanvasText;
    }
}

/* -------------------------------------------------------------------------
   WORKING NOTES SHEET (2026-07-28, ENABLE_TC_WORKING_NOTES)
   -------------------------------------------------------------------------
   PROBLEM: for the whole duration of a live call this file hides all three
   MANUAL-ONLY capture lanes behind `display: none !important` — chart
   materials by id (the `#tcChartMaterialsField` rule), pre-transport orders
   and specialist input via `.tc-decision-detail`, and both again through the
   two `>` child sweeps on .tc-workspace-form and .tc-recorder. The comment on
   that block says the fields "remain mounted and writable"; mounted yes,
   writable by a human no — display:none is not focusable, clickable or
   pasteable. So the doctor could not write anything down during the one
   window in which it is said, and the transfer-note prompt asks the note to
   report exactly those facts (pre-transport orders, specialist involvement).

   APPROACH: do not weaken the live layout — it exists so nothing competes
   with the transcript, and a rows=10 paste well in the recorder column would
   eat the canvas. Instead un-hide the EXISTING nodes in place and float them
   into a right-hand sheet, narrowing the canvas rather than covering it, so
   the conversation stays readable while the doctor types. No DOM relocation:
   every autosave / extraction / provenance binding survives untouched and
   nothing can be stranded in the wrong parent by a bad close.

   SPECIFICITY (why each override is shaped the way it is — these fight real
   `!important` rules, so do not "simplify" the selectors):
     - `#tcChartMaterialsField` is hidden by an ID selector (1,2,0). Only
       another ID selector can win, hence the id is repeated here inside a
       longer body-scoped chain (1,4,1).
     - `.tc-decision-detail` is hidden twice: directly (0,3,0) and by
       `.tc-workspace-form > :not(.tc-topbar):not(.tc-bottom-panel)`, which
       counts BOTH :not() arguments and lands at (0,5,0). The override below
       re-states the child combinator and adds `body` to reach (0,5,1).
   VERTICAL SPLIT is deterministic on purpose: the paste well takes a fixed
   share and the two short lanes take the remainder, so neither depends on the
   other's content height. Both scroll internally. ------------------------- */

/* GEOMETRY IS ANCHORED TO THE CANVAS RECTANGLE, not to magic rem offsets.
   The first cut pinned the sheet to `top: 7.6rem; right: 1.4rem; bottom: 1.4rem`
   — a blind full-height right column — and a browser measurement showed it
   sitting squarely on top of #tcStopBtn: elementFromPoint at the Stop button's
   own centre returned #tcInboundSpecialist. That breaks the live-call contract
   that Stop Recording and End Call stay pointer-active, and it would have hit
   whatever else the layout happens to put on the right. working-notes.js writes
   --tc-wn-top/-bottom/-right from the canvas's measured rect before the sheet
   opens, so the sheet can only ever occupy space the canvas is giving up. The
   values below are the fallback for a dead module: a sheet that is slightly
   mispositioned is recoverable, one that swallows the hangup button is not, so
   the fallback deliberately clears the control rail. */
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live {
    --tc-wn-width: clamp(19rem, 32vw, 27rem);
    --tc-wn-top: 12rem;
    --tc-wn-bottom: 1.4rem;
    --tc-wn-right: 1.4rem;
    --tc-wn-head: 2.9rem;         /* sheet header + hint */
    --tc-wn-gap: 0.55rem;
    /* Fixed share of the sheet body: neither panel depends on the other's
       content height, so they cannot collide as content grows. */
    /* THE SHORT LANES OWN A FIXED SLICE OFF THE BOTTOM; the paste well takes
       whatever is left. Pre-transport (2 rows) + specialist (1 input) have a
       known small natural height, so pinning THEM and letting the WELL absorb
       every squeeze means a short sheet degrades to a cramped paste box rather
       than to lanes that collide and become unclickable. The first cut split by
       percentage and #tcPreTransport measured "painted but covered" whenever
       the sheet was short. */
    --tc-wn-lanes-h: 13.75rem;   /* measured: 11rem clipped #tcInboundSpecialist */
}

/* Sheet chrome. Body-level + fixed, so no hidden ancestor can swallow it. */
.tc-working-notes {
    position: fixed;
    /* BORDER-BOX IS LOAD-BEARING. The canvas yields exactly `--tc-wn-width +
       gap` of margin; as content-box the sheet's own padding (0.85rem x2) and
       border added ~29px on top of that, so it measured 461px against a 440.8px
       gap and overlapped the transcript by 20px — caught on the live app, where
       `--tc-wn-width` clamps to 27rem while 32vw is wider. */
    box-sizing: border-box;
    /* Above every in-page layer (max 10) but below the note drawer (900+) and
       toasts (9999) — the drawer must still cover the sheet, not the reverse. */
    z-index: 120;
    top: var(--tc-wn-top, 12rem);
    right: var(--tc-wn-right, 1.4rem);
    /* HEADER ONLY — no `bottom`, no background. The revealed lanes live in a
       stacking context an ancestor inside the recorder establishes, so their
       z-index 121 is never compared with this aside's 120 and the aside PAINTS
       OVER them however high they are numbered. The first cut gave this element
       a full-height opaque panel background: measurement said the lanes were
       405x218 and focusable, and the screenshot showed an empty box, because
       `pointer-events: none` had made them clickable without making them
       visible. So the chrome is now a transparent header strip and each lane
       carries its own surface below. */
    display: none;
    width: var(--tc-wn-width, 24rem);
    flex-direction: column;
    padding: 0.35rem 0.85rem 0.5rem;
    color: var(--tc-arc-text, #eef7f4);
    /* Safe to paint now, and necessary: this element is header-height only
       (no `bottom`), so it cannot reach the lanes the way the original
       full-height panel did. Without a ground the transcript's own "Live
       transcript" heading showed through the title in expanded mode. */
    border-bottom: 1px solid var(--tc-arc-line, rgb(142 176 175 / 22%));
    border-radius: 0.6rem 0.6rem 0 0;
    background: linear-gradient(
        180deg, var(--tc-arc-deep, #0a1519), var(--tc-arc-void, #071014));
}

/* THE CHROME MUST NOT INTERCEPT CLICKS. The revealed lanes carry z-index 121
   against the sheet's 120, but their z-index is scoped to a stacking context an
   ancestor inside the recorder establishes, so it is never compared with the
   sheet's — measured on the live app, elementsFromPoint at the paste well
   returned [#tcWorkingNotes, #tcChartMaterials] in that order: the field was
   painted, on top visually, and unclickable. Raising the number cannot fix a
   cross-context comparison. This aside is only a background, a title and a
   close button, so it opts out of hit-testing entirely and hands it back to the
   one control that needs it. Robust to any future stacking change. */
.tc-working-notes {
    pointer-events: none;
}

.tc-working-notes__close {
    pointer-events: auto;
}

/* Visibility rides the `hidden` ATTRIBUTE, not the body class, so the a11y
   tree and the paint agree — `body.tc-working-notes-open .tc-working-notes {
   display: flex }` would out-specify the UA `[hidden]` rule and expose a
   sheet that assistive tech had been told was hidden. The body class stays
   responsible for the field positioning below. Markup ships `hidden`, so a
   dead module degrades to no sheet at all rather than a stuck panel. */
.tc-working-notes:not([hidden]) {
    display: flex;
}

.tc-working-notes__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.tc-working-notes__title {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--tc-arc-live, #59e1cf);
}

.tc-working-notes__close {
    padding: 0.1rem 0.5rem;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    color: var(--tc-arc-muted, #98aaa9);
    border: 1px solid transparent;
    border-radius: 0.45rem;
    background: none;
}

.tc-working-notes__close:hover,
.tc-working-notes__close:focus-visible {
    color: var(--tc-arc-text, #eef7f4);
    border-color: var(--tc-arc-line, rgb(142 176 175 / 22%));
}

.tc-working-notes__hint {
    margin: 0.3rem 0 0;
    font-size: 0.66rem;
    line-height: 1.45;
    /* --tc-arc-muted is 7.6:1; --tc-arc-faint (3.96:1) fails WCAG — do not
       swap it in here, same rule as the transcript density ladder. */
    color: var(--tc-arc-muted, #98aaa9);
}

/* Narrow the canvas instead of covering it — the doctor is writing WHILE
   listening, so the transcript must stay on screen and readable. */
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-recorder > .tc-clinical-canvas {
    margin-right: calc(var(--tc-wn-width) + var(--tc-wn-gap));
}

/* Beats the ID-specificity hide at (1,2,0). */
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    #tcChartMaterialsField {
    position: fixed;
    z-index: 121;
    top: calc(var(--tc-wn-top) + var(--tc-wn-head));
    right: calc(var(--tc-wn-right) + 0.85rem);
    bottom: calc(
        var(--tc-wn-bottom) + 0.85rem + var(--tc-wn-lanes-h) + var(--tc-wn-gap)
    );
    display: flex !important;
    box-sizing: border-box;
    width: calc(var(--tc-wn-width) - 1.7rem);
    flex-direction: column;
    overflow: hidden;
    gap: 0.28rem;
    margin: 0;
    max-width: none;
    /* `.tc-clinical-canvas-on .tc-recorder--split #tcChartMaterialsField` caps
       the group at 15rem for the pre-call split layout. In the sheet that left
       the well 240px tall against a `bottom` ~460px lower — a dead gap the
       screenshot showed and the numbers did not. */
    max-height: none;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--tc-arc-line-strong, rgb(174 207 203 / 40%));
    border-radius: 0.9rem;
    background:
        linear-gradient(145deg, var(--tc-arc-deep, #0a1519), var(--tc-arc-void, #071014) 68%);
    box-shadow: 0 1.2rem 2.6rem rgb(0 0 0 / 42%);
}

body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    #tcChartMaterials {
    /* The base rule gives this textarea `field-sizing: content` so the pre-call
       well auto-grows with a paste. Inside the sheet that makes it size to its
       TEXT, and once the 15rem group cap was lifted it collapsed to a single
       18px line inside a 416px panel — measured, and reachable:false because
       the row was too thin to hit. Pin it to the panel instead: fixed sizing
       and a zero flex-basis so it fills whatever height the sheet has. */
    flex: 1 1 0%;
    min-height: 0;
    height: auto;
    max-height: none;
    field-sizing: fixed;
    resize: none;
}

/* Beats the (0,5,0) `>` sweep on .tc-workspace-form. */
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-workspace-form > .tc-decision-detail {
    position: fixed;
    z-index: 121;
    right: calc(var(--tc-wn-right) + 0.85rem);
    bottom: calc(var(--tc-wn-bottom) + 0.85rem);
    height: var(--tc-wn-lanes-h);
    display: flex !important;
    width: calc(var(--tc-wn-width) - 1.7rem);
    box-sizing: border-box;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0;
    overflow-y: auto;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--tc-arc-line-strong, rgb(174 207 203 / 40%));
    border-radius: 0.9rem;
    background:
        linear-gradient(145deg, var(--tc-arc-deep, #0a1519), var(--tc-arc-void, #071014) 68%);
    box-shadow: 0 1.2rem 2.6rem rgb(0 0 0 / 42%);
}

/* The disposition spine also lives in .tc-decision-detail on some layouts;
   the sheet is the three capture lanes only. Anything else stays hidden. */
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-workspace-form > .tc-decision-detail > :not(#tcChartMaterialsField):not(#tcPreTransportField):not(#tcInboundSpecialistField) {
    display: none !important;
}

body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-working-notes ~ * .tc-field-label,
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    #tcChartMaterialsField .tc-field-label,
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-decision-detail .tc-field-label {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: var(--tc-arc-live, #59e1cf);
}

body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    #tcChartMaterials,
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-decision-detail .tc-textarea,
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-decision-detail .tc-input {
    color: var(--tc-arc-text, #eef7f4);
    border: 1px solid var(--tc-arc-line, rgb(142 176 175 / 22%));
    border-radius: 0.55rem;
    background: rgb(7 16 20 / 78%);
}

body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    #tcChartMaterials:focus,
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-decision-detail .tc-textarea:focus,
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-decision-detail .tc-input:focus {
    border-color: var(--tc-arc-live, #59e1cf);
    outline: none;
    box-shadow: 0 0 0 2px rgb(89 225 207 / 22%);
}

/* Trigger button. NOT .tc-call-setup-control — that class is display:none
   during a live call, which is precisely when this button is needed. */
.tc-working-notes-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.34rem;
    min-height: 2.3rem;
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    color: var(--tc-arc-text, #eef7f4);
    border: 1px solid var(--tc-arc-line-strong, rgb(174 207 203 / 40%));
    border-radius: 0.6rem;
    background: rgb(14 27 32 / 82%);
}

.tc-working-notes-btn:hover,
.tc-working-notes-btn:focus-visible {
    border-color: var(--tc-arc-live, #59e1cf);
    background: rgb(89 225 207 / 12%);
}

.tc-working-notes-btn[aria-expanded="true"] {
    color: var(--tc-arc-void, #071014);
    border-color: var(--tc-arc-live, #59e1cf);
    background: var(--tc-arc-live, #59e1cf);
}

/* "There is material in here" — so a doctor who pasted pre-call can see it
   survived without opening the sheet. Count/echo of content, never content. */
.tc-working-notes-dot {
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--tc-arc-warning, #ffc46b);
}

.tc-working-notes-btn[aria-expanded="true"] .tc-working-notes-dot {
    background: var(--tc-arc-void, #071014);
}

/* Below the page's single-column breakpoint the canvas already collapses to
   one pane; a 32vw sheet beside it would leave neither readable. Take the
   full width and let the transcript sit behind — an explicit trade at a size
   the live layout already treats as degraded. */
@media (max-width: 1100px) {
    body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live {
        --tc-wn-width: calc(100vw - var(--tc-wn-right) - 1.4rem);
    }

    body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
        .tc-recorder > .tc-clinical-canvas {
        margin-right: 0;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .tc-working-notes,
    body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
        .tc-recorder > .tc-clinical-canvas {
        transition: margin-right 140ms ease-out;
    }
}

@media (forced-colors: active) {
    .tc-working-notes,
    .tc-working-notes-btn {
        border-color: CanvasText;
    }
}

/* A recovered call can coexist with a read-only/no-selection recorder, and
   `.tc-recorder--disabled > :not(.tc-clinical-canvas)` sets `pointer-events:
   none` on every other recorder child — which catches the revealed paste well.
   Measured on the live app: elementFromPoint at the centre of #tcChartMaterials
   returned #tcWorkingNotes, i.e. the field was painted, on top, and inert. The
   file already makes exactly this exception for the terminal call actions; the
   working-notes lanes need it for the same reason. Scoped to the open sheet, so
   a disabled recorder still dims its own controls as before. */
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-recorder.tc-recorder--disabled > #tcChartMaterialsField,
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    .tc-recorder.tc-recorder--disabled > #tcChartMaterialsField * {
    opacity: 1;
    pointer-events: auto;
}

/* -------------------------------------------------------------------------
   WORKING NOTES — EXPAND (2026-07-28, doctor ask)
   -------------------------------------------------------------------------
   "chart materials is a giant goddamn piece... sometimes that's a shit ton of
   data and I need to scroll through and see what's in there... everything
   we've ever tried with enlarging the shitty old html text box never does it
   automatically so I'm sitting there trying to get the mouse to click on the
   goddamn enlarging thing which only works half the time."

   So: NO drag-grip resizing anywhere in this sheet. The paste box is always
   exactly the panel it sits in and the content SCROLLS — there is nothing to
   drag and nothing to miss. When a dump needs surveying, one control (or
   Alt+Shift+X) swaps the sheet from the docked third-of-canvas column to the
   full canvas width. Still anchored to the canvas rect, so expanding can never
   reach the control rail and swallow Stop / End Call.
   ------------------------------------------------------------------------- */

.tc-working-notes__actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    pointer-events: auto;
}

.tc-working-notes__expand {
    padding: 0.15rem 0.5rem;
    font: inherit;
    font-family: var(--tc-mono, ui-monospace, monospace);
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    color: var(--tc-arc-muted, #98aaa9);
    border: 1px solid var(--tc-arc-line, rgb(142 176 175 / 22%));
    border-radius: 0.35rem;
    background: none;
    pointer-events: auto;
}

.tc-working-notes__expand:hover,
.tc-working-notes__expand:focus-visible {
    color: var(--tc-arc-live, #59e1cf);
    border-color: var(--tc-arc-live, #59e1cf);
}

.tc-working-notes__expand[aria-pressed="true"] {
    color: var(--tc-arc-void, #071014);
    border-color: var(--tc-arc-live, #59e1cf);
    background: var(--tc-arc-live, #59e1cf);
}

/* Expanded: the sheet takes the canvas. The canvas is NOT narrowed here — at
   full width there is nothing left to narrow it to, and this is the "read the
   dump" mode, not the "listen and type" mode. One key puts it back. */
body.tc-working-notes-open.tc-working-notes-expanded.tc-clinical-canvas-on.tc-clinical-live {
    --tc-wn-width: var(--tc-wn-canvas-w, 60vw);
}

body.tc-working-notes-open.tc-working-notes-expanded.tc-clinical-canvas-on.tc-clinical-live
    .tc-recorder > .tc-clinical-canvas {
    margin-right: 0;
}

/* THE PASTE SURFACES FILL THEIR PANEL AND SCROLL — both of them.
   `.tc-chart-view` ships `max-height: 260px` ("≈ the rows=10 textarea it
   replaces"), which is exactly the cramped ceiling this is meant to lift; the
   raw textarea carries `min-height: 260px` + `max-height: 62vh` from the
   pre-call split layout. Inside the sheet neither should have an opinion: the
   panel decides the size, the content scrolls. */
body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    #tcChartMaterialsView {
    flex: 1 1 0%;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    overscroll-behavior: contain;
}

body.tc-working-notes-open.tc-clinical-canvas-on.tc-clinical-live
    #tcChartMaterials {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Expanded gives the dump the height too, not just the width. The two short
   lanes keep their pinned slice at the bottom so they never get lost. */
body.tc-working-notes-open.tc-working-notes-expanded.tc-clinical-canvas-on.tc-clinical-live
    #tcChartMaterialsField {
    right: calc(var(--tc-wn-right) + 0.85rem);
}

/* Expanded must buy HEIGHT, not just width — a wall of labs is long, not wide.
   Measured: expanding widened the read surface 380px -> 972px but left it at
   350px tall, because the sheet is anchored to the canvas rect and the two
   short lanes were still holding their full 13.75rem slice. Side-by-side they
   need about half that (a 2-row textarea and a 1-line input), which hands the
   difference to the dump. They stay REACHABLE rather than hidden: a doctor
   reading a dump is exactly who wants to jot "CT before transport". */
body.tc-working-notes-open.tc-working-notes-expanded.tc-clinical-canvas-on.tc-clinical-live {
    --tc-wn-lanes-h: 6.75rem;
}

body.tc-working-notes-open.tc-working-notes-expanded.tc-clinical-canvas-on.tc-clinical-live
    .tc-workspace-form > .tc-decision-detail {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: 0.65rem;
    overflow: hidden;
}

/* Post-call assembly (2026-07-29, data-story-phase="assembling")
   The empty state's copy is true but static, so for the 15-85s the projection
   actually takes it is indistinguishable from "nothing is coming" -- which is
   precisely how a working panel got reported as dead. Set by clinical-canvas.js
   while the post-call poll is in flight; removed on every terminal phase. */
#tcClinicalCanvas[data-story-phase="assembling"] .tc-transfer-arc__empty-kicker::after {
    content: " — assembling";
    color: var(--tc-loom-brass, #c8a45c);
}
#tcClinicalCanvas[data-story-phase="assembling"] .tc-transfer-arc__empty-path {
    animation: tc-story-assembling 1.6s ease-in-out infinite;
}
@keyframes tc-story-assembling {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
    #tcClinicalCanvas[data-story-phase="assembling"] .tc-transfer-arc__empty-path {
        animation: none;
        opacity: 0.85;
    }
}