/* ==========================================================================
SOMANOTES / SOMACURA — ADMISSION WORKSPACE TERMINAL THEME
==========================================================================
Location: /static/css/admissions.css
Activator: .aw-page class on
Version: 1.0.0
Design DNA:
Same Phosphor Theatre terminal theme as the note rail and transfer center,
scoped to .aw-page for standalone page usage. Two-panel layout: admission
list (360px) + workspace (flex: 1). Workspace hosts patient strip, large
clinical data textarea, note output area, and action bar.
Acuity Badges: ICU/Emergent (DR scarlet), Urgent/Step-Down (DR worsening), Routine/Med-Surg (DR stable), Obs (DR resolved/teal)
Status Badges: pending, data_entry, hp_generated, saved, archived
Font Dependencies (loaded via Google Fonts in template):
- JetBrains Mono 300..700 (labels, metadata, code, status)
- Outfit 200..600 (display headings, section titles)
- DM Sans 300..500 (clinical body text, form fields)
========================================================================== */
/* DR BEACHHEAD: Severity tokens for clinical acuity/status badges.
These override the --term-status-* workflow colors with semantically
correct clinical severity colors from the Dark Roast system.
Delete this block when .aw-page migrates fully to data-theme="dark-roast". */
:root {
--dr-severity-critical: #C44C4C;
--dr-severity-worsening: #D2691E;
--dr-severity-improving: #E69A4C;
--dr-severity-stable: #DAA520;
--dr-severity-resolved: #4CC4B4;
--dr-severity-critical-bg: rgba(196, 76, 76, 0.10);
--dr-severity-worsening-bg: rgba(210, 105, 30, 0.10);
--dr-severity-improving-bg: rgba(230, 154, 76, 0.10);
--dr-severity-stable-bg: rgba(218, 165, 32, 0.10);
--dr-severity-resolved-bg: rgba(76, 196, 180, 0.10);
--dr-scarlet-dim: rgba(196, 76, 76, 0.40);
--dr-amber-hot-dim: rgba(210, 105, 30, 0.40);
--dr-amber-dim: rgba(230, 154, 76, 0.40);
--dr-gold-dim: rgba(218, 165, 32, 0.40);
--dr-teal-dim: rgba(76, 196, 180, 0.40);
--dr-teal: #4CC4B4;
--dr-amber: #E69A4C;
--dr-amber-hot: #D2691E;
}
/* ==========================================================================
S0 UTILITY — VISIBILITY HELPERS
========================================================================== */
.hidden, [hidden] { display: none !important; }
/* ==========================================================================
S1 RESET & PAGE LAYOUT
========================================================================== */
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
/* TODO: extract to shared terminal-tokens.css — these ~55 --term-* props are
duplicated from the terminal theme used in note-rail-terminal.css and
transfer-center.css. Once a canonical terminal-tokens.css exists, replace
this block with a import. (L4) */
.aw-page {
--term-bg-void: #0C0B0A;
--term-bg-surface: #13120F;
--term-bg-elevated: #1B1A16;
--term-bg-header: #0E0D0B;
--term-bg-input: #17160F;
--term-fg-primary: #E8E4DC;
--term-fg-secondary: #A09888;
--term-fg-muted: #8A8278;
--term-fg-inverse: #0C0B0A;
--term-border-subtle: #1E1C18;
--term-border-default: #2A2720;
--term-border-strong: #3A3630;
--term-accent: #00FFD0;
--term-accent-dim: rgba(0, 255, 208, 0.40);
--term-accent-subtle: rgba(0, 255, 208, 0.10);
--term-accent-ghost: rgba(0, 255, 208, 0.05);
--term-gold: #D4A857;
--term-gold-dim: rgba(212, 168, 87, 0.35);
--term-gold-subtle: rgba(212, 168, 87, 0.10);
--term-gold-ghost: rgba(212, 168, 87, 0.05);
--term-status-error: #EF4444;
--term-status-ready: #22C55E;
--term-status-editing: #F59E0B;
--term-status-generating: #3B82F6;
--term-glow-accent: 0 0 8px rgba(0, 255, 208, 0.25), 0 0 24px rgba(0, 255, 208, 0.08);
--term-glow-accent-intense: 0 0 12px rgba(0, 255, 208, 0.40), 0 0 36px rgba(0, 255, 208, 0.12);
--term-glow-gold: 0 0 10px rgba(212, 168, 87, 0.15), 0 0 24px rgba(212, 168, 87, 0.06);
--term-glow-red: 0 0 10px rgba(239, 68, 68, 0.30), 0 0 24px rgba(239, 68, 68, 0.10);
--term-glow-amber: 0 0 10px rgba(245, 158, 11, 0.25), 0 0 24px rgba(245, 158, 11, 0.08);
--term-glow-green: 0 0 10px rgba(34, 197, 94, 0.25), 0 0 24px rgba(34, 197, 94, 0.08);
--term-glow-blue: 0 0 10px rgba(59, 130, 246, 0.25), 0 0 24px rgba(59, 130, 246, 0.08);
--term-font-mono: 'JetBrains Mono', 'SF Mono', monospace;
--term-font-display: 'Outfit', 'Inter', sans-serif;
--term-font-body: 'DM Sans', 'Inter', sans-serif;
--term-text-xs: 0.6875rem;
--term-text-sm: 0.8125rem;
--term-text-base: 0.9375rem;
--term-text-lg: 1.125rem;
--term-tracking-wide: 0.05em;
--term-tracking-wider: 0.10em;
--term-tracking-widest: 0.20em;
--term-tracking-display: 0.15em;
--term-space-xs: 4px;
--term-space-sm: 8px;
--term-space-md: 12px;
--term-space-lg: 16px;
--term-space-xl: 24px;
--term-space-2xl: 32px;
--term-corner-size: 16px;
--term-corner-offset: 6px;
--term-corner-width: 2px;
--term-duration-fast: 150ms;
--term-duration-normal: 300ms;
--term-easing: cubic-bezier(0.4, 0, 0.2, 1);
--term-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.018'/%3E%3C/svg%3E");
/* D5: gradient stop tokens — replaces hardcoded hex in button gradients */
--term-accent-hot: #00DDC0;
--term-gold-hot: #C4993A;
/* D6: text-shadow glow tokens — replaces inline rgba values */
--term-text-glow-gold: 0 0 16px rgba(212, 168, 87, 0.20);
--term-text-glow-accent: 0 0 10px rgba(0, 255, 208, 0.30);
/* Additional: elevation shadow tokens */
--term-shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.3);
--term-shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.5);
background: var(--term-bg-void);
color: var(--term-fg-primary);
font-family: var(--term-font-body);
margin: 0;
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 360px 1fr;
height: 100vh;
position: relative;
}
/* ==========================================================================
S2 HEADER + NAV
========================================================================== */
.aw-header {
grid-column: 1 / -1;
background: var(--term-bg-header);
border-bottom: 1px solid var(--term-border-default);
padding: var(--term-space-md) var(--term-space-xl);
display: flex;
align-items: center;
gap: var(--term-space-xl);
position: relative;
z-index: 10;
min-height: 52px;
}
/* Gold accent line under header */
.aw-header::after {
content: '';
position: absolute;
bottom: -1px;
left: 15%;
right: 15%;
height: 1px;
background: linear-gradient(
to right,
transparent,
var(--term-gold-dim),
transparent
);
pointer-events: none;
}
/* Brand block */
.aw-header-brand {
display: flex;
align-items: center;
gap: var(--term-space-sm);
flex-shrink: 0;
}
.aw-logo-mark {
font-size: 1.25rem;
color: var(--term-accent);
text-shadow: var(--term-glow-accent);
}
.aw-logo-link {
font-family: var(--term-font-display);
font-size: var(--term-text-lg);
font-weight: 300;
letter-spacing: 0.04em;
color: var(--term-fg-primary);
text-decoration: none;
transition: text-shadow var(--term-duration-normal) var(--term-easing);
}
.aw-logo-link:hover {
text-shadow: var(--term-glow-accent);
}
.aw-logo-accent {
color: var(--term-accent);
font-weight: 500;
}
/* Section switcher nav links */
.aw-section-switcher {
display: flex;
align-items: center;
gap: var(--term-space-xl);
margin-left: var(--term-space-xl);
}
.aw-section-link {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 400;
letter-spacing: var(--term-tracking-wider);
text-transform: uppercase;
text-decoration: none;
color: var(--term-fg-muted);
padding: var(--term-space-sm) 0;
border-bottom: 2px solid transparent;
transition: color var(--term-duration-normal) var(--term-easing),
border-color var(--term-duration-normal) var(--term-easing),
text-shadow var(--term-duration-normal) var(--term-easing);
}
.aw-section-link:hover {
color: var(--term-fg-secondary);
border-bottom-color: var(--term-border-default);
}
.aw-section-link.active {
color: var(--term-fg-primary);
border-bottom: 2px solid var(--term-accent);
text-shadow: var(--term-glow-accent);
}
.aw-section-prefix {
color: var(--term-accent);
font-family: var(--term-font-mono);
font-weight: 700;
text-shadow: var(--term-text-glow-accent);
margin-right: 2px;
}
/* Header controls (right side) */
.aw-header-controls {
display: flex;
align-items: center;
gap: var(--term-space-lg);
margin-left: auto;
}
/* New Admission button */
.aw-new-btn {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 500;
letter-spacing: var(--term-tracking-wider);
text-transform: uppercase;
color: var(--term-fg-inverse);
background: linear-gradient(135deg, var(--term-accent), var(--term-accent-hot));
border: none;
padding: var(--term-space-sm) var(--term-space-lg);
cursor: pointer;
transition: all var(--term-duration-normal) var(--term-easing);
white-space: nowrap;
}
.aw-new-btn:hover {
box-shadow: var(--term-glow-accent-intense);
transform: translateY(-1px);
}
.aw-new-btn:active {
transform: translateY(0);
}
/* Date filter */
.aw-date-filter {
display: flex;
align-items: center;
gap: var(--term-space-sm);
}
.aw-date-input {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-primary);
background: var(--term-bg-input);
border: 1px solid var(--term-border-default);
padding: var(--term-space-xs) var(--term-space-sm);
outline: none;
transition: border-color var(--term-duration-normal) var(--term-easing);
color-scheme: dark;
}
.aw-date-input:focus {
border-color: var(--term-accent);
box-shadow: var(--term-glow-accent);
}
/* ==========================================================================
S3 LIST PANEL (LEFT 360px) — ADMISSION CARDS
========================================================================== */
/* H4 a11y fix: display:contents on breaks accessibility (main landmark
loses its box). Changed to a proper grid container that replicates the
two-column split previously applied via the parent .aw-page grid. */
/* ARCHITECTURE: Two-column body with collapsible list panel.
Default: list collapsed (80px) giving max workspace width.
Toggle expands to 360px full list. CSS transition handles animation.
WHY: Doctors spend most time in the workspace, not switching patients.
The list only needs to be expanded when selecting a different admission. */
.aw-body {
grid-column: 1 / -1;
grid-row: 2;
display: grid;
grid-template-columns: 80px 1fr;
min-height: 0;
overflow: hidden;
transition: grid-template-columns 0.2s ease;
}
.aw-body--list-expanded {
grid-template-columns: 360px 1fr;
}
.aw-list-panel {
grid-row: 1;
grid-column: 1;
overflow-y: auto;
overflow-x: hidden;
border-right: 1px solid var(--term-gold-dim);
background: var(--term-bg-void);
position: relative;
z-index: 2;
}
/* ── Collapsed list view ── */
.aw-list-collapsed {
display: flex;
flex-direction: column;
align-items: stretch;
padding: var(--term-space-xs) 0;
gap: 0;
}
.aw-body--list-expanded .aw-list-collapsed {
display: none;
}
.aw-list-expand-btn {
background: none;
border: none;
border-bottom: 1px solid var(--term-border-subtle);
color: var(--term-accent);
font-size: 0.75rem;
font-family: var(--term-font-mono);
cursor: pointer;
padding: 8px 0;
width: 100%;
text-align: center;
letter-spacing: 0.1em;
transition: background 0.15s, color 0.15s;
}
.aw-list-expand-btn:hover {
background: rgba(255, 255, 255, 0.04);
color: var(--term-fg-primary);
}
.aw-list-collapsed-count {
font-family: var(--term-font-mono);
font-size: 0.8125rem;
font-weight: 700;
color: var(--term-accent);
text-align: center;
padding: 6px 0 4px;
border-bottom: 1px solid var(--term-border-subtle);
letter-spacing: 0.05em;
text-shadow: 0 0 8px rgba(100, 200, 220, 0.3);
}
.aw-list-collapsed-cards {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
overflow-y: auto;
flex: 1;
}
/* Mini-card: initials + first name + status stripe */
.aw-mini-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 8px 4px 6px;
cursor: pointer;
border-left: 3px solid transparent;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
transition: background 0.15s, border-color 0.15s;
}
.aw-mini-card:hover {
background: rgba(255, 255, 255, 0.05);
}
.aw-mini-card--selected {
border-left-color: var(--term-accent);
background: rgba(255, 255, 255, 0.06);
}
.aw-mini-card-initials {
font-family: var(--term-font-mono);
font-size: 0.8125rem;
font-weight: 700;
color: var(--term-fg-secondary);
letter-spacing: 0.06em;
line-height: 1;
}
.aw-mini-card--selected .aw-mini-card-initials {
color: var(--term-accent);
text-shadow: 0 0 6px rgba(100, 200, 220, 0.3);
}
.aw-mini-card-name {
font-family: var(--term-font-mono);
font-size: 0.5rem;
color: var(--term-fg-muted);
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
line-height: 1.2;
letter-spacing: 0.02em;
}
.aw-mini-card--selected .aw-mini-card-name {
color: var(--term-fg-secondary);
}
.aw-mini-card-status {
width: 100%;
height: 3px;
border-radius: 1px;
margin-top: 2px;
}
.aw-mini-card-status--pending { background: var(--term-fg-muted); opacity: 0.15; }
.aw-mini-card-status--data_entry { background: var(--term-gold); opacity: 0.7; }
.aw-mini-card-status--hp_generated { background: var(--term-accent); opacity: 0.8; }
.aw-mini-card-status--saved { background: #4CC44C; opacity: 0.8; }
.aw-mini-card-status--archived { background: var(--term-fg-muted); opacity: 0.15; }
/* ── Expanded list view ── */
.aw-list-expanded {
display: none;
}
.aw-body--list-expanded .aw-list-expanded {
display: block;
}
.aw-list-expanded-header {
display: flex;
justify-content: flex-end;
padding: 4px var(--term-space-sm) 0;
}
.aw-list-collapse-btn {
background: none;
border: none;
color: var(--term-fg-muted);
font-size: 0.875rem;
cursor: pointer;
padding: 2px 6px;
opacity: 0.5;
transition: opacity 0.15s, color 0.15s;
}
.aw-list-collapse-btn:hover {
opacity: 1;
color: var(--term-accent);
}
.aw-admission-list {
list-style: none;
margin: 0;
padding: var(--term-space-sm);
display: flex;
flex-direction: column;
gap: var(--term-space-sm);
}
/* List empty state */
.aw-list-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--term-space-2xl) var(--term-space-lg);
gap: var(--term-space-lg);
min-height: 200px;
}
.aw-list-empty-text {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-muted);
letter-spacing: var(--term-tracking-wide);
text-align: center;
}
/* Smaller ghost button for empty state */
.aw-new-btn-sm {
font-family: var(--term-font-display);
font-size: var(--term-text-xs);
font-weight: 500;
letter-spacing: var(--term-tracking-wider);
text-transform: uppercase;
color: var(--term-accent);
background: transparent;
border: 1px solid var(--term-accent-dim);
padding: var(--term-space-xs) var(--term-space-md);
cursor: pointer;
transition: all var(--term-duration-normal) var(--term-easing);
}
.aw-new-btn-sm:hover {
background: var(--term-accent-ghost);
box-shadow: var(--term-glow-accent);
}
/* Admission card */
.aw-admission-card {
background: var(--term-bg-surface);
border: 1px solid var(--term-border-subtle);
padding: var(--term-space-lg);
position: relative;
cursor: pointer;
transition: all var(--term-duration-normal) var(--term-easing);
animation: aw-card-enter 400ms var(--term-easing) both;
}
@keyframes aw-card-enter {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stepped ziggurat corners — top-right */
.aw-admission-card::before {
content: '';
position: absolute;
top: var(--term-corner-offset);
right: var(--term-corner-offset);
width: var(--term-corner-size);
height: var(--term-corner-size);
border-top: var(--term-corner-width) solid var(--term-gold-dim);
border-right: var(--term-corner-width) solid var(--term-gold-dim);
opacity: 0.35;
clip-path: polygon(0 0, 100% 0, 100% 100%, 60% 100%, 60% 40%, 0 40%);
pointer-events: none;
transition: opacity var(--term-duration-normal) var(--term-easing);
}
/* Stepped ziggurat corners — bottom-left */
.aw-admission-card::after {
content: '';
position: absolute;
bottom: var(--term-corner-offset);
left: var(--term-corner-offset);
width: var(--term-corner-size);
height: var(--term-corner-size);
border-bottom: var(--term-corner-width) solid var(--term-gold-dim);
border-left: var(--term-corner-width) solid var(--term-gold-dim);
opacity: 0.35;
clip-path: polygon(0 0, 40% 0, 40% 60%, 100% 60%, 100% 100%, 0 100%);
pointer-events: none;
transition: opacity var(--term-duration-normal) var(--term-easing);
}
/* Hover: lift + corners brighter */
.aw-admission-card:hover {
border-color: var(--term-border-default);
transform: translateY(-1px);
box-shadow: var(--term-shadow-card-hover);
}
.aw-admission-card:hover::before,
.aw-admission-card:hover::after {
opacity: 0.6;
}
/* Selected state: accent left border + gradient wash */
.aw-admission-card.selected {
border-left: 3px solid var(--term-accent);
border-color: var(--term-accent-dim);
background: linear-gradient(
90deg,
var(--term-accent-ghost) 0%,
var(--term-bg-surface) 40%
);
}
.aw-admission-card.selected::before,
.aw-admission-card.selected::after {
opacity: 0.8;
}
/* Card content elements */
.aw-card-name {
font-family: var(--term-font-display);
font-size: var(--term-text-lg);
font-weight: 400;
color: var(--term-fg-primary);
margin: 0 0 2px 0;
}
.aw-card-mrn {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
letter-spacing: var(--term-tracking-wide);
}
.aw-card-mrn::before {
content: 'MRN ';
color: var(--term-gold-dim);
}
.aw-card-complaint {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-secondary);
margin-top: var(--term-space-xs);
}
.aw-card-complaint::before {
content: '// ';
color: var(--term-fg-muted);
}
.aw-card-badges {
display: flex;
gap: var(--term-space-sm);
margin-top: var(--term-space-sm);
flex-wrap: wrap;
align-items: center;
}
.aw-card-time {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
margin-top: var(--term-space-sm);
}
.aw-card-time::before {
content: '// ';
}
/* --------------------------------------------------------------------------
S3b LIST CONTROLS — Sort, Show Archived toggle
-------------------------------------------------------------------------- */
.aw-list-controls {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--term-space-sm) var(--term-space-sm) 0;
gap: var(--term-space-sm);
border-bottom: 1px solid var(--term-border-subtle);
flex-shrink: 0;
}
.aw-list-sort {
display: flex;
align-items: center;
gap: var(--term-space-xs);
}
.aw-field-label--inline {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
letter-spacing: var(--term-tracking-wide);
white-space: nowrap;
}
.aw-select--compact {
font-size: var(--term-text-xs);
padding: 2px var(--term-space-xs);
background: var(--term-bg-surface);
color: var(--term-fg-secondary);
border: 1px solid var(--term-border-subtle);
font-family: var(--term-font-mono);
cursor: pointer;
}
.aw-select--compact:focus {
border-color: var(--term-accent-dim);
outline: none;
}
.aw-archived-toggle {
display: flex;
align-items: center;
gap: 4px;
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
cursor: pointer;
user-select: none;
white-space: nowrap;
}
.aw-archived-toggle input[type="checkbox"] {
accent-color: var(--term-accent);
cursor: pointer;
margin: 0;
}
/* --------------------------------------------------------------------------
S3c CARD LAYOUT — Drag handle, content area, action buttons
-------------------------------------------------------------------------- */
/* Card now uses flex row: [drag-handle] [content] [actions] */
.aw-admission-card {
display: flex;
align-items: stretch;
gap: 0;
}
.aw-card-drag-handle {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
flex-shrink: 0;
cursor: grab;
color: var(--term-fg-muted);
font-size: 11px;
letter-spacing: -2px;
opacity: 0.3;
transition: opacity var(--term-duration-fast) var(--term-easing);
user-select: none;
}
.aw-admission-card:hover .aw-card-drag-handle {
opacity: 0.7;
}
.aw-card-drag-handle:active {
cursor: grabbing;
}
.aw-card-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.aw-card-actions {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
opacity: 0;
transition: opacity var(--term-duration-fast) var(--term-easing);
flex-shrink: 0;
padding-left: var(--term-space-xs);
}
.aw-admission-card:hover .aw-card-actions {
opacity: 1;
}
.aw-card-action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border: 1px solid transparent;
background: transparent;
cursor: pointer;
font-size: 14px;
line-height: 1;
border-radius: 2px;
transition: all var(--term-duration-fast) var(--term-easing);
padding: 0;
}
.aw-card-action--archive {
color: var(--term-accent);
}
.aw-card-action--archive:hover {
background: var(--term-accent-subtle);
border-color: var(--term-accent-dim);
}
.aw-card-action--restore {
color: var(--term-gold);
}
.aw-card-action--restore:hover {
background: var(--term-gold-subtle);
border-color: var(--term-gold-dim);
}
.aw-card-action--delete {
color: var(--term-fg-muted);
}
.aw-card-action--delete:hover {
color: var(--term-status-error);
background: rgba(255, 85, 85, 0.1);
border-color: rgba(255, 85, 85, 0.3);
}
/* --------------------------------------------------------------------------
S3d CARD STATES — Archived, Dragging, Drop Indicator
-------------------------------------------------------------------------- */
/* Archived card: dimmed */
.aw-card--archived {
opacity: 0.45;
}
.aw-card--archived .aw-card-name::after {
content: ' [archived]';
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
font-weight: 300;
}
/* Dragging state */
.aw-card--dragging {
opacity: 0.4;
border-style: dashed;
transform: scale(0.98);
}
/* Drop indicator line */
.aw-drop-indicator {
list-style: none;
height: 2px;
background: var(--term-accent);
border-radius: 1px;
margin: 0 var(--term-space-sm);
box-shadow: var(--term-glow-accent);
animation: aw-drop-pulse 800ms ease-in-out infinite alternate;
}
@keyframes aw-drop-pulse {
from { opacity: 0.6; }
to { opacity: 1; }
}
/* ==========================================================================
S4 WORKSPACE PANEL (RIGHT)
========================================================================== */
.aw-workspace {
grid-row: 1;
grid-column: 2;
overflow-y: auto;
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
height: 100%;
}
/* Section divider title */
.aw-section-title {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 300;
letter-spacing: 0.20em;
text-transform: uppercase;
color: var(--term-gold);
padding: var(--term-space-xl) 0 var(--term-space-sm);
display: flex;
align-items: center;
gap: var(--term-space-sm);
text-shadow: var(--term-text-glow-gold);
margin: 0;
}
.aw-section-title::before {
content: '>';
font-family: var(--term-font-mono);
font-weight: 700;
font-size: var(--term-text-base);
color: var(--term-accent);
text-shadow: var(--term-text-glow-accent);
flex-shrink: 0;
}
.aw-section-title::after {
content: '';
flex: 1;
height: 1px;
background: linear-gradient(to right, var(--term-gold-dim), transparent 80%);
margin-left: var(--term-space-md);
}
/* Field layout helpers */
.aw-field-group {
margin-bottom: var(--term-space-md);
}
.aw-field-row {
display: flex;
gap: var(--term-space-lg);
}
.aw-field-grow {
flex: 1;
min-width: 0;
}
.aw-field-narrow {
flex: 0 0 120px;
}
.aw-field-label {
font-family: var(--term-font-display);
font-size: var(--term-text-xs);
font-weight: 300;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--term-gold);
opacity: 0.6;
margin-bottom: var(--term-space-xs);
display: block;
}
.aw-field-label::before {
content: '$ ';
font-family: var(--term-font-mono);
color: var(--term-gold-dim);
}
/* Standard inputs and selects */
.aw-input,
.aw-select {
font-family: var(--term-font-body);
font-size: var(--term-text-base);
color: var(--term-fg-primary);
background: var(--term-bg-input);
border: none;
border-bottom: 1px solid var(--term-border-default);
padding: var(--term-space-sm) var(--term-space-md);
width: 100%;
outline: none;
transition: border-color var(--term-duration-normal) var(--term-easing),
box-shadow var(--term-duration-normal) var(--term-easing);
box-sizing: border-box;
}
.aw-input::placeholder {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-muted);
opacity: 0.5;
}
.aw-input:focus,
.aw-select:focus {
border-bottom-color: var(--term-accent);
box-shadow: 0 1px 0 0 var(--term-accent);
}
.aw-select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='%23A09888'%3E%3Cpath d='M6 8L0 0h12z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
cursor: pointer;
}
/* ── Compact Patient ID Row ──
WHY: Replaces the 3-row patient info form. Name + MRN + Acuity in one line.
Everything else (age, sex, DOB, CC, dx) lives in a collapsible details panel
because the doctor enters all that in the clinical text anyway. */
.aw-patient-id-row {
display: flex;
align-items: center;
gap: var(--term-space-sm);
padding: var(--term-space-sm) var(--term-space-lg);
border-bottom: 1px solid var(--term-border-subtle);
background: var(--term-bg-elevated);
}
.aw-input--inline {
font-family: var(--term-font-body);
font-size: var(--term-text-base);
color: var(--term-fg-primary);
background: transparent;
border: none;
border-bottom: 1px solid var(--term-border-subtle);
padding: 4px var(--term-space-sm);
outline: none;
transition: border-color 0.15s;
flex: 1;
min-width: 0;
}
.aw-input--inline:focus {
border-bottom-color: var(--term-accent);
}
.aw-input--inline::placeholder {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-muted);
opacity: 0.4;
}
.aw-input--mrn {
flex: 0 1 140px;
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
letter-spacing: 0.04em;
}
.aw-select--inline {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-secondary);
background: transparent;
border: 1px solid var(--term-border-subtle);
padding: 3px 24px 3px 6px;
outline: none;
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='%23A09888'%3E%3Cpath d='M4 5L0 0h8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 6px center;
flex: 0 0 auto;
transition: border-color 0.15s;
}
.aw-select--inline:focus {
border-color: var(--term-accent);
}
.aw-details-toggle {
background: none;
border: none;
color: var(--term-fg-muted);
font-size: 0.75rem;
cursor: pointer;
padding: 2px 4px;
opacity: 0.5;
transition: opacity 0.15s, transform 0.2s;
flex-shrink: 0;
}
.aw-details-toggle:hover { opacity: 1; }
.aw-details-toggle[aria-expanded="true"] { transform: rotate(180deg); }
/* Collapsible details panel */
.aw-details-panel {
background: var(--term-bg-surface);
border-bottom: 1px solid var(--term-border-subtle);
padding: var(--term-space-xs) var(--term-space-lg);
overflow: hidden;
}
.aw-details-fields {
display: flex;
gap: var(--term-space-md);
align-items: end;
flex-wrap: wrap;
}
.aw-detail-field {
flex: 0 0 auto;
}
.aw-detail-field--grow {
flex: 1;
min-width: 120px;
}
.aw-detail-field .aw-field-label {
font-size: 0.55rem;
margin-bottom: 2px;
}
.aw-input--compact,
.aw-select--compact {
font-size: var(--term-text-sm);
padding: 3px var(--term-space-sm);
}
/* Save status — positioned at end of patient ID row */
.aw-save-status {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
opacity: 0.6;
padding: 0 var(--term-space-lg);
text-align: right;
}
.aw-select option {
background: var(--term-bg-elevated);
color: var(--term-fg-primary);
}
/* Auto-save indicator */
.aw-save-status {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
letter-spacing: var(--term-tracking-wide);
color: var(--term-fg-muted);
text-align: right;
margin-bottom: var(--term-space-sm);
}
/* ==========================================================================
S5 PATIENT STRIP
========================================================================== */
.aw-patient-strip {
background: var(--term-bg-elevated);
border-bottom: 1px solid var(--term-border-default);
padding: var(--term-space-md) var(--term-space-xl);
display: flex;
align-items: center;
gap: var(--term-space-xl);
flex-shrink: 0;
position: relative;
}
/* Accent underline on strip */
.aw-patient-strip::after {
content: '';
position: absolute;
bottom: -1px;
left: var(--term-space-xl);
right: var(--term-space-xl);
height: 1px;
background: linear-gradient(
to right,
var(--term-accent-dim),
transparent 70%
);
pointer-events: none;
}
.aw-strip-name {
font-family: var(--term-font-display);
font-size: var(--term-text-lg);
font-weight: 400;
color: var(--term-fg-primary);
white-space: nowrap;
}
.aw-strip-mrn {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
letter-spacing: var(--term-tracking-wide);
white-space: nowrap;
}
.aw-strip-mrn::before {
content: 'MRN ';
color: var(--term-gold-dim);
}
.aw-strip-meta {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-secondary);
display: flex;
gap: var(--term-space-lg);
flex-wrap: wrap;
}
.aw-strip-meta-item {
white-space: nowrap;
}
.aw-strip-meta-item::before {
content: '// ';
color: var(--term-fg-muted);
}
.aw-strip-badges {
display: flex;
gap: var(--term-space-sm);
align-items: center;
margin-left: auto;
}
/* ==========================================================================
S6 CLINICAL DATA TEXTAREA
========================================================================== */
/* Wrapper provides the glow frame */
.aw-clinical-textarea-wrap {
position: relative;
border: 1px solid var(--term-border-default);
transition: border-color var(--term-duration-normal) var(--term-easing),
box-shadow var(--term-duration-normal) var(--term-easing);
}
.aw-clinical-textarea-wrap:focus-within {
border-color: var(--term-accent-dim);
box-shadow: var(--term-glow-accent);
}
/* The textarea itself — comfortable clinical data entry */
.aw-clinical-textarea {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
line-height: 1.75;
color: var(--term-fg-primary);
background: var(--term-bg-input);
border: none;
padding: var(--term-space-lg);
width: 100%;
min-height: 280px;
resize: vertical;
outline: none;
box-sizing: border-box;
/* Tab-stop friendly; paste-ready for pasted EHR text */
tab-size: 4;
white-space: pre-wrap;
word-break: break-word;
}
.aw-clinical-textarea::placeholder {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-muted);
opacity: 0.4;
line-height: 1.75;
}
/* Textarea char/word count hint */
.aw-clinical-textarea-meta {
display: flex;
justify-content: flex-end;
padding: var(--term-space-xs) var(--term-space-md);
background: var(--term-bg-input);
border-top: 1px solid var(--term-border-subtle);
}
.aw-clinical-textarea-count {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
letter-spacing: var(--term-tracking-wide);
}
/* ==========================================================================
S7 ACTION BAR (ANALYZE / SAVE BUTTONS)
========================================================================== */
.aw-action-bar {
display: flex;
align-items: center;
gap: var(--term-space-md);
padding: var(--term-space-lg) var(--term-space-xl);
border-top: 1px solid var(--term-border-subtle);
background: var(--term-bg-void);
flex-shrink: 0;
}
/* Primary: Generate H&P */
.aw-generate-btn {
flex: 1;
background: linear-gradient(135deg, var(--term-accent), var(--term-accent-hot));
border: none;
color: var(--term-fg-inverse);
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: var(--term-space-md) var(--term-space-xl);
min-height: 44px;
cursor: pointer;
transition: all var(--term-duration-normal) var(--term-easing);
}
.aw-generate-btn:hover {
box-shadow: var(--term-glow-accent-intense);
transform: translateY(-1px);
}
.aw-generate-btn:active {
transform: translateY(0);
}
.aw-generate-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Secondary ghost button (Save, Copy, etc.) */
.aw-btn {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
font-weight: 500;
letter-spacing: var(--term-tracking-wide);
text-transform: uppercase;
color: var(--term-fg-secondary);
background: transparent;
border: 1px solid var(--term-border-default);
padding: var(--term-space-sm) var(--term-space-lg);
cursor: pointer;
min-height: 44px;
transition: all var(--term-duration-normal) var(--term-easing);
}
.aw-btn:hover {
border-color: var(--term-accent-dim);
color: var(--term-fg-primary);
}
/* CLEANUP (2026-03-03): .aw-btn-danger (single-dash) deleted — superseded by
.aw-btn--danger (BEM, double-dash) defined in S17. HTML uses .aw-btn--danger. */
/* Status field in action bar */
.aw-status-select-wrap {
flex: 0 0 170px;
}
/* ==========================================================================
S8 NOTE OUTPUT AREA
========================================================================== */
.aw-note-output-section {
border-top: 1px solid var(--term-border-default);
background: var(--term-bg-surface);
position: relative;
flex-shrink: 0;
}
.aw-note-output-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--term-space-md) var(--term-space-xl);
border-bottom: 1px solid var(--term-border-subtle);
}
.aw-note-output-title {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 300;
letter-spacing: var(--term-tracking-display);
text-transform: uppercase;
color: var(--term-gold);
margin: 0;
text-shadow: var(--term-text-glow-gold);
}
.aw-note-output-actions {
display: flex;
gap: var(--term-space-sm);
}
/* Footer row below note output — holds Save H&P button */
.aw-output-footer {
display: flex;
justify-content: flex-end;
align-items: center;
padding: var(--term-space-md) var(--term-space-xl);
border-top: 1px solid var(--term-border-subtle);
background: var(--term-bg-void);
flex-shrink: 0;
}
.aw-output-footer-actions {
display: flex;
gap: 10px;
align-items: center;
}
/* The actual note text display */
.aw-note-output {
padding: var(--term-space-xl);
font-family: var(--term-font-body);
font-size: var(--term-text-base);
line-height: 1.7;
color: var(--term-fg-primary);
white-space: pre-wrap;
max-height: 40vh;
overflow-y: auto;
}
/* Streaming: partial content hint */
.aw-note-output.streaming {
border-left: 2px solid var(--term-accent-dim);
}
.aw-note-output.streaming::after {
content: '█';
color: var(--term-accent);
animation: aw-cursor-blink 1s step-end infinite;
font-family: var(--term-font-mono);
}
@keyframes aw-cursor-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
/* ==========================================================================
S9 EMPTY STATES
========================================================================== */
/* Workspace empty state — no admission selected */
.aw-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 60vh;
gap: var(--term-space-lg);
text-align: center;
padding: var(--term-space-2xl);
}
.aw-empty-icon {
font-size: 3rem;
color: var(--term-fg-muted);
opacity: 0.4;
}
.aw-empty-title {
font-family: var(--term-font-display);
font-size: var(--term-text-lg);
font-weight: 300;
letter-spacing: var(--term-tracking-wide);
color: var(--term-fg-secondary);
margin: 0;
}
.aw-empty-subtitle {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-muted);
margin: 0;
letter-spacing: var(--term-tracking-wide);
}
/* ==========================================================================
S10 ACUITY & STATUS BADGES
========================================================================== */
/* Shared badge base */
.aw-acuity-badge,
.aw-status-badge,
.aw-card-status {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
font-weight: 600;
letter-spacing: var(--term-tracking-wider);
text-transform: uppercase;
padding: 2px 8px;
border: 1px solid currentColor;
display: inline-block;
line-height: 1.4;
flex-shrink: 0;
}
/* --- Acuity badges --- */
/* CLEANUP (2026-03-03): [data-acuity=*] selectors removed — JS renders
class-based badges (.aw-acuity--icu, .aw-acuity--emergent, etc.) via
_acuityClass() in admission-list.js. Data-attribute selectors were dead code.
Class-based rules with DR severity tokens live in S11c. */
/* --- Status badges --- */
/* pending: worsening — needs attention */
.aw-status-badge[data-status="pending"] {
color: var(--dr-severity-worsening);
background: var(--dr-severity-worsening-bg);
border-color: var(--dr-amber-hot-dim);
font-weight: 500;
}
/* data_entry: improving — in progress */
.aw-status-badge[data-status="data_entry"] {
color: var(--dr-severity-improving);
background: var(--dr-severity-improving-bg);
border-color: var(--dr-amber-dim);
}
/* hp_generated: stable — generated, awaiting EHR review */
.aw-status-badge[data-status="hp_generated"] {
color: var(--dr-severity-stable);
background: var(--dr-severity-stable-bg);
border-color: var(--dr-gold-dim);
}
/* saved: resolved — complete */
.aw-status-badge[data-status="saved"] {
color: var(--dr-severity-resolved);
background: var(--dr-severity-resolved-bg);
border-color: var(--dr-teal-dim);
}
/* archived: muted strikethrough */
.aw-status-badge[data-status="archived"] {
color: var(--term-fg-muted);
border-color: var(--term-border-subtle);
text-decoration: line-through;
opacity: 0.6;
}
/* ==========================================================================
S11 GRAIN OVERLAY + SCROLLBARS
========================================================================== */
/* Film grain overlay */
.aw-page::before {
content: '';
position: fixed;
inset: 0;
background-image: var(--term-grain);
background-size: 512px 512px;
pointer-events: none;
z-index: 9999;
}
/* Webkit scrollbars */
.aw-list-panel::-webkit-scrollbar,
.aw-workspace::-webkit-scrollbar,
.aw-workspace-inner::-webkit-scrollbar,
.aw-note-output::-webkit-scrollbar {
width: 6px;
}
.aw-list-panel::-webkit-scrollbar-track,
.aw-workspace::-webkit-scrollbar-track,
.aw-workspace-inner::-webkit-scrollbar-track,
.aw-note-output::-webkit-scrollbar-track {
background: var(--term-bg-void);
}
.aw-list-panel::-webkit-scrollbar-thumb,
.aw-workspace::-webkit-scrollbar-thumb,
.aw-workspace-inner::-webkit-scrollbar-thumb,
.aw-note-output::-webkit-scrollbar-thumb {
background: var(--term-border-default);
border-radius: 3px;
}
.aw-list-panel::-webkit-scrollbar-thumb:hover,
.aw-workspace::-webkit-scrollbar-thumb:hover,
.aw-workspace-inner::-webkit-scrollbar-thumb:hover,
.aw-note-output::-webkit-scrollbar-thumb:hover {
background: var(--term-border-strong);
}
/* Firefox scrollbars */
.aw-list-panel,
.aw-workspace,
.aw-workspace-inner,
.aw-note-output {
scrollbar-width: thin;
scrollbar-color: var(--term-border-default) var(--term-bg-void);
}
/* H4 a11y: screen-reader-only utility */
.aw-visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Focus ring (global for .aw-page) */
.aw-page *:focus-visible {
outline: 2px solid var(--term-accent);
outline-offset: 2px;
}
.aw-input:focus-visible,
.aw-select:focus-visible,
.aw-clinical-textarea:focus-visible {
outline: none;
}
/* ==========================================================================
S11b MISSING BUTTON VARIANTS (H1.2, H1.5)
========================================================================== */
/* H1.2 — Save H&P button (output footer, gold accent to signal finalization) */
.aw-save-btn {
background: linear-gradient(135deg, var(--term-gold), var(--term-gold-hot));
border: none;
color: var(--term-fg-inverse);
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 600;
letter-spacing: 0.10em;
text-transform: uppercase;
padding: var(--term-space-md) var(--term-space-xl);
min-height: 44px;
cursor: pointer;
transition: all var(--term-duration-normal) var(--term-easing);
}
.aw-save-btn:hover {
box-shadow: var(--term-glow-gold);
transform: translateY(-1px);
}
.aw-save-btn:active {
transform: translateY(0);
}
.aw-save-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* H1.5 — Secondary ghost variant for .aw-btn (Back / cancel actions) */
.aw-btn--secondary {
color: var(--term-fg-muted);
border-color: var(--term-border-subtle);
}
.aw-btn--secondary:hover {
border-color: var(--term-border-default);
color: var(--term-fg-secondary);
}
/* ==========================================================================
S11c PATIENT STRIP CHIP CLASSES (H1.6 — rendered by workspace.js)
========================================================================== */
/* Demographic info chip */
.aw-patient-strip .aw-strip-demo {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-secondary);
letter-spacing: var(--term-tracking-wide);
white-space: nowrap;
}
/* Acuity and status chip containers share badge base */
.aw-patient-strip .aw-strip-acuity,
.aw-patient-strip .aw-strip-status {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
font-weight: 600;
letter-spacing: var(--term-tracking-wider);
text-transform: uppercase;
padding: 2px 8px;
border: 1px solid currentColor;
display: inline-block;
line-height: 1.4;
flex-shrink: 0;
}
/* Acuity chip values — match form select values (routine/urgent/emergent/icu) */
/* DR: --dr-severity-* replaces --term-status-* workflow colors with clinically
correct severity semantics. Previously "obs" rendered blue (the "generating"
workflow color), which is semantically inverted for a clinical severity scale. */
.aw-acuity--icu {
color: var(--dr-severity-critical);
background: var(--dr-severity-critical-bg);
border-color: var(--dr-scarlet-dim);
box-shadow: 0 0 6px rgba(196, 76, 76, 0.20);
}
.aw-acuity--emergent {
color: var(--dr-severity-critical);
background: var(--dr-severity-critical-bg);
border-color: var(--dr-scarlet-dim);
}
.aw-acuity--urgent {
color: var(--dr-severity-worsening);
background: var(--dr-severity-worsening-bg);
border-color: var(--dr-amber-hot-dim);
}
.aw-acuity--routine {
color: var(--dr-severity-stable);
background: var(--dr-severity-stable-bg);
border-color: var(--dr-gold-dim);
}
/* Obs: resolved/teal — semantically correct (observation is lowest-acuity) */
.aw-acuity--obs {
color: var(--dr-severity-resolved);
background: var(--dr-severity-resolved-bg);
border-color: var(--dr-teal-dim);
}
/* Status chip values */
/* DR: workflow stages mapped to severity scale — pending=needs attention (worsening),
data_entry=in progress (improving), hp_generated=awaiting review (stable),
saved=complete (resolved). Archived stays muted/de-emphasized. */
.aw-status--pending {
color: var(--dr-severity-worsening);
background: var(--dr-severity-worsening-bg);
border-color: var(--dr-amber-hot-dim);
}
.aw-status--data_entry {
color: var(--dr-severity-improving);
background: var(--dr-severity-improving-bg);
border-color: var(--dr-amber-dim);
}
.aw-status--hp_generated {
color: var(--dr-severity-stable);
background: var(--dr-severity-stable-bg);
border-color: var(--dr-gold-dim);
}
.aw-status--saved {
color: var(--dr-severity-resolved);
background: var(--dr-severity-resolved-bg);
border-color: var(--dr-teal-dim);
}
.aw-status--archived {
color: var(--term-fg-muted);
border-color: var(--term-border-subtle);
text-decoration: line-through;
opacity: 0.6;
}
/* ==========================================================================
S12 NEW ADMISSION MODAL
========================================================================== */
.aw-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.aw-modal[hidden] {
display: none;
}
.aw-modal-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.72);
}
.aw-modal-content {
position: relative;
background: var(--term-bg-elevated);
border: 1px solid var(--term-border-default);
width: 90%;
max-width: 540px;
max-height: 85vh;
display: flex;
flex-direction: column;
z-index: 1;
/* Stepped ziggurat corners on modal */
box-shadow: var(--term-shadow-modal);
}
/* Wide modal modifier — used for help guide modal */
.aw-modal-content--wide {
max-width: 620px;
}
/* Accent left edge on modal */
.aw-modal-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 3px;
height: 100%;
background: linear-gradient(to bottom, var(--term-accent-dim), transparent);
pointer-events: none;
}
.aw-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--term-space-lg) var(--term-space-xl);
border-bottom: 1px solid var(--term-border-subtle);
}
.aw-modal-title {
font-family: var(--term-font-display);
font-size: var(--term-text-lg);
font-weight: 300;
letter-spacing: var(--term-tracking-display);
text-transform: uppercase;
color: var(--term-gold);
margin: 0;
text-shadow: var(--term-text-glow-gold);
}
.aw-modal-close {
font-size: 1.25rem;
color: var(--term-fg-muted);
background: transparent;
border: none;
cursor: pointer;
padding: var(--term-space-xs);
transition: color var(--term-duration-normal) var(--term-easing);
line-height: 1;
}
.aw-modal-close:hover {
color: var(--term-fg-primary);
}
.aw-modal-body {
flex: 1;
overflow-y: auto;
padding: var(--term-space-xl);
display: flex;
flex-direction: column;
gap: var(--term-space-md);
}
.aw-modal-footer {
display: flex;
justify-content: flex-end;
gap: var(--term-space-md);
padding: var(--term-space-lg) var(--term-space-xl);
border-top: 1px solid var(--term-border-subtle);
}
/* Divider for modal sections */
.aw-divider {
height: 1px;
background: linear-gradient(
to right,
transparent,
var(--term-gold-dim) 20%,
var(--term-gold-dim) 80%,
transparent
);
margin: var(--term-space-md) 0;
position: relative;
}
/* Fan motif at center of divider */
.aw-divider::before {
content: '';
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 9px;
height: 9px;
background: var(--term-gold-dim);
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
opacity: 0.5;
}
/* ==========================================================================
S13 LIVE SCAFFOLD (H&P template that fills progressively during data entry)
========================================================================== */
/* ARCHITECTURE: The scaffold replaces flat section badges with a spatial H&P
template preview. Sections are always visible (empty skeleton), then fill
progressively as the doctor types/dictates. Layout mirrors the final note
structure so the doctor sees their H&P taking shape in real-time.
WHY: Spatial orientation is critical during rapid data entry. Doctors need
to see which parts of the note have data and which still need input.
TRADEOFF: More vertical space vs much richer visual feedback. */
/* Two-panel layout: clinical text input (left) + live note scaffold (right).
WHY: The scaffold IS the note — not a tiny preview, but the actual H&P content
at readable size. 60/40 split favors the textarea while giving the scaffold
enough room to show real content. With the list collapsed (80px), a 1920
screen gives ~1060px textarea + ~700px scaffold. */
.aw-clinical-with-sidebar {
display: grid;
grid-template-columns: 3fr 2fr;
gap: var(--term-space-lg);
flex: 1;
min-height: 0;
}
@media (max-width: 1200px) {
.aw-clinical-with-sidebar {
grid-template-columns: 3fr 2fr;
}
}
@media (max-width: 700px) {
.aw-clinical-with-sidebar {
grid-template-columns: 1fr;
}
}
.aw-section-sidebar {
background: var(--term-bg-surface);
border: 1px solid var(--term-border-subtle);
padding: var(--term-space-md) var(--term-space-lg) var(--term-space-md);
overflow-y: auto;
align-self: stretch;
}
/* Counter bar: "4/13 sections 3.2ms" */
.aw-scaffold-counter {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-muted);
padding: 0 2px var(--term-space-sm);
border-bottom: 1px solid var(--term-border-subtle);
margin-bottom: var(--term-space-sm);
display: flex;
align-items: baseline;
gap: 3px;
}
.aw-scaffold-count {
color: var(--term-accent);
font-weight: 600;
}
.aw-scaffold-timing {
margin-left: auto;
opacity: 0.5;
font-size: var(--term-text-xs);
}
/* Section stack */
.aw-scaffold-sections {
display: flex;
flex-direction: column;
gap: 1px;
}
/* Individual section card */
.aw-scaffold-section {
padding: 6px 8px 5px;
border-left: 3px solid transparent;
transition: border-color var(--term-duration-normal) var(--term-easing),
background var(--term-duration-normal) var(--term-easing);
}
/* State: empty — dim, just the header */
.aw-scaffold-section--empty {
opacity: 0.35;
border-left-color: transparent;
}
/* State: detected — keyword found but no extractable text block */
.aw-scaffold-section--detected {
opacity: 0.7;
border-left-color: var(--term-accent-dim);
background: rgba(255, 255, 255, 0.015);
}
/* State: filled — section header found + text extracted */
.aw-scaffold-section--filled {
opacity: 1;
border-left-color: var(--term-accent);
background: rgba(255, 255, 255, 0.025);
}
/* Auxiliary sections (labs, imaging) — not standalone H&P sections, shown subtly */
.aw-scaffold-section--aux .aw-scaffold-title {
font-style: italic;
}
/* Section header row: ABBREV Title ● */
.aw-scaffold-header {
display: flex;
align-items: baseline;
gap: 6px;
line-height: 1.35;
}
.aw-scaffold-abbrev {
font-family: var(--term-font-mono);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
color: var(--term-gold);
min-width: 38px;
flex-shrink: 0;
}
.aw-scaffold-section--filled .aw-scaffold-abbrev {
color: var(--term-accent);
}
.aw-scaffold-title {
font-family: var(--term-font-body);
font-size: 0.8125rem;
color: var(--term-fg-secondary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
}
.aw-scaffold-indicator {
font-size: 0.625rem;
flex-shrink: 0;
}
.aw-scaffold-ind--empty { color: var(--term-fg-muted); opacity: 0.4; }
.aw-scaffold-ind--detected { color: var(--term-accent-dim); }
.aw-scaffold-ind--filled { color: var(--term-accent); text-shadow: var(--term-text-glow-accent); }
/* Section content — editable, reads like the actual note */
.aw-scaffold-content {
font-family: var(--term-font-body);
font-size: 0.8125rem;
line-height: 1.65;
color: var(--term-fg-secondary);
margin: 4px 0 2px 0;
padding: var(--term-space-xs) var(--term-space-sm);
white-space: pre-wrap;
word-break: break-word;
outline: none;
border: 1px solid transparent;
border-radius: 2px;
transition: border-color 0.15s, background 0.15s;
cursor: text;
min-height: 1.5em;
}
.aw-scaffold-content:hover {
border-color: var(--term-border-subtle);
background: rgba(255, 255, 255, 0.015);
}
.aw-scaffold-content:focus {
border-color: var(--term-accent-dim);
background: rgba(255, 255, 255, 0.025);
}
/* Edited/refined sections get a subtle left accent */
.aw-scaffold-section--edited .aw-scaffold-content {
border-left: 2px solid var(--term-gold);
}
/* Refine + Reset action buttons */
.aw-scaffold-actions {
display: flex;
gap: var(--term-space-xs);
justify-content: flex-end;
margin-bottom: 2px;
}
.aw-scaffold-refine-btn,
.aw-scaffold-reset-btn {
font-family: var(--term-font-mono);
font-size: 0.625rem;
letter-spacing: 0.06em;
text-transform: lowercase;
background: none;
border: 1px solid var(--term-border-subtle);
color: var(--term-fg-muted);
padding: 1px 8px;
cursor: pointer;
border-radius: 2px;
transition: color 0.15s, border-color 0.15s;
}
.aw-scaffold-refine-btn:hover {
color: var(--term-accent);
border-color: var(--term-accent-dim);
}
.aw-scaffold-reset-btn:hover {
color: var(--term-gold);
border-color: var(--term-gold);
}
.aw-scaffold-refine-btn--active {
color: var(--term-accent);
border-color: var(--term-accent-dim);
cursor: wait;
opacity: 0.7;
}
/* Legacy class kept for chips (structured data overlays) */
.aw-scaffold-preview {
font-family: var(--term-font-mono);
font-size: 0.8125rem;
line-height: 1.6;
color: var(--term-fg-secondary);
margin: 4px 0 2px 0;
padding-left: var(--term-space-md);
border-left: 1px solid var(--term-border-subtle);
white-space: pre-wrap;
word-break: break-word;
}
/* Structured data chips (vitals, labs, meds from backend parse) */
.aw-scaffold-chips {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 4px 0 2px 0;
padding-left: var(--term-space-md);
}
.aw-scaffold-chip {
font-family: var(--term-font-mono);
font-size: 0.75rem;
padding: 2px 8px;
border: 1px solid var(--term-border-subtle);
white-space: nowrap;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.5;
}
/* DR semantic chip colors: vital=teal (live data), lab=amber (reference),
med=amber-hot (active intervention) */
.aw-scaffold-chip--vital {
color: var(--dr-teal, var(--term-accent));
border-color: var(--dr-teal-dim, var(--term-accent-dim));
}
.aw-scaffold-chip--lab {
color: var(--dr-amber, var(--term-gold));
border-color: var(--dr-amber-dim, var(--term-border-subtle));
}
.aw-scaffold-chip--med {
color: var(--dr-amber-hot, var(--term-gold));
border-color: var(--dr-amber-hot-dim, var(--term-border-subtle));
}
.aw-scaffold-chip--more {
color: var(--term-fg-muted);
border-color: var(--term-border-subtle);
font-style: italic;
}
/* Section groups — visual subsection container for related sections
(e.g., Background: PMH, Meds, Allergies, SHx, FHx) */
.aw-scaffold-group {
border: 1px solid var(--term-border-subtle);
border-radius: 2px;
margin: 2px 0;
transition: border-color var(--term-duration-normal) var(--term-easing);
}
.aw-scaffold-group--detected {
border-color: var(--term-accent-dim);
}
.aw-scaffold-group--filled {
border-color: var(--term-accent);
}
.aw-scaffold-group-label {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 3px 6px 2px;
border-bottom: 1px solid var(--term-border-subtle);
}
.aw-scaffold-group-text {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 300;
letter-spacing: var(--term-tracking-widest);
text-transform: uppercase;
color: var(--term-gold);
opacity: 0.55;
}
.aw-scaffold-group--filled .aw-scaffold-group-text {
opacity: 0.8;
}
.aw-scaffold-group-count {
font-family: var(--term-font-mono);
font-size: 0.6875rem;
color: var(--term-fg-muted);
opacity: 0.5;
}
.aw-scaffold-group-members {
display: flex;
flex-direction: column;
gap: 0;
}
/* Grouped sections: tighter padding, individual left border within group container */
.aw-scaffold-section--grouped {
padding: 4px 8px 3px;
border-left: 3px solid transparent;
}
.aw-scaffold-section--grouped.aw-scaffold-section--filled {
border-left-color: var(--term-accent);
}
.aw-scaffold-section--grouped.aw-scaffold-section--detected {
border-left-color: var(--term-accent-dim);
}
/* Grouped section content inherits base preview styles */
.aw-scaffold-section--grouped .aw-scaffold-preview {
margin-left: 0;
}
.aw-scaffold-section--grouped .aw-scaffold-chips {
margin-left: 0;
padding-left: var(--term-space-md);
}
/* Primary section (A&P) — elevated, visually prominent, more preview space.
WHY: The assessment & plan is the clinical decision point of the H&P.
It should immediately stand out in the scaffold — the doctor's eye
should land here to see the emerging clinical picture. */
.aw-scaffold-section--primary {
margin-top: var(--term-space-xs);
padding: 6px 6px 5px;
border: 1px solid var(--term-border-subtle);
border-left: 3px solid transparent;
border-radius: 2px;
background: rgba(255, 255, 255, 0.01);
}
.aw-scaffold-section--primary.aw-scaffold-section--empty {
opacity: 0.4;
}
.aw-scaffold-section--primary.aw-scaffold-section--detected {
border-left-color: var(--term-gold);
background: rgba(255, 255, 255, 0.02);
}
.aw-scaffold-section--primary.aw-scaffold-section--filled {
border-left-color: var(--term-gold);
border-color: var(--term-gold);
background: rgba(255, 255, 255, 0.03);
}
.aw-scaffold-section--primary .aw-scaffold-abbrev {
color: var(--term-gold);
font-size: 0.875rem;
font-weight: 700;
letter-spacing: 0.08em;
}
.aw-scaffold-section--primary.aw-scaffold-section--filled .aw-scaffold-abbrev {
text-shadow: 0 0 8px rgba(218, 165, 32, 0.4);
}
.aw-scaffold-section--primary .aw-scaffold-title {
font-weight: 500;
font-size: 0.875rem;
}
/* A&P content gets full display — this is the most important section */
.aw-scaffold-section--primary .aw-scaffold-preview {
font-size: 0.8125rem;
color: var(--term-fg-primary);
margin-left: 0;
}
/* ==========================================================================
S14 STATUS SUMMARY BAR (list panel)
========================================================================== */
.aw-status-summary {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
letter-spacing: var(--term-tracking-wide);
color: var(--term-fg-muted);
padding: var(--term-space-xs) var(--term-space-lg);
border-bottom: 1px solid var(--term-border-subtle);
display: flex;
gap: var(--term-space-lg);
flex-wrap: wrap;
}
.aw-status-summary:empty {
display: none;
}
.aw-status-summary .aw-summary-count--pending { color: var(--term-fg-muted); }
.aw-status-summary .aw-summary-count--data_entry { color: var(--term-accent); }
.aw-status-summary .aw-summary-count--hp_generated { color: var(--term-gold); }
.aw-status-summary .aw-summary-count--saved { color: var(--term-status-ready); }
/* Separator pipe rendered by JS between status count spans */
.aw-status-summary-sep { opacity: 0.3; }
/* ==========================================================================
S15 SEARCH INPUT (list panel)
========================================================================== */
.aw-list-search {
flex: 1;
min-width: 0;
}
.aw-input--search {
background: var(--term-bg-input);
border: none;
border-bottom: 1px solid var(--term-border-subtle);
padding: var(--term-space-xs) var(--term-space-md);
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-primary);
width: 100%;
outline: none;
box-sizing: border-box;
}
.aw-input--search:focus {
border-bottom-color: var(--term-accent);
}
.aw-input--search::placeholder {
color: var(--term-fg-muted);
opacity: 0.5;
}
/* ==========================================================================
S16 SOURCE DRAWER (reference clinical data during H&P review)
========================================================================== */
.aw-source-drawer {
background: var(--term-bg-void);
border-bottom: 1px solid var(--term-border-subtle);
max-height: 200px;
overflow-y: auto;
}
.aw-source-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--term-space-xs) var(--term-space-lg);
border-bottom: 1px solid var(--term-border-subtle);
}
.aw-source-drawer-title {
font-family: var(--term-font-display);
font-size: var(--term-text-xs);
font-weight: 300;
letter-spacing: var(--term-tracking-wider);
text-transform: uppercase;
color: var(--term-fg-muted);
}
.aw-source-drawer-content {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
line-height: 1.6;
color: var(--term-fg-secondary);
padding: var(--term-space-md) var(--term-space-lg);
margin: 0;
white-space: pre-wrap;
word-break: break-word;
}
.aw-btn--icon {
background: transparent;
border: none;
color: var(--term-fg-muted);
font-size: 1.25rem;
cursor: pointer;
padding: 2px 6px;
line-height: 1;
min-height: auto;
}
.aw-btn--icon:hover {
color: var(--term-fg-primary);
}
/* ==========================================================================
S17 DANGER BUTTON VARIANT
========================================================================== */
.aw-btn--danger {
color: var(--term-status-error);
border-color: rgba(239, 68, 68, 0.25);
}
.aw-btn--danger:hover {
border-color: rgba(239, 68, 68, 0.5);
background: rgba(239, 68, 68, 0.04);
box-shadow: var(--term-glow-red);
}
/* ==========================================================================
S18 CENSUS LINK (post-save)
========================================================================== */
.aw-census-link a {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-accent);
text-decoration: none;
letter-spacing: var(--term-tracking-wide);
}
.aw-census-link a:hover {
text-shadow: var(--term-text-glow-accent);
}
/* ==========================================================================
S19 LINT CHIPS (verification badges in output footer)
========================================================================== */
.aw-lint-chips {
display: flex;
flex-wrap: wrap;
gap: var(--term-space-xs);
flex: 1;
align-items: center;
}
/* ==========================================================================
S20 VOICE RECORDER PANEL
========================================================================== */
.aw-audio-meter {
width: 80px;
height: 6px;
background: var(--term-bg-input);
border: 1px solid var(--term-border-subtle);
overflow: hidden;
}
.aw-audio-meter-bar {
height: 100%;
width: 0%;
background: var(--term-accent);
transition: width 100ms ease-out;
}
.aw-transcript-panel {
padding: var(--term-space-sm) var(--term-space-md);
background: var(--term-bg-input);
border-top: 1px solid var(--term-border-subtle);
max-height: 80px;
overflow-y: auto;
}
.aw-partial-transcript {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
font-style: italic;
}
.aw-transcript {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-secondary);
line-height: 1.5;
}
/* ==========================================================================
S21 LOADING INDICATOR (list panel)
========================================================================== */
.aw-loading-indicator {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
color: var(--term-fg-muted);
text-align: center;
padding: var(--term-space-2xl);
letter-spacing: var(--term-tracking-wide);
}
/* ==========================================================================
S22 HELP BUTTON + GUIDE MODAL CONTENT
========================================================================== */
.aw-help-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--term-accent-dim);
background: transparent;
color: var(--term-accent);
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--term-duration-normal) var(--term-easing);
flex-shrink: 0;
}
.aw-help-btn:hover {
border-color: var(--term-accent);
box-shadow: var(--term-glow-accent);
text-shadow: var(--term-text-glow-accent);
}
.aw-guide-section p {
font-family: var(--term-font-body);
font-size: var(--term-text-sm);
color: var(--term-fg-secondary);
line-height: 1.6;
margin: 0 0 var(--term-space-xs);
}
.aw-guide-section p:last-child {
margin-bottom: 0;
}
.aw-guide-heading {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 300;
letter-spacing: var(--term-tracking-wider);
text-transform: uppercase;
color: var(--term-gold);
margin: 0 0 var(--term-space-sm);
text-shadow: var(--term-text-glow-gold);
}
.aw-guide-kbd {
font-family: var(--term-font-mono);
font-size: 0.7rem;
color: var(--term-accent);
background: var(--term-bg-input);
border: 1px solid var(--term-border-subtle);
padding: 1px 5px;
white-space: nowrap;
}
.aw-guide-shortcut-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--term-space-xs) var(--term-space-xl);
}
@media (max-width: 500px) {
.aw-guide-shortcut-grid {
grid-template-columns: 1fr;
}
}
.aw-guide-shortcut-row {
display: flex;
align-items: center;
gap: var(--term-space-sm);
font-family: var(--term-font-body);
font-size: var(--term-text-sm);
color: var(--term-fg-secondary);
}
/* ==========================================================================
REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.aw-admission-card {
animation: none;
}
.aw-note-output.streaming::after {
animation: none;
opacity: 1;
}
.aw-admission-card:hover,
.aw-new-btn:hover,
.aw-generate-btn:hover {
transform: none;
}
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
}
}
/* ==========================================================================
S20 SHIFT HEADER + HISTORY
========================================================================== */
.aw-shift-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--term-space-sm) var(--term-space-md);
background: var(--term-bg-elevated);
border-bottom: 1px solid var(--term-border-subtle);
min-height: 38px;
}
.aw-shift-header-content {
display: flex;
align-items: center;
gap: var(--term-space-sm);
flex: 1;
min-width: 0;
}
.aw-shift-name {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 500;
color: var(--term-gold);
cursor: pointer;
padding: 2px var(--term-space-xs);
border-radius: 3px;
border: 1px solid transparent;
transition: border-color var(--term-duration-fast);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 160px;
}
.aw-shift-name:hover,
.aw-shift-name:focus-visible {
border-color: var(--term-gold);
outline: none;
}
.aw-shift-rename-input {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 500;
color: var(--term-gold);
background: var(--term-bg-void);
border: 1px solid var(--term-gold);
border-radius: 3px;
padding: 2px var(--term-space-xs);
width: 140px;
outline: none;
}
.aw-shift-date {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
letter-spacing: 0.5px;
}
.aw-shift-count {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-secondary);
}
.aw-shift-header-actions {
display: flex;
gap: var(--term-space-xs);
flex-shrink: 0;
}
.aw-shift-btn {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
padding: 2px var(--term-space-sm);
background: transparent;
color: var(--term-fg-secondary);
border: 1px solid var(--term-border-subtle);
border-radius: 3px;
cursor: pointer;
transition: all var(--term-duration-fast);
white-space: nowrap;
}
.aw-shift-btn:hover {
color: var(--term-gold);
border-color: var(--term-gold);
}
.aw-shift-btn--subtle {
border-color: transparent;
}
.aw-shift-btn--subtle:hover {
border-color: var(--term-border-subtle);
}
/* Shift History Panel */
.aw-shift-history {
background: var(--term-bg-surface);
border-bottom: 1px solid var(--term-border-subtle);
max-height: 240px;
overflow-y: auto;
padding: var(--term-space-xs) 0;
}
.aw-shift-history-loading,
.aw-shift-history-empty {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
padding: var(--term-space-md) var(--term-space-md);
text-align: center;
}
.aw-shift-history-row {
display: flex;
align-items: center;
gap: var(--term-space-sm);
padding: var(--term-space-xs) var(--term-space-md);
cursor: pointer;
transition: background var(--term-duration-fast);
}
.aw-shift-history-row:hover {
background: var(--term-bg-elevated);
}
.aw-shift-history-row--active {
border-left: 2px solid var(--term-gold);
background: var(--term-gold-ghost);
}
.aw-shift-history-name {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 400;
color: var(--term-fg-primary);
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.aw-shift-history-date {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-muted);
flex-shrink: 0;
}
.aw-shift-history-count {
font-family: var(--term-font-mono);
font-size: var(--term-text-xs);
color: var(--term-fg-secondary);
min-width: 16px;
text-align: right;
flex-shrink: 0;
}
/* Census Linked Badge (on admission cards) */
.aw-card-census-badge {
font-family: var(--term-font-mono);
font-size: 9px; /* sub-scale: below --term-text-xs */
letter-spacing: 0.5px;
padding: 1px 5px;
background: rgba(34, 197, 94, 0.12);
color: var(--term-status-ready);
white-space: nowrap;
}
/* Send to Census Button (output footer) */
.aw-send-census-btn {
font-family: var(--term-font-display);
font-size: var(--term-text-sm);
font-weight: 500;
padding: var(--term-space-sm) var(--term-space-lg);
background: var(--term-gold);
color: var(--term-bg-void);
border: 1px solid var(--term-gold);
cursor: pointer;
transition: all var(--term-duration-normal);
letter-spacing: var(--term-tracking-wider);
text-transform: uppercase;
}
.aw-send-census-btn:hover {
filter: brightness(1.12);
box-shadow: var(--term-glow-gold);
}
.aw-send-census-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
box-shadow: none;
}
/* ==========================================================================
S18 SCAFFOLD COMPILE MODE
==========================================================================
WHY: When the doctor clicks "Compile Note", the scaffold sidebar switches
from individual section cards to a full H&P document view. The compiled
note streams in progressively and becomes editable once complete.
========================================================================== */
.aw-scaffold-compiled {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
}
.aw-scaffold-compiled-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--term-space-sm) var(--term-space-md);
border-bottom: 1px solid var(--term-border-subtle);
flex-shrink: 0;
}
.aw-scaffold-compiled-label {
font-family: var(--term-font-mono);
font-size: var(--term-text-sm);
font-weight: 600;
letter-spacing: var(--term-tracking-wide);
color: var(--term-accent);
text-transform: uppercase;
}
.aw-scaffold-back-btn {
font-family: var(--term-font-mono);
font-size: 0.6875rem;
letter-spacing: 0.04em;
background: none;
border: 1px solid var(--term-border-subtle);
color: var(--term-fg-muted);
padding: 2px 10px;
cursor: pointer;
border-radius: 2px;
transition: color var(--term-duration-fast),
border-color var(--term-duration-fast);
}
.aw-scaffold-back-btn:hover {
color: var(--term-fg-primary);
border-color: var(--term-border-default);
}
.aw-scaffold-compiled-content {
flex: 1;
min-height: 0;
overflow-y: auto;
padding: var(--term-space-md) var(--term-space-lg);
font-family: var(--term-font-body);
font-size: var(--term-text-base);
line-height: 1.75;
color: var(--term-fg-primary);
white-space: pre-wrap;
word-break: break-word;
outline: none;
border: none;
cursor: text;
}
/* Editable state after stream completes */
.aw-scaffold-compiled-content[contenteditable="true"] {
border: 1px solid transparent;
border-radius: 2px;
transition: border-color 0.15s;
}
.aw-scaffold-compiled-content[contenteditable="true"]:focus {
border-color: var(--term-accent-dim);
background: rgba(255, 255, 255, 0.015);
}
/* Streaming animation — subtle pulse while compiling */
.aw-scaffold-compiling .aw-scaffold-compiled-content {
cursor: wait;
}
.aw-scaffold-compiling .aw-scaffold-compiled-label::after {
content: '...';
animation: aw-compile-pulse 1.2s ease-in-out infinite;
}
@keyframes aw-compile-pulse {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
/* ── LLM Section Routing — Preview / Confirmed visual treatment ──
WHY: Haiku-preview sections get a subtle dotted border to signal "tentative",
Sonnet-authoritative sections get a solid border to signal "confirmed".
This gives doctors visual confidence that the LLM has reviewed the content.
TRADEOFF: Two extra CSS classes vs visual feedback on routing quality. */
.aw-scaffold-section--llm-preview .aw-scaffold-header {
border-left: 2px dotted var(--dr-amber, #E69A4C);
padding-left: 6px;
}
.aw-scaffold-section--llm-preview .aw-scaffold-indicator {
color: var(--dr-amber, #E69A4C);
opacity: 0.7;
}
.aw-scaffold-section--llm-confirmed .aw-scaffold-header {
border-left: 2px solid var(--dr-teal, #4CC4B4);
padding-left: 6px;
}
.aw-scaffold-section--llm-confirmed .aw-scaffold-indicator {
color: var(--dr-teal, #4CC4B4);
}