/* ============================================================================ * Aperture portal — SHARED DESIGN SYSTEM ("Meridian", calm clinical) * ---------------------------------------------------------------------------- * The single hand-written stylesheet every surface extends. It imports the * Meridian design tokens (tokens.css) and defines the reusable component * classes documented in docs/REDESIGN/DESIGN_BRIEF_V2.md. * * THEME: the app ships in the graphite Reading-room theme. `.dark` on * is structural; [data-theme="light"] flips the Clinic token block from * preferences only. Both themes are first-class. * * No build step, no Tailwind, no external CDN. Pure CSS, self-hosted IBM Plex * Sans / IBM Plex Mono / Source Serif 4, tokens from tokens.css. * ==========================================================================*/ @import url("tokens.css"); /* ----------------------------------------------------------------- reset */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; margin: 0; } html { color-scheme: dark; background: var(--med-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100vh; font-family: var(--font-primary); font-size: 13px; line-height: 1.45; letter-spacing: -0.005em; color: var(--med-text); background: var(--med-bg); } /* Meridian: the page field is FLAT. The v1 grain/vignette overlay is gone. */ a { color: var(--med-primary-fg); text-decoration: none; } a:hover { color: var(--med-link-hover); } button, input, select, textarea { font: inherit; color: inherit; } img { max-width: 100%; display: block; } ::selection { background: var(--med-primary-tint-25); color: var(--ink); } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg3); border-radius: var(--radius-pill); border: 1px solid var(--hairline); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--med-border-strong); background-clip: padding-box; } * { scrollbar-width: thin; scrollbar-color: var(--bg3) transparent; } /* ============================================================ 1. utilities */ .u-muted { color: var(--med-text-muted); } .u-dim { color: var(--med-text-dim); } .u-mono { font-family: var(--font-mono); } .u-nowrap { white-space: nowrap; } .u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .u-row { display: flex; align-items: center; } .u-col { display: flex; flex-direction: column; } .u-gap-4 { gap: 4px; } .u-gap-8 { gap: 8px; } .u-gap-12 { gap: 12px; } .u-gap-16 { gap: 16px; } .u-grow { flex: 1 1 auto; min-width: 0; } .u-spacer { flex: 1 1 auto; } .u-center { display: flex; align-items: center; justify-content: center; } .u-hidden, [hidden] { display: none !important; } .u-scroll { overflow-y: auto; overscroll-behavior: contain; } .u-label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--med-text-dim); } .u-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; } /* A label wrapping a visually-hidden control must be its containing block: * otherwise the absolutely-positioned input anchors to some distant * positioned ancestor (e.g. main.surface), and clicking / tabbing to the * control focus-scrolls every scroller toward that phantom position * instead of the visible tile. */ label:has(.u-visually-hidden) { position: relative; } /* htmx request indicator helpers */ .hx-indicator { opacity: 0; transition: opacity 0.15s ease; } .htmx-request .hx-indicator, .htmx-request.hx-indicator { opacity: 1; } .htmx-request.htmx-swapping { opacity: 0.55; } /* ============================================================ 2. app shell */ /* The full-viewport application chrome: top bar + the surface region. */ .app { display: flex; flex-direction: column; height: 100vh; width: 100vw; overflow: hidden; background: var(--med-bg); } /* ---- top bar (56px, persistent across every surface) — quiet bg1 bar ---- */ .topbar { flex: 0 0 56px; height: 56px; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--bg1); border-bottom: 1px solid var(--hairline); position: relative; z-index: 40; } .topbar__group { display: flex; align-items: center; gap: 8px; min-width: 0; } .topbar__group--grow { flex: 1 1 auto; min-width: 0; } .topbar__divider { width: 1px; height: 22px; background: var(--hairline); flex: 0 0 auto; } /* brand mark / wordmark — quiet product name, normal case, static mark */ .brand { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-weight: 600; font-size: 14px; letter-spacing: -0.005em; color: var(--ink); white-space: nowrap; } .brand:hover { color: var(--ink); } .brand__logo { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--signal); } .brand__logo svg { width: 20px; height: 20px; } .brand__word { transform: none; } /* Global htmx loading indicator: a quiet 2px progress bar along the very top of the viewport while any request is in flight. Reduced-motion users get a static 2px line (the global media rule freezes the sweep). */ body:has(.htmx-request)::after { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2147483000; pointer-events: none; background-image: linear-gradient( 90deg, transparent, var(--signal) 30%, var(--signal) 70%, transparent ); background-size: 40% 100%; background-repeat: no-repeat; animation: load-sweep 1.1s linear infinite; } @keyframes load-sweep { from { background-position: -66% 0; } to { background-position: 166% 0; } } /* iconic top-bar button (bell, settings, layout-grid, search trigger) */ .iconbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-xs); border: 1px solid transparent; background: transparent; color: var(--med-text-muted); cursor: pointer; position: relative; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .iconbtn:hover { background: var(--bg2); color: var(--ink); border-color: var(--hairline); } /* active nav = flat 2px steel underline, not a pill */ .iconbtn.is-active { background: var(--bg2); color: var(--ink); border-color: var(--hairline); } .iconbtn.is-active::after { content: ""; position: absolute; left: 7px; right: 7px; bottom: -2px; height: 2px; border-radius: 2px; background: var(--signal); } .iconbtn svg { width: 17px; height: 17px; } .iconbtn--sm { width: 28px; height: 28px; } .iconbtn--sm svg { width: 15px; height: 15px; } /* unread count on a top-bar icon button — steel, mono numerals. An unread count is a notification convention, not a clinical alarm, so it does not use the reserved alarm-red. */ .iconbtn__dot { position: absolute; top: 4px; right: 4px; min-width: 14px; height: 14px; padding: 0 3px; border-radius: var(--radius-pill); background: var(--signal); color: var(--signal-ink); font-family: var(--font-mono); font-size: 9px; font-weight: 700; line-height: 14px; text-align: center; border: 2px solid var(--bg1); } /* avatar — quiet initials disc */ .avatar { width: 30px; height: 30px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; background: var(--bg2); border: 1px solid var(--hairline-strong); color: var(--ink); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; flex: 0 0 auto; cursor: pointer; user-select: none; transition: border-color 0.14s ease; } .avatar:hover { border-color: var(--signal); } .avatar--sm { width: 24px; height: 24px; font-size: 10px; } .avatar--lg { width: 40px; height: 40px; font-size: 14px; } .avatar--xl { width: 64px; height: 64px; font-size: 22px; } .avatar--orb { background: var(--ai); color: var(--signal-ink); border: 0; } /* global search field (⌘K) — quiet input, sentence-case placeholder */ .searchbar { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 460px; height: 32px; padding: 0 6px 0 12px; border-radius: var(--radius-xs); background: var(--bg0); border: 1px solid var(--hairline); color: var(--ink-muted); cursor: text; transition: border-color 0.14s ease, box-shadow 0.14s ease; } .searchbar:hover { border-color: var(--hairline-strong); color: var(--ink-2); } .searchbar:focus-visible { border-color: var(--signal); box-shadow: 0 0 0 3px var(--med-focus-tint); outline: none; } .searchbar svg { width: 14px; height: 14px; flex: 0 0 auto; color: var(--ink-muted); } .searchbar__ph { font-family: var(--font-ui); font-size: 12px; letter-spacing: 0; text-align: left; } .searchbar input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: 12.5px; color: var(--med-text); } .searchbar input::placeholder { color: var(--med-text-dim); font-family: var(--font-ui); font-size: 12px; } /* .kbd is defined ONCE, in §24 (shortcuts overlay) — the previous duplicate here was always overridden by the later definition and has been removed (DESIGN-CONSTITUTION L6: one component, one home). */ /* ---- live-status readout ---- One plain labeled dot for "am I connected": static 7px dot + sentence-case label. live.js appends its own .live-dot INSIDE [data-sync-status] and a .presence-pill as the NEXT SIBLING — both are restyled below (higher specificity than the JS-injected style tags). No breathing, no glow. */ .status-live { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--bg0); font-family: var(--font-ui); font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-2); white-space: nowrap; } .status-live__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--ok); } .status-live.is-offline { color: var(--stat); border-color: var(--line-critical); } .status-live.is-offline .status-live__dot { background: var(--stat); } /* live.js's injected .live-dot — fold it into the readout look */ .status-live .live-dot { width: 7px; height: 7px; margin-left: 2px; background: var(--ok); opacity: 0.45; box-shadow: none; } .status-live .live-dot.is-pulsing { opacity: 1; box-shadow: none; } .status-live .live-dot.is-offline { background: var(--ink-muted); opacity: 0.35; } /* live.js's injected .presence-pill — same quiet vocabulary */ .status-live + .presence-pill { height: 24px; margin-left: 6px; padding: 0 9px; border-radius: var(--radius-pill); border: 1px solid var(--hairline); background: var(--bg0); font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.01em; color: var(--ink-2); } .status-live + .presence-pill::before { background: var(--ok); box-shadow: none; } .status-live + .presence-pill.is-stale { opacity: 0.55; } .status-live + .presence-pill.is-stale::before { background: var(--ink-muted); box-shadow: none; } /* the region below the top bar where each surface paints itself. * `clip` (not `hidden`): a hidden box is still a programmatic scroll * container, so focusing a descendant that escapes an inner scroller * (e.g. an absolutely-positioned visually-hidden radio) silently * focus-scrolls the shell into blank space with no scrollbar to recover. * `clip` makes the shell unscrollable, full stop. `.surface--scroll` * still opts into a real scroller (clip + auto computes to hidden+auto). */ .surface { flex: 1 1 auto; min-height: 0; position: relative; overflow: clip; } .surface--scroll { overflow-y: auto; } /* ===================================================== 3. workstation grid */ /* 3-pane reading layout: left rail | center viewer | right panel. * Columns are CSS variables so the report panel can expand/collapse. */ .workstation { display: grid; grid-template-columns: var(--rail-w, 340px) minmax(0, 1fr) var(--panel-w, 460px); height: 100%; min-height: 0; } .workstation.is-panel-expanded { --panel-w: 920px; } .workstation.is-panel-collapsed { --panel-w: 0px; } .workstation.is-rail-collapsed { --rail-w: 0px; } .workstation__rail { min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--med-border); background: var(--med-surface); } .workstation__center { min-width: 0; min-height: 0; background: var(--med-viewer); position: relative; display: flex; flex-direction: column; } .workstation__panel { min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--med-border); background: var(--med-surface); display: flex; flex-direction: column; } /* Spotify-style worklist library 3-column layout */ .library { display: grid; grid-template-columns: 320px minmax(0, 1fr) 340px; height: 100%; min-height: 0; } .library.is-sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr) 340px; } .library.is-rightpanel-collapsed { grid-template-columns: 320px minmax(0, 1fr) 0; } .library__sidebar { min-width: 0; min-height: 0; overflow: hidden; border-right: 1px solid var(--med-border); background: var(--med-surface); display: flex; flex-direction: column; } .library__main { min-width: 0; min-height: 0; overflow: hidden; display: flex; flex-direction: column; background: var(--med-bg); } .library__rightpanel { min-width: 0; min-height: 0; overflow: hidden; border-left: 1px solid var(--med-border); background: var(--med-surface); display: flex; flex-direction: column; } /* ============================================================ 4. surfaces */ /* generic vertical scroll page (preferences) with 2-pane nav+content */ .settings { display: grid; grid-template-columns: 264px minmax(0, 1fr); height: 100%; min-height: 0; } .settings__nav { min-height: 0; overflow-y: auto; border-right: 1px solid var(--med-border); background: var(--med-surface); padding: 16px 12px; } .settings__content { min-height: 0; overflow-y: auto; padding: 28px 32px 80px; } .settings__content-inner { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; } /* ============================================================== 5. panels */ /* generic panel header (used by right-side panels & drawers) */ .panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--med-border); background: var(--med-surface); } .panel-head__title { font-size: 15px; font-weight: 600; color: var(--med-primary-fg); } .panel-head__sub { font-size: 11px; color: var(--med-text-muted); } .panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px; } .panel-foot { flex: 0 0 auto; border-top: 1px solid var(--med-border); background: var(--med-surface); padding: 12px 16px; } /* ================================================================ 6. cards */ .card { background: var(--med-surface); border: 1px solid var(--med-border); border-radius: var(--radius-lg); overflow: hidden; } .card__head { padding: 18px 20px; border-bottom: 1px solid var(--med-border); } .card__title { font-size: 15px; font-weight: 600; color: var(--med-primary-fg); margin: 0; } .card__sub { font-size: 13px; color: var(--med-text-muted); margin: 4px 0 0; } .card__body { padding: 20px; display: flex; flex-direction: column; gap: 20px; } .card--flush .card__body { padding: 0; } .card--2 { background: var(--med-surface-2); } /* hero card (worklist library center) */ .hero { position: relative; border-radius: var(--radius-xl); padding: 26px 28px; display: flex; align-items: flex-end; gap: 22px; min-height: 200px; overflow: hidden; background: var(--med-surface); border: 1px solid var(--med-border); } .hero__art { width: 116px; height: 116px; border-radius: var(--radius-xl); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--med-primary-tint-12); color: var(--med-primary); box-shadow: none; } .hero__art svg { width: 52px; height: 52px; } .hero__body { min-width: 0; display: flex; flex-direction: column; gap: 8px; } .hero__eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--med-text-muted); } .hero__title { font-size: 54px; line-height: 1.02; font-weight: 800; letter-spacing: -0.03em; color: var(--med-primary-fg); margin: 0; } .hero__desc { font-size: 13px; color: var(--med-text); max-width: 640px; } .hero__meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--med-text-muted); flex-wrap: wrap; } .hero__meta .dot-sep::before { content: "·"; margin: 0 6px; color: var(--med-text-dim); } /* ============================================================== 7. buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: var(--radius-xs); border: 1px solid var(--hairline); background: var(--bg2); color: var(--med-text); font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.14s ease, border-color 0.14s ease, color 0.14s ease, opacity 0.14s ease; } .btn:hover { background: var(--med-hover); border-color: var(--hairline-strong); color: var(--ink); } .btn svg { width: 15px; height: 15px; } .btn[disabled], .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .btn:focus-visible { outline: var(--focus-ring); outline-offset: 2px; } /* primary action — solid steel blue, no glow */ .btn--primary { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); font-weight: 600; box-shadow: none; } .btn--primary:hover { background: var(--signal-bright); border-color: var(--signal-bright); color: var(--signal-ink); } .btn--primary:active { transform: translateY(1px); } /* ghost / quiet */ .btn--ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--med-text-muted); } .btn--ghost:hover { background: var(--bg2); color: var(--med-text); } /* outline — hairline instrument control */ .btn--outline { background: transparent; border-color: var(--hairline-strong); box-shadow: none; color: var(--med-text); } .btn--outline:hover { background: var(--bg2); border-color: var(--hairline-strong); } /* dominant — the "Sign & next" CTA: same steel, just larger. No glow. */ .btn--dominant { background: var(--signal); border-color: var(--signal); color: var(--signal-ink); font-weight: 600; height: 38px; padding: 0 20px; box-shadow: none; } .btn--dominant:hover { background: var(--signal-bright); border-color: var(--signal-bright); } /* danger / critical — clinical red, never decorative */ .btn--danger { background: transparent; border-color: var(--line-critical); box-shadow: none; color: var(--stat); } .btn--danger:hover { background: var(--stat-bg); border-color: var(--stat); color: var(--stat); } /* circular "Start reading" button (legacy worklist hero) — calm steel */ .btn-play { width: 48px; height: 48px; border-radius: var(--radius-pill); border: 0; background: var(--signal); color: var(--signal-ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto; box-shadow: none; transition: background 0.14s ease; } .btn-play:hover { background: var(--signal-bright); } .btn-play svg { width: 24px; height: 24px; } .btn-play--sm { width: 36px; height: 36px; box-shadow: none; } .btn-play--sm svg { width: 16px; height: 16px; } /* sizes */ .btn--sm { height: 28px; padding: 0 10px; font-size: 11.5px; } .btn--xs { height: 24px; padding: 0 8px; font-size: 11px; gap: 5px; } .btn--xs svg { width: 13px; height: 13px; } .btn--lg { height: 40px; padding: 0 18px; } .btn--icon { width: 34px; padding: 0; } .btn--block { width: 100%; } /* tiny inline transport buttons (prev/play/next on now-reading) */ .transport { display: inline-flex; align-items: center; gap: 6px; } .transport__btn { width: 30px; height: 30px; border-radius: var(--radius-pill); border: 1px solid var(--med-border); background: var(--med-surface-2); color: var(--med-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .transport__btn:hover { background: var(--med-hover); color: var(--med-primary-fg); } .transport__btn svg { width: 15px; height: 15px; } .transport__btn--play { background: var(--med-primary-fg); color: var(--med-bg); border-color: var(--med-primary-fg); } .transport__btn:disabled { opacity: 0.4; cursor: not-allowed; } /* ========================================================= 8. badges/pills */ /* priority badge — STAT / CRITICAL / URGENT / TRAUMA / STROKE / ROUTINE */ .prio { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-family: var(--font-ui); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; /* clinical priority codes stay caps (STAT) */ border: 1px solid transparent; white-space: nowrap; } .prio--stat { color: var(--prio-stat); background: var(--prio-stat-bg); border-color: color-mix(in srgb, var(--prio-stat) 30%, transparent); } .prio--critical { color: var(--prio-critical); background: var(--prio-critical-bg); border-color: color-mix(in srgb, var(--prio-critical) 30%, transparent); } .prio--urgent { color: var(--prio-urgent); background: var(--prio-urgent-bg); border-color: color-mix(in srgb, var(--prio-urgent) 30%, transparent); } .prio--trauma { color: var(--prio-trauma); background: var(--prio-trauma-bg); border-color: color-mix(in srgb, var(--prio-trauma) 30%, transparent); } .prio--stroke { color: var(--prio-stroke); background: var(--prio-stroke-bg); border-color: color-mix(in srgb, var(--prio-stroke) 30%, transparent); } .prio--routine { color: var(--med-text-muted); background: var(--bg2); border-color: var(--hairline); } /* left accent bar variant for list rows */ .prio-accent { position: relative; } .prio-accent::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; /* calmer row edge — was 3px */ border-radius: 0 2px 2px 0; background: var(--med-border); } .prio-accent--stat::before { background: var(--prio-stat); } .prio-accent--critical::before { background: var(--prio-critical); } .prio-accent--urgent::before { background: var(--prio-urgent); } .prio-accent--trauma::before { background: var(--prio-trauma); } .prio-accent--stroke::before { background: var(--prio-stroke); } /* AI-status chip — Finding / Negative / Pending. "Finding" means the model saw something to look at, NOT an emergency: it reads STEEL/INFO via --ai-flag (recolored from red at the token), keeping the alert glyph as the "look here" cue. Clear and pending are equally quiet. */ .ai-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; white-space: nowrap; border: 1px solid transparent; } .ai-chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; } .ai-chip--flag { color: var(--ai-flag); background: var(--ai-flag-bg); border-color: color-mix(in srgb, var(--ai-flag) 28%, transparent); } .ai-chip--clear { color: var(--ai-clear); background: var(--ai-clear-bg); border-color: color-mix(in srgb, var(--ok) 28%, transparent); } .ai-chip--pending { color: var(--ai-pending); background: var(--ai-pending-bg); border-color: var(--med-border); } /* triage badge — green/amber/red/urgent (legacy TriageBadge.level) */ .triage { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 6px; font-size: 10px; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .triage--green { color: var(--med-success); background: var(--ai-clear-bg); border-color: color-mix(in srgb, var(--ok) 28%, transparent); } .triage--amber { color: var(--med-warning); background: var(--med-warning-tint); border-color: color-mix(in srgb, var(--warn) 28%, transparent); } .triage--red { color: var(--med-critical); background: var(--prio-critical-bg); border-color: var(--line-critical); } .triage--urgent { color: var(--prio-urgent); background: var(--prio-urgent-bg); border-color: color-mix(in srgb, var(--prio-urgent) 30%, transparent); } /* modality badge — CT / MR / US / XR colored square */ .modality { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--med-primary-fg); background: var(--med-accent); } .modality--ct { background: var(--info-bg); color: var(--info); } .modality--mr { background: var(--prio-stroke-bg); color: var(--prio-stroke); } .modality--us { background: var(--ok-bg); color: var(--med-success); } .modality--xr { background: var(--med-primary-tint-18); color: var(--med-primary-fg); } .modality--pet, .modality--pt { background: var(--prio-trauma-bg); color: var(--prio-trauma); } /* generic status/tag pill */ .pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 600; border: 1px solid var(--med-border); background: var(--med-surface-2); color: var(--med-text-muted); white-space: nowrap; } .pill--accent { color: var(--med-primary-fg); border-color: var(--line-accent); background: var(--med-primary-tint-18); } .pill--success { color: var(--med-success); border-color: var(--line-success); background: var(--ai-clear-bg); } .pill--warning { color: var(--med-warning); border-color: var(--line-warning); background: var(--med-warning-tint); } .pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; } /* status text (Reading / Unread / Draft / Signed) */ .status { font-size: 11px; font-weight: 600; } .status--reading { color: var(--med-success); } .status--unread { color: var(--med-text-muted); } .status--draft { color: var(--med-warning); } .status--signed { color: var(--med-success); } .status--failed { color: var(--med-critical); } /* ================================================================= 9. chips */ /* filter / sort pills used on toolbars */ .chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--radius-pill); border: 1px solid var(--med-border); background: var(--med-surface-2); color: var(--med-text-muted); font-size: 11.5px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .chip:hover { background: var(--med-hover); color: var(--med-text); } .chip svg { width: 13px; height: 13px; } .chip.is-active { background: var(--med-primary-tint-25); border-color: var(--line-accent); color: var(--med-primary-fg); } .chip__dot { width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; } .chip-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* =============================================================== 10. inputs */ .field { display: flex; flex-direction: column; gap: 6px; } .field__label { font-size: 12px; font-weight: 500; color: var(--med-text); } .field__hint { font-size: 11.5px; color: var(--med-text-muted); } .input, .select, .textarea { width: 100%; background: var(--med-bg); border: 1px solid var(--med-border); border-radius: var(--radius-xs); color: var(--med-text); padding: 9px 12px; font-size: 13px; outline: none; transition: border-color 0.12s ease, box-shadow 0.12s ease; } .input::placeholder, .textarea::placeholder { color: var(--med-text-dim); } .input:focus, .select:focus, .textarea:focus { border-color: var(--med-primary); box-shadow: 0 0 0 3px var(--med-focus-tint); } .input:read-only, .input[readonly] { color: var(--med-text-muted); background: var(--med-surface); } .input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: var(--focus-ring); outline-offset: -2px; } .input[disabled], .input:disabled, .select[disabled], .select:disabled, .textarea[disabled], .textarea:disabled { opacity: 0.55; background: var(--med-surface-2); cursor: not-allowed; } .textarea { resize: vertical; min-height: 90px; line-height: 1.55; } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235E7088' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; } /* search input variant (rounded, leading icon) */ .input-search { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--radius-xs); background: var(--med-bg); border: 1px solid var(--med-border); } .input-search svg { width: 15px; height: 15px; color: var(--med-text-dim); flex: 0 0 auto; } .input-search input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; outline: none; font-size: 12.5px; } .input-search input::placeholder { color: var(--med-text-dim); } /* toggle switch */ .switch { position: relative; display: inline-flex; flex: 0 0 auto; width: 40px; height: 22px; border-radius: var(--radius-pill); border: 1px solid var(--med-border); background: var(--med-surface-2); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch__knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: var(--radius-pill); background: var(--med-text-muted); transition: transform 0.15s ease, background 0.15s ease; } .switch.is-on, .switch:has(input:checked) { background: var(--med-primary); border-color: var(--med-primary); } .switch.is-on .switch__knob, .switch:has(input:checked) .switch__knob { transform: translateX(18px); background: #fff; } /* a settings toggle row (label + desc + switch) */ .toggle-row { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--med-border); } .toggle-row:first-child { border-top: 0; } .toggle-row__text { flex: 1 1 auto; min-width: 0; } .toggle-row__label { font-size: 13px; font-weight: 500; color: var(--med-primary-fg); } .toggle-row__desc { font-size: 12px; color: var(--med-text-muted); margin-top: 2px; } /* radio card (monitor layout, workflow role) */ .radio-card { display: flex; gap: 12px; padding: 16px; border-radius: 12px; border: 1px solid var(--med-border); background: var(--med-surface); cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .radio-card:hover { border-color: var(--med-border-strong); } .radio-card.is-selected { border-color: var(--med-primary); background: var(--med-primary-tint-12); } .radio-dot { width: 18px; height: 18px; border-radius: var(--radius-pill); border: 2px solid var(--med-border); flex: 0 0 auto; position: relative; } .radio-card.is-selected .radio-dot { border-color: var(--med-primary); } .radio-card.is-selected .radio-dot::after { content: ""; position: absolute; inset: 3px; border-radius: var(--radius-pill); background: var(--med-primary); } /* =============================================================== 11. tabs */ .tabs { display: flex; align-items: center; gap: 2px; border-bottom: 1px solid var(--med-border); } .tab { appearance: none; border: 0; background: transparent; color: var(--med-text-muted); font-size: 12.5px; font-weight: 500; padding: 9px 12px; cursor: pointer; position: relative; white-space: nowrap; } .tab:hover { color: var(--med-text); } .tab.is-active { color: var(--med-primary-fg); font-weight: 600; } .tab.is-active::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--med-primary); } .tab__count { margin-left: 6px; font-size: 10px; color: var(--med-text-dim); } /* pill-tabs (Unread/Pending/Drafts/All on the rail) */ .segtabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-sm); background: var(--med-bg); border: 1px solid var(--med-border); } .segtab { appearance: none; border: 0; background: transparent; color: var(--med-text-muted); font-size: 11.5px; font-weight: 500; padding: 5px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .segtab.is-active { background: var(--med-surface-2); color: var(--med-primary-fg); font-weight: 600; } /* ============================================================ 12. nav lists */ /* settings left-nav item */ .navitem { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--med-text-muted); font-size: 13px; cursor: pointer; position: relative; border-left: 3px solid transparent; transition: background 0.12s ease, color 0.12s ease; } .navitem:hover { background: var(--med-surface-2); color: var(--med-text); } .navitem svg { width: 16px; height: 16px; flex: 0 0 auto; } .navitem.is-active { background: var(--med-surface-2); color: var(--med-primary-fg); border-left-color: var(--med-primary); font-weight: 500; } .nav-section { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--med-text-dim); padding: 14px 12px 6px; } /* worklist-library sidebar sections + rows */ .lib-section { padding: 8px 8px 4px; } .lib-section__head { display: flex; align-items: center; gap: 6px; padding: 8px 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--med-text-dim); } .lib-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; color: var(--med-text); transition: background 0.1s ease; } .lib-row:hover { background: var(--med-surface-2); } .lib-row.is-active { background: var(--med-surface-2); } .lib-row.is-active .lib-row__name { color: var(--med-primary-fg); } .lib-row__icon { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--med-surface-2); color: var(--med-text-muted); } .lib-row.is-active .lib-row__icon { background: var(--med-primary); color: var(--med-primary-fg); } .lib-row__icon svg { width: 15px; height: 15px; } .lib-row__name { flex: 1 1 auto; min-width: 0; font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lib-row__count { font-size: 11px; color: var(--med-text-dim); font-variant-numeric: tabular-nums; } /* ====================================================== 13. worklist table */ .wtable { width: 100%; border-collapse: collapse; font-size: 12.5px; } .wtable thead th { position: sticky; top: 0; z-index: 2; text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--med-text-dim); background: var(--med-bg); padding: 9px 12px; border-bottom: 1px solid var(--med-border); white-space: nowrap; } .wtable tbody td { padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } .wtable tbody tr { cursor: pointer; transition: background 0.1s ease; } .wtable tbody tr:hover { background: var(--med-surface); } .wtable tbody tr.is-reading { background: var(--med-primary-tint-12); } .wtable tbody tr.is-reading td:first-child { box-shadow: inset 3px 0 0 var(--med-primary); } .wtable .col-num { color: var(--med-text-dim); font-variant-numeric: tabular-nums; width: 32px; } .cell-patient__name { font-weight: 600; color: var(--med-text); } .cell-patient__meta { font-size: 11px; color: var(--med-text-muted); margin-top: 1px; } .cell-overdue { color: var(--med-critical); font-weight: 600; } /* generic list row (rail patient list / queue / thread list) */ .listrow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--radius-md); cursor: pointer; position: relative; transition: background 0.1s ease; } .listrow:hover { background: var(--med-surface-2); } .listrow.is-active { background: var(--med-surface-2); } .listrow__main { flex: 1 1 auto; min-width: 0; } .listrow__title { font-size: 13px; font-weight: 600; color: var(--med-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .listrow__sub { font-size: 11.5px; color: var(--med-text-muted); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .listrow__time { font-size: 10px; color: var(--med-text-dim); flex: 0 0 auto; } /* ======================================================= 14. report editor */ .report-section { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-top: 1px solid var(--med-border); } .report-section:first-child { border-top: 0; padding-top: 0; } .report-section__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .report-section__label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; text-transform: none; /* sentence case — document voice, not engraving */ color: var(--med-text-dim); } .report-section__text { font-size: 13px; line-height: 1.55; color: var(--med-text); } .report-editable { width: 100%; background: transparent; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--med-text); font-size: 13px; line-height: 1.6; padding: 8px 10px; resize: vertical; min-height: 60px; outline: none; } .report-editable:hover { border-color: var(--med-border); } .report-editable:focus { border-color: var(--med-primary); background: var(--med-bg); box-shadow: 0 0 0 3px var(--med-focus-tint); } .report-editable:disabled { color: var(--med-text-muted); cursor: not-allowed; } /* dictation-active state: reddish editor background */ .report-editor-body.is-recording, .is-recording .report-editor-body { background: var(--med-recording-bg); } .rec-dot { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--med-critical); } .rec-dot::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--med-critical); animation: rec-pulse 1.2s ease-in-out infinite; } @keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* draft status bar */ .draftbar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--med-border); border-bottom: 1px solid var(--med-border); background: var(--med-surface); } .draftbar__icon { width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--med-surface-2); color: var(--med-warning); } .draftbar__icon svg { width: 14px; height: 14px; } .draftbar__label { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; color: var(--med-warning); } .draftbar__status { font-size: 12px; color: var(--med-text-muted); } /* guardrail banner */ .guardrail { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px; border-radius: var(--radius-md); font-size: 12.5px; border: 1px solid transparent; } .guardrail svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; } .guardrail--blocked { color: var(--med-critical); background: var(--prio-critical-bg); border-color: var(--line-critical); } .guardrail--passed { color: var(--med-success); background: var(--ai-clear-bg); border-color: var(--line-success); } .guardrail__title { font-weight: 600; } .guardrail__reason { color: var(--med-text-muted); margin-top: 2px; } /* lane comparison sidebar item */ .lane { border: 1px solid var(--med-border); border-radius: var(--radius-md); padding: 12px; background: var(--med-surface); } .lane.is-primary { border-color: var(--med-primary); } .lane__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .lane__name { font-size: 12.5px; font-weight: 600; color: var(--med-text); flex: 1 1 auto; min-width: 0; } .lane__conf { font-size: 11px; color: var(--med-text-muted); font-variant-numeric: tabular-nums; } .tag { font-size: 10px; font-weight: 600; letter-spacing: 0.02em; padding: 2px 6px; border-radius: 4px; } .tag--primary { color: var(--med-primary-fg); background: var(--med-primary-tint-25); } .tag--failed { color: var(--med-critical); background: var(--prio-critical-bg); } /* patient timeline dropdown */ .timeline { display: flex; flex-direction: column; } .timeline__item { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--med-border); } .timeline__item:first-child { border-top: 0; } .timeline__date { flex: 0 0 56px; font-size: 11px; color: var(--med-text-muted); text-align: right; } .timeline__date b { display: block; color: var(--med-text); font-size: 13px; } /* ============================================== 15. now-playing transport bar */ .nowbar { flex: 0 0 78px; height: 78px; display: flex; align-items: center; gap: 16px; padding: 0 18px; background: var(--med-surface); border-top: 1px solid var(--med-border); } .nowbar__study { display: flex; align-items: center; gap: 12px; min-width: 240px; cursor: pointer; } .nowbar__name { font-size: 13px; font-weight: 600; color: var(--med-text); } .nowbar__meta { font-size: 11px; color: var(--med-text-muted); } .nowbar__transport { display: flex; align-items: center; gap: 14px; margin: 0 auto; } .nowbar__progress { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--med-text-muted); font-variant-numeric: tabular-nums; } .progress-track { width: 260px; height: 4px; border-radius: var(--radius-pill); background: var(--med-surface-2); overflow: hidden; } .progress-track__fill { height: 100%; border-radius: var(--radius-pill); background: var(--med-primary-fg); } /* now-reading card (right panel) */ .nowreading { border: 1px solid var(--med-border); border-radius: 12px; padding: 14px; background: var(--med-surface-2); } /* smart-priority banner — flat quiet info strip (gradient retired) */ .smart-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius-md); color: var(--info); font-size: 12px; font-weight: 500; background: var(--info-bg); border: 1px solid color-mix(in srgb, var(--info) 25%, transparent); } .smart-banner svg { width: 15px; height: 15px; } /* moved-up indicator on a queue item */ .moved-up { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; color: var(--med-success); } /* ================================================== 16. messaging & comms */ .bubble { max-width: 80%; padding: 11px 14px; border-radius: var(--radius-lg); font-size: 13px; line-height: 1.45; } .bubble--agent { align-self: flex-start; background: var(--med-surface-2); color: var(--med-text); border-radius: 14px 14px 14px 4px; } .bubble--user { align-self: flex-end; background: var(--med-primary); color: var(--med-primary-fg); border-radius: 14px 14px 4px 14px; } .bubble__time { font-size: 10px; color: var(--med-text-dim); margin-top: 3px; } .msg-row { display: flex; flex-direction: column; gap: 2px; } .msg-row--user { align-items: flex-end; } /* study chip attached to a message — a quiet study REFERENCE, not an alarm. Neutral card with a steel icon; priority is conveyed by the chip's own text, not by painting the whole reference red. */ .study-chip { display: flex; align-items: center; gap: 10px; padding: 11px; border-radius: var(--radius-md); background: var(--med-surface-2); border: 1px solid var(--med-border); cursor: pointer; margin-top: 8px; } .study-chip:hover { border-color: var(--med-border-strong); background: var(--med-hover); } .study-chip__icon { width: 30px; height: 30px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; background: var(--med-primary-tint-12); color: var(--signal); flex: 0 0 auto; } .study-chip__name { font-size: 13px; font-weight: 600; color: var(--med-text); } .study-chip__meta { font-size: 11px; color: var(--med-text-muted); } /* composer (messaging / assistant) */ .composer { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--med-border); background: var(--med-surface); } .composer__input { flex: 1 1 auto; min-width: 0; height: 38px; border-radius: var(--radius-pill); background: var(--med-bg); border: 1px solid var(--med-border); padding: 0 14px; font-size: 13px; outline: none; } .composer__input:focus { border-color: var(--med-primary); } .composer__btn { width: 38px; height: 38px; flex: 0 0 auto; border-radius: var(--radius-pill); border: 1px solid var(--med-border); background: var(--med-surface-2); color: var(--med-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .composer__btn:hover { background: var(--med-hover); color: var(--med-text); } .composer__btn--send { background: var(--med-primary); border-color: var(--med-primary); color: var(--med-primary-fg); } .composer__btn svg { width: 17px; height: 17px; } /* notification card */ .notif { display: flex; gap: 12px; padding: 12px; border-radius: var(--radius-md); cursor: pointer; position: relative; transition: background 0.1s ease; } .notif:hover { background: var(--med-surface-2); } .notif__icon { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--med-surface-2); color: var(--med-text-muted); } .notif__icon svg { width: 16px; height: 16px; } .notif__icon--critical { color: var(--med-critical); background: var(--prio-critical-bg); } .notif__icon--warning { color: var(--med-warning); background: var(--warn-bg); } .notif__icon--urgent { color: var(--prio-trauma); background: var(--prio-trauma-bg); } .notif__icon--mention { color: var(--prio-stroke); background: var(--prio-stroke-bg); } .notif__main { flex: 1 1 auto; min-width: 0; } .notif__title { font-size: 13px; font-weight: 600; color: var(--med-text); } .notif__body { font-size: 12px; color: var(--med-text-muted); margin-top: 2px; } .notif__ts { font-size: 10px; color: var(--med-text-dim); } .notif.is-unread::after { content: ""; position: absolute; top: 16px; right: 12px; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--med-accent); } /* ===================================================== 17. assistant/hub */ .bigstat { display: flex; align-items: baseline; gap: 8px; } .bigstat__num { font-size: 40px; font-weight: 700; line-height: 1; color: var(--med-primary-fg); font-variant-numeric: tabular-nums; } .bigstat__unit { font-size: 15px; color: var(--med-text-muted); } /* stat tiles row */ .stat-tile { flex: 1 1 0; padding: 10px; border-radius: var(--radius-sm); background: var(--med-surface-2); } .stat-tile__value { font-size: 16px; font-weight: 600; color: var(--med-primary-fg); } .stat-tile__value.is-up { color: var(--med-success); } .stat-tile__label { font-size: 10px; color: var(--med-text-muted); margin-top: 2px; } /* mini bar chart */ .barchart { display: flex; align-items: flex-end; gap: 6px; height: 118px; padding: 10px; border-radius: var(--radius-md); background: var(--med-surface-2); } .barchart__bar { flex: 1 1 0; border-radius: 4px 4px 0 0; background: var(--med-primary); min-height: 4px; transition: height 0.3s ease; } /* voice playback card */ .voicecard { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: var(--radius-md); background: var(--med-surface); border: 1px solid var(--med-border); } .waveform { display: flex; align-items: center; gap: 3px; flex: 1 1 auto; height: 24px; } .waveform span { flex: 1 1 0; border-radius: var(--radius-pill); background: var(--med-accent); min-height: 4px; } /* =============================================================== 18. toast */ .toast-region { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 10px; align-items: center; pointer-events: none; } .toast { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: var(--radius-md); background: var(--bg3); border: 1px solid var(--hairline-strong); box-shadow: var(--shadow-1); color: var(--med-text); font-size: 13px; pointer-events: auto; animation: toast-in 0.18s cubic-bezier(0.2, 0.7, 0.3, 1); } .toast svg { width: 16px; height: 16px; } .toast--success { border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .toast--success svg { color: var(--ok); } .toast--error { border-color: color-mix(in srgb, var(--stat) 40%, transparent); } .toast--error svg { color: var(--stat); } .toast--info { border-color: color-mix(in srgb, var(--info) 35%, transparent); } .toast--info svg { color: var(--info); } /* critical-results toast — red left edge, no glow; for live.js critical events and claim conflicts (Aperture.toast(msg, "critical")) */ .toast--critical { border-color: color-mix(in srgb, var(--stat) 45%, transparent); border-left: 3px solid var(--stat); background: var(--bg3); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); } .toast--critical svg { color: var(--stat); } @keyframes toast-in { from { opacity: 0; transform: translateY(8px); } } /* ===================================================== 19. dialog / modal */ .overlay { position: fixed; inset: 0; z-index: 100; background: rgba(2, 3, 5, 0.62); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; } .dialog { background: var(--med-surface); border: 1px solid var(--med-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-3); max-width: 100%; max-height: 100%; display: flex; flex-direction: column; overflow: hidden; } .dialog__head { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--med-border); } .dialog__title { font-size: 17px; font-weight: 600; color: var(--med-primary-fg); flex: 1 1 auto; } .dialog__sub { font-size: 12px; color: var(--med-text-muted); } .dialog__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px; } .dialog__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--med-border); } /* right-side drawer (notifications) */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: 420px; max-width: 100vw; background: var(--med-surface); border-left: 1px solid var(--med-border); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; animation: drawer-in 0.18s ease; } @keyframes drawer-in { from { transform: translateX(16px); opacity: 0; } } /* ============================================== 20. empty / loading states */ .empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 48px 24px; color: var(--med-text-muted); } .empty__icon { width: 48px; height: 48px; border-radius: var(--radius-lg); display: inline-flex; align-items: center; justify-content: center; background: var(--med-surface-2); color: var(--med-text-dim); } .empty__icon svg { width: 22px; height: 22px; } .empty__title { font-size: 14px; font-weight: 600; color: var(--med-text); } .empty__desc { font-size: 12.5px; max-width: 320px; } .skeleton { background: linear-gradient( 90deg, var(--med-surface) 25%, var(--med-surface-2) 50%, var(--med-surface) 75% ); background-size: 200% 100%; animation: skeleton 1.3s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton { to { background-position: -200% 0; } } .spinner { width: 16px; height: 16px; border-radius: var(--radius-pill); border: 2px solid var(--med-border); border-top-color: var(--med-primary-fg); animation: spin 0.7s linear infinite; display: inline-block; } @keyframes spin { to { transform: rotate(360deg); } } /* ===================================================== 21. viewer toolbar */ .viewer-toolbar { flex: 0 0 44px; height: 44px; display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--med-surface); border-bottom: 1px solid var(--med-border); } .viewer-viewport { flex: 1 1 auto; min-height: 0; position: relative; background: var(--med-viewer); display: flex; align-items: center; justify-content: center; overflow: hidden; } .series-strip { flex: 0 0 92px; height: 92px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--med-surface); border-top: 1px solid var(--med-border); overflow-x: auto; } .series-thumb { width: 72px; height: 72px; border-radius: var(--radius-sm); flex: 0 0 auto; border: 2px solid transparent; background: var(--med-viewer); cursor: pointer; overflow: hidden; } .series-thumb.is-selected { border-color: var(--med-primary); } /* ===================================================== 22. login (auth) */ .auth-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--med-bg); } .auth-card { width: 100%; max-width: 380px; background: var(--med-surface); border: 1px solid var(--med-border); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 18px; } .alert { padding: 10px 12px; border-radius: var(--radius-sm); font-size: 12.5px; border: 1px solid transparent; } .alert--error { color: var(--med-critical); background: var(--prio-critical-bg); border-color: var(--line-critical); } .alert--success { color: var(--med-success); background: var(--ai-clear-bg); border-color: var(--line-success); } /* ===================================================== 23. misc helpers */ .divider { height: 1px; background: var(--med-border); border: 0; margin: 0; } .sticky-top { position: sticky; top: 0; z-index: 5; background: var(--med-bg); } /* .dot base is defined ONCE, in §26 (status dots) — the 7px duplicate here was always overridden by the later 8px definition and has been removed (DESIGN-CONSTITUTION L6). The presence modifiers below remain. */ .dot--online { background: var(--med-success); } .dot--away { background: var(--med-warning); } .online-wrap { position: relative; flex: 0 0 auto; } .online-wrap .dot--online { position: absolute; bottom: -1px; right: -1px; border: 2px solid var(--med-surface); width: 11px; height: 11px; } /* ============================================================================ * 24. MAX-run shared components (ADDITIVE — drives the 8 new build clusters). * * - .app-overlay : shared full-screen overlay host (palette, * shortcuts, comms-over-workstation). * - .cmdk : command palette (⌘K). * - .shortcuts-overlay : keyboard-shortcuts help overlay + chips. * - .stat-card / .chart-* : dashboard stat cards + bar/line charts. * - .audit-* : audit-timeline rows. * - .consensus-* : per-model agree/disagree chips. * - .viewer-tool* (additive) : viewer toolbar extras. * * Built on the existing tokens; existing components are untouched. * ==========================================================================*/ /* ---- shared overlay host (palette / shortcuts / comms-over-workstation) ---- */ .app-overlay { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-start; justify-content: center; } .app-overlay[hidden] { display: none; } .app-overlay__backdrop { position: absolute; inset: 0; background: rgba(2, 3, 5, 0.66); backdrop-filter: blur(2px); } .app-overlay__slot { position: relative; z-index: 1; margin: 9vh auto 0; max-width: min(560px, 92vw); width: 100%; } .app-overlay.is-open { animation: app-overlay-in 0.14s ease-out; } @keyframes app-overlay-in { from { opacity: 0; } to { opacity: 1; } } /* ---- command palette (⌘K) — overlay instrument ---- */ .cmdk__panel { position: relative; z-index: 1; margin: 9vh auto 0; width: min(640px, 92vw); max-height: 70vh; display: flex; flex-direction: column; background: var(--bg3); border: 1px solid var(--hairline-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); overflow: hidden; } .cmdk__searchbar { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--hairline); } .cmdk__searchbar svg { width: 18px; height: 18px; color: var(--signal); flex: 0 0 auto; } .cmdk__input { flex: 1 1 auto; background: transparent; border: 0; outline: 0; color: var(--ink); font-size: 15px; font-family: var(--font-primary); } .cmdk__input::placeholder { color: var(--ink-muted); font-family: var(--font-ui); font-size: 13.5px; } .cmdk__input:focus-visible { outline: none; /* the open palette IS the focus affordance */ } .cmdk__results { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; } .cmdk__hint { padding: 18px 12px; font-family: var(--font-ui); font-size: 12px; text-align: center; } .cmdk__group-label { padding: 10px 12px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); } .cmdk__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); border: 0; background: transparent; color: var(--med-text); text-align: left; cursor: pointer; font-size: 13.5px; position: relative; } .cmdk__item:hover, .cmdk__item.is-active { background: var(--med-primary-tint-06); box-shadow: inset 2px 0 0 var(--signal); } .cmdk__item.is-active .cmdk__item-icon { color: var(--signal); } .cmdk__item[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; } .cmdk__item-icon { flex: 0 0 auto; width: 18px; height: 18px; color: var(--med-text-muted); } .cmdk__item-body { flex: 1 1 auto; min-width: 0; } .cmdk__item-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__item-sub { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--med-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmdk__footer { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-muted); } .cmdk__footer .kbd { margin-right: 4px; } /* ---- keyboard-shortcuts help overlay ---- */ .shortcuts-overlay__panel { position: relative; z-index: 1; margin: 8vh auto 0; width: min(720px, 92vw); max-height: 80vh; display: flex; flex-direction: column; background: var(--bg3); border: 1px solid var(--hairline-strong); border-radius: var(--radius-xl); box-shadow: var(--shadow-2); overflow: hidden; } .shortcuts-overlay__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--med-border); } .shortcuts-overlay__title { font-size: 15px; font-weight: 600; color: var(--med-text); margin: 0; } .shortcuts-overlay__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 18px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px 32px; } .shortcuts-group__label { font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--med-text-muted); margin: 0 0 8px; } .shortcut-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 13px; color: var(--med-text); } .shortcut-row__keys { display: inline-flex; gap: 4px; flex: 0 0 auto; } /* quiet keycap: bg2, hairline, mono glyph — no machined edges */ .kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 5px; border: 1px solid var(--hairline); background: var(--bg2); color: var(--ink-2); font-size: 11px; font-family: var(--font-mono); line-height: 1; } /* ---- dashboard: stat cards + charts ---- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; } .stat-card { background: var(--med-surface); border: 1px solid var(--med-border); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; } .stat-card__label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--med-text-muted); } .stat-card__value { font-size: 28px; font-weight: 600; color: var(--med-text); line-height: 1.1; } .stat-card__delta { font-size: 12px; color: var(--med-text-muted); } .stat-card--success .stat-card__value, .stat-card__delta.is-success { color: var(--med-success); } .stat-card--warning .stat-card__value, .stat-card__delta.is-warning { color: var(--med-warning); } .stat-card--critical .stat-card__value, .stat-card__delta.is-critical { color: var(--med-critical); } .stat-card--accent .stat-card__value { color: var(--med-primary-fg); } .chart-card { background: var(--med-surface); border: 1px solid var(--med-border); border-radius: 12px; padding: 16px 18px; } .chart-card__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; } .chart-card__label { font-size: 11.5px; font-weight: 500; letter-spacing: 0.01em; color: var(--med-text-muted); } .chart-card__window { font-size: 11.5px; color: var(--med-text-muted); } .chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 120px; } .chart-bar { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .chart-bar__fill { width: 100%; max-width: 26px; border-radius: 5px 5px 0 0; background: var(--med-primary); min-height: 3px; transition: height 0.2s ease; } .chart-bar__fill--secondary { background: var(--med-surface-2); } .chart-bar__label { font-size: 10px; color: var(--med-text-muted); white-space: nowrap; } .chart-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 11.5px; color: var(--med-text-muted); } .chart-legend__item { display: inline-flex; align-items: center; gap: 6px; } .chart-legend__swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--med-primary); } /* ---- audit timeline rows ---- */ .audit-timeline { display: flex; flex-direction: column; } .audit-row { display: flex; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--med-border); position: relative; } .audit-row:last-child { border-bottom: 0; } .audit-row__rail { flex: 0 0 auto; width: 32px; display: flex; flex-direction: column; align-items: center; } .audit-row__icon { width: 28px; height: 28px; border-radius: var(--radius-pill); display: flex; align-items: center; justify-content: center; background: var(--med-surface-2); border: 1px solid var(--med-border); color: var(--med-text-muted); } .audit-row__icon svg { width: 15px; height: 15px; } .audit-row__line { flex: 1 1 auto; width: 2px; background: var(--med-border); margin-top: 4px; } .audit-row:last-child .audit-row__line { display: none; } .audit-row__icon.is-critical { color: var(--med-critical); border-color: color-mix(in srgb, var(--stat) 40%, transparent); background: var(--prio-critical-bg); } .audit-row__icon.is-warning { color: var(--med-warning); border-color: color-mix(in srgb, var(--warn) 40%, transparent); } .audit-row__icon.is-success { color: var(--med-success); border-color: color-mix(in srgb, var(--ok) 40%, transparent); } .audit-row__icon.is-mention { color: var(--prio-urgent); } .audit-row__body { flex: 1 1 auto; min-width: 0; } .audit-row__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .audit-row__summary { font-size: 13.5px; color: var(--med-text); } .audit-row__actor { font-weight: 600; } .audit-row__ts { flex: 0 0 auto; font-size: 11.5px; color: var(--med-text-muted); white-space: nowrap; } .audit-row__detail { font-size: 12px; color: var(--med-text-muted); margin-top: 2px; } /* ---- consensus agree/disagree chips ---- */ .consensus-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .consensus-meter { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--med-text-muted); } .consensus-meter__bar { width: 80px; height: 6px; border-radius: var(--radius-pill); background: var(--med-surface-2); overflow: hidden; } .consensus-meter__fill { height: 100%; background: var(--med-success); border-radius: var(--radius-pill); } .consensus-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--radius-pill); font-size: 11.5px; font-weight: 500; border: 1px solid var(--med-border); background: var(--med-surface-2); color: var(--med-text); } .consensus-chip__dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--med-text-muted); } .consensus-chip--agree { background: var(--ai-clear-bg); border-color: color-mix(in srgb, var(--ok) 40%, transparent); color: var(--ai-clear); } .consensus-chip--agree .consensus-chip__dot { background: var(--ai-clear); } .consensus-chip--dissent { background: var(--ai-flag-bg); border-color: color-mix(in srgb, var(--ai-flag) 40%, transparent); color: var(--ai-flag); } .consensus-chip--dissent .consensus-chip__dot { background: var(--ai-flag); } .consensus-chip--partial { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); } .consensus-chip--partial .consensus-chip__dot { background: var(--warn); } .consensus-chip.is-pinned { box-shadow: inset 0 0 0 1px var(--med-primary); } /* ---- viewer toolbar extras (additive; base .viewer-toolbar untouched) ---- */ .viewer-toolbar__group { display: inline-flex; align-items: center; gap: 4px; } .viewer-toolbar__sep { width: 1px; height: 22px; background: var(--med-border); margin: 0 6px; } .viewer-preset-chip { padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid var(--med-border); background: transparent; color: var(--med-text-muted); font-size: 11.5px; cursor: pointer; } .viewer-preset-chip.is-active { color: var(--med-primary-fg); border-color: var(--med-primary); background: var(--med-primary-tint-18); } .viewer-measure { position: absolute; pointer-events: none; font-size: 10.5px; color: var(--med-primary-fg); } .viewer-measure__line { stroke: var(--med-accent); stroke-width: 1.5; } /* ============================================== 25. focus & disabled states * Token-driven, consistent keyboard-focus affordances for the shared * interactive controls, and a uniform not-allowed cursor for any control * marked `.is-disabled`. Mouse users keep the existing hover chrome; only * keyboard/focus-visible navigation paints the ring. Layout is untouched — * outlines use a negative offset so they never shift adjacent content. */ .iconbtn:focus-visible, .chip:focus-visible, .tab:focus-visible, .segtab:focus-visible, .seg__btn:focus-visible, .navitem:focus-visible, .lib-row:focus-visible, .listrow:focus-visible, .transport__btn:focus-visible, .composer__btn:focus-visible, .composer__input:focus-visible, .cmdk__item:focus-visible, .viewer-preset-chip:focus-visible, .notif:focus-visible, .radio-card:focus-visible, .switch:focus-within { outline: var(--focus-ring); outline-offset: -2px; } /* Any control explicitly marked disabled gets the not-allowed cursor. */ .is-disabled { cursor: not-allowed; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ============================================== 26. market-readiness (additive) * Shared vocabulary for the MARKET clusters (docs/REBUILD/MARKET-CONTRACT.md): * admin tables, status dots, tour popover, the branded error-page shell, and * print styles for the report. Everything here is additive — no existing class * is modified. */ /* ---- admin tables (/admin/users, /ops lists) ---- */ .admin-table { width: 100%; border-collapse: collapse; font-size: 12.5px; color: var(--med-text); } .admin-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--med-text-muted); padding: 8px 12px; border-bottom: 1px solid var(--med-border); } .admin-table td { padding: 10px 12px; border-bottom: 1px solid var(--med-border); vertical-align: middle; } .admin-table tbody tr:hover { background: var(--med-surface-2); } .admin-table tr.is-inactive td { color: var(--med-text-dim); } /* ---- status dots (feed / dispatch / account health) ---- */ .dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--med-text-dim); flex: none; } .dot--ok { background: var(--med-success); } .dot--warn { background: var(--med-warning); } .dot--down { background: var(--med-critical); } /* ---- onboarding tour popover — quiet card ---- */ .tour-pop { position: absolute; z-index: 90; max-width: 320px; padding: 14px 16px 14px 18px; border-radius: var(--radius-md); border: 1px solid var(--hairline-strong); background: var(--bg3); color: var(--med-text); font-size: 12.5px; line-height: 1.55; box-shadow: var(--shadow-2); animation: tour-pop-in 0.16s ease-out; } .tour-pop::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 2px; border-radius: 2px; background: var(--signal); } @keyframes tour-pop-in { from { opacity: 0; transform: translateY(4px); } } .tour-pop__title { font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink); margin: 2px 0 4px; } .tour-pop__step { font-family: var(--font-ui); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--signal); } .tour-pop__actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; } /* ---- branded error-page shell (templates/error.html) ---- */ .errpage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 32px; background: var(--med-bg); color: var(--med-text); text-align: center; } .errpage .brand { margin-bottom: 18px; } .errpage__code { font-family: var(--font-ui); font-size: 56px; font-weight: 600; letter-spacing: 0.01em; line-height: 1; color: var(--ink-muted); } .errpage__title { font-family: var(--font-ui); font-size: 20px; font-weight: 600; color: var(--ink); margin: 2px 0 0; } .errpage__msg { max-width: 420px; font-size: 13px; color: var(--med-text-muted); margin: 0; } .errpage__rid { margin: 8px 0 0; font-size: 11px; letter-spacing: 0.01em; color: var(--ink-muted); } .errpage__rid code { font-family: inherit; color: var(--ink-2); background: var(--bg2); border: 1px solid var(--hairline); border-radius: 4px; padding: 1px 6px; } .errpage__actions { margin-top: 16px; display: flex; align-items: center; gap: 10px; } .errpage__hint { margin-top: 14px; display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-muted); } /* ---- print: the signed report only (hide app chrome, white page) ---- */ @media print { body::after, /* htmx top progress bar */ .topbar, .toast-region, .app-overlay, .cmdk, .shortcuts-overlay, .viewer-pane, .worklist-pane, .iconbtn, .btn, .presence-pill, .live-dot, .tour-pop { display: none !important; } html, body, .app, .surface { background: #ffffff !important; color: #111111 !important; height: auto !important; overflow: visible !important; } .report-panel, .report-panel * { background: #ffffff !important; color: #111111 !important; border-color: #cccccc !important; box-shadow: none !important; } } /* ============================================== 27. wow differentiators (additive) * Shared component vocabulary for the WOW clusters (assist / assignments / * leaderboard / QA peer review / share links). All additive and token-driven; * nothing above this line changed. See docs/REBUILD/WOW-CONTRACT.md. * ==========================================================================*/ /* ---- AI assist suggestion card (suggestion-only; explicit accept/dismiss) ---- */ .assist { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--med-border); border-left: 3px solid var(--med-accent); border-radius: var(--radius-xs); background: var(--med-surface-2); color: var(--med-text); font-size: 12.5px; line-height: 1.55; } .assist--discrepancy { border-left-color: var(--med-warning); /* WARN only — never blocks */ } .assist--unavailable { border-left-color: var(--med-text-dim); color: var(--med-text-muted); } .assist__badge { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; padding: 2px 8px; border: 1px solid var(--med-border); border-radius: var(--radius-pill); background: var(--ai-pending-bg); color: var(--med-primary-fg); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; } .assist__text { white-space: pre-wrap; color: var(--med-text); } .assist__rationale { font-size: 11.5px; color: var(--med-text-muted); } .assist__actions { display: flex; align-items: center; gap: 8px; margin-top: 2px; } /* ---- claim chip (who is reading this study; advisory, never a lock) ---- */ .claim-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border: 1px solid var(--med-border); border-radius: var(--radius-pill); background: var(--med-surface-2); color: var(--med-text-muted); font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .claim-chip--mine { border-color: var(--med-primary); background: var(--med-primary-tint-12); color: var(--med-primary-fg); } .claim-chip--other { border-color: var(--med-warning); background: var(--med-warning-tint); color: var(--med-warning); } /* ---- model leaderboard (dashboard panel) ---- */ .lb-table { width: 100%; border-collapse: collapse; font-size: 12px; } .lb-table th { padding: 6px 10px; border-bottom: 1px solid var(--med-border); text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--med-text-muted); } .lb-table td { padding: 7px 10px; border-bottom: 1px solid var(--med-border); color: var(--med-text); vertical-align: middle; } .lb-table tbody tr:last-child td { border-bottom: none; } .lb-table tbody tr:hover { background: var(--med-surface-2); } .lb-bar { position: relative; display: block; height: 6px; min-width: 80px; border-radius: var(--radius-pill); background: var(--med-surface-2); overflow: hidden; } .lb-bar__fill { display: block; height: 100%; border-radius: var(--radius-pill); background: var(--med-accent); } /* ---- RADPEER score pills (QA peer review) ---- */ .qa-score { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; padding: 2px 8px; border: 1px solid var(--med-border); border-radius: var(--radius-pill); background: var(--med-surface-2); color: var(--med-text); font-size: 11px; font-weight: 700; } .qa-score--1 { background: var(--ai-clear-bg); color: var(--ai-clear); border-color: transparent; } .qa-score--2 { background: var(--prio-stat-bg); color: var(--prio-stat); border-color: transparent; } .qa-score--3 { background: var(--prio-trauma-bg); color: var(--prio-trauma); border-color: transparent; } .qa-score--4 { background: var(--prio-critical-bg); color: var(--prio-critical); border-color: transparent; } .qa-score--pending { color: var(--med-text-dim); border-style: dashed; } /* ---- share box (link + copy + expiry; signed reports only) ---- */ .share-box { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; padding: 12px 14px; border: 1px solid var(--med-border); border-radius: var(--radius-xs); background: var(--med-surface-2); font-size: 12px; color: var(--med-text); } .share-box__row { display: flex; align-items: center; gap: 8px; } .share-box__url { flex: 1; min-width: 0; padding: 6px 9px; border: 1px solid var(--med-border); border-radius: var(--radius-xs); background: var(--med-bg); color: var(--med-primary-fg); font-family: var(--font-mono); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .share-box__meta { font-size: 11px; color: var(--med-text-muted); } .share-box__meta.is-revoked, .share-box__meta.is-expired { color: var(--med-critical); } /* ============================================== 28. platform (additive) * Shared component vocabulary for the PLATFORM (Wave 4) clusters (patients / * API keys / webhooks / rules / integrations / runtime config). All additive * and token-driven; nothing above this line changed. * See docs/REBUILD/PLATFORM-CONTRACT.md. * ==========================================================================*/ /* ---- shared dense admin table (keys / webhooks / rules / HL7 / config) ---- */ .plat-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .plat-table th { padding: 7px 10px; border-bottom: 1px solid var(--med-border); color: var(--med-text-muted); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; text-align: left; white-space: nowrap; } .plat-table td { padding: 8px 10px; border-bottom: 1px solid var(--med-border); color: var(--med-text); vertical-align: middle; } .plat-table tbody tr:hover { background: var(--med-surface-2); } .plat-table .u-mono { font-family: var(--font-mono); font-size: 11.5px; } /* ---- API key scope pill + show-once secret box ---- */ .scope-pill { display: inline-flex; align-items: center; padding: 1px 7px; margin-right: 4px; border: 1px solid var(--med-border); border-radius: var(--radius-pill); background: var(--med-bg); color: var(--med-text-muted); font-family: var(--font-mono); font-size: 10.5px; } .secret-once { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--med-border); border-left: 3px solid var(--med-warning); border-radius: var(--radius-xs); background: var(--med-surface-2); } .secret-once__value { padding: 6px 9px; border: 1px solid var(--med-border); border-radius: var(--radius-xs); background: var(--med-bg); color: var(--med-primary-fg); font-family: var(--font-mono); font-size: 11.5px; overflow-wrap: anywhere; user-select: all; } .secret-once__note { font-size: 11px; color: var(--med-warning); } /* ---- webhook endpoint / delivery status pills ---- */ .wh-status { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border: 1px solid var(--med-border); border-radius: var(--radius-pill); font-size: 10.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: capitalize; /* template text is lowercase status words */ color: var(--med-text-muted); } .wh-status--delivered { color: var(--med-success); border-color: var(--med-success); } .wh-status--failed { color: var(--med-critical); border-color: var(--med-critical); } .wh-status--pending, .wh-status--retrying { color: var(--med-warning); border-color: var(--med-warning); } .wh-status--disabled { color: var(--med-text-dim); border-style: dashed; } /* ---- automation rule card (trigger + conditions -> actions) ---- */ .rule-card { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--med-border); border-left: 3px solid var(--med-accent); border-radius: var(--radius-xs); background: var(--med-surface-2); } .rule-card.is-disabled { border-left-color: var(--med-text-dim); opacity: 0.65; } .rule-card__head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--med-text); } .rule-card__meta { font-size: 11px; color: var(--med-text-muted); } .rule-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; margin: 0 4px 4px 0; border: 1px solid var(--med-border); border-radius: var(--radius-pill); background: var(--med-bg); font-family: var(--font-mono); font-size: 10.5px; color: var(--med-text-muted); } .rule-chip--action { color: var(--med-primary-fg); background: var(--ai-pending-bg); } /* ---- integration connector health card ---- */ .conn-card { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--med-border); border-left: 3px solid var(--med-text-dim); border-radius: var(--radius-xs); background: var(--med-surface-2); } .conn-card--healthy { border-left-color: var(--med-success); } .conn-card--down { border-left-color: var(--med-critical); } .conn-card__name { font-size: 13px; font-weight: 600; color: var(--med-text); } .conn-card__label { font-size: 12px; color: var(--med-text-muted); } .conn-card__detail { font-size: 11px; color: var(--med-text-dim); } /* ---- runtime-config rows ---- */ .cfg-row__key { font-family: var(--font-mono); font-size: 11.5px; color: var(--med-primary-fg); } .cfg-row__value { font-family: var(--font-mono); font-size: 11.5px; color: var(--med-text); } .cfg-row__value.is-masked { color: var(--med-text-dim); letter-spacing: 0.18em; } .cfg-row.is-readonly .cfg-row__value { color: var(--med-text-muted); } /* ---- patient registry header / MRN chip ---- */ .pt-head { display: flex; align-items: baseline; gap: 12px; padding: 14px 0 10px; border-bottom: 1px solid var(--med-border); } .pt-head__name { font-size: 17px; font-weight: 700; color: var(--med-text); } .pt-head__meta { font-size: 12px; color: var(--med-text-muted); } .mrn-chip { display: inline-flex; align-items: center; padding: 2px 8px; border: 1px solid var(--med-border); border-radius: var(--radius-pill); background: var(--med-bg); color: var(--med-text-muted); font-family: var(--font-mono); font-size: 11px; } /* ============================================== 29. DESIGN CONSTITUTION canon * The shared "calm panel" vocabulary (docs/REBUILD/DESIGN-CONSTITUTION.md). * ADDITIVE — these are the canonical primitives the restyle wave recomposes * surfaces onto. They exist to END the box-in-box pattern: * * .subhead — THE uppercase section label (one implementation; replaces the * per-surface .u-label / __label clones going forward). * .stack — separation by hairline, not by box: each direct child gets a * top hairline (except the first). Children stay borderless. * .note — THE status line (replaces stacked banner boxes): a 3px left * accent + quiet tint + one line of text. At most ONE .note * visible at rest per panel (L3). * .badge — THE generic chip primitive going forward (clinical .prio / * .ai-chip / .modality / .triage keep their clinical homes). * ==========================================================================*/ /* ---- canonical section label (sentence case, quiet) ---- */ .subhead { display: flex; align-items: center; gap: 8px; font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.01em; color: var(--med-text-dim); } .subhead svg { width: 13px; height: 13px; flex: 0 0 auto; } .subhead__aside { margin-left: auto; font-weight: 500; letter-spacing: normal; text-transform: none; font-size: var(--text-xs); color: var(--med-text-muted); } /* ---- separation by light, not by boxes ---- */ .stack > * + * { border-top: 1px solid var(--med-border); } .stack--flush > * { padding-left: 0; padding-right: 0; } /* ---- THE status line (guardrail / signed / analysis / discrepancy…) ---- */ .note { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-left: 3px solid var(--med-border); border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--med-surface-2); color: var(--med-text); font-size: var(--text-sm); line-height: 1.5; } .note svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 1px; } .note__title { font-weight: 600; } .note__body { color: var(--med-text-muted); margin-top: 1px; } .note__aside { margin-left: auto; flex: 0 0 auto; align-self: center; } .note--accent { border-left-color: var(--med-accent); } .note--success { border-left-color: var(--med-success); background: var(--ai-clear-bg); } .note--success svg, .note--success .note__title { color: var(--med-success); } .note--warning { border-left-color: var(--med-warning); background: var(--med-warning-tint); } .note--warning svg, .note--warning .note__title { color: var(--med-warning); } /* blocked/critical is the ONLY state that may carry a full perimeter (L3) */ .note--critical { border: 1px solid var(--line-critical); border-left: 3px solid var(--med-critical); background: var(--prio-critical-bg); } .note--critical svg, .note--critical .note__title { color: var(--med-critical); } .note--quiet { background: transparent; color: var(--med-text-muted); } /* ---- THE generic chip primitive ---- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); border: 1px solid var(--med-border); background: var(--med-surface-2); color: var(--med-text-muted); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; } .badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); background: currentColor; } .badge--accent { color: var(--med-primary-fg); border-color: var(--line-accent); background: var(--med-primary-tint-18); } .badge--success { color: var(--med-success); border-color: var(--line-success); background: var(--ai-clear-bg); } .badge--warning { color: var(--med-warning); border-color: var(--line-warning); background: var(--med-warning-tint); } .badge--critical { color: var(--med-critical); border-color: var(--line-critical); background: var(--prio-critical-bg); } .badge--dim { color: var(--med-text-dim); border-style: dashed; background: transparent; } .badge--solid { color: var(--med-primary-fg); border-color: var(--med-primary); background: var(--med-primary); } /* ============================================================================ §PIXEL-QA — additive presentation fixes (shell surface, screenshot-verified) 1. Topbar unread badge (.iconbtn__dot): at 14px tall sitting at top/right 4px the count pill covered most of the 17px bell / message glyph — the icon read as a red blob. Nudge it onto the button corner (the .topbar has no overflow clip; z-index 40 keeps it above the surface) so the glyph stays recognizable and the count still reads. 2. Live status (.status-live): live.js appends its OWN stateful .live-dot inside [data-sync-status], so the bar showed a double dot ("● Live ●"). When the scripted dot is present, the static template dot yields to it. ========================================================================== */ .iconbtn__dot { top: -3px; right: -3px; } .status-live:has(.live-dot) .status-live__dot { display: none; } /* ============================================================================ §30 OBSIDIAN shared vocabulary (ADDITIVE — DESIGN_BRIEF §6). New primitives every surface may adopt. Token-driven; nothing above this line is required to change for these to work. ========================================================================== */ /* ---- mono utility (clinical identifiers are ALWAYS mono) ---- */ .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } /* ---- section label (field labels / table headers) — sentence case ---- */ .microlabel { font-family: var(--font-primary); font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); } /* ---- plain status dot (7px, flat — no glow, no breathing) ---- */ .led { display: inline-block; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--ink-muted); flex: none; } .led--ok { background: var(--ok); } .led--warn { background: var(--warn); } .led--stat, .led--down { background: var(--stat); } .led--info { background: var(--info); } .led--ai { background: var(--ai); } .led--breathe { animation: none; /* breathing retired — plain dot */ } /* ---- stat block: quiet numeral + sentence-case label ---- */ .stat-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .stat-block__value { font-family: var(--font-ui); font-size: 24px; font-weight: 600; line-height: 1; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums; } .stat-block__value small { font-size: 0.55em; font-weight: 500; color: var(--ink-2); } .stat-block__label { font-size: 11px; font-weight: 500; letter-spacing: 0.01em; color: var(--ink-muted); } .stat-block--signal .stat-block__value { color: var(--signal); } .stat-block--stat .stat-block__value { color: var(--stat); } .stat-block--warn .stat-block__value { color: var(--warn); } /* ---- priority edge: 2px flat left bar on rows (no pulse — the one motion exception, an open critical past SLA, lives on the criticals surface) ---- */ .priority-edge { position: relative; } .priority-edge::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; /* calmer row edge — was 3px */ border-radius: 0 2px 2px 0; background: transparent; } .priority-edge--stat::before, .priority-edge--critical::before { background: var(--stat); } .priority-edge--urgent::before { background: var(--prio-urgent); } .priority-edge--trauma::before { background: var(--prio-trauma); } .priority-edge--stroke::before { background: var(--prio-stroke); } .priority-edge--routine::before { background: var(--hairline-strong); } /* ---- dense instrument table (32px rows, microcaps heads, hairlines) ---- */ .table-dense { width: 100%; border-collapse: collapse; font-size: 12.5px; } .table-dense thead th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink-muted); padding: 7px 12px; border-bottom: 1px solid var(--hairline-strong); white-space: nowrap; } .table-dense tbody td { height: 32px; padding: 4px 12px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } .table-dense tbody tr { transition: background 0.1s ease; } .table-dense tbody tr:hover { background: var(--bg2); } .table-dense tbody tr.is-active { background: var(--bg2); box-shadow: inset 2px 0 0 var(--signal); } .table-dense .mono, .table-dense .u-mono { font-size: 11.5px; } /* ---- AI-origin affordance: flat 1px violet border (USE SPARINGLY, always next to a literal "AI" / "AI draft" label) ---- */ .ai-edge { position: relative; border: 1px solid var(--ai); background-clip: padding-box; } .ai-edge::after { content: none; } /* ---- htmx swap fade (60ms) ---- */ .htmx-swapping { opacity: 0; transition: opacity 60ms ease-out; } /* ---- entrance: staggered choreography retired — one quiet 80ms fade ---- */ @media (prefers-reduced-motion: no-preference) { .stagger { animation: fade-in 80ms ease-out; } } @keyframes fade-in { from { opacity: 0; } } /* ---- SSE row highlight: a subtle one-time background tint that fades — functional change marker, not a glow ---- */ @media (prefers-reduced-motion: no-preference) { .pulse-once { animation: row-pulse 1.2s ease-out 1; } } @keyframes row-pulse { 0% { background: var(--med-primary-tint-12); } 100% { background: transparent; } } /* ---- keyboard-first: visible focus on anything interactive ---- :where() keeps specificity at zero so component-specific focus rules win. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }