/* transfer-ux-polish.css * Transfer Center — UX overhaul Phase 1 (2026-07-30, flag ENABLE_TC_UX_POLISH) * * WHY this file exists: the surface's clinical information architecture is * strong, but its visual language fails the doctor — sub-11px all-caps * everywhere, dim-on-dim contrast, and nested box chrome. Phase 1 establishes * the token foundation and the two "trust" workstreams on top of it: * S-NC note confidence — the saved note as a first-class artifact * S-OW One Well chart materials — permanent, always-editable rail lane * * PRECEDENCE: loaded LAST on /transfer (after transfer-tapestry.css and the * episode sheet). Token overrides use body.tc-page.tc-ux-polish[data-page=...] * — specificity (0,3,1), equal to the tapestry's token block, so load order * decides — and they apply regardless of the named-skin cycle (the polish is * not a skin; it is the floor every skin stands on). Flag-OFF ships zero * bytes: the link tag is Jinja-gated in transfer.html. * * Contracts kept: * - No markup relocation is required by this sheet alone; S-OW's lane markup * is emitted flag-gated from transfer.html. * - Nothing below 11px (0.6875rem) renders for text under this flag. Caps * stay only on true section labels, with tracking retained. * - One accent = one meaning (unchanged from the tapestry): teal = live/ * evidence/primary action, gold = chrome/labels, amber = decision/warn. * - No animation except state pulses already owned by the recorder chrome; * prefers-reduced-motion kills anything new we add. * * PHASE 2 (2026-08-01) — design-token foundation + component grammar: * D1 contrast floor — near-white body text; meta/labels >= 4.5:1 at 11px * D2 all-sans type — serif removed everywhere (Outfit display, DM Sans * body, JetBrains Mono data); --tux-text-* is the only scale * D3 button grammar — exactly four tiers (primary/secondary/tertiary/ * danger), existing controls migrated via CSS only * D4 chip/badge — one grammar, explicit is-selected / is-selectable / * is-disabled / is-danger states * D5 color contract — documented below the token block; the two known * violations enforced here */ /* ========================================================================== COLOR CONTRACT (Phase 2, owner decision 2026-08-01) — one hue = one meaning. Every hue on this surface answers "what does this mean?", never "what looks nice": teal (#4CC4B4, --term-accent/live) = live / confirmed / primary action amber (--term-status-editing #E69A4C family) = decision-required / warning red (--term-status-error #C44C4C / --tc-arc-critical #FF7474) = critical or danger ONLY — never decoration, never a default tone gold (#BFA162, --term-gold) = chrome / labels / brass frame green (--term-status-ready #22C55E) = ACCEPT / positive status ONLY Verified 2026-08-01: .tc-clinical-knot.is-critical's red is NOT a default tone — clinical-story-map.js factTone() only returns 'critical' when the fact model's priority is 'critical' (factPriority(), lines 87-99), so the red knot shape/border is fact-derived and satisfies the contract as-is. The two violations that were NOT fact-derived are corrected in section 8. ========================================================================== */ body.tc-page.tc-ux-polish[data-page="transfer"] { /* ---- Type scale (4px-based rem ladder; floor is 11px) ---------------- */ /* Phase 2: --tux-text-* is the ONLY scale under the flag. 13px (md) and the new 15px step fill the 12→16 jump. */ --tux-text-xs: 0.6875rem; /* 11px — metadata floor, section labels */ --tux-text-sm: 0.75rem; /* 12px — secondary UI */ --tux-text-md: 0.8125rem; /* 13px — UI body (intermediate step) */ --tux-text-lg: 0.875rem; /* 14px — clinical prose (note, transcript) */ --tux-text-15: 0.9375rem; /* 15px — intermediate emphasis step */ --tux-text-xl: 1rem; /* 16px — emphasis */ --tux-text-hero: 1.375rem; /* 22px — state hero (gist headline) */ /* ---- Contrast floor (Phase 2, owner decision: near-white body) -------- Measured against --term-bg-void #0D0805 (L≈0.0027) and, second figure, --term-bg-surface #130D08 (L≈0.0044). Floor: 4.5:1 for any text, including 11px caps labels. The tapestry's --term-fg-muted #8B7355 (≈4.4:1 on void) and the canvas's --tc-arc-faint #637878 (≈3.96:1 on its well) are both UNDER the floor — nothing below --tux-fg-faint may carry text under this flag. */ --tux-fg-faint: #9C8465; /* ≈5.7:1 void / ≈5.6:1 surface — tertiary hints only */ --tux-fg-meta: #B49B74; /* ≈7.7:1 / ≈7.4:1 — labels + metadata at 11px */ --tux-fg-body: #EDE6DA; /* ≈16.1:1 / ≈15.5:1 — near-white reading text */ --tux-fg-strong: #FFF7EE; /* ≈18.9:1 / ≈18.3:1 — emphasis */ /* ---- All-sans (Phase 2, owner decision: serif removed everywhere) ----- The tapestry (transfer-tapestry.css:84) re-points --term-font-display to a serif stack at equal specificity (0,3,1) — load order decides, and this sheet is last. phosphor-pure's all-mono display (0,1,1) also yields. One override re-voices every consumer (logo, card names, decision mains, accept tag, NOW nucleus, generate button). */ --term-font-display: 'Outfit', 'Inter', sans-serif; /* ---- Spacing scale (4px base) ---------------------------------------- */ --tux-space-1: 4px; --tux-space-2: 8px; --tux-space-3: 12px; --tux-space-4: 16px; --tux-space-5: 24px; --tux-space-6: 32px; /* ---- Surfaces: hairlines over boxes ----------------------------------- */ --tux-hairline: rgba(191, 161, 98, 0.18); --tux-hairline-strong: rgba(191, 161, 98, 0.32); --tux-radius: 8px; --tux-radius-sm: 6px; --tux-panel-bg: rgba(27, 19, 12, 0.55); /* --term-bg-elevated lifted */ /* ---- Focus: one visible ring everywhere under the flag ---------------- */ --tux-focus-ring: 0 0 0 2px rgba(76, 196, 180, 0.55); } /* ========================================================================== 1 · TYPE FLOOR — the worst sub-11px offenders, bumped to the floor. Each selector was verified sub-11px in its owning sheet. Bumps are to --tux-text-xs (11px) except clinical prose, which goes to --tux-text-lg. Color moves to the contrast-safe meta where the source used fg-muted. ========================================================================== */ /* Rail bay + card decision meta floors: MIGRATED to transfer-unified.css (slice 2, 2026-08-02) — folded into the base rules. */ /* Field + column labels (transfer-center.css / canvas sheets: ~0.62-0.66rem) */ body.tc-ux-polish .tc-field-label, body.tc-ux-polish .tc-col-label { font-size: var(--tux-text-xs); color: var(--tux-fg-meta); } /* 2026-08-01: labels that carry a real Phosphor icon in markup (e.g. the header DATE label, tc-field-label--icon) suppress the legacy '$ ' pseudo-glyph from transfer-center.css:949. */ body.tc-ux-polish .tc-field-label--icon::before { content: none; } /* Footer note tab + status (the reopen affordance — must be legible) */ body.tc-ux-polish .tc-note-tab, body.tc-ux-polish .tc-note-status { font-size: var(--tux-text-xs); } /* Chart-materials formatted view hint (0.5rem) */ body.tc-ux-polish .tcv-hint { font-size: var(--tux-text-xs); } /* ========================================================================== 2 · FOCUS + SELECTION — one consistent treatment under the flag. ========================================================================== */ body.tc-ux-polish :is(button, [role="button"], input, select, textarea, a):focus-visible { outline: none; box-shadow: var(--tux-focus-ring); } body.tc-ux-polish ::selection { background: rgba(76, 196, 180, 0.28); color: var(--tux-fg-strong); } /* ========================================================================== 3 · S-NC NOTE CONFIDENCE (Workstream A, 2026-07-30) The saved note as a first-class artifact: a wider reading column, prose set for reading, a persistent saved chip, Generate→View mode, and the rail-card note badge. ========================================================================== */ /* The reading column widens from 480px (a rail) to a true measure. Drawer width and the episode-tapestry dock margin share --tc-note-drawer-w, so one token moves both. */ body.tc-page.tc-ux-polish[data-page="transfer"] { --tc-note-drawer-w: clamp(26rem, 32vw, 38rem); } /* Note prose: 14px / 1.6 — the note is READ here, then copied into the EHR. */ body.tc-ux-polish .tc-note-output { font-size: var(--tux-text-lg); line-height: 1.6; color: var(--tux-fg-body); padding: var(--tux-space-5) var(--tux-space-6); } body.tc-ux-polish .tc-note-section { font-size: var(--tux-text-sm); letter-spacing: 0.08em; margin: 1.5em 0 0.4em; } /* Footer artifact chip (tcNoteTab): always solid, legible, beside Generate — the persistent "your note exists and is saved" signal. */ body.tc-ux-polish .tc-note-tab { display: inline-flex; align-items: center; gap: var(--tux-space-2); min-height: 2.4rem; padding: 0.45rem 0.8rem; font-size: var(--tux-text-xs); letter-spacing: 0.06em; color: var(--tux-fg-body); border: 1px solid var(--term-accent-dim, rgba(76, 196, 180, 0.4)); border-style: solid; /* kills the dashed "promise" treatment */ border-radius: var(--tux-radius-sm); background: rgba(76, 196, 180, 0.08); cursor: pointer; } body.tc-ux-polish .tc-note-tab:hover, body.tc-ux-polish .tc-note-tab:focus-visible { background: rgba(76, 196, 180, 0.16); color: var(--tux-fg-strong); } body.tc-ux-polish .tc-note-tab-glyph { color: var(--term-accent, #4CC4B4); } body.tc-ux-polish .tc-note-tab[hidden] { display: none; } /* Generate→View mode: the primary advertises the artifact it opens. B1 (2026-07-30): was a solid saturated-teal block — the loudest element on the screen, off the surface's muted language, and its 0.10em-tracked uppercase label clipped inside the 320px rail footer. Phase 2 (2026-08-01): VIEW TRANSFER NOTE is the SECONDARY tier (full- contrast outline, teal accent language) — the note already exists, so the button re-opens rather than creates. One line, sized to content: the Phase 1 wrap (white-space:normal) produced a 2-3 line label in the rail footer, and transfer-center.css:1658's min-width:260px out-sized the content. Both yield here. */ body.tc-ux-polish .tc-generate-btn[data-mode="view"] { background: color-mix(in srgb, var(--term-accent, #4CC4B4) 10%, transparent); border: 1px solid color-mix(in srgb, var(--term-accent, #4CC4B4) 55%, transparent); color: var(--term-accent, #4CC4B4); letter-spacing: 0.06em; padding: 0.55rem var(--term-space-lg, 16px); white-space: nowrap; line-height: 1.25; } body.tc-ux-polish .tc-generate-btn[data-mode="view"]:hover { background: color-mix(in srgb, var(--term-accent, #4CC4B4) 18%, transparent); border-color: var(--term-accent, #4CC4B4); color: var(--tux-fg-strong, #FFF7EE); box-shadow: none; transform: none; } /* The footer's "Note · Saved" pill + button share one rail-width row: the button takes exactly its content width (never the full footer, never a wrapped label). Beats transfer-center.css:1658's min-width:260px. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-workspace-footer .tc-generate-btn[data-mode="view"] { flex: 0 0 auto; width: auto; min-width: 0; } /* B4 (2026-07-30): the drawer foot was three dim ghost buttons — the doctor looked for "new note" and found nothing actionable. Phase 2 (2026-08-01): the drawer foot now speaks the four-tier grammar (section 6): New Note = SECONDARY (outlined, full contrast — it rebuilds the artifact, it is not the drawer's primary), Copy = SECONDARY with a visible border (the fg-secondary-on-border-default ghost read as disabled), Save Note = PRIMARY (the one filled teal action — the drawer's commit verb). New Note keeps its left-most slot. */ body.tc-ux-polish #tcRegenerateNoteBtn { order: -1; margin-right: auto; } body.tc-ux-polish #tcNoteModal .tc-note-modal-actions .tc-btn, body.tc-ux-polish #tcNoteModal .tc-note-modal-actions .tc-btn-primary { padding: 0.45rem 0.9rem; font-size: var(--tux-text-sm, 0.75rem); letter-spacing: 0.04em; } /* Rail card saved-note glyph: MIGRATED to transfer-unified.css (slice 2). */ /* ========================================================================== 4 · S-OW ONE WELL CHART MATERIALS (Workstream B, 2026-07-30; SLAB FOLD Series 4, 2026-08-08) The permanent rail lane. Contracts: - The slab view is the visible surface once data-slab-ready is stamped; without it (dead module) the plain canonical textarea renders — fail-open. - Every doctor write lands in #tcChartMaterials via the canonical input event; slab boundaries are browser sidecar metadata, never in the string. - Grid mechanics per the amended plan: the episode 5-row grid governs live (it out-specifies the canvas 2-row grid), so the lane extends THAT grid; every live-restored child gets an explicit hide-or-place — no implicit rows anywhere. - Sizing is container-driven: docked clamp / one-click expand. No drag grips, no JS measurement, no position:fixed. ========================================================================== */ /* ---- Lane chrome ---------------------------------------------------------- */ body.tc-ux-polish .tc-one-well { display: flex; flex-direction: column; box-sizing: border-box; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid var(--tux-hairline-strong); border-radius: var(--tux-radius); background: var(--tux-panel-bg); } body.tc-ux-polish .tc-one-well__head { display: flex; flex: 0 0 auto; align-items: center; gap: var(--tux-space-2); padding: var(--tux-space-1) var(--tux-space-2) var(--tux-space-1) var(--tux-space-3); border-bottom: 1px solid var(--tux-hairline); font-size: var(--tux-text-xs); color: var(--tux-fg-meta); cursor: pointer; user-select: none; } /* Phase 1 (2026-08-01): header-row collision fixes. "Chart materials" + "3,293 chars" + "Saved · HH:MM" + Expand/Clear crowd one rail-width row. Order of yield: the char count ellipsizes first, the saved stamp keeps its full width (a clipped "Saved · 10:5" reads as broken chrome), the title never wraps to a second line. */ body.tc-ux-polish .tc-one-well__title { flex: 0 0 auto; white-space: nowrap; letter-spacing: 0.08em; color: var(--tux-fg-body); } body.tc-ux-polish .tc-one-well__meta { display: inline-flex; flex: 0 1 auto; align-items: baseline; gap: var(--tux-space-2); min-width: 0; overflow: hidden; white-space: nowrap; } body.tc-ux-polish .tc-one-well__count { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.tc-ux-polish .tc-one-well__save { flex: 0 0 auto; max-width: 9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--term-accent, #4CC4B4); } body.tc-ux-polish .tc-one-well__actions { display: inline-flex; flex: 0 0 auto; gap: var(--tux-space-1); margin-left: auto; white-space: nowrap; } body.tc-ux-polish .tc-one-well__action { padding: 0.1rem 0.45rem; border: 1px solid var(--tux-hairline); border-radius: var(--tux-radius-sm); background: transparent; color: var(--tux-fg-meta); font-size: var(--tux-text-xs); cursor: pointer; } body.tc-ux-polish .tc-one-well__action:hover, body.tc-ux-polish .tc-one-well__action:focus-visible { color: var(--tux-fg-strong); border-color: var(--tux-hairline-strong); } body.tc-ux-polish .tc-one-well__action--undo { color: var(--term-accent, #4CC4B4); border-color: var(--term-accent-dim, rgba(76, 196, 180, 0.4)); } /* ---- Body: SLAB FOLD view (Series 4 / Mockup A, 2026-08-08) --------------- The underlay + transparent-textarea pair is DELETED: folding compresses a pasted dump to one header line, so the metric parity the transparency trick required cannot hold by design. The rendered slab view is now the visible surface; the canonical #tcChartMaterials textarea is hidden ONLY once one-well.js stamps data-slab-ready (fail-open: a dead module leaves the plain textarea, exactly the old H4 convention). */ body.tc-ux-polish .tc-one-well__body { position: relative; flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; } body.tc-ux-polish .tc-one-well #tcChartMaterialsField { position: relative; max-width: none; margin: 0; height: 100%; min-height: 0; } body.tc-ux-polish .tc-one-well #tcChartMaterialsField > .tc-field-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } body.tc-ux-polish .tc-one-well #tcChartMaterials { position: relative; display: block; width: 100%; height: 100%; min-height: 0; max-height: none; resize: none; field-sizing: fixed; /* the 07-28 one-line collapse bug */ padding: var(--term-space-sm, 8px) var(--term-space-md, 12px); overflow-y: auto; } body.tc-ux-polish .tc-one-well #tcChartMaterials::placeholder { color: var(--tux-fg-meta); opacity: 1; } /* Once the slab view is provably live, the raw textarea leaves the visual flow — it stays mounted as the one canonical data element (autosave, extraction, provenance, populateForm all keep targeting it). */ body.tc-ux-polish .tc-one-well[data-slab-ready="1"] #tcChartMaterialsField { display: none; } body.tc-ux-polish .tc-slab-view { flex: 1 1 0%; min-height: 0; display: flex; flex-direction: column; background: var(--term-bg-elevated, #1B140C); border-radius: 3px; overflow: hidden; } body.tc-ux-polish .tc-slab-view[hidden] { display: none; } body.tc-ux-polish .tc-slab-segments { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--term-space-sm, 8px) var(--term-space-md, 12px); font-family: var(--term-font-body); font-size: var(--tux-text-md); line-height: 1.6; white-space: pre-wrap; overflow-wrap: break-word; color: var(--tux-fg-body); cursor: text; } /* Rendered-line tints (shared renderChartMaterialLine vocabulary). */ body.tc-ux-polish .tc-slab-segments .tcv-header { margin: 0; padding: 0; border: 0; font-weight: 700; letter-spacing: 0.08em; color: var(--term-gold, #D4A857); } body.tc-ux-polish .tc-slab-segments .tcv-blank { height: 1.6em; } body.tc-ux-polish .tc-slab-segments .tcv-hi { color: var(--term-red, #E55A50); font-weight: 600; } body.tc-ux-polish .tc-slab-segments .tcv-lo { color: var(--term-blue, #5B9BD5); font-weight: 600; } /* Slabs: one header line each; open slab scrolls internally. */ body.tc-ux-polish .tc-slab { margin: 6px 0; border: 1px solid var(--term-border-default, #2A2720); border-radius: 4px; background: var(--term-bg-surface, #13120F); white-space: normal; } body.tc-ux-polish .tc-slab__head { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 10px; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--term-font-mono, 'JetBrains Mono', monospace); font-size: var(--term-text-xs, 0.6875rem); color: var(--term-fg-secondary); } body.tc-ux-polish .tc-slab--open > .tc-slab__head { border-bottom: 1px solid var(--term-border-default, #2A2720); } body.tc-ux-polish .tc-slab__tri { color: var(--term-gold, #D4A857); font-size: 9px; } body.tc-ux-polish .tc-slab__kind { color: var(--term-gold, #D4A857); letter-spacing: 0.05em; } body.tc-ux-polish .tc-slab__meta { color: var(--tux-fg-meta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.tc-ux-polish .tc-slab__content { padding: 6px 12px; max-height: 16rem; overflow-y: auto; white-space: pre-wrap; } /* Jot composer: the one place typing lands — native caret, gold cursor bar. */ body.tc-ux-polish .tc-slab-compose { flex: 0 0 auto; display: flex; align-items: baseline; gap: 8px; padding: 4px var(--term-space-md, 12px) 6px; border-top: 1px solid var(--term-border-default, #2A2720); } body.tc-ux-polish .tc-slab-compose__ts { font-family: var(--term-font-mono, 'JetBrains Mono', monospace); font-size: 10px; color: var(--tux-fg-meta); } body.tc-ux-polish .tc-slab-compose__input { flex: 1 1 auto; min-height: 1.6em; max-height: 6em; resize: none; field-sizing: content; border: 0; border-left: 2px solid var(--term-gold, #D4A857); border-radius: 0; padding: 0 0 0 8px; background: transparent; color: var(--tux-fg-body); font-family: var(--term-font-body); font-size: var(--tux-text-md); line-height: 1.6; caret-color: var(--tux-fg-strong); } body.tc-ux-polish .tc-slab-compose__input:focus { outline: none; } body.tc-ux-polish .tc-slab-compose__input::placeholder { color: var(--tux-fg-meta); opacity: 1; } /* ---- Desktop grid (>=1200px): insert the lane as col-2 row above NOW ------ */ /* ROWS ARE NOT DECLARED HERE (2026-08-06, Stage 2 consolidation): this block carried a grid-template-rows that was DEAD — the A1 rebalance block below redeclares the rows for the identical selector at equal specificity and always won by source order. The at-rest rows now have exactly ONE home (the A1 block). What remains here: child placements + the expanded variant (higher specificity, distinct state — NOT covered by the A1 block). */ @media (min-width: 1200px) { body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-one-well { grid-column: 2; grid-row: 3; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-episode-now { grid-row: 5; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-decision-spine { grid-row: 6; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-workspace-footer { grid-row: 7; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-bottom-panel { grid-row: 3 / 8; } /* Expanded: the lane takes the rail (~7fr of the flex band); NOW collapses to its own header strip, one click back. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-one-well-expanded #tcWorkspaceForm { grid-template-rows: auto auto /* origin strip — same as the base template */ minmax(0, 7fr) auto /* LABS fishbone (col 2) */ auto clamp(10rem, 20vh, 11.5rem) /* decision row DELIBERATELY keeps the pre-A1 height here — owner ruling 2026-08-06: the A1 rebalance (13.5rem/30.5vh/18.5rem) applies to the at-rest template only */ auto; } body.tc-one-well-expanded .tc-episode-now #tcEpisodeNowSummary { display: none; } /* REMOVED 2026-08-02 with the "Edit transfer details" toggle (owner ruling): the two grid-row shims that re-placed its overlay under the one-well lane. The overlay itself is gone from transfer-episode-tapestry.css. */ } /* ---- Live call: strip, suppresses, and the expanded survey ---------------- Every rule that un-hides a form child during live must beat the canvas child sweep (0,5,0, !important) and/or the episode restores ((1,4,1), !important) — specificity here is load-bearing and fenced by tests/js/transfer-one-well-2026-07-30.test.mjs. */ /* The lane survives the live child sweep in every state (strip or expanded). */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live #tcWorkspaceForm.tc-workspace-form > .tc-one-well { display: flex !important; } /* Decision-spine restore suppressed: the canvas owns the call. Footer stays visible (Generate/View-note reachable mid-call). The origin strip's live suppression lives in transfer-unified.css (slice 2). */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live #tcWorkspaceForm > .tc-decision-spine { display: none !important; } /* Strip mode (live, not expanded): the header line IS the lane. */ body.tc-clinical-live.tc-ux-polish:not(.tc-one-well-expanded) .tc-one-well .tc-one-well__body { display: none; } body.tc-clinical-live.tc-ux-polish:not(.tc-one-well-expanded) .tc-one-well #tcOneWellClear { display: none; } /* Expanded-live: the field must beat the canvas live hide ((1,2,0), !important), and the decision-detail lanes (pre-transport + specialist — owner decision 2026-07-30: the retired sheet was their only mid-call path) reveal under the well. */ body.tc-clinical-canvas-on.tc-clinical-live.tc-one-well-expanded.tc-ux-polish .tc-one-well #tcChartMaterialsField { display: block !important; } body.tc-clinical-canvas-on.tc-clinical-live.tc-one-well-expanded.tc-ux-polish #tcWorkspaceForm.tc-workspace-form > .tc-decision-detail { display: grid !important; grid-column: 1 / -1; grid-row: 4; max-height: 9rem; overflow-y: auto; min-width: 0; } /* Renderer-failure fallback: keep the lane reachable there too. */ body[data-tc-episode-fallback="1"].tc-clinical-live.tc-ux-polish #tcWorkspaceForm > .tc-one-well { display: flex !important; } /* Live grid mechanics (>=1200px — the episode 5-row grid is the one that governs live; extend IT, never the canvas 2-row grid). Row 2 (origin) and row 5 (decision) collapse to 0 because their children are hidden — a display:none item does NOT collapse its track. */ @media (min-width: 1200px) { /* Live rows (instruments 2026-08-02): row 4 is the LABS fishbone (col 2, auto) — the case keeps assembling visually mid-call. Canvas + NOW ride row 5, matching the base placements above so no live override of the NOW/decision/footer rows is needed. The bottom panel (recorder+canvas, col 1) starts at row 4: it spans rows 4-8 so row 4's LABS track (col 2 only) no longer leaves a column-1 hole mid-call (2026-08-04). */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live #tcWorkspaceForm { grid-template-rows: auto 0 auto auto minmax(7.5rem, 1fr) 0 auto; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live #tcWorkspaceForm.tc-workspace-form > .tc-one-well { grid-column: 1 / -1; grid-row: 3; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live .tc-bottom-panel { grid-row: 4 / 8; } /* BREADCRUMB (2026-08-04) — the upper-middle live-call void: row 4 seated only the LABS panel (col 2), and its ~26vh track left a same-sized hole in col 1 (worst on small displays; measured 210px at 1366x768). Rule for future agents editing this grid: EVERY live child must be explicitly hidden or placed, and any NEW runtime-mounted child must be seated here when added — an unoccupied track or implicit row IS the defect class. Fences: tests/playwright/test_tc_live_layout_bounded_2026_08_04.py (geometry, red pre-fix) and tests/js/transfer-one-well-2026-07-30.test.mjs. Evidence: artifacts/layout-refinement-2026-08-04/. Same root pattern on the admissions page: the verify-split .awm-intake seating fix. */ /* Live is a bounded instrument: restate the shell contract at live-state specificity so no content-driven unlock can re-open the page mid-call (the at-rest instrument unlocks are :not(.tc-clinical-live)-gated). */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live .tc-workspace { height: 100%; overflow: hidden; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live #tcWorkspaceForm { height: 100%; min-height: 0; /* 2026-08-06 (owner): the live lock now bounds the TEMPLATE only — overflow-y:auto lets the doctor scroll to clipped content on short viewports mid-call; the rows themselves are unchanged, so nothing re-opens the page. */ overflow-x: hidden; overflow-y: auto; } /* Expanded-live survey: well ~5fr full width, decision-detail lanes beneath it (row 4), canvas + NOW below, labs fishbone (row 6, col 2) under the NOW rail. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live.tc-one-well-expanded #tcWorkspaceForm { grid-template-rows: auto 0 minmax(0, 5fr) auto minmax(0, 4fr) auto auto; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live.tc-one-well-expanded .tc-episode-now { grid-row: 5; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live.tc-one-well-expanded .tc-bottom-panel { grid-row: 5 / 8; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live.tc-one-well-expanded #tcWorkspaceForm.tc-workspace-form > .tc-one-well { grid-column: 1 / -1; grid-row: 3; } } /* ---- Sub-desktop stack (<1200px): DOM-order flow, docked height ----------- */ @media (max-width: 1199.98px) { body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-one-well { grid-column: 1; grid-row: auto; height: clamp(11rem, 32vh, 26rem); margin-top: 0.65rem; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-clinical-live:not(.tc-one-well-expanded) .tc-one-well { height: auto; /* live strip mode: the header line IS the lane — no docked shell */ } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"].tc-one-well-expanded .tc-one-well { height: 60vh; } } /* ---- A1 (2026-07-30): accept block clipped inside the decision spine ------- The spine card (decision row, col 2) is ~11.5rem, but its content — DECISION label + 4-way buttons + accept block (bed chips / destination / tier / bed req'd) — measures ~26rem. The accept block sat below the fold of an internally-scrolling card with no scroll affordance: the bed chips were effectively unreachable, which is a capture-path break (chips-cheap fields must be clickable), and the visible sliver read as a duplicate "Accept" row. Fix: (1) compact the accept block to two tight rows, (2) rebalance the grid so the decision row can hold it — one-well and origin yield a little, the flexible canvas row keeps its floor. overflow-y:auto stays as the short-viewport fallback, but at normal laptop heights nothing clips. */ @media (min-width: 1200px) { body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] #tcWorkspaceForm { grid-template-rows: auto /* 1 topbar */ auto /* 2 origin STRIP (slice 2, 2026-08-02): band retired; the strip sizes itself. SINGLE HOME (2026-08-06): this A1 block is the ONLY at-rest grid-template-rows declaration — the dead duplicate above was removed in the Stage-2 consolidation. Edit rows here and nowhere else. */ clamp(9rem, 24vh, 20rem) /* 3 ONE WELL (col 2) */ auto /* 4 LABS fishbone (col 2, instruments 2026-08-02) — auto: an empty host costs nothing */ minmax(4rem, 1fr) /* 5 canvas + NOW */ clamp(13.5rem, 30.5vh, 18.5rem) /* 6 canvas + decision */ auto; /* 7 canvas + footer */ } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-decision-spine { display: flex; flex-direction: column; overflow-y: auto; /* Phase 1 (2026-08-01): belt-and-braces with the chip wrap below — with overflow-y:auto the x-axis would compute as auto and show a raw horizontal scrollbar for any stray wide child; nothing in the rail is meant to scroll sideways. */ overflow-x: hidden; padding: 0.45rem 0.62rem; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-decision-spine::before { margin-bottom: 6px; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-decision-spine .tc-decision-btn { min-height: 2.45rem; } /* The census-link pill renders INSIDE the accept block — keep it to one quiet line so it doesn't re-inflate the spine past the track. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-block .tc-census-link { width: 100%; font-size: var(--tux-text-xs, 0.6875rem); line-height: 1.25; } /* Compact accept block: tag line dropped (the DECISION label already names the group; the block's aria structure is unchanged), chips one small row, destination + tier side-by-side, bed req'd inline. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-block { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; margin-top: 0.45rem; padding: 0.45rem 0 0; border-top: 1px solid var(--term-border-subtle, #2A2720); background: none; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-block-tag { display: none; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-unit { display: flex; align-items: center; gap: 0.35rem; width: 100%; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-unit .tc-bed-chips { display: flex; /* Phase 1 (2026-08-01): was nowrap — 5 chips (~281px) exceeded the 272-320px rail's inner width, and the spine's overflow-y:auto made the x-axis compute as auto → a raw horizontal scrollbar in the decision rail. Wrap instead: chips break to a tidy second row and stay fully clickable (Phase 2 chip work builds on this). */ flex-wrap: wrap; gap: 0.25rem; width: auto; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-unit .tc-bed-chip, body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-routing .tc-dest-chip { padding: 0.14rem 0.32rem; font-size: var(--tux-text-xs, 0.6875rem); line-height: 1.3; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-routing { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; width: 100%; } /* The selects carry aria-labels and placeholder options ("— Destination —", "— Tier —"), so the visible text labels are redundant chrome. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-routing > .tc-accept-label, body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-unit > .tc-accept-label { display: none; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-routing .tc-select { flex: 1 1 7.5rem; width: auto; min-width: 0; padding-block: 0.18rem; font-size: var(--tux-text-xs, 0.6875rem); /* Phase 1 (2026-08-01): the rail-width select hard-cut the destination ("AMCK (Avera McKen") with no affordance — ellipsis signals the truncation (full text via the options' title attrs). */ text-overflow: ellipsis; } /* Phase 1 (2026-08-01): the voice-extraction badge ("Confirmed HH:MM") injected next to #tcDestination joins this flex row — never let it shrink/split, or it overlaps the select and orphans its tail. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-routing .tc-provenance { flex: 0 0 auto; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-accept-bedreq { font-size: var(--tux-text-xs, 0.6875rem); white-space: nowrap; } } /* ---- A2 (2026-07-30, retargeted for the slab fold 2026-08-08) -------------- "Edit Source" focuses the raw chart-materials textarea. Under the fold that textarea is display:none, so editing mode SWAPS the surfaces: the slab view yields and the canonical textarea renders full-face — the doctor edits the real string, and folding resumes when editing mode clears. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-one-well__body:has(#tcChartMaterialsField[data-origin-source-mode="editing"]) .tc-slab-view { display: none; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-one-well[data-slab-ready="1"] #tcChartMaterialsField[data-origin-source-mode="editing"] { display: block; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] #tcChartMaterialsField[data-origin-source-mode="editing"] #tcChartMaterials { color: var(--tux-fg-strong, #E8E2D9); background: var(--term-bg-void, #0E0D0B); } /* ---- B2 (2026-07-30): Patient arc active tab ------------------------------- Was a tinted pill with a saturated glow underline (rgb(89,225,207)) — off the flat terminal tab language used everywhere else on the surface. Flatten: no tint, square corners, token-teal 2px underline carries the active state. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-clinical-canvas__switcher button { border-radius: 0; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-clinical-canvas__switcher button[aria-pressed="true"] { background: transparent; box-shadow: inset 0 -2px 0 var(--term-accent, #4CC4B4); color: var(--tux-fg-strong, #E8E2D9); } /* ---- B3 (2026-07-30): NOW gist hero ---------------------------------------- Rendered at clamp(1.25rem, 2.3vw, 1.8rem) in the display serif — a 29px editorial float dominating a sparse clinical panel ("mechanical valve"). Bring it to the polish hero token. Phase 2: the display face is now Outfit (serif removed everywhere), so the hero takes --term-font-display. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-now-nucleus__fact .tc-clinical-knot__value { font-family: var(--term-font-display, 'Outfit', sans-serif); font-size: var(--tux-text-hero, 1.375rem); font-weight: 550; } /* B5 origin-band value rules: DELETED with the band (slice 2, 2026-08-02) — identity now renders on the selected rail card (transfer-unified.css). */ /* ---- B6 (2026-07-30): call-control hierarchy -------------------------------- CALL LOGISTICS (the dispatch path — the actual "make the call" action) and CALL DIRECT shared one button class and read as equals; IPHONE competed at the same weight. One primary per row: logistics keeps the action accent, direct + iphone recede to quiet ghosts. */ body.tc-page.tc-ux-polish .tc-twilio-direct-call-btn { background: transparent; border-color: var(--term-border-default, #2A2720); color: var(--tux-fg-meta, #A68B66); font-weight: 500; } body.tc-page.tc-ux-polish .tc-twilio-direct-call-btn:hover { border-color: var(--term-accent, #4CC4B4); color: var(--term-accent, #4CC4B4); } body.tc-page.tc-ux-polish .tc-iphone-pair-btn { background: transparent; border-color: transparent; color: var(--tux-fg-meta, #A68B66); font-size: var(--tux-text-xs, 0.6875rem); letter-spacing: 0.08em; opacity: 0.85; } body.tc-page.tc-ux-polish .tc-iphone-pair-btn:hover { color: var(--tux-fg-strong, #E8E2D9); opacity: 1; } /* ---- B7 (2026-07-30): mode-chip subtitle ------------------------------------ "TRANSFER WORKSPACE / Call intake and …" duplicates the TRANSFER CENTER nav tab and truncates mid-word in the header. The nav tab already names the page — the chip keeps its label, the subtitle goes. TC-scoped: other pages keep their chip detail. */ body.tc-page.tc-ux-polish[data-page="transfer"] .sn-mode-chip__detail { display: none; } /* ---- B8 (2026-07-30): left-rail collapsed strips ---------------------------- Outcomes / Open loops render as full-width stacked strips above the call list, costing two cards' worth of rail before a single transfer is visible. Compact them to quiet one-line rows. */ body.tc-page.tc-ux-polish .tc-outcomes-btn, body.tc-page.tc-ux-polish .tc-open-loops-btn { padding-block: 0.3rem; font-size: var(--tux-text-xs, 0.6875rem); min-height: 0; opacity: 0.85; } body.tc-page.tc-ux-polish .tc-outcomes-btn:hover, body.tc-page.tc-ux-polish .tc-open-loops-btn:hover { opacity: 1; } /* ---- P1 (2026-08-01): rail bottom continuation fade ------------------------- The transfer list cuts cards mid-card at the panel's bottom edge with no signal that more sit below. A short mask fade on the scrolling panel reads as "continues" without eating a card's worth of rail. */ body.tc-page.tc-ux-polish .tc-list-panel { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent 100%); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.75rem), transparent 100%); } /* ========================================================================== 5 · PHASE 2 TYPE + CONTRAST SWEEP (2026-08-01) The known sub-floor / dim spots, moved onto the raised --tux-* tokens. Nothing here goes below 11px or below --tux-fg-faint. ========================================================================== */ /* NOW panel eyebrow label: 0.55rem fg-muted → 11px --tux-fg-meta. (The origin-band halves of this sweep died with the band, slice 2 2026-08-02; the strip's source row is styled in transfer-unified.css.) */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-episode-now__label { color: var(--tux-fg-meta); font-size: var(--tux-text-xs); } /* Story-map eyebrow ("N FACTS LINKED TO THE CALL", 0.58rem): teal is the live/evidence hue per the color contract — only the size was sub-floor. */ body.tc-ux-polish .tc-transfer-arc__eyebrow { font-size: var(--tux-text-xs); } /* Provenance summary ("9/11 lines traced to source"): fg-muted ≈4.4:1 → meta. */ body.tc-ux-polish .tc-prov-summary { color: var(--tux-fg-meta); font-size: var(--tux-text-xs); } /* "Select any knot to illuminate its exact source" hint: --tc-arc-faint measures ≈3.96:1 on the canvas well (transfer-clinical-canvas.css:637's own note) — under the floor. The canvas's own muted step (≈7.6:1) carries it. */ body.tc-ux-polish .tc-now-nucleus__provenance { color: var(--tc-arc-muted, #98AAA9); font-size: var(--tux-text-xs); } /* "Bed req'd" — an interactive checkbox label resting at fg-muted read as inactive chrome. Full-contrast body text; it is a capture-path control. */ body.tc-ux-polish .tc-accept-bedreq { color: var(--tux-fg-body); } /* Sidebar card diagnosis: MIGRATED to transfer-unified.css (slice 2). */ /* Note-drawer masthead: the loom voices it in its own serif var (--tc-loom-serif, transfer-loom.css:171), which the token override cannot reach. Under the flag it takes the display sans like every other heading. (1,2,1) beats body[data-tc-loom]'s (1,1,1) regardless of sheet order. */ body.tc-page.tc-ux-polish #tcNoteModalTitle { font-family: var(--term-font-display, 'Outfit', sans-serif); } /* ========================================================================== 6 · PHASE 2 BUTTON GRAMMAR (2026-08-01) Exactly four tiers. Class API (applied in the template by the markup workstream); the ID migrations below move the EXISTING controls onto the same grammar via CSS only. .tc-btn--primary filled teal — ONE per region, the region's commit verb .tc-btn--secondary outlined, full contrast — the default action .tc-btn--tertiary borderless ghost — quiet, reversible affordances .tc-btn--danger red outline, isolated — destructive only Teal fill carries inverse text at ≈9.1:1 (--term-fg-inverse #130D08 on #4CC4B4, L 0.4465 vs 0.0044). Red text/border #EF4444 ≈5.3:1 on the void. ========================================================================== */ body.tc-ux-polish .tc-btn--primary, body.tc-ux-polish .tc-btn--secondary, body.tc-ux-polish .tc-btn--tertiary, body.tc-ux-polish .tc-btn--danger { display: inline-flex; align-items: center; justify-content: center; gap: var(--tux-space-2); min-height: 2.4rem; padding: 0.45rem 0.95rem; border-radius: var(--tux-radius-sm); font-family: var(--term-font-display, 'Outfit', sans-serif); font-size: var(--tux-text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; } body.tc-ux-polish .tc-btn--primary { background: var(--term-accent, #4CC4B4); border: 1px solid transparent; color: var(--term-fg-inverse, #130D08); } body.tc-ux-polish .tc-btn--primary:hover, body.tc-ux-polish .tc-btn--primary:focus-visible { background: color-mix(in srgb, var(--term-accent, #4CC4B4) 88%, #FFFFFF); box-shadow: var(--term-glow-accent); } body.tc-ux-polish .tc-btn--secondary { background: transparent; border: 1px solid var(--tux-hairline-strong); color: var(--tux-fg-body); } body.tc-ux-polish .tc-btn--secondary:hover, body.tc-ux-polish .tc-btn--secondary:focus-visible { border-color: var(--tux-fg-meta); color: var(--tux-fg-strong); background: rgba(255, 247, 238, 0.04); } body.tc-ux-polish .tc-btn--tertiary { background: transparent; border: 1px solid transparent; color: var(--tux-fg-meta); } body.tc-ux-polish .tc-btn--tertiary:hover, body.tc-ux-polish .tc-btn--tertiary:focus-visible { color: var(--tux-fg-strong); background: rgba(255, 247, 238, 0.05); } body.tc-ux-polish .tc-btn--danger { background: transparent; border: 1px solid color-mix(in srgb, var(--term-block, #EF4444) 55%, transparent); color: var(--term-block, #EF4444); } body.tc-ux-polish .tc-btn--danger:hover, body.tc-ux-polish .tc-btn--danger:focus-visible { border-color: var(--term-block, #EF4444); background: rgba(239, 68, 68, 0.08); } /* ---- Migrations (CSS-only; no template edits in this workstream) ---------- */ /* #tcGenerateBtn (generate mode) → PRIMARY, palette-conformant teal. The base gold fill (transfer-center.css:1567) is the hyper-saturated orange block — off the contract (gold = chrome, not action) and the loudest thing on the surface. Teal = primary action. */ body.tc-ux-polish .tc-generate-btn:not([data-mode="view"]) { background: var(--term-accent, #4CC4B4); border: 1px solid transparent; color: var(--term-fg-inverse, #130D08); } body.tc-ux-polish .tc-generate-btn:not([data-mode="view"]):hover, body.tc-ux-polish .tc-generate-btn:not([data-mode="view"]):focus-visible { background: color-mix(in srgb, var(--term-accent, #4CC4B4) 88%, #FFFFFF); box-shadow: var(--term-glow-accent); } /* Note-drawer footer: Save Note → PRIMARY (was gold .tc-btn-primary); New Note + Copy → SECONDARY. Copy's base ghost (fg-secondary on border-default) read as disabled — the secondary tier's visible border fixes that. */ body.tc-ux-polish #tcSaveNoteBtn { background: var(--term-accent, #4CC4B4); border: 1px solid transparent; color: var(--term-fg-inverse, #130D08); } body.tc-ux-polish #tcSaveNoteBtn:hover, body.tc-ux-polish #tcSaveNoteBtn:focus-visible { background: color-mix(in srgb, var(--term-accent, #4CC4B4) 88%, #FFFFFF); box-shadow: var(--term-glow-accent); } body.tc-ux-polish #tcRegenerateNoteBtn, body.tc-ux-polish #tcCopyNoteBtn { background: transparent; border: 1px solid var(--tux-hairline-strong); color: var(--tux-fg-body); } body.tc-ux-polish #tcRegenerateNoteBtn:hover, body.tc-ux-polish #tcRegenerateNoteBtn:focus-visible, body.tc-ux-polish #tcCopyNoteBtn:hover, body.tc-ux-polish #tcCopyNoteBtn:focus-visible { border-color: var(--tux-fg-meta); color: var(--tux-fg-strong); background: rgba(255, 247, 238, 0.04); } /* ========================================================================== 7 · PHASE 2 CHIP/BADGE SYSTEM (2026-08-01) One chip grammar, four explicit states (class API for the markup workstream): is-selected filled + check/strong affordance — THE chosen value is-selectable full-contrast outline — an available choice, never dimmed below the contrast floor is-disabled dimmed — ONLY for truly disabled controls (never for merely-unselected options) is-danger red outline — destructive choice A merely-unselected option is is-selectable, NEVER is-disabled. ========================================================================== */ /* ---- Decision grid (.tc-decision-btn) ------------------------------------- Two stock rules made the unchosen dispositions read as disabled: the 0.78 resting opacity and, once a decision locks, the 0.4 + saturate(0.35) recede (transfer-center.css:5512/5541). PENDING/ROADSIDE/DECLINE are re-selectable choices at every moment — full contrast, no desaturation. The chosen button still dominates via fill + ✓ + lift. */ body.tc-ux-polish .tc-disposition-on .tc-decision-btn { opacity: 1; color: var(--tux-fg-body); } body.tc-ux-polish .tc-disposition-on .tc-decision-buttons:has(.is-active) .tc-decision-btn:not(.is-active) { opacity: 1; filter: none; } /* Decision sublabels ("→ McKennan", "specialist", "local mgmt", "no transfer"): 0.625rem fg-muted was BOTH sub-floor and sub-contrast — the qualifier that disambiguates the four options read as disabled text. */ body.tc-ux-polish .tc-decision-btn-sub, body.tc-ux-polish .tc-disposition-on .tc-decision-btn.is-active .tc-decision-btn-sub { font-size: var(--tux-text-xs); color: var(--tux-fg-meta); } /* ---- Bed chips (.tc-bed-chip) ---------------------------------------------- Resting = is-selectable (boundary-hardened in the base sheet). .active = is-selected, and it must be unmistakable at a glance mid-call: filled gold with inverse text (≈7.8:1) replaces the gold-ghost wash. */ body.tc-ux-polish .tc-bed-chip, body.tc-ux-polish .tc-dest-chip { color: var(--tux-fg-body); } body.tc-ux-polish .tc-bed-chip.active, body.tc-ux-polish .tc-dest-chip.active { background: var(--term-gold, #BFA162); border-color: var(--term-gold, #BFA162); color: var(--term-fg-inverse, #130D08); font-weight: 700; box-shadow: none; } /* Sidebar badges: MIGRATED to transfer-unified.css (slice 2, 2026-08-02). */ /* ========================================================================== 8 · PHASE 2 COLOR-CONTRACT ENFORCEMENT (2026-08-01) The two red violations that were NOT fact-derived (contract block above). ========================================================================== */ /* Call Logistics row Phosphor/emoji rules: MIGRATED to transfer-unified.css (slice 1, 2026-08-01). */ /* Clinical-knot critical red: VERIFIED fact-derived (see the contract block — factTone() only emits 'critical' from fact priority), so the red knot shape stays. Nothing to correct; this note fences the finding so the next audit doesn't re-flag it. */ /* ========================================================================== 9 · PHASE 3a SIDEBAR CALL LOG (2026-08-01) Region remediation: the patient name owns the card; everything else yields. ========================================================================== */ /* §9 card typography (name hierarchy, age/sex, diagnosis clamp, decision line floor, hover affordance): MIGRATED to transfer-unified.css (slice 2, 2026-08-02) — folded into the base card rules. */ /* ========================================================================== 10 · PHASE 3b CENTER WORKSPACE — call setup, origin band, tab bar (2026-08-01) ========================================================================== */ /* Call-option row chrome: MIGRATED to transfer-unified.css (slice 1, 2026-08-01). */ /* Origin band rhythm rules: DELETED with the band (slice 2, 2026-08-02) — identity renders on the selected rail card (transfer-unified.css). */ /* MRN is an identifier, not prose: mono, spaced, slashed zero so L/1, I/1, O/0 are unambiguous (JetBrains Mono ships the "zero" feature). The card MRN twin lives in transfer-unified.css (.tc-card-mrn). */ body.tc-ux-polish .tc-topbar-mrn { font-family: var(--term-font-mono, 'JetBrains Mono', monospace); letter-spacing: 0.06em; font-feature-settings: "zero" 1; } /* Tab bar (Conversation / Patient arc): the tapestry stretches two buttons across the full canvas width (repeat(2, 1fr)) — label islands in a dead half-width each, underline spanning the void. Content-sized tabs on the left edge; the B2 teal underline (section above) now hugs the label. grid-template-columns only bites while the switcher is display:grid, so the base display:none at other widths is untouched. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-clinical-canvas__switcher { grid-template-columns: repeat(2, max-content); justify-content: start; gap: 0.15rem; } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-clinical-canvas__switcher button { padding: 0.4rem 0.9rem 0.5rem; } /* ========================================================================== 11 · PHASE 3d RIGHT RAIL — Episode Now, Loom stats, staleness (2026-08-01) ========================================================================== */ /* Staleness is clinically meaningful — 'Live update delayed' was caption text. Real warning treatment: amber seam + Phosphor warning glyph + readable contrast. The data attribute is stamped by episode-now render(). */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] [data-episode-now-live-projection="degraded"] > .tc-episode-now__status { display: flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.6rem; border: 1px solid color-mix(in srgb, var(--term-status-editing, #E69A4C) 45%, transparent); border-left: 3px solid var(--term-status-editing, #E69A4C); border-radius: 4px; background: color-mix(in srgb, var(--term-status-editing, #E69A4C) 9%, transparent); color: var(--tux-fg-body); font-size: var(--tux-text-sm); } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] [data-episode-now-live-projection="degraded"] > .tc-episode-now__status::before { content: "\e4e0"; /* .ph.ph-warning */ font-family: "Phosphor"; color: var(--term-status-editing, #E69A4C); font-size: 0.9rem; -webkit-font-smoothing: antialiased; } /* While the projection is degraded the panel must not claim 'Now' — the header kicker yields to the warning (the title still names the panel). */ body.tc-page.tc-ux-polish .tc-episode-now:has([data-episode-now-live-projection="degraded"]) .tc-episode-kicker { visibility: hidden; } /* Episode Loom strands: labels 8.6px / statuses 7.4px were far under the 11px floor — the four mini-boxes' whole content was sub-perceptual. nowrap + the existing ellipsis keeps 'Care + response' from mid-wrapping. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-episode-now__strand-label { font-size: var(--tux-text-xs, 0.6875rem); white-space: nowrap; color: var(--tux-fg-meta); } body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-episode-now__strand-status { font-size: var(--tux-text-xs, 0.6875rem); } /* Rail fact text: uncapped wrap let one long fact fill the rail — 3-line clamp; the fact is a button, full text is one click away. */ body.tc-page.tc-ux-polish[data-tc-episode-tapestry="1"] .tc-episode-now__fact-text { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } /* Non-interactive status text must not dress as a link. */ body.tc-ux-polish .tc-accept-routing .tc-provenance, body.tc-ux-polish .tc-accept-unit .tc-provenance { text-decoration: none; } /* 'Current transfer state' rendered right-aligned against the NOW kicker — a title is not a value. Stack the header, everything left. */ body.tc-page.tc-ux-polish .tc-episode-now > header { display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; } body.tc-page.tc-ux-polish .tc-episode-now > header h2 { text-align: left; } /* ========================================================================== 12 · PHASE 4 NOTE DRAWER (2026-08-01) The note is READ here, then pasted to Epic — reading chrome only; the raw text (Copy/Save) is never decorated. ========================================================================== */ /* Headed blocks: hairline above each section (first sits flush). */ body.tc-ux-polish .tc-note-section { padding-top: 0.9em; border-top: 1px solid var(--tux-hairline); } body.tc-ux-polish .tc-note-output > .tc-note-section:first-child { padding-top: 0; border-top: 0; } /* Paragraph rhythm: formatNoteOutput marks the first line after a blank — the model's own paragraph breaks return without re-rendering blank lines. */ body.tc-ux-polish .tc-note-para-start { margin-top: 0.8em; } /* Key data (vitals, unit-anchored labs): mono voice so numbers scan. */ body.tc-ux-polish .tc-note-datum { font-family: var(--term-font-mono, 'JetBrains Mono', monospace); font-size: 0.93em; color: var(--tux-fg-strong); } /* Drawer masthead was the dimmest element on the drawer — hierarchy inversion. (Phase 2 already re-voiced it to the display sans.) */ body.tc-page.tc-ux-polish #tcNoteModalTitle { color: var(--tux-fg-strong); font-size: var(--tux-text-xl); } /* Drawer scrollables: thin quiet thumb, not the chunky native bar. */ body.tc-ux-polish #tcNoteModal ::-webkit-scrollbar { width: 8px; height: 8px; } body.tc-ux-polish #tcNoteModal ::-webkit-scrollbar-track { background: transparent; } body.tc-ux-polish #tcNoteModal ::-webkit-scrollbar-thumb { background: var(--tux-hairline-strong); border-radius: 4px; } body.tc-ux-polish #tcNoteModal ::-webkit-scrollbar-thumb:hover { background: var(--tux-fg-faint); } /* "N unverified — review" is a working button (it cycles through unverified lines on click) — give it the affordance its function earns. */ body.tc-ux-polish .tc-prov-summary-unverified { border: 1px solid color-mix(in srgb, var(--term-status-editing, #E69A4C) 55%, transparent); border-radius: var(--tux-radius-sm, 6px); padding: 0.15rem 0.5rem; background: color-mix(in srgb, var(--term-status-editing, #E69A4C) 9%, transparent); color: var(--tux-fg-body); cursor: pointer; } body.tc-ux-polish .tc-prov-summary-unverified:hover, body.tc-ux-polish .tc-prov-summary-unverified:focus-visible { border-color: var(--term-status-editing, #E69A4C); background: color-mix(in srgb, var(--term-status-editing, #E69A4C) 16%, transparent); } @media (prefers-reduced-motion: reduce) { body.tc-ux-polish *, body.tc-ux-polish *::before, body.tc-ux-polish *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }