/* ClearCardio — clinical shell. Generated from @clearcardio/design-tokens/styles. Semantic tokens only: every colour, space and type value below resolves to a custom property emitted by the token layer. Do not add a literal colour here — packages/design-tokens/test/no-raw-colour.test.ts fails the build for one. */ :root { --cc-surface-page: #F8FAFC; --cc-surface-card: #FFFFFF; --cc-surface-sunken: #F1F5F9; --cc-surface-inverse: #152842; --cc-surface-brand-subtle: #EEF3FB; --cc-surface-scrim: rgba(15, 23, 42, 0.55); --cc-surface-hatch-subtle: rgba(15, 23, 42, 0.022); --cc-surface-hatch: rgba(15, 23, 42, 0.03); --cc-surface-hatch-strong: rgba(15, 23, 42, 0.035); --cc-text-primary: #0F172A; --cc-text-secondary: #334155; --cc-text-muted: #475569; --cc-text-subtle: #64748B; --cc-text-on-inverse: #E2E8F0; --cc-text-on-inverse-link: #FFFFFF; --cc-text-on-inverse-link-hover: #6E93CC; --cc-text-on-solid: #FFFFFF; --cc-text-link: #2B5DA8; --cc-text-link-hover: #1D4A8F; --cc-border-default: #E2E8F0; --cc-border-strong: #CBD5E1; --cc-border-control: #64748B; --cc-border-brand: #2B5DA8; --cc-border-brand-subtle: #D6E2F5; --cc-border-inverse: #1D3758; --cc-brand-accent: #294870; --cc-action-primary-bg: #C9021F; --cc-action-primary-bg-hover: #A50019; --cc-action-primary-fg: #FFFFFF; --cc-action-secondary-bg: #FFFFFF; --cc-action-secondary-bg-hover: #EEF3FB; --cc-action-secondary-fg: #1D3758; --cc-action-secondary-border: #64748B; --cc-action-destructive-bg: #86201C; --cc-action-destructive-fg: #FFFFFF; --cc-action-disabled-bg: #F1F5F9; --cc-action-disabled-fg: #475569; --cc-focus-ring: #2B5DA8; --cc-focus-ring-on-inverse: #FFFFFF; --cc-accent-on-inverse: #FDE68A; --cc-ink-950: #0B1828; --cc-ink-900: #0F1F33; --cc-ink-800: #152842; --cc-ink-700: #1D3758; --cc-ink-600: #294870; --cc-chrome-bg: #0B1828; --cc-chrome-bg-raised: #0F1F33; --cc-chrome-bg-hover: #152842; --cc-chrome-bg-active: #1D3758; --cc-chrome-fg: #F4F8FF; --cc-chrome-fg-muted: #B3C6E4; --cc-chrome-fg-subtle: #7E97BE; --cc-chrome-border: rgba(150, 185, 240, 0.14); --cc-chrome-border-strong: rgba(150, 185, 240, 0.24); --cc-chrome-scrim: rgba(11, 24, 40, 0.5); --cc-chrome-shadow: 0 24px 60px -30px rgba(11, 24, 40, 0.65); --cc-accent: #F75A6D; --cc-accent-strong: #C9021F; --cc-accent-text: #C9021F; --cc-accent-deep: #A50019; --cc-accent-grad-start: #E4223D; --cc-accent-soft: rgba(247, 90, 109, 0.14); --cc-accent-glow: rgba(239, 58, 80, 0.42); --cc-accent-on: #FFFFFF; --cc-grad-cta: linear-gradient(135deg, #E4223D 0%, #C9021F 60%, #A50019 100%); --cc-grad-hero: radial-gradient(60% 90% at 85% 0%, rgba(239, 58, 80, 0.20) 0%, rgba(239, 58, 80, 0) 60%), radial-gradient(70% 100% at 0% 100%, rgba(110, 147, 204, 0.14) 0%, rgba(110, 147, 204, 0) 60%); --cc-support-blue: #2B5DA8; --cc-support-blue-on-chrome: #6E93CC; --cc-support-green: #1E7052; --cc-support-green-on-chrome: #4FBF95; --cc-support-gold: #8A5A00; --cc-support-gold-on-chrome: #FFC24B; --cc-sev-blocking-fg: #7F1D1D; --cc-sev-blocking-bg: #FEF2F2; --cc-sev-blocking-border: #FECACA; --cc-sev-blocking-solid: #86201C; --cc-sev-caution-fg: #B45309; --cc-sev-caution-bg: #FFFBEB; --cc-sev-caution-border: #FDE68A; --cc-sev-caution-solid: #D97706; --cc-sev-pass-fg: #047857; --cc-sev-pass-bg: #ECFDF5; --cc-sev-pass-border: #A7F3D0; --cc-sev-pass-solid: #059669; --cc-sev-neutral-fg: #475569; --cc-sev-neutral-bg: #F1F5F9; --cc-sev-neutral-border: #E2E8F0; --cc-sev-neutral-solid: #64748B; --cc-sev-unverified-fg: #475569; --cc-sev-unverified-bg: #F1F5F9; --cc-sev-unverified-border: #CBD5E1; --cc-sev-unverified-solid: #64748B; --cc-state-blocking-fg: #7F1D1D; --cc-state-blocking-bg: #FEF2F2; --cc-state-blocking-border: #FECACA; --cc-state-blocking-solid: #86201C; --cc-state-pass-fg: #047857; --cc-state-pass-bg: #ECFDF5; --cc-state-pass-border: #A7F3D0; --cc-state-pass-solid: #059669; --cc-state-caution-fg: #B45309; --cc-state-caution-bg: #FFFBEB; --cc-state-caution-border: #FDE68A; --cc-state-neutral-fg: #475569; --cc-state-neutral-bg: #F1F5F9; --cc-state-neutral-border: #E2E8F0; --cc-state-unverified-fg: #475569; --cc-state-unverified-bg: #F1F5F9; --cc-state-unverified-border: #CBD5E1; --cc-font-sans: Poppins, "Noto Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --cc-font-display: Poppins, "Figtree", "Noto Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --cc-font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", "Liberation Mono", monospace; --cc-font-size-xs: 0.75rem; --cc-font-size-sm: 0.8125rem; --cc-font-size-base: 1rem; --cc-font-size-lg: 1.125rem; --cc-font-size-xl: 1.375rem; --cc-font-size-2xl: 1.75rem; --cc-font-weight-regular: 400; --cc-font-weight-medium: 500; --cc-font-weight-semibold: 600; --cc-font-weight-bold: 700; --cc-font-weight-heavy: 800; --cc-line-tight: 1.25; --cc-line-snug: 1.4; --cc-line-base: 1.6; --cc-line-relaxed: 1.7; --cc-space-1: 4px; --cc-space-2: 8px; --cc-space-3: 12px; --cc-space-4: 16px; --cc-space-5: 20px; --cc-space-6: 24px; --cc-space-8: 32px; --cc-space-10: 40px; --cc-space-12: 48px; --cc-space-16: 64px; --cc-space-tier-clinical-gap: 8px; --cc-space-tier-clinical-section: 32px; --cc-space-tier-patient-gap: 16px; --cc-space-tier-patient-section: 64px; --cc-space-tier-governance-gap: 12px; --cc-space-tier-governance-section: 40px; --cc-radius-sm: 4px; --cc-radius-md: 6px; --cc-radius-lg: 8px; --cc-radius-xl: 12px; --cc-radius-card: 14px; --cc-radius-pill: 999px; --cc-elevation-flat: none; --cc-elevation-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.06); --cc-elevation-raised: 0 2px 6px rgba(15, 23, 42, 0.06), 0 8px 20px rgba(15, 23, 42, 0.08); --cc-elevation-dialog: 0 12px 28px rgba(15, 23, 42, 0.18), 0 2px 8px rgba(15, 23, 42, 0.12); --cc-elevation-pressed: inset 0 1px 2px rgba(15, 23, 42, 0.10); --cc-motion-fast: 150ms; --cc-motion-base: 220ms; --cc-motion-slow: 320ms; --cc-motion-exit: 132ms; --cc-motion-stagger: 30ms; --cc-motion-rise: 8px; --cc-ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --cc-ease-exit: cubic-bezier(0.7, 0, 0.84, 0); --cc-motion-ease: cubic-bezier(0.2, 0, 0, 1); --cc-print-ink: #000000; --cc-print-paper: #FFFFFF; --cc-layout-max: 1140px; --cc-layout-measure: 68ch; --cc-layout-prose: 720px; --cc-layout-form: 560px; --cc-layout-nav: 264px; --cc-layout-nav-rail: 72px; --cc-layout-topbar: 56px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="high-contrast"]) { --cc-surface-page: #0F1F33; --cc-surface-card: #152842; --cc-surface-sunken: #0B1828; --cc-surface-inverse: #294870; --cc-surface-brand-subtle: #1D3758; --cc-surface-scrim: rgba(2, 6, 23, 0.72); --cc-surface-hatch-subtle: rgba(226, 232, 240, 0.035); --cc-surface-hatch: rgba(226, 232, 240, 0.05); --cc-surface-hatch-strong: rgba(226, 232, 240, 0.06); --cc-text-primary: #E2E8F0; --cc-text-secondary: #CBD5E1; --cc-text-muted: #B3C6E4; --cc-text-subtle: #94A3B8; --cc-text-on-inverse-link-hover: #A5C4F0; --cc-text-link: #A5C4F0; --cc-text-link-hover: #C6D9F6; --cc-border-default: #1D3758; --cc-border-strong: #294870; --cc-border-control: #7E97BE; --cc-border-brand: #A5C4F0; --cc-border-brand-subtle: #1D3758; --cc-border-inverse: #294870; --cc-brand-accent: #8CAFE0; --cc-action-secondary-bg: #1D3758; --cc-action-secondary-bg-hover: #294870; --cc-action-secondary-fg: #E2E8F0; --cc-action-secondary-border: #7E97BE; --cc-action-destructive-bg: #C24A3E; --cc-action-disabled-bg: #1E293B; --cc-action-disabled-fg: #94A3B8; --cc-focus-ring: #A5C4F0; --cc-accent-text: #FF8C99; --cc-support-blue: #6E93CC; --cc-support-green: #4FBF95; --cc-support-gold: #FFC24B; --cc-sev-blocking-fg: #F0A9A2; --cc-sev-blocking-bg: #3B1518; --cc-sev-blocking-border: #6E2A26; --cc-sev-blocking-solid: #C24A3E; --cc-sev-caution-fg: #F5C97A; --cc-sev-caution-bg: #3A2A0C; --cc-sev-caution-border: #6B4E14; --cc-sev-caution-solid: #D9A02B; --cc-sev-pass-fg: #7FD9B4; --cc-sev-pass-bg: #0C2E23; --cc-sev-pass-border: #1E5C46; --cc-sev-pass-solid: #34A277; --cc-sev-neutral-fg: #CBD5E1; --cc-sev-neutral-bg: #1E293B; --cc-sev-neutral-border: #334155; --cc-sev-neutral-solid: #94A3B8; --cc-sev-unverified-fg: #CBD5E1; --cc-sev-unverified-bg: #1E293B; --cc-sev-unverified-border: #475569; --cc-sev-unverified-solid: #94A3B8; --cc-state-blocking-fg: #F0A9A2; --cc-state-blocking-bg: #3B1518; --cc-state-blocking-border: #6E2A26; --cc-state-blocking-solid: #C24A3E; --cc-state-pass-fg: #7FD9B4; --cc-state-pass-bg: #0C2E23; --cc-state-pass-border: #1E5C46; --cc-state-pass-solid: #34A277; --cc-state-caution-fg: #F5C97A; --cc-state-caution-bg: #3A2A0C; --cc-state-caution-border: #6B4E14; --cc-state-neutral-fg: #CBD5E1; --cc-state-neutral-bg: #1E293B; --cc-state-neutral-border: #334155; --cc-state-unverified-fg: #CBD5E1; --cc-state-unverified-bg: #1E293B; --cc-state-unverified-border: #475569; --cc-elevation-card: 0 1px 2px rgba(2, 6, 23, 0.50), 0 1px 3px rgba(2, 6, 23, 0.60); --cc-elevation-raised: 0 2px 6px rgba(2, 6, 23, 0.55), 0 8px 20px rgba(2, 6, 23, 0.60); --cc-elevation-dialog: 0 12px 28px rgba(2, 6, 23, 0.70), 0 2px 8px rgba(2, 6, 23, 0.60); --cc-elevation-pressed: inset 0 1px 2px rgba(2, 6, 23, 0.50); } } @media (prefers-contrast: more) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --cc-surface-page: #EDEDED; --cc-surface-sunken: #D4D4D4; --cc-surface-inverse: #000000; --cc-surface-brand-subtle: #E6E6E6; --cc-surface-scrim: rgba(0, 0, 0, 0.85); --cc-surface-hatch-subtle: rgba(0, 0, 0, 0.10); --cc-surface-hatch: rgba(0, 0, 0, 0.14); --cc-surface-hatch-strong: rgba(0, 0, 0, 0.18); --cc-text-primary: #000000; --cc-text-secondary: #171717; --cc-text-muted: #262626; --cc-text-subtle: #333333; --cc-text-on-inverse: #FFFFFF; --cc-text-on-inverse-link-hover: #9FC5FF; --cc-text-link: #002E8A; --cc-text-link-hover: #001A4D; --cc-border-default: #333333; --cc-border-strong: #000000; --cc-border-control: #000000; --cc-border-brand: #001A33; --cc-border-brand-subtle: #333333; --cc-border-inverse: #FFFFFF; --cc-brand-accent: #001A33; --cc-action-primary-bg: #00265C; --cc-action-primary-bg-hover: #00224F; --cc-action-secondary-bg-hover: #E6E6E6; --cc-action-secondary-fg: #000000; --cc-action-secondary-border: #000000; --cc-action-destructive-bg: #8A0014; --cc-action-disabled-bg: #E6E6E6; --cc-action-disabled-fg: #3D3D3D; --cc-focus-ring: #0040C1; --cc-accent-on-inverse: #FFD54F; --cc-ink-950: #000000; --cc-ink-900: #0A0A0A; --cc-ink-800: #141414; --cc-ink-700: #1F1F1F; --cc-ink-600: #292929; --cc-chrome-bg: #000000; --cc-chrome-bg-raised: #0A0A0A; --cc-chrome-bg-hover: #141414; --cc-chrome-bg-active: #1F1F1F; --cc-chrome-fg: #FFFFFF; --cc-chrome-fg-muted: #E0E0E0; --cc-chrome-fg-subtle: #C7C7C7; --cc-chrome-border: rgba(255, 255, 255, 0.40); --cc-chrome-border-strong: rgba(255, 255, 255, 0.60); --cc-chrome-scrim: rgba(0, 0, 0, 0.85); --cc-chrome-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.90); --cc-accent: #9FC5FF; --cc-accent-strong: #00265C; --cc-accent-text: #00265C; --cc-accent-deep: #00224F; --cc-accent-grad-start: #003D8F; --cc-accent-soft: rgba(0, 38, 92, 0.18); --cc-accent-glow: rgba(0, 38, 92, 0.50); --cc-grad-cta: linear-gradient(135deg, #003D8F 0%, #00265C 60%, #00224F 100%); --cc-grad-hero: radial-gradient(60% 90% at 85% 0%, rgba(0, 61, 143, 0.30) 0%, rgba(0, 61, 143, 0) 60%), radial-gradient(70% 100% at 0% 100%, rgba(0, 38, 92, 0.25) 0%, rgba(0, 38, 92, 0) 60%); --cc-support-blue: #00408F; --cc-support-blue-on-chrome: #9FC5FF; --cc-support-green: #00563D; --cc-support-green-on-chrome: #79E2B4; --cc-support-gold: #6B4200; --cc-support-gold-on-chrome: #FFD166; --cc-sev-blocking-fg: #6B0000; --cc-sev-blocking-bg: #FFEBEB; --cc-sev-blocking-border: #6B0000; --cc-sev-blocking-solid: #8A0014; --cc-sev-caution-fg: #5C3400; --cc-sev-caution-bg: #FFF4E0; --cc-sev-caution-border: #5C3400; --cc-sev-caution-solid: #7A4600; --cc-sev-pass-fg: #00452E; --cc-sev-pass-bg: #E6F7EF; --cc-sev-pass-border: #00452E; --cc-sev-pass-solid: #00603F; --cc-sev-neutral-fg: #1A1A1A; --cc-sev-neutral-bg: #EDEDED; --cc-sev-neutral-border: #1A1A1A; --cc-sev-neutral-solid: #4D4D4D; --cc-sev-unverified-fg: #3D0066; --cc-sev-unverified-bg: #F2E6FF; --cc-sev-unverified-border: #3D0066; --cc-sev-unverified-solid: #5C0099; --cc-state-blocking-fg: #6B0000; --cc-state-blocking-bg: #FFEBEB; --cc-state-blocking-border: #6B0000; --cc-state-blocking-solid: #8A0014; --cc-state-pass-fg: #00452E; --cc-state-pass-bg: #E6F7EF; --cc-state-pass-border: #00452E; --cc-state-pass-solid: #00603F; --cc-state-caution-fg: #5C3400; --cc-state-caution-bg: #FFF4E0; --cc-state-caution-border: #5C3400; --cc-state-neutral-fg: #1A1A1A; --cc-state-neutral-bg: #EDEDED; --cc-state-neutral-border: #1A1A1A; --cc-state-unverified-fg: #3D0066; --cc-state-unverified-bg: #F2E6FF; --cc-state-unverified-border: #3D0066; --cc-elevation-card: 0 1px 2px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.65); --cc-elevation-raised: 0 2px 6px rgba(0, 0, 0, 0.60), 0 8px 20px rgba(0, 0, 0, 0.65); --cc-elevation-dialog: 0 12px 28px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.65); --cc-elevation-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.55); } } :root[data-theme="dark"] { --cc-surface-page: #0F1F33; --cc-surface-card: #152842; --cc-surface-sunken: #0B1828; --cc-surface-inverse: #294870; --cc-surface-brand-subtle: #1D3758; --cc-surface-scrim: rgba(2, 6, 23, 0.72); --cc-surface-hatch-subtle: rgba(226, 232, 240, 0.035); --cc-surface-hatch: rgba(226, 232, 240, 0.05); --cc-surface-hatch-strong: rgba(226, 232, 240, 0.06); --cc-text-primary: #E2E8F0; --cc-text-secondary: #CBD5E1; --cc-text-muted: #B3C6E4; --cc-text-subtle: #94A3B8; --cc-text-on-inverse-link-hover: #A5C4F0; --cc-text-link: #A5C4F0; --cc-text-link-hover: #C6D9F6; --cc-border-default: #1D3758; --cc-border-strong: #294870; --cc-border-control: #7E97BE; --cc-border-brand: #A5C4F0; --cc-border-brand-subtle: #1D3758; --cc-border-inverse: #294870; --cc-brand-accent: #8CAFE0; --cc-action-secondary-bg: #1D3758; --cc-action-secondary-bg-hover: #294870; --cc-action-secondary-fg: #E2E8F0; --cc-action-secondary-border: #7E97BE; --cc-action-destructive-bg: #C24A3E; --cc-action-disabled-bg: #1E293B; --cc-action-disabled-fg: #94A3B8; --cc-focus-ring: #A5C4F0; --cc-accent-text: #FF8C99; --cc-support-blue: #6E93CC; --cc-support-green: #4FBF95; --cc-support-gold: #FFC24B; --cc-sev-blocking-fg: #F0A9A2; --cc-sev-blocking-bg: #3B1518; --cc-sev-blocking-border: #6E2A26; --cc-sev-blocking-solid: #C24A3E; --cc-sev-caution-fg: #F5C97A; --cc-sev-caution-bg: #3A2A0C; --cc-sev-caution-border: #6B4E14; --cc-sev-caution-solid: #D9A02B; --cc-sev-pass-fg: #7FD9B4; --cc-sev-pass-bg: #0C2E23; --cc-sev-pass-border: #1E5C46; --cc-sev-pass-solid: #34A277; --cc-sev-neutral-fg: #CBD5E1; --cc-sev-neutral-bg: #1E293B; --cc-sev-neutral-border: #334155; --cc-sev-neutral-solid: #94A3B8; --cc-sev-unverified-fg: #CBD5E1; --cc-sev-unverified-bg: #1E293B; --cc-sev-unverified-border: #475569; --cc-sev-unverified-solid: #94A3B8; --cc-state-blocking-fg: #F0A9A2; --cc-state-blocking-bg: #3B1518; --cc-state-blocking-border: #6E2A26; --cc-state-blocking-solid: #C24A3E; --cc-state-pass-fg: #7FD9B4; --cc-state-pass-bg: #0C2E23; --cc-state-pass-border: #1E5C46; --cc-state-pass-solid: #34A277; --cc-state-caution-fg: #F5C97A; --cc-state-caution-bg: #3A2A0C; --cc-state-caution-border: #6B4E14; --cc-state-neutral-fg: #CBD5E1; --cc-state-neutral-bg: #1E293B; --cc-state-neutral-border: #334155; --cc-state-unverified-fg: #CBD5E1; --cc-state-unverified-bg: #1E293B; --cc-state-unverified-border: #475569; --cc-elevation-card: 0 1px 2px rgba(2, 6, 23, 0.50), 0 1px 3px rgba(2, 6, 23, 0.60); --cc-elevation-raised: 0 2px 6px rgba(2, 6, 23, 0.55), 0 8px 20px rgba(2, 6, 23, 0.60); --cc-elevation-dialog: 0 12px 28px rgba(2, 6, 23, 0.70), 0 2px 8px rgba(2, 6, 23, 0.60); --cc-elevation-pressed: inset 0 1px 2px rgba(2, 6, 23, 0.50); } :root[data-theme="high-contrast"] { --cc-surface-page: #EDEDED; --cc-surface-sunken: #D4D4D4; --cc-surface-inverse: #000000; --cc-surface-brand-subtle: #E6E6E6; --cc-surface-scrim: rgba(0, 0, 0, 0.85); --cc-surface-hatch-subtle: rgba(0, 0, 0, 0.10); --cc-surface-hatch: rgba(0, 0, 0, 0.14); --cc-surface-hatch-strong: rgba(0, 0, 0, 0.18); --cc-text-primary: #000000; --cc-text-secondary: #171717; --cc-text-muted: #262626; --cc-text-subtle: #333333; --cc-text-on-inverse: #FFFFFF; --cc-text-on-inverse-link-hover: #9FC5FF; --cc-text-link: #002E8A; --cc-text-link-hover: #001A4D; --cc-border-default: #333333; --cc-border-strong: #000000; --cc-border-control: #000000; --cc-border-brand: #001A33; --cc-border-brand-subtle: #333333; --cc-border-inverse: #FFFFFF; --cc-brand-accent: #001A33; --cc-action-primary-bg: #00265C; --cc-action-primary-bg-hover: #00224F; --cc-action-secondary-bg-hover: #E6E6E6; --cc-action-secondary-fg: #000000; --cc-action-secondary-border: #000000; --cc-action-destructive-bg: #8A0014; --cc-action-disabled-bg: #E6E6E6; --cc-action-disabled-fg: #3D3D3D; --cc-focus-ring: #0040C1; --cc-accent-on-inverse: #FFD54F; --cc-ink-950: #000000; --cc-ink-900: #0A0A0A; --cc-ink-800: #141414; --cc-ink-700: #1F1F1F; --cc-ink-600: #292929; --cc-chrome-bg: #000000; --cc-chrome-bg-raised: #0A0A0A; --cc-chrome-bg-hover: #141414; --cc-chrome-bg-active: #1F1F1F; --cc-chrome-fg: #FFFFFF; --cc-chrome-fg-muted: #E0E0E0; --cc-chrome-fg-subtle: #C7C7C7; --cc-chrome-border: rgba(255, 255, 255, 0.40); --cc-chrome-border-strong: rgba(255, 255, 255, 0.60); --cc-chrome-scrim: rgba(0, 0, 0, 0.85); --cc-chrome-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.90); --cc-accent: #9FC5FF; --cc-accent-strong: #00265C; --cc-accent-text: #00265C; --cc-accent-deep: #00224F; --cc-accent-grad-start: #003D8F; --cc-accent-soft: rgba(0, 38, 92, 0.18); --cc-accent-glow: rgba(0, 38, 92, 0.50); --cc-grad-cta: linear-gradient(135deg, #003D8F 0%, #00265C 60%, #00224F 100%); --cc-grad-hero: radial-gradient(60% 90% at 85% 0%, rgba(0, 61, 143, 0.30) 0%, rgba(0, 61, 143, 0) 60%), radial-gradient(70% 100% at 0% 100%, rgba(0, 38, 92, 0.25) 0%, rgba(0, 38, 92, 0) 60%); --cc-support-blue: #00408F; --cc-support-blue-on-chrome: #9FC5FF; --cc-support-green: #00563D; --cc-support-green-on-chrome: #79E2B4; --cc-support-gold: #6B4200; --cc-support-gold-on-chrome: #FFD166; --cc-sev-blocking-fg: #6B0000; --cc-sev-blocking-bg: #FFEBEB; --cc-sev-blocking-border: #6B0000; --cc-sev-blocking-solid: #8A0014; --cc-sev-caution-fg: #5C3400; --cc-sev-caution-bg: #FFF4E0; --cc-sev-caution-border: #5C3400; --cc-sev-caution-solid: #7A4600; --cc-sev-pass-fg: #00452E; --cc-sev-pass-bg: #E6F7EF; --cc-sev-pass-border: #00452E; --cc-sev-pass-solid: #00603F; --cc-sev-neutral-fg: #1A1A1A; --cc-sev-neutral-bg: #EDEDED; --cc-sev-neutral-border: #1A1A1A; --cc-sev-neutral-solid: #4D4D4D; --cc-sev-unverified-fg: #3D0066; --cc-sev-unverified-bg: #F2E6FF; --cc-sev-unverified-border: #3D0066; --cc-sev-unverified-solid: #5C0099; --cc-state-blocking-fg: #6B0000; --cc-state-blocking-bg: #FFEBEB; --cc-state-blocking-border: #6B0000; --cc-state-blocking-solid: #8A0014; --cc-state-pass-fg: #00452E; --cc-state-pass-bg: #E6F7EF; --cc-state-pass-border: #00452E; --cc-state-pass-solid: #00603F; --cc-state-caution-fg: #5C3400; --cc-state-caution-bg: #FFF4E0; --cc-state-caution-border: #5C3400; --cc-state-neutral-fg: #1A1A1A; --cc-state-neutral-bg: #EDEDED; --cc-state-neutral-border: #1A1A1A; --cc-state-unverified-fg: #3D0066; --cc-state-unverified-bg: #F2E6FF; --cc-state-unverified-border: #3D0066; --cc-elevation-card: 0 1px 2px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.65); --cc-elevation-raised: 0 2px 6px rgba(0, 0, 0, 0.60), 0 8px 20px rgba(0, 0, 0, 0.65); --cc-elevation-dialog: 0 12px 28px rgba(0, 0, 0, 0.75), 0 2px 8px rgba(0, 0, 0, 0.65); --cc-elevation-pressed: inset 0 1px 2px rgba(0, 0, 0, 0.55); } /* Poppins, self-hosted. Licence: packages/design-tokens/fonts/OFL.txt. No runtime font CDN in any shell — CHK-DS-001, REDESIGN-SPEC §1. */ @font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/clinical/fonts/poppins-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 400; font-display: swap; src: url(/clinical/fonts/poppins-400-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/clinical/fonts/poppins-500-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 500; font-display: swap; src: url(/clinical/fonts/poppins-500-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(/clinical/fonts/poppins-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 600; font-display: swap; src: url(/clinical/fonts/poppins-600-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/clinical/fonts/poppins-700-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 700; font-display: swap; src: url(/clinical/fonts/poppins-700-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url(/clinical/fonts/poppins-800-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: Poppins; font-style: normal; font-weight: 800; font-display: swap; src: url(/clinical/fonts/poppins-800-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ========================================================================= base.css — the layer every ClearCardio shell loads first. Reset, prose typography, the focus indicator and the reduced-motion switch. Nothing here knows about a clinical concept; nothing here is a component. A shell that needs a different measure or a different body size overrides it in its own layer, which loads after this one. ========================================================================= */ /* ---------- reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cc-surface-page); color: var(--cc-text-primary); font-family: var(--cc-font-sans); font-size: 16px; line-height: var(--cc-line-base); font-variant-ligatures: none; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; } /* ---------- typography ---------- */ h1, h2, h3, h4 { font-family: var(--cc-font-display); font-weight: 600; color: var(--cc-text-primary); line-height: var(--cc-line-tight); letter-spacing: -0.011em; margin: 0; text-wrap: balance; } h1 { font-size: var(--cc-font-size-2xl); letter-spacing: -0.018em; } h2 { font-size: var(--cc-font-size-lg); } h3 { font-size: var(--cc-font-size-base); } p { margin: 0 0 var(--cc-space-3); } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } ul, ol { margin: 0 0 var(--cc-space-3); padding-inline-start: var(--cc-space-5); } li { margin-bottom: var(--cc-space-1); } li:last-child { margin-bottom: 0; } a { color: var(--cc-text-link); text-underline-offset: 2px; } a:hover { color: var(--cc-text-link-hover); } code, kbd, samp { font-family: var(--cc-font-mono); font-size: 0.875em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; overflow-wrap: anywhere; } /* ---------- focus + motion ---------- */ :focus-visible { outline: 3px solid var(--cc-focus-ring); outline-offset: 2px; border-radius: var(--cc-radius-sm); } /* WCAG 2.3.3 — under a reduced-motion preference NOTHING animates or transitions. Every property that can carry motion is neutralised here: duration, delay, iteration count and the transition property list itself, so a rule declared anywhere else in this stylesheet cannot re-introduce motion. scroll-behavior drops back to instant for the same reason. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-play-state: paused !important; transition-duration: 0.001ms !important; transition-delay: 0s !important; transition-property: none !important; scroll-behavior: auto !important; } html { scroll-behavior: auto !important; } } /* ---------- the layout container ---------- */ main { max-width: var(--cc-layout-max); margin: 0 auto; padding: var(--cc-space-6) var(--cc-space-5) var(--cc-space-12); } main > h1 { margin-bottom: var(--cc-space-1); padding-bottom: var(--cc-space-2); } /* ========================================================================= CONTENT WIDTH (REDESIGN-SPEC §3, CHK-DS-036) *"Content max-width per screen class: tables full-bleed, prose 720px."* — plus forms at 560px, which §3's mobile half implies and the checklist states. Three utilities rather than three habits. The measure is a READING decision and it belongs to the kind of content, not to the screen that happens to be showing it: 720px is about 90 characters at this face and size, which is the top of the comfortable range; 560px keeps a form's labels and its fields in one eye-span so a clinician filling in a reason is not tracking across the page; a data table gets neither, because capping a table's width does not make it readable, it makes it scroll sooner. They are declared HERE — in the layer all three shells load — because the rule is the same rule in all three, and a per-shell copy is how the clinical and the patient measure end up 40px apart for no reason anybody remembers. `max-width` and not `width`: every one of these still shrinks below its cap, so nothing here can introduce a horizontal scroll at 320px (WCAG 1.4.10). */ .cc-prose { max-width: var(--cc-layout-prose); } .cc-form { max-width: var(--cc-layout-form); } /* Full-bleed: a table escapes `main`'s padding and runs to the edges of its column, because the alternative is a scroller that starts scrolling while there is still room beside it. It is applied to the SCROLL CONTAINER, never to a ``: the table keeps its own scroller (`.cc-table-wrap`), so the page still never scrolls in two dimensions. */ .cc-full-bleed { margin-inline: calc(-1 * var(--cc-space-5)); padding-inline: var(--cc-space-5); max-width: none; } /* Text that is IN the accessibility tree and out of the layout (CHK-FE-434). The clipped-rectangle idiom, and every part of it is load-bearing. `display: none` and `visibility: hidden` would take the element out of the accessibility tree, which is the opposite of what a live region needs. A zero `width`/ `height` alone silences some screen readers. A negative `text-indent` breaks in RTL. So: one clipped pixel, still rendered, still announced. `white-space: nowrap` stops a long announcement from being wrapped into a one-character-wide column before it is clipped — which some engines then report as a stack of single letters. Declared here rather than in a primitives layer because it is not a component: it is the plumbing any surface needs to say something to a screen reader and nothing to a sighted reader, and three copies of a clip rectangle is how one of them ends up with `overflow: visible` and leaks a line of text into a corner of the page. */ .cc-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ========================================================================= control.css — native form controls (Field/Control primitive layer). Loaded only by shells that HAVE controls. Shell B deliberately does not load it: the governance console is read-only, and a global control system there would be the first sign that it had stopped being read-only. ========================================================================= */ select, textarea, input[type="text"] { font: inherit; color: var(--cc-text-primary); background: var(--cc-surface-card); /* WCAG 1.4.11 — a field's fill matches the card it sits on, so this border is what identifies the control. It uses the 3:1-rated control token. */ border: 1px solid var(--cc-border-control); border-radius: var(--cc-radius-md); padding: var(--cc-space-2) var(--cc-space-3); min-height: 40px; transition: border-color var(--cc-motion-fast) var(--cc-motion-ease), box-shadow var(--cc-motion-fast) var(--cc-motion-ease); } select:hover, textarea:hover { border-color: var(--cc-brand-accent); } textarea { width: 100%; max-width: 100%; min-height: 96px; line-height: var(--cc-line-base); resize: vertical; } input[type="checkbox"], input[type="radio"] { /* The native control's tick. The quiet brand mark: a checked box is a state, not the surface's one affirmative action. */ accent-color: var(--cc-brand-accent); width: 17px; height: 17px; margin: 0; flex: none; cursor: pointer; } label { cursor: pointer; } /* ========================================================================= button.css — the Button primitive (packages/ui-primitives `Button`). Four variants and one disabled treatment. The bare `button` rule IS the secondary variant, so a button that forgets its class is still a correct secondary button rather than an unstyled one. `.cc-btn` is that same shape for an element that is NOT a `

), not a data cell. */ [data-cc="override-preview"] th[scope="row"] { padding: var(--cc-space-2) var(--cc-space-3); background: var(--cc-surface-card); color: var(--cc-text-muted); font-family: var(--cc-font-sans); font-size: var(--cc-font-size-sm); font-weight: 600; letter-spacing: normal; text-transform: none; text-align: start; vertical-align: top; white-space: nowrap; width: 1%; } /* ========================================================================= Patient report preview — CHK-FE-095 / FE-2.42. Nothing patient-facing is styled here. `computed/patient-report.css` in the layer table is patientThemeCss() + patientReportCss(), the SAME two strings Shell C embeds. That is the whole mechanism behind "not a clinician-styled approximation": there is no second stylesheet for a preview to be an approximation OF. Only the PREVIEW chrome below is Shell A's. ========================================================================= */ /* PREVIEW watermark — subtle ground, unmistakable label. */ [data-cc="patient-report"]:has([data-cc="preview-watermark"]) { background-image: repeating-linear-gradient( -45deg, var(--cc-surface-hatch-subtle) 0 2px, transparent 2px 18px ); } [data-cc="preview-watermark"] { display: block; max-width: none; margin: 0 0 var(--cc-space-6); padding: var(--cc-space-2) var(--cc-space-4); border: 1px solid var(--cc-state-caution-border); border-radius: var(--cc-radius-md); background: var(--cc-state-caution-bg); color: var(--cc-state-caution-fg); /* 4.9:1 on amber-50 */ font-family: var(--cc-font-display); font-size: var(--cc-font-size-xs); font-weight: 700; letter-spacing: 0.16em; text-align: center; text-transform: uppercase; overflow: hidden; } /* CHK-FE-096 — the watermark's signal is never colour alone. Three redundant, colour-independent channels: the label TEXT itself, the solid border, and these repeating "PREVIEW · NOT RELEASED" bands. The bands are generated TEXT rather than a background image, so a print pipeline set to drop background graphics still prints them. */ [data-cc="watermark-band"] { display: block; overflow: hidden; white-space: nowrap; font-size: 0.5rem; letter-spacing: 0.24em; line-height: 1.4; opacity: 0.55; } [data-cc="watermark-band"]::before { content: "PREVIEW · NOT RELEASED · PREVIEW · NOT RELEASED · PREVIEW · NOT RELEASED · PREVIEW · NOT RELEASED · PREVIEW · NOT RELEASED · PREVIEW · NOT RELEASED"; } [data-cc="preview-watermark-text"] { display: block; padding: var(--cc-space-1) 0; font-size: var(--cc-font-size-xs); } [data-cc="locale-fallback-notice"] { margin-bottom: var(--cc-space-6); padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-border-strong); border-inline-start: 4px solid var(--cc-brand-accent); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); font-size: var(--cc-font-size-sm); color: var(--cc-text-secondary); } /* Stage = soft prose banner. */ [data-metaphor="prose-banner"] { padding: var(--cc-space-6); border: 1px solid var(--cc-border-brand-subtle); border-radius: var(--cc-radius-lg); background: var(--cc-surface-brand-subtle); box-shadow: inset 4px 0 0 var(--cc-brand-accent); } [data-metaphor="prose-banner"] h2 { font-size: var(--cc-font-size-xl); letter-spacing: -0.015em; } [data-metaphor="prose-banner"] p { color: var(--cc-text-primary); } /* PulseScore = distinct bordered capsule, a different metaphor by design. */ [data-metaphor="capsule"] { padding: var(--cc-space-6) var(--cc-space-8); border: 2px solid var(--cc-state-pass-solid); border-radius: 28px; background: var(--cc-state-pass-bg); box-shadow: 0 0 0 6px var(--cc-surface-card), 0 0 0 7px var(--cc-state-pass-border); } [data-metaphor="capsule"] h2 { color: var(--cc-state-pass-fg); } [data-cc="separation-statement"] { max-width: none; margin: var(--cc-space-4) 0 0; padding: var(--cc-space-4); border: 1px solid var(--cc-state-pass-border); border-radius: var(--cc-radius-md); background: var(--cc-surface-card); color: var(--cc-text-primary); font-weight: 600; font-size: var(--cc-font-size-base); } [data-cc="element-status"] { padding: var(--cc-space-3) var(--cc-space-4); border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); color: var(--cc-text-muted); font-size: var(--cc-font-size-base); } [data-cc="clinician-next-steps"] { margin-top: var(--cc-space-4); font-size: var(--cc-font-size-base); } [data-cc="clinician-next-steps"] footer { margin-top: var(--cc-space-2); color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="override-disclosure"] { padding-top: var(--cc-space-6); border-top: 1px solid var(--cc-border-default); } /* ========================================================================= Practitioner Intelligence Report (P10.1) — card-per-section, accent-bar headings, and a control section whose token set is deliberately different from the stage-determining sections (INV-FE-5, FE-3.8 [PATENT]). ========================================================================= */ main.report-main { max-width: var(--cc-layout-max); } [data-cc="report-release-action"] { align-items: center; margin: 0 0 var(--cc-space-5); } [data-cc="release-blocked-reason"] { color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); max-width: 60ch; } [data-cc="practitioner-report"] { display: block; margin-top: var(--cc-space-5); } [data-cc="practitioner-report"] > section { margin-bottom: var(--cc-space-4); padding: var(--cc-space-5) var(--cc-space-6); background: var(--cc-surface-card); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-xl); box-shadow: var(--cc-elevation-card); color: var(--cc-text-secondary); /* 11.1:1 on white */ } [data-cc="practitioner-report"] > section > h2 { display: flex; align-items: center; gap: var(--cc-space-2); margin: 0 0 var(--cc-space-4); padding-bottom: var(--cc-space-3); border-bottom: 1px solid var(--cc-border-default); font-size: var(--cc-font-size-base); } [data-cc="practitioner-report"] > section > h2::before { content: ""; width: 3px; height: 1em; border-radius: 2px; background: var(--cc-brand-accent); flex: none; } [data-cc="practitioner-report"] h3 { margin: var(--cc-space-4) 0 var(--cc-space-2); font-size: var(--cc-font-size-sm); letter-spacing: 0.06em; text-transform: uppercase; color: var(--cc-text-muted); /* 7.6:1 on white */ } /* Stage-determining sections: square card, cyan rail. */ [data-section-class="stage-determining"] { border-inline-start: 4px solid var(--cc-brand-accent); } /* Control section: a capsule in the health token set — a different metaphor, a different scale, never the same row or gauge as a stage-determining score. */ [data-cc="practitioner-report"] > section[data-section-class="control"] { border: 2px solid var(--cc-state-pass-solid); border-radius: 28px; background: var(--cc-state-pass-bg); color: var(--cc-text-primary); } [data-cc="practitioner-report"] > section[data-section-class="control"] > h2 { color: var(--cc-state-pass-fg); /* 5.2:1 on emerald-50 */ border-bottom-color: var(--cc-state-pass-border); } [data-cc="practitioner-report"] > section[data-section-class="control"] > h2::before { background: var(--cc-state-pass-solid); } [data-cc="pulsescore-scale"] { color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="pulsescore-value"] { font-family: var(--cc-font-display); font-size: var(--cc-font-size-xl); color: var(--cc-text-primary); } /* ---------- stage tokens, statuses ---------- */ .cc-stage--headline { font-family: var(--cc-font-display); font-size: var(--cc-font-size-xl); color: var(--cc-text-primary); line-height: var(--cc-line-tight); font-variant-numeric: tabular-nums; } [data-cc="assessment-cycle"], [data-cc="disease-memory"], [data-cc="peak-statement"], [data-cc="outcome-code"] { color: var(--cc-text-secondary); } [data-cc="section-status"] { padding: var(--cc-space-3) var(--cc-space-4); border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="indeterminate-state"], [data-cc="threat-override"], [data-cc="classification-suppressed"], [data-cc="delta-suppressed"], [data-cc="not-stage-eligible"], [data-cc="provenance-incomplete"], [data-cc="unrecognized-code"], [data-cc="narrative-ungrounded"] { display: block; padding: var(--cc-space-2) var(--cc-space-3); border: 1px solid var(--cc-state-caution-border); border-radius: var(--cc-radius-md); background: var(--cc-state-caution-bg); color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); } [data-cc="not-stage-eligible"], [data-cc="provenance-incomplete"], [data-cc="unrecognized-code"] { display: inline-block; padding: 1px 8px; font-size: var(--cc-font-size-xs); font-weight: 600; color: var(--cc-state-caution-fg); /* 4.9:1 on amber-50 */ } /* ---------- reason codes (always before the narrative) ---------- */ [data-cc="section-reason-codes"] { list-style: none; margin: 0 0 var(--cc-space-4); padding: 0; display: grid; gap: var(--cc-space-2); } [data-cc="reason-code"] { margin: 0; padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-border-default); border-inline-start: 3px solid var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); font-size: var(--cc-font-size-sm); } [data-cc="reason-code"][data-primary="true"] { border-inline-start-color: var(--cc-brand-accent); } [data-cc="reason-code-label"] { color: var(--cc-text-primary); font-weight: 600; } [data-cc="reason-code-category"], [data-cc="limitation-category"] { display: inline-block; padding: 1px 8px; margin-inline-end: var(--cc-space-2); border-radius: var(--cc-radius-pill); border: 1px solid var(--cc-state-neutral-border); background: var(--cc-state-neutral-bg); color: var(--cc-state-neutral-fg); /* 6.9:1 on slate-100 */ font-size: var(--cc-font-size-xs); font-weight: 600; } [data-cc="primary-reason-marking"] { display: inline-block; padding: 1px 8px; border-radius: var(--cc-radius-pill); background: var(--cc-surface-brand-subtle); border: 1px solid var(--cc-border-brand); color: var(--cc-text-link); /* 4.9:1 on cyan-50 */ font-size: var(--cc-font-size-xs); font-weight: 700; text-transform: uppercase; } [data-cc="primary-determinant-marker"] { padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-border-brand); border-inline-start: 4px solid var(--cc-brand-accent); border-radius: var(--cc-radius-md); background: var(--cc-surface-brand-subtle); color: var(--cc-text-primary); } [data-cc="soft-score-effect"], [data-cc="floor-ceiling"] { font-size: var(--cc-font-size-sm); } /* ---------- narrative ---------- */ [data-cc="section-narrative"] { margin: 0 0 var(--cc-space-4); padding: var(--cc-space-4) var(--cc-space-5); border-inline-start: 3px solid var(--cc-brand-accent); border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0; background: var(--cc-surface-brand-subtle); color: var(--cc-text-primary); } [data-cc="narrative-label"] { margin-bottom: var(--cc-space-2); color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); font-weight: 600; letter-spacing: 0.03em; } [data-cc="narrative-text"] { max-width: var(--cc-layout-measure); margin: 0; } /* ---------- figures ---------- */ .cc-figure { display: grid; grid-template-columns: minmax(140px, 240px) minmax(0, 1fr); gap: var(--cc-space-2) var(--cc-space-4); padding: var(--cc-space-2) 0; border-bottom: 1px solid var(--cc-border-default); } .cc-figure:last-child { border-bottom: none; } .cc-figure__label { color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } .cc-figure__value { color: var(--cc-text-primary); font-variant-numeric: tabular-nums; } .cc-figure__meta { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--cc-space-2); color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); } [data-cc="domain-score"] { font-family: var(--cc-font-display); font-size: var(--cc-font-size-lg); color: var(--cc-text-primary); } [data-cc="high-risk-features"] { margin-bottom: var(--cc-space-4); } [data-cc="exposure-statement"] { padding: var(--cc-space-3) var(--cc-space-4); border-inline-start: 3px solid var(--cc-brand-accent); background: var(--cc-surface-brand-subtle); border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0; color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); } [data-cc="inherited-drivers"] { margin-top: var(--cc-space-5); padding: var(--cc-space-4); border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); } [data-cc="delta"] { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--cc-text-primary); } [data-cc="vendor-note"] { display: block; color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); } [data-cc="what-changed-table"] caption, [data-cc="provenance-table"] caption { text-align: start; padding-bottom: var(--cc-space-2); color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="what-changed-table"] tbody th, [data-cc="provenance-table"] tbody th { text-align: start; padding: var(--cc-space-3); border-bottom: 1px solid var(--cc-border-default); color: var(--cc-text-primary); font-weight: 600; font-size: var(--cc-font-size-sm); } /* ---------- limitations, versions, attestation ---------- */ [data-cc="limitations"] { margin: 0; padding-inline-start: var(--cc-space-5); } [data-cc="limitation-text"] { color: var(--cc-text-primary); } [data-cc="limitation-id"] { display: block; color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); } [data-cc="version-stamps"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--cc-space-2); margin: 0 0 var(--cc-space-4); } [data-cc="version-stamp-row"] { display: flex; justify-content: space-between; gap: var(--cc-space-3); padding: var(--cc-space-2) var(--cc-space-3); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); font-size: var(--cc-font-size-xs); } [data-cc="version-stamp-row"] dt { color: var(--cc-text-muted); font-family: var(--cc-font-mono); } [data-cc="version-stamp-row"] dd { margin: 0; color: var(--cc-text-primary); font-weight: 600; } [data-cc="patent-aligned-marker"] { margin-top: var(--cc-space-4); padding: var(--cc-space-2) var(--cc-space-3); border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-radius-md); color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); } [data-cc="calculated-stage-line"] { padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-border-strong); border-inline-start: 4px solid var(--cc-text-subtle); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); color: var(--cc-text-primary); } [data-cc="not-attested"] { padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-state-caution-border); border-inline-start: 4px solid var(--cc-state-caution-fg); border-radius: var(--cc-radius-md); background: var(--cc-state-caution-bg); color: var(--cc-text-primary); font-weight: 600; } [data-cc="override-reason-text"] { max-height: 22em; overflow-y: auto; /* full text, scrolled — never truncated */ white-space: pre-wrap; } /* ---------- lifecycle chrome and defects ---------- */ [data-cc="released-chrome"], [data-cc="supersession-banner"] { padding: var(--cc-space-2) var(--cc-space-4); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); color: var(--cc-text-secondary); font-size: var(--cc-font-size-sm); } [data-cc="supersession-banner"] { border-color: var(--cc-state-caution-border); background: var(--cc-state-caution-bg); color: var(--cc-text-primary); } [data-cc="draft-watermark"] { /* same treatment as the preview watermark */ display: block; margin: 0 0 var(--cc-space-4); padding: var(--cc-space-2) var(--cc-space-4); border: 1px solid var(--cc-state-caution-border); border-radius: var(--cc-radius-md); background: var(--cc-state-caution-bg); color: var(--cc-state-caution-fg); font-family: var(--cc-font-display); font-size: var(--cc-font-size-xs); font-weight: 700; letter-spacing: 0.16em; text-align: center; text-transform: uppercase; } [data-cc="contract-defect-banner"] { border: 1px solid var(--cc-state-blocking-border); border-inline-start: 5px solid var(--cc-state-blocking-solid); border-radius: var(--cc-radius-xl); background: var(--cc-state-blocking-bg); padding: var(--cc-space-5) var(--cc-space-6); margin-bottom: var(--cc-space-4); color: var(--cc-text-primary); box-shadow: var(--cc-elevation-card); } [data-cc="contract-defect-banner"] h2 { color: var(--cc-state-blocking-fg); margin-bottom: var(--cc-space-3); } [data-cc="section-defect"] { padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-state-blocking-border); border-inline-start: 4px solid var(--cc-state-blocking-solid); border-radius: var(--cc-radius-md); background: var(--cc-state-blocking-bg); color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); } /* ========================================================================= Work Dashboard and Review Queue (P15 FR-15.30 · doc 02 §3) Blocking conditions are icon + text: the glyph is a CSS shape, the label is always present, and colour is never the only signal (CHK-FE-049). ========================================================================= */ [data-cc="dashboard-controls"] p { margin-bottom: var(--cc-space-2); } [data-cc="dashboard-controls"] p:last-child { margin-bottom: 0; } [data-cc="my-patients-filter"] { display: inline-flex; align-items: center; gap: var(--cc-space-2); padding: var(--cc-space-2) var(--cc-space-3); border: 1px solid var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-surface-card); font-size: var(--cc-font-size-sm); font-weight: 600; color: var(--cc-text-primary); } [data-cc="my-patients-filter-notice"], [data-cc="prioritization-availability"], [data-cc="dashboard-ordering"], [data-cc="queue-ordering"], [data-cc="no-expiry-notice"], [data-cc="prioritization-status"], [data-cc="queue-pagination"] { color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="dashboard-superseded-group"] { color: var(--cc-text-secondary); font-size: var(--cc-font-size-sm); } .cc-queue-cards { list-style: none; margin: 0 0 var(--cc-space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--cc-space-3); } .cc-queue-card { margin: 0; padding: var(--cc-space-4); background: var(--cc-surface-card); border: 1px solid var(--cc-border-default); border-top: 3px solid var(--cc-border-strong); border-radius: var(--cc-radius-xl); box-shadow: var(--cc-elevation-card); } .cc-queue-card[data-severity="blocking"] { border-top-color: var(--cc-state-blocking-solid); } .cc-queue-card[data-severity="caution"] { border-top-color: var(--cc-state-caution-fg); } .cc-queue-card[data-severity="action"] { border-top-color: var(--cc-brand-accent); } .cc-queue-card[data-selected="true"] { border-color: var(--cc-brand-accent); box-shadow: var(--cc-elevation-raised); } .cc-queue-card__button { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cc-space-1); width: 100%; min-height: 0; padding: 0; border: none; background: none; box-shadow: none; text-align: start; } .cc-queue-card__button:hover:not(:disabled) { background: none; border-color: transparent; } .cc-queue-card__label { font-family: var(--cc-font-display); font-size: var(--cc-font-size-base); font-weight: 600; color: var(--cc-text-primary); } .cc-queue-card__count { font-family: var(--cc-font-display); font-size: var(--cc-font-size-xl); font-weight: 700; color: var(--cc-text-primary); letter-spacing: -0.02em; } .cc-queue-card__description { margin: var(--cc-space-2) 0 0; color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="queue-card-hidden"] { margin: var(--cc-space-2) 0 0; padding: var(--cc-space-2) var(--cc-space-3); border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); color: var(--cc-text-primary); font-size: var(--cc-font-size-xs); font-weight: 600; } .cc-queue-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cc-space-3); } .cc-queue-row { margin: 0; padding: var(--cc-space-4); border: 1px solid var(--cc-border-default); border-inline-start: 4px solid var(--cc-border-strong); border-radius: var(--cc-radius-lg); background: var(--cc-surface-card); } /* FE-2.5 — a deterministic block stays visually dominant, whatever the advisory prioritisation suggests. */ .cc-queue-row[data-blocking="true"] { border-inline-start-color: var(--cc-state-blocking-solid); background: var(--cc-state-blocking-bg); } .cc-queue-row[data-readonly="true"] { border-inline-start-color: var(--cc-text-subtle); background: var(--cc-surface-sunken); } .cc-queue-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cc-space-2); margin-bottom: var(--cc-space-3); } .cc-queue-row__link { font-family: var(--cc-font-display); font-size: var(--cc-font-size-base); font-weight: 600; } .cc-queue-row__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--cc-space-2) var(--cc-space-4); margin: 0; } .cc-queue-fact dt { color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); letter-spacing: 0.04em; text-transform: uppercase; } .cc-queue-fact dd { margin: 0; color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); } .cc-quiet { color: var(--cc-text-muted); } [data-cc="queue-assignment-fallback"], [data-cc="blocking-detail"] { display: block; color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); } [data-cc="waiting-time-threshold"] { margin-inline-start: var(--cc-space-2); } .cc-blocking-badges { list-style: none; margin: var(--cc-space-3) 0 0; padding: 0; display: grid; gap: var(--cc-space-2); } [data-cc="blocking-conditions"][data-count="0"] { margin: var(--cc-space-3) 0 0; color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } .cc-blocking-badge { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-2); margin: 0; padding: var(--cc-space-2) var(--cc-space-3); border: 1px solid var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-surface-card); color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); font-weight: 600; } .cc-blocking-badge[data-severity="blocking"] { border-color: var(--cc-state-blocking-border); background: var(--cc-state-blocking-bg); } .cc-blocking-badge[data-severity="caution"] { border-color: var(--cc-state-caution-border); background: var(--cc-state-caution-bg); } /* The glyph is a shape, not a colour: an octagon for a hard block, a triangle for a caution, a circle for the unknown-code fallback. */ .cc-blocking-badge__icon { width: 14px; height: 14px; flex: none; background: currentColor; border-radius: 50%; } .cc-blocking-badge__icon[data-icon="identity-conflict"], .cc-blocking-badge__icon[data-icon="discordance"] { border-radius: 0; clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%); } .cc-blocking-badge__icon[data-icon="comparability-failed"], .cc-blocking-badge__icon[data-icon="awaiting-data"] { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); } [data-cc="blocking-gate"] { font-family: var(--cc-font-mono); } .cc-advisory { margin: var(--cc-space-3) 0 0; padding: var(--cc-space-2) var(--cc-space-3); border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); } [data-cc="advisory-priority-value"] { color: var(--cc-text-secondary); font-weight: 600; } .cc-superseded-group { margin-top: var(--cc-space-5); padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-lg); background: var(--cc-surface-sunken); } .cc-superseded-group > summary { cursor: pointer; font-family: var(--cc-font-display); font-weight: 600; color: var(--cc-text-primary); } [data-cc="superseded-note"], [data-cc="superseded-empty"], [data-cc="queue-row-readonly"] { margin: var(--cc-space-2) 0 0; color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } /* ========================================================================= Patient clinical summary (A9) and assessment cycle detail (A11) ------------------------------------------------------------------------ Two rules shape this block: · Status is never carried by colour alone. Every state that gets a tint also gets a border weight, a rail and a text chip carrying the server's status_label string. · The peak and the disease memory are laid out as first-class rows, not as small print, because they must remain legible when the current stage is lower than the peak (INV-FE-7). ========================================================================= */ /* The A9 / A11 context headers carry the full FE-8.8 field set, so they are too tall to sit sticky over the content the way the workspace header does. */ [data-cc="patient-summary-header"], [data-cc="cycle-header"] { position: static; } .cc-cycle-fact dt { color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); letter-spacing: 0.04em; text-transform: uppercase; } .cc-cycle-fact dd { margin: 0; color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); } [data-cc="peak-statement"] { border-inline-start: 4px solid var(--cc-brand-accent); color: var(--cc-text-primary); } [data-cc="patient-peak-stage"], [data-cc="cycle-peak-stage"] { font-weight: 600; color: var(--cc-text-primary); } /* ---------- disease memory ---------- */ .cc-memory-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cc-space-2); } .cc-memory-item { margin: 0; padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-border-default); border-inline-start: 4px solid var(--cc-text-subtle); border-radius: var(--cc-radius-md); background: var(--cc-surface-card); font-size: var(--cc-font-size-sm); } .cc-memory-item[data-active="true"] { border-inline-start-color: var(--cc-state-caution-fg); background: var(--cc-state-caution-bg); } [data-cc="disease-memory-statement"] { display: block; color: var(--cc-text-secondary); margin-top: 2px; } [data-cc="disease-memory-first-recorded"] { color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); } /* ---------- cycle history ---------- */ .cc-cycle-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cc-space-3); } .cc-cycle-row { margin: 0; padding: var(--cc-space-4); border: 1px solid var(--cc-border-default); border-inline-start: 4px solid var(--cc-border-strong); border-radius: var(--cc-radius-lg); background: var(--cc-surface-card); } .cc-cycle-row[data-blocking="true"] { border-inline-start-color: var(--cc-state-blocking-solid); background: var(--cc-state-blocking-bg); } .cc-cycle-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cc-space-2); margin-bottom: var(--cc-space-3); } .cc-cycle-row__link { font-family: var(--cc-font-display); font-weight: 600; } .cc-cycle-row__facts, .cc-run-row__facts, .cc-mof-step__facts, .cc-cycle-header__facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--cc-space-2) var(--cc-space-4); margin: 0; } .cc-cycle-header__facts { grid-column: 1 / -1; margin-top: var(--cc-space-3); padding-top: var(--cc-space-3); border-top: 1px solid var(--cc-border-default); } [data-cc="cycle-row-superseded"] { margin: var(--cc-space-2) 0 0; color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } /* ---------- released reports on the patient record ---------- */ .cc-released-reports { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cc-space-2); } .cc-released-report { margin: 0; padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-border-default); border-inline-start: 4px solid var(--cc-state-pass-solid); border-radius: var(--cc-radius-md); background: var(--cc-surface-card); font-size: var(--cc-font-size-sm); } [data-cc="released-report-link"] { font-weight: 600; } [data-cc="released-report-release"] { display: block; color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); margin-top: 2px; } [data-cc="released-reports-empty"] { color: var(--cc-text-muted); } /* ---------- MOF-01…MOF-14 flow tracker ---------- */ .cc-mof-steps { list-style: none; margin: 0; padding: 0 0 0 var(--cc-space-5); display: grid; gap: var(--cc-space-3); /* The rail is the sequence made visible; it is decorative only. */ border-inline-start: 2px solid var(--cc-border-default); } .cc-mof-step { position: relative; margin: 0; padding: var(--cc-space-4); border: 1px solid var(--cc-border-default); border-inline-start: 4px solid var(--cc-border-strong); border-radius: var(--cc-radius-lg); background: var(--cc-surface-card); } .cc-mof-step::before { content: ""; position: absolute; inset-inline-start: calc(-1 * var(--cc-space-5) - 6px); top: var(--cc-space-5); width: 10px; height: 10px; border-radius: var(--cc-radius-pill); background: var(--cc-border-strong); } .cc-mof-step[data-status="completed"] { border-inline-start-color: var(--cc-state-pass-solid); } .cc-mof-step[data-status="completed"]::before { background: var(--cc-state-pass-solid); } .cc-mof-step[data-status="in_progress"] { border-inline-start-color: var(--cc-brand-accent); } .cc-mof-step[data-status="in_progress"]::before { background: var(--cc-brand-accent); } .cc-mof-step[data-status="pending"] { border-style: dashed; border-inline-start-color: var(--cc-text-subtle); background: var(--cc-surface-sunken); } .cc-mof-step[data-status="pending"]::before { background: var(--cc-surface-card); border: 2px solid var(--cc-text-subtle); } /* A blocked step is unmistakable: heavier rail, alert ground, and the word "Blocked" in the status chip and in the reason heading (never colour alone). */ .cc-mof-step[data-status="blocked"] { border-color: var(--cc-state-blocking-border); border-inline-start-width: 6px; border-inline-start-color: var(--cc-state-blocking-solid); background: var(--cc-state-blocking-bg); box-shadow: var(--cc-elevation-card); } .cc-mof-step[data-status="blocked"]::before { background: var(--cc-state-blocking-solid); } .cc-mof-step[data-status="skipped"] { border-color: var(--cc-state-blocking-border); border-inline-start-width: 6px; border-inline-start-color: var(--cc-state-blocking-solid); background: repeating-linear-gradient( -45deg, var(--cc-state-blocking-bg) 0 8px, var(--cc-surface-card) 8px 16px ); } .cc-mof-step[data-blocking-step="true"] { outline: 2px solid var(--cc-state-blocking-solid); outline-offset: 2px; } .cc-mof-step__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--cc-space-2); margin-bottom: var(--cc-space-3); } .cc-mof-step__id { font-family: var(--cc-font-mono); font-size: var(--cc-font-size-xs); letter-spacing: 0.04em; color: var(--cc-text-muted); } [data-cc="mof-step-status"][data-status="blocked"], [data-cc="mof-step-status"][data-status="skipped"] { background: var(--cc-state-blocking-bg); border-color: var(--cc-state-blocking-border); color: var(--cc-state-blocking-fg); } [data-cc="mof-step-status"][data-status="completed"] { background: var(--cc-state-pass-bg); border-color: var(--cc-state-pass-border); color: var(--cc-state-pass-fg); } [data-cc="step-blocking-reason"] { margin-top: var(--cc-space-3); padding-top: var(--cc-space-3); border-top: 1px solid var(--cc-state-blocking-border); } [data-cc="step-blocking-heading"] { color: var(--cc-state-blocking-fg); font-size: var(--cc-font-size-sm); } [data-cc="mof-step-stalled"] { margin: var(--cc-space-3) 0 0; } [data-cc="mof-step-stalled-note"] { color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); } [data-cc="blocking-step"] strong { color: var(--cc-state-blocking-fg); } [data-cc="no-skip-statement"], [data-cc="step-registry-version"] { color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } /* ---------- run history ---------- */ .cc-run-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--cc-space-3); } .cc-run-row { margin: 0; padding: var(--cc-space-4); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-lg); background: var(--cc-surface-card); } [data-cc="run-row-terminal-statement"] { margin: var(--cc-space-2) 0 0; color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } /* ---------- queue facets (/app/queue) ---------- */ .cc-queue-facet-list { list-style: none; margin: 0 0 var(--cc-space-3); padding: 0; display: flex; flex-wrap: wrap; gap: var(--cc-space-2); } .cc-queue-facet-list button[aria-pressed="true"] { border-color: var(--cc-brand-accent); background: var(--cc-surface-brand-subtle); color: var(--cc-text-primary); box-shadow: inset 0 -3px 0 var(--cc-brand-accent); } /* ---------- reassessment ---------- */ [data-cc="reassess-dialog"] > label { display: block; margin-bottom: var(--cc-space-3); font-size: var(--cc-font-size-sm); font-weight: 600; color: var(--cc-text-primary); } [data-cc="reassess-governed-statement"], [data-cc="reassess-statement"] { padding: var(--cc-space-4) var(--cc-space-5); border-inline-start: 3px solid var(--cc-brand-accent); border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0; background: var(--cc-surface-brand-subtle); color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); } [data-cc="reassess-audit-notice"], [data-cc="reassessment-audit-note"] { color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="reassess-not-permitted"] { padding: var(--cc-space-3) var(--cc-space-4); border: 1px solid var(--cc-state-caution-border); border-radius: var(--cc-radius-md); background: var(--cc-state-caution-bg); color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); } [data-cc="reassessment-record"] dt { color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); letter-spacing: 0.04em; text-transform: uppercase; margin-top: var(--cc-space-2); } [data-cc="reassessment-record"] dd { margin: 0; color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); } [data-cc="flow-integrity-defect"] { color: var(--cc-text-primary); } [data-cc="flow-integrity-defect-list"] { margin-bottom: 0; } /* ---------- narrow viewports (no horizontal page scroll at 320px) ---------- */ @media (max-width: 700px) { /* WCAG 1.4.10 / FE-T.18 — at 320 CSS pixels the PAGE must not scroll sideways. A wide table still may, inside its own scroll container; these three constructs cannot, because none of them owns one: · a select's intrinsic width is the width of its longest OPTION, and the demo shells carry long option labels ("already attested by the other holder (409)"). Nothing in the layout can shrink it, so it is capped here instead. · a chip is white-space: nowrap by design — the right call for a short status token, wrong for a long one like the advisory-prioritization label, which then becomes an unbreakable 240 px box. · a grid item does not shrink below its min-content width unless it is told it may. Each rule is scoped to the narrow breakpoint, so the wide layout, where these choices are correct, is untouched. Asserted at 320 px by the real-browser reflow spec (e2e/specs/axe-and-contrast.spec.ts); jsdom has no layout and cannot see any of it. */ select { max-width: 100%; } .demo-banner label, .demo-banner__text { max-width: 100%; flex-wrap: wrap; } .cc-chip { white-space: normal; } .cc-queue-row, .cc-cycle-row, .cc-run-row, .cc-mof-step { min-width: 0; } main { padding: var(--cc-space-4) var(--cc-space-4) var(--cc-space-10); } main.patient-main { padding-top: var(--cc-space-5); } h1 { font-size: var(--cc-font-size-xl); } .demo-banner { padding: var(--cc-space-2) var(--cc-space-4); } .case-header { position: static; grid-template-columns: minmax(0, 1fr); padding: var(--cc-space-4); } .case-header__stamp { justify-self: start; text-align: start; } .panel, .pulsescore { padding: var(--cc-space-4); border-radius: var(--cc-radius-lg); } /* Reflow (WCAG 1.4.10) — the dialog gives up padding rather than the page giving up width. This was two separate lists of dialog NAMES, a hundred lines apart, so every dialog added after they were written kept its full desktop padding at 320 CSS px. Keyed on the class the Dialog primitive always emits, a new dialog cannot be left out of it. The breakpoint is the SHELL's, which is why the rule lives here and not in the primitive layer. */ .cc-dialog { padding: var(--cc-space-4); } [data-cc="conflict-action"], [data-cc="verify-action"] { flex-direction: column; align-items: stretch; } .cc-modal-scrim { padding: var(--cc-space-3); } .provenance-drawer { inset-inline-end: var(--cc-space-2); inset-inline-start: var(--cc-space-2); bottom: var(--cc-space-2); width: auto; } /* FE-6.11 — modal sheet on small screens: full width, above the content. */ .provenance-panel { inset-inline-end: 0; inset-inline-start: 0; top: 0; bottom: 0; width: auto; z-index: 60; border-radius: 0; } [data-cc="task-actions"] { flex-direction: column; align-items: stretch; } [data-cc="task-action"] { flex-direction: column; align-items: stretch; } [data-cc="capability-reason"] { max-width: none; } [data-cc="practitioner-report"] > section { padding: var(--cc-space-4); border-radius: var(--cc-radius-lg); } [data-cc="practitioner-report"] > section[data-section-class="control"] { border-radius: var(--cc-radius-lg); } .cc-queue-cards { grid-template-columns: minmax(0, 1fr); } .cc-queue-row { padding: var(--cc-space-3); } .cc-queue-row__facts { grid-template-columns: minmax(0, 1fr); } .cc-cycle-row { padding: var(--cc-space-3); } .cc-cycle-row__facts, .cc-run-row__facts, .cc-mof-step__facts, .cc-cycle-header__facts { grid-template-columns: minmax(0, 1fr); } .cc-mof-steps { padding-inline-start: var(--cc-space-4); } .cc-mof-step { padding: var(--cc-space-3); } .cc-mof-step::before { inset-inline-start: calc(-1 * var(--cc-space-4) - 6px); } .cc-figure { grid-template-columns: minmax(0, 1fr); gap: 2px; } .cc-figure__meta { grid-column: 1; } [data-cc="version-stamps"] { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================== Post-phase-B additions merged from wave 16 / functional-product: virtualization controls, the shell header + sign-in (real-API mode), and the destructive button variant. Values are token-only. ========================================================================== */ /* The `.cc-shell-header__*` rules that used to be here are gone: phase C replaced the strip-of-links header with a real shell — a 264px sidebar, a 56px topbar and a mobile drawer — and that lives in `shells/clinical-chrome.css`. Nothing referenced these classes afterwards. */ .cc-sign-in { max-width: 60rem; margin: 0 auto; padding: var(--cc-space-6) var(--cc-space-5); } .cc-sign-in__roles { list-style: none; margin: var(--cc-space-5) 0 0; padding: 0; display: grid; gap: var(--cc-space-4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); } .cc-sign-in__note { margin-top: var(--cc-space-5); color: var(--cc-text-secondary); } .cc-btn--destructive { color: var(--cc-action-destructive-fg); /* white on red-600 = 4.8:1 */ background: var(--cc-action-destructive-bg); border-color: var(--cc-action-destructive-bg); } .cc-btn--destructive:hover:not(:disabled) { color: var(--cc-action-destructive-fg); background: var(--cc-state-blocking-fg); border-color: var(--cc-state-blocking-fg); } .cc-show-all button { display: none !important; } .cc-virtual__list { max-height: none; overflow: visible; } /* Dev toolbar + demo banner (functional-product) — the summary keeps a >=24px target (WCAG 2.5.8 target-size, enforced by the axe E2E). */ .demo-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-2) var(--cc-space-4); padding: var(--cc-space-2) var(--cc-space-5); background: var(--cc-surface-inverse); color: var(--cc-text-on-inverse); /* 11.9:1 on slate-800 */ border-bottom: 2px solid var(--cc-state-caution-fg); font-size: var(--cc-font-size-sm); line-height: var(--cc-line-snug); } .demo-banner__text { display: inline-flex; align-items: center; gap: var(--cc-space-2); color: var(--cc-text-on-inverse); } .demo-banner__text::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--cc-accent-on-inverse); flex: none; } .demo-banner label { display: inline-flex; align-items: center; gap: var(--cc-space-2); color: var(--cc-text-on-inverse); } .demo-banner a { color: var(--cc-text-on-inverse); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: var(--cc-radius-sm); padding: 2px 2px; transition: color var(--cc-motion-fast) var(--cc-motion-ease); } .demo-banner a:hover { color: var(--cc-text-on-inverse-link-hover); } .demo-banner select { min-height: 30px; padding: 3px 26px 3px 8px; border: 1px solid var(--cc-border-inverse); border-radius: var(--cc-radius-md); background-color: var(--cc-surface-card); color: var(--cc-text-primary); font: inherit; font-size: var(--cc-font-size-sm); } .demo-banner :focus-visible { outline-color: var(--cc-focus-ring-on-inverse); } .dev-toolbar { width: 100%; } .dev-toolbar__summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--cc-space-2); color: var(--cc-text-on-inverse); /* WCAG 2.5.8 — a collapsed toolbar is still a click target. */ min-height: 24px; padding: var(--cc-space-1) var(--cc-space-2); } .dev-toolbar__summary::-webkit-details-marker { display: none; } .dev-toolbar__summary::after { content: "dev tools"; font-size: var(--cc-font-size-sm); font-weight: 600; color: var(--cc-text-on-inverse); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .dev-toolbar__tray { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-2) var(--cc-space-4); padding-top: var(--cc-space-2); } .workspace-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cc-space-2) var(--cc-space-4); padding: var(--cc-space-2) var(--cc-space-5); background: var(--cc-surface-sunken); border-bottom: 1px solid var(--cc-border-default); font-size: var(--cc-font-size-sm); color: var(--cc-text-secondary); } .demo-banner__text { max-width: 100%; flex-wrap: wrap; } .demo-banner { padding: var(--cc-space-2) var(--cc-space-4); } /* ========================================================================== Staging trace + summary panel (`02` §4.2, §5; CHK-FE-058…077). Token-only values; every state is carried by words as well as by colour. ========================================================================== */ /* The three P8 terms (CHK-FE-072). Distinct severity token per term, and the glyph sits inline with the label rather than replacing it. */ .cc-p8-term { display: inline-flex; align-items: center; gap: var(--cc-space-1); } .cc-p8-term svg { flex: none; } .cc-p8-legend { display: grid; gap: var(--cc-space-2); margin: 0 0 var(--cc-space-4); padding: var(--cc-space-3); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); font-size: var(--cc-font-size-sm); } .cc-p8-legend > div { display: grid; gap: var(--cc-space-1); grid-template-columns: minmax(12rem, max-content) 1fr; align-items: baseline; } .cc-p8-legend dt { margin: 0; } .cc-p8-legend dd { margin: 0; color: var(--cc-text-secondary); } @media (max-width: 40rem) { .cc-p8-legend > div { grid-template-columns: 1fr; } } /* The floor SET — one item per rule, never a single collapsed figure. */ .cc-floor-set { list-style: none; margin: var(--cc-space-2) 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cc-space-2); } .cc-floor-set > li { padding: 2px var(--cc-space-2); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-pill); background: var(--cc-surface-card); font-size: var(--cc-font-size-sm); } [data-cc="governing-floor"] { margin-block: var(--cc-space-2); } /* The threat override is a callout, not a chip in a paragraph. */ .cc-threat-override { margin-block: var(--cc-space-4); padding: var(--cc-space-3); border: 1px solid var(--cc-state-blocking-border); border-inline-start: 4px solid var(--cc-state-blocking-fg); border-radius: var(--cc-radius-md); background: var(--cc-state-blocking-bg); } .cc-threat-override h3, .cc-threat-override h4 { margin-block: 0 var(--cc-space-2); } .cc-threat-override ul { margin-block: var(--cc-space-2); padding-inline-start: var(--cc-space-5); } /* The P9 layer is visually a separate stratum from the P8 gate ledger. */ .cc-transition-trace { margin-block-start: var(--cc-space-6); padding-block-start: var(--cc-space-4); border-block-start: 2px solid var(--cc-border-default); } .cc-transition-steps { margin: var(--cc-space-3) 0; padding-inline-start: var(--cc-space-5); display: grid; gap: var(--cc-space-2); } .cc-primary-determinant, .cc-summary-primary { margin-block: var(--cc-space-3); } .cc-reason-codes { margin: var(--cc-space-2) 0; padding-inline-start: var(--cc-space-5); display: grid; gap: var(--cc-space-1); } .cc-reason-codes > li[aria-current="true"] { font-weight: var(--cc-font-weight-semibold); } .cc-rule-record-link { color: var(--cc-text-link); } .cc-unrecognized-refs { margin-block: var(--cc-space-4); padding: var(--cc-space-3); border: 1px dashed var(--cc-state-caution-border); border-radius: var(--cc-radius-md); background: var(--cc-state-caution-bg); color: var(--cc-state-caution-fg); } /* CHK-FE-063 — blocking conditions span the panel. A reviewer must not be able to read past them in a column. */ .cc-blocking-region { grid-column: 1 / -1; inline-size: 100%; margin-block-end: var(--cc-space-4); padding: var(--cc-space-3); border: 1px solid var(--cc-state-blocking-border); border-inline-start: 4px solid var(--cc-state-blocking-fg); border-radius: var(--cc-radius-md); background: var(--cc-state-blocking-bg); color: var(--cc-state-blocking-fg); } .cc-blocking-region ul { list-style: none; margin: var(--cc-space-2) 0 0; padding: 0; display: grid; gap: var(--cc-space-2); } /* ---------- the post-override dual-stage badge (CHK-FE-126) ---------- P11 FR-11.34b: after an override, every practitioner-facing surface showing the stage displays BOTH stages, labelled, with the reason one interaction away. One component, so one rule — the badge appears on eight surfaces of very different densities (a queue row, a sticky header, a report headline), and it must read the same on all of them. No brand accent and no severity colour anywhere below, deliberately. An override is a clinical record, not a verdict, and tinting either stage would be the interface grading a clinician's decision. It is set apart by a rule and a quiet ground, which is the same treatment every other "this is a recorded fact about the case" region gets. */ .cc-dual-stage { margin-block: var(--cc-space-2); padding: var(--cc-space-2) var(--cc-space-3); border: 1px solid var(--cc-border-default); border-inline-start: 3px solid var(--cc-border-strong); border-radius: var(--cc-radius-md); background: var(--cc-surface-sunken); color: var(--cc-text-primary); font-size: var(--cc-font-size-sm); } .cc-dual-stage__stages { display: flex; flex-wrap: wrap; gap: var(--cc-space-1) var(--cc-space-5); margin: 0; min-inline-size: 0; } .cc-dual-stage__stage { display: flex; flex-direction: column; min-inline-size: 0; } /* The labels are the requirement's word "labelled". They are quieter than the stages they name and they are never hidden: `font-size`, not `display`. */ .cc-dual-stage__label { color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); text-transform: uppercase; letter-spacing: 0.04em; } .cc-dual-stage__reason > summary { cursor: pointer; /* The 44px target, as padding rather than height, so the badge above it does not move when the disclosure opens. */ padding-block: var(--cc-space-2); border-radius: var(--cc-radius-sm); color: var(--cc-text-secondary); font-size: var(--cc-font-size-xs); } .cc-dual-stage__reason > summary:focus-visible { outline: 2px solid var(--cc-focus-ring); outline-offset: 2px; } .cc-dual-stage__reason > p { margin-block: var(--cc-space-1) 0; max-inline-size: var(--cc-layout-measure); color: var(--cc-text-primary); } /* The context header's version stamp slot (CHK-FE-029). The stamp spans the header's grid so it sits on its own line beneath the facts rather than competing with the stage for the reader's first glance. */ .cc-context-header__stamp { grid-column: 1 / -1; min-inline-size: 0; border-block-start: 1px solid var(--cc-border-default); padding-block-start: var(--cc-space-1); } /* ========================================================================= clinical-chrome.css — Shell A's shell: sidebar, topbar, drawer. Phase C (REDESIGN-SPEC §3, CHK-DS-021…028). This layer owns the furniture AROUND a clinical surface and nothing inside one: it declares no clinical state, no severity and no threshold, and `brand-separation.test.ts` asserts it never reaches for a `--cc-sev-*` or `--cc-state-*` colour. BRAND.md's application guidance for the clinical shell is the whole shape of this file: INK chrome, LIGHT content. The brand lives in the furniture; the content stays on the near-white surfaces a dense clinical table is readable on. The accent is spent in exactly three places — the active-nav indicator, the brand mark and the one primary CTA per screen (that last one is in `primitives/button.css`) — and nowhere else. ========================================================================= */ /* ---------- the two-column grid ---------- A grid, not a fixed overlay. A `position: fixed` sidebar sits ON TOP of content at some widths, and an element that overlaps a control is the classic source of "the button does nothing" in a real browser while every jsdom test passes. Here the nav owns a column and the content owns a column; nothing overlaps at any width. `main`'s own max-width rule (base.css) is untouched — the shell is around it, never inside it. */ .cc-shell { display: grid; grid-template-columns: minmax(0, 1fr); /* CHK-DS-033 — dvh, not vh: on mobile Safari 100vh is taller than the visible viewport and puts the bottom of the shell under the URL bar. */ min-height: 100dvh; } /* A plain block, and that is load-bearing rather than incidental. It was `display: flex; flex-direction: column` — the obvious way to stack a topbar over the content — and it broke reflow everywhere. `main` carries `max-width: 1140px; margin: 0 auto` from `base.css`, and an AUTO margin on the cross axis of a flex container switches off `align-items: stretch`: the item sizes to its max-content instead, capped at its max-width. So `main` rendered 1140px wide inside a 375px viewport and the page scrolled sideways on every workspace, report and longitudinal surface (WCAG 1.4.10, FE-T.18). A block container stacks its children just as well and leaves `main` to be what the reset says it is: a shrinkable box with a maximum, centred. */ .cc-shell__main { display: block; min-width: 0; } /* ---------- the sidebar ---------- */ .cc-shell__nav { display: none; /* below 1024px the drawer is the nav */ flex-direction: column; width: var(--cc-layout-nav); background: var(--cc-chrome-bg); color: var(--cc-chrome-fg); border-inline-end: 1px solid var(--cc-chrome-border); /* Sticky rather than fixed: it stays in the grid, so the content column is laid out beside it by the grid rather than by a hand-kept padding. */ position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--cc-space-3) 0; /* iOS notch / Android gesture bar. */ padding-bottom: max(var(--cc-space-3), env(safe-area-inset-bottom)); } /* The rail width is keyed on the attribute, not on React state: the boot script sets it before the first paint, so the first frame is already the right width (CHK-DS-022 — "restored without layout flash"). `.cc-shell`'s own `data-nav` is a machine-readable marker for the tests and carries no style. */ :root[data-cc-nav="rail"] .cc-shell__nav { width: var(--cc-layout-nav-rail); } .cc-nav { flex: 1 1 auto; } .cc-nav__list { list-style: none; margin: 0; padding: 0 var(--cc-space-2); display: flex; flex-direction: column; gap: 2px; } .cc-nav__item { margin: 0; } /* One row of the nav. `position: relative` is the indicator's containing block; the icon is a fixed-width flex item so it does NOT move when the label goes (REDESIGN-SPEC §4: "icons never move vertically" — nor horizontally). */ .cc-nav__link { position: relative; display: flex; align-items: center; gap: var(--cc-space-3); /* WCAG 2.5.8 — a nav row is a 44px target at every width. */ min-height: 44px; padding: var(--cc-space-2) var(--cc-space-3); border-radius: var(--cc-radius-lg); color: var(--cc-chrome-fg-muted); font-family: var(--cc-font-display); font-size: var(--cc-font-size-sm); font-weight: var(--cc-font-weight-medium); text-decoration: none; white-space: nowrap; overflow: hidden; } .cc-nav__link:hover { background: var(--cc-chrome-bg-hover); color: var(--cc-chrome-fg); } .cc-nav__link .cc-icon { flex: none; } /* The active item, in THREE channels (CHK-DS-016): the accent indicator, the weight and the ground — plus `aria-current="page"`, which is the channel a screen reader has and none of the other three reach. */ .cc-nav__link[aria-current="page"] { background: var(--cc-chrome-bg-active); color: var(--cc-chrome-fg); font-weight: var(--cc-font-weight-semibold); } .cc-nav__indicator { position: absolute; inset-inline-start: 0; top: 50%; width: 3px; height: 0; border-radius: 0 2px 2px 0; background: var(--cc-accent); transform: translateY(-50%); } .cc-nav__link[aria-current="page"] .cc-nav__indicator { height: 60%; } /* The label. Hidden VISUALLY in the rail and kept in the DOM, so the link's accessible name never changes and `title` still gives the tooltip (CHK-DS-023). `display: none` here would silently rename every nav item to its glyph for a screen-reader user. */ .cc-nav__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } :root[data-cc-nav="rail"] .cc-nav__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* In the rail the row centres on its glyph rather than left-aligning to a label that is no longer drawn. */ :root[data-cc-nav="rail"] .cc-nav__link { justify-content: center; gap: 0; } /* ---------- the rail's focus tooltip (CHK-DS-023) ---------- */ /* `title` is the hover half of "hover/focus" and it is ONLY the hover half: no browser surfaces a `title` tooltip on keyboard focus. Without the rule below a sighted keyboard-only clinician who collapses to the 72px rail tabs seven glyphs and reads none of them — a gap invisible to axe and to jsdom, because the accessible name is intact and there is nothing to measure. On `:focus-visible` the label stops being visually-hidden and is drawn beside the rail as the tooltip. It is the SAME span that carries the accessible name, so nothing is duplicated: a screen reader still reads one name per link, identical in both states. No keyframe and no transition — the label is drawn or it is not, which is what `prefers-reduced-motion` would reduce any animated version to anyway. */ /* The row clips so the label can ellipsize in the 264px sidebar; the tooltip has to escape that box, and the sticky column above it. In the rail the column therefore stops being a scroll container. That is safe only while the nav is short enough never to need scrolling, which is not a hope: it is pinned by `clinical-shell.test.tsx` ("the rail cannot need a scrollbar"). If NAV_ITEMS ever outgrows the guard that test fails, and the tooltip must move to a portal rather than the guard being widened. */ :root[data-cc-nav="rail"] .cc-shell__nav { overflow: visible; } :root[data-cc-nav="rail"] .cc-nav__link:focus-visible { overflow: visible; } :root[data-cc-nav="rail"] .cc-nav__link:focus-visible .cc-nav__label { position: absolute; inset-inline-start: calc(100% + var(--cc-space-2)); top: 50%; transform: translateY(-50%); z-index: 1; width: auto; height: auto; margin: 0; padding: var(--cc-space-1) var(--cc-space-3); clip-path: none; overflow: visible; white-space: nowrap; border-radius: var(--cc-radius-md); border: 1px solid var(--cc-chrome-border-strong); /* `chrome.fg` on `chrome.bg.raised` is a scored pair (contrast.ts, "topbar label"), so the tooltip is not a new colour decision. */ background: var(--cc-chrome-bg-raised); color: var(--cc-chrome-fg); box-shadow: var(--cc-chrome-shadow); /* The tooltip is an artefact of focus, never a target: it must not swallow a click aimed at the content beside the rail. */ pointer-events: none; } /* The collapse control. Icon-only, so it carries an aria-label (CHK-DS-047). */ .cc-nav__toggle { flex: none; margin: var(--cc-space-2) var(--cc-space-3) 0; min-height: 44px; color: var(--cc-chrome-fg-muted); background: transparent; border: 1px solid var(--cc-chrome-border); } .cc-nav__toggle:hover:not(:disabled) { background: var(--cc-chrome-bg-hover); border-color: var(--cc-chrome-border-strong); color: var(--cc-chrome-fg); } .cc-shell__nav :focus-visible { outline-color: var(--cc-focus-ring-on-inverse); } /* ---------- the topbar (56px) ---------- */ .cc-topbar { display: flex; align-items: center; gap: var(--cc-space-3); min-height: var(--cc-layout-topbar); padding: 0 var(--cc-space-4); padding-top: env(safe-area-inset-top); background: var(--cc-chrome-bg-raised); color: var(--cc-chrome-fg); border-bottom: 1px solid var(--cc-chrome-border); position: sticky; top: 0; z-index: 30; } .cc-topbar__brand { display: inline-flex; align-items: center; gap: var(--cc-space-2); color: var(--cc-chrome-fg); font-family: var(--cc-font-display); font-size: var(--cc-font-size-base); font-weight: var(--cc-font-weight-bold); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; } .cc-topbar__brand:hover { color: var(--cc-chrome-fg); } /* The brand lockup — the real asset, not a CSS approximation of it (CHK-DS-007). Clear space is half the mark's height on every side, and the negative margin gives that padding back to the topbar's own rhythm so a 56px bar does not become a 72px one. The asset is 250x104; a 26px mark is 63px wide. */ .cc-brand-lockup { display: inline-flex; align-items: center; padding: var(--cc-space-3); margin: calc(-1 * var(--cc-space-3)); } .cc-brand-lockup img { display: block; width: auto; height: 26px; } .cc-topbar__tenant { padding: 2px var(--cc-space-2); border: 1px solid var(--cc-chrome-border-strong); border-radius: var(--cc-radius-pill); color: var(--cc-chrome-fg-muted); font-size: var(--cc-font-size-xs); font-variant-numeric: tabular-nums; white-space: nowrap; } .cc-topbar__upstream { margin-inline-start: auto; min-width: 0; color: var(--cc-chrome-fg-subtle); font-size: var(--cc-font-size-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cc-topbar__search { color: var(--cc-chrome-fg-muted); font-size: var(--cc-font-size-sm); font-weight: var(--cc-font-weight-semibold); white-space: nowrap; } .cc-topbar__search:hover { color: var(--cc-chrome-fg); } /* ---------- the session badge, which renders on TWO grounds ---------- `` is in the topbar (ink) AND inside the sign-in screen's "Current session" panel (a light status panel). Its rules were written for the first one only and applied unscoped, so on the second the "Sign in" link came out as `--cc-chrome-fg-muted` on a pale green ground: 1.64:1, a serious axe violation, and one nothing caught until the sign-in screen joined the real-browser axe surfaces in batch 2. The fix is the shape of the problem: the LIGHT rendering is the default, because a component's default should be the surface it shares with every other component, and the ink treatment is scoped to `.cc-topbar`. A copy of this badge dropped on any other light surface is now legible by default rather than by luck. */ .cc-session { display: flex; align-items: center; gap: var(--cc-space-2); color: var(--cc-text-secondary); font-size: var(--cc-font-size-sm); } .cc-session__signin { color: var(--cc-text-link); font-size: var(--cc-font-size-sm); font-weight: var(--cc-font-weight-semibold); white-space: nowrap; } .cc-session__signin:hover { color: var(--cc-text-link-hover); } .cc-session__role { padding: 2px var(--cc-space-2); border-radius: var(--cc-radius-pill); background: var(--cc-surface-sunken); color: var(--cc-text-primary); font-size: var(--cc-font-size-xs); font-weight: var(--cc-font-weight-semibold); white-space: nowrap; } .cc-session button { min-height: 32px; padding: var(--cc-space-1) var(--cc-space-3); font-size: var(--cc-font-size-sm); } /* …and the ink treatment, scoped to the one ground it is for. */ .cc-topbar .cc-session { color: var(--cc-chrome-fg-muted); } .cc-topbar .cc-session__signin { color: var(--cc-chrome-fg-muted); } .cc-topbar .cc-session__signin:hover { color: var(--cc-chrome-fg); } .cc-topbar .cc-session__role { background: var(--cc-chrome-bg-active); color: var(--cc-chrome-fg); } .cc-topbar .cc-session button { color: var(--cc-chrome-fg-muted); background: transparent; border-color: var(--cc-chrome-border-strong); } .cc-topbar .cc-session button:hover:not(:disabled) { background: var(--cc-chrome-bg-hover); border-color: var(--cc-chrome-border-strong); color: var(--cc-chrome-fg); } .cc-topbar :focus-visible { outline-color: var(--cc-focus-ring-on-inverse); } /* ---------- the mobile drawer (CHK-DS-024) ---------- */ .cc-shell__drawer-open { position: fixed; inset-inline-start: var(--cc-space-2); top: calc(env(safe-area-inset-top) + var(--cc-space-1)); z-index: 40; width: 44px; min-height: 44px; padding: 0; color: var(--cc-chrome-fg); background: transparent; border-color: transparent; } .cc-shell__drawer-open:hover:not(:disabled) { background: var(--cc-chrome-bg-hover); border-color: var(--cc-chrome-border-strong); color: var(--cc-chrome-fg); } .cc-shell__drawer-open:focus-visible { outline-color: var(--cc-focus-ring-on-inverse); } /* 50 % scrim, as the spec asks. It dismisses on tap; it is not focusable. */ .cc-drawer-scrim { position: fixed; inset: 0; z-index: 90; display: flex; background: var(--cc-chrome-scrim); } .cc-drawer { display: flex; flex-direction: column; width: min(var(--cc-layout-nav), 84vw); height: 100dvh; /* SWIPE-DISMISS (CHK-DS-024). `pan-y` tells the compositor that vertical gestures belong to the drawer's own scroller and horizontal ones do not, so a leftward swipe is delivered to the handler in `ClinicalShell.tsx` instead of being swallowed as an over-scroll. Without this the gesture works on a short nav list and silently stops working on a long one, which is the worst kind of touch bug: it depends on how much content happens to be in the drawer. */ touch-action: pan-y; padding: var(--cc-space-3) 0; padding-bottom: max(var(--cc-space-3), env(safe-area-inset-bottom)); background: var(--cc-chrome-bg); color: var(--cc-chrome-fg); border-inline-end: 1px solid var(--cc-chrome-border); box-shadow: var(--cc-chrome-shadow); overflow-y: auto; overscroll-behavior: contain; } .cc-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-space-3); padding: 0 var(--cc-space-4) var(--cc-space-3); border-bottom: 1px solid var(--cc-chrome-border); } .cc-drawer__title { font-family: var(--cc-font-display); font-size: var(--cc-font-size-base); font-weight: var(--cc-font-weight-bold); } .cc-drawer__close { width: 44px; min-height: 44px; padding: 0; color: var(--cc-chrome-fg-muted); background: transparent; border-color: var(--cc-chrome-border); } .cc-drawer__close:hover:not(:disabled) { background: var(--cc-chrome-bg-hover); color: var(--cc-chrome-fg); } .cc-drawer :focus-visible { outline-color: var(--cc-focus-ring-on-inverse); } /* ---------- ≥1024px: the sidebar replaces the drawer ---------- */ @media (min-width: 1024px) { .cc-shell { grid-template-columns: auto minmax(0, 1fr); } .cc-shell__nav { display: flex; } .cc-shell__drawer-open { display: none; } .cc-topbar { padding-inline-start: var(--cc-space-5); } } /* ---------- <1024px: the drawer's opener needs room in the topbar ---------- */ @media (max-width: 1023px) { /* Room for the drawer opener, which is fixed at the top-left. */ .cc-topbar { padding-inline-start: calc(44px + var(--cc-space-3)); flex-wrap: wrap; } /* CHK-DS-029 — the topbar wraps rather than dropping anything. Hiding the upstream line would be the easy fix and the wrong one: a surface that can be pointed at two servers has to say which one it is on, on every page and at every width (`09` §1). It takes a second row instead. */ .cc-topbar__upstream { margin-inline-start: 0; flex: 1 0 100%; white-space: normal; } } /* ---------- MOTION (REDESIGN-SPEC §4) ---------- Every transition in this layer is inside `no-preference`, and `base.css` neutralises the whole family again under `reduce`. Two switches, because WCAG 2.3.3 is not a thing to get right only once. The sidebar's `width` is THE ONE sanctioned size transition in the product (§4: "sidebar collapse animates width + label fade"). Every other transition here is transform/opacity/colour, and `motion-discipline.test.ts` fails the build for a width/height/top/left transition anywhere else (CHK-DS-044). */ @media (prefers-reduced-motion: no-preference) { /* cc-motion-sanctioned-size: sidebar collapse (REDESIGN-SPEC §4) */ .cc-shell__nav { transition: width var(--cc-motion-base) var(--cc-ease-enter); } .cc-nav__label { transition: opacity var(--cc-motion-fast) var(--cc-ease-exit); } .cc-nav__link, .cc-nav__toggle, .cc-topbar__search, .cc-topbar__brand { transition: background-color var(--cc-motion-fast) var(--cc-ease-enter), color var(--cc-motion-fast) var(--cc-ease-enter); } /* The indicator grows from the middle — a transform-driven scale would move the glyph, so the height is animated on a 3px bar that contains no text and shifts nothing. It is listed in the sanctioned set for that reason. */ /* cc-motion-sanctioned-size: active-nav indicator (REDESIGN-SPEC §2) */ .cc-nav__indicator { transition: height var(--cc-motion-fast) var(--cc-ease-enter); } /* ---------- the drawer's entrance (CHK-DS-024) ---------- The scrim fades, the panel slides in from the edge it is anchored to. `@starting-style` again — the drawer is mounted on open, so it is a new element every time and a transition is all that is needed. Transform and opacity only, so nothing under the scrim reflows while it arrives. There is no exit half, and that is the same decision the rest of this shell's chrome takes: the drawer closes on Escape, on a scrim tap, on a swipe and on choosing a destination, and three of those four are followed immediately by a navigation. A panel still sliding away while the next page paints is a panel in the way. */ .cc-drawer-scrim { opacity: 1; transition: opacity var(--cc-motion-fast) var(--cc-ease-enter); } .cc-drawer { transform: none; transition: transform var(--cc-motion-base) var(--cc-ease-enter); } @starting-style { .cc-drawer-scrim { opacity: 0; } .cc-drawer { transform: translateX(-100%); } } } /* ========================================================================= PHASE-C SCREEN RESTYLE The chrome above is new furniture. What follows re-dresses surfaces that already exist, and it changes NOTHING about what they say: no selector here adds, removes or reorders content, no rule hides a disclosure, and every capability, typed acknowledgment and refusal reads exactly as its own test asserts. It is CSS, and it is deliberately only CSS. ========================================================================= */ /* ---------- WCAG 2.5.8 on the context header's identity links ---------- The patient link and the cycle link are inline text in a wrapping row, and at 320 CSS px their safe clickable space measured 23.8px against a 24px minimum — Poppins sits fractionally shorter than the face it replaced, and the 4px row gap was already only just enough. The gap gives it back. Asserted in the real browser by `e2e/specs/axe-and-contrast.spec.ts`, which is the only place a box can actually be measured. */ .cc-context-header__identity { row-gap: var(--cc-space-2); } /* ---------- the sticky context header, under the new topbar ---------- `.cc-context-header` was `top: 0` because nothing was above it. There is a 56px topbar above it now, and a sticky header that parks UNDER an opaque bar is a header a clinician cannot read — which for the patient/cycle/stage header is the one thing CHK-FE-025 exists to prevent. */ .cc-context-header { top: var(--cc-layout-topbar); } /* ---------- cards: 14px, hairline, three-step elevation (CHK-DS-032) ---------- The radius token changed under `.panel` in the primitive layer; these are the card-shaped regions that are NOT `Panel` and would otherwise keep the old 12px. Listed rather than globbed, so a new card shows up as a diff. */ .cc-context-header, .cc-queue-card, [data-cc="task-actions"], [data-cc="practitioner-report"] > section { border-radius: var(--cc-radius-card); } /* Hover glow on INTERACTIVE cards only (CHK-DS-032). A queue row and a queue card are both a click; a panel is a region and stays inert. The glow is the raised elevation step, not a coloured shadow — an accent glow on a row that may be carrying a blocking condition would put the brand's red beside a severity, which is the collision `sev.*` exists to prevent. */ .cc-queue-card:hover, .cc-queue-row:hover, .cc-section-row:hover { box-shadow: var(--cc-elevation-raised); } /* ---------- queue rows (CHK-DS-053) ---------- Row = masked id + stage chip + gates summary + age, one click to the case. Every one of those already renders (`` — see its own doc comment on what it refuses to compute); this makes the row read as one object rather than as a definition list with a heading. */ .cc-queue-row { border-radius: var(--cc-radius-card); box-shadow: var(--cc-elevation-card); } .cc-queue-row__head { align-items: center; padding-bottom: var(--cc-space-2); border-bottom: 1px solid var(--cc-border-default); } .cc-queue-row__link { font-size: var(--cc-font-size-lg); font-weight: var(--cc-font-weight-semibold); letter-spacing: -0.01em; text-decoration: none; } .cc-queue-row__link:hover { text-decoration: underline; } /* The row's own reading rhythm: the clinical density tier (CHK-DS-031). */ .cc-queue-row__facts { gap: var(--cc-space-3) var(--cc-space-5); } .cc-queue-fact dt { font-weight: var(--cc-font-weight-semibold); } .cc-queue-fact dd { font-weight: var(--cc-font-weight-medium); } /* The queue's chip filters. `aria-pressed` is the state; the ground and the weight restate it, and the underline rail restates it a third time for a reader who sees neither (CHK-DS-053). */ .cc-queue-facet-list button { border-radius: var(--cc-radius-pill); font-weight: var(--cc-font-weight-medium); } /* The selected facet keeps its ground, its rail and its border from `shells/clinical.css` — all three now in the quiet brand mark rather than the CTA red — and gains the weight as a third channel. */ .cc-queue-facet-list button[aria-pressed="true"] { font-weight: var(--cc-font-weight-semibold); } /* ---------- the section indexes ---------- */ .cc-section__standfirst { max-width: var(--cc-layout-prose); color: var(--cc-text-secondary); font-size: var(--cc-font-size-lg); line-height: var(--cc-line-snug); } .cc-section-rows { list-style: none; margin: var(--cc-space-4) 0 0; padding: 0; display: grid; gap: var(--cc-space-2); } .cc-section-row { margin: 0; padding: var(--cc-space-3) var(--cc-space-4); background: var(--cc-surface-card); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-card); box-shadow: var(--cc-elevation-card); } .cc-section-row__link { font-family: var(--cc-font-display); font-size: var(--cc-font-size-base); font-weight: var(--cc-font-weight-semibold); text-decoration: none; } .cc-section-row__link:hover { text-decoration: underline; } .cc-section-row__meta { margin: var(--cc-space-1) 0 0; color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="section-provenance"], [data-cc="section-ordering"] { color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="section-empty"] { padding: var(--cc-space-6); border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-radius-card); background: var(--cc-surface-sunken); text-align: center; } /* ---------- content width rules (CHK-DS-036) ---------- Tables full-bleed (they own their scroller), prose 720px, forms 560px. The utilities themselves are in `base.css` — `.cc-prose`, `.cc-form`, `.cc-full-bleed` — because the measure is the same decision in all three shells. What is here is Shell A's APPLICATION of them to the surfaces that are prose and the surfaces that are forms but do not carry the class, because they are rendered by components shared with other shells. The rule for a table is the one that surprises people, so it is written down: a data table gets NO cap. `.cc-table-wrap` already owns a horizontal scroller (WCAG 1.4.10, asserted in `a11y-stylesheet.test.ts`), and capping the wrapper's width would only make that scroller start sooner while leaving empty column beside it. Full-bleed means the scroller gets every pixel of the content column before it has to scroll at all. */ .cc-section__standfirst, [data-cc="section-provenance"] { max-width: var(--cc-layout-prose); } /* Prose regions rendered by shared components: a lead paragraph, a screen's standfirst, an empty state's explanation. All of them are sentences to read. `[data-cc="capability-reason"]` is deliberately NOT in this list, and the reason is two hundred lines below: it is capped at 34ch, that cap is doing real work, and the desktop rail lifts it in one scoped rule. Adding it here would have quietly widened every capability reason in the product from 34 characters to 720 pixels — a change to the workspace's measure made as a side effect of tidying up a checklist item. */ .cc-lead, [data-cc="screen-lead"], .cc-empty-state__explanation { max-width: var(--cc-layout-prose); } /* Forms: a dialog's fields, and the workspace's own inputs. A control wider than the eye-span between its label and its end is a control people mis-fill. */ [data-cc="reassess-dialog"] > label, .cc-dialog textarea, .cc-dialog input[type="text"], .cc-dialog select { max-width: var(--cc-layout-form); } /* Tables run to the edges of the column they are in. */ main .cc-table-wrap { max-width: none; } /* ---------- the workspace action bar (CHK-DS-034) ---------- It is the surface's set of clinical actions, and a clinician who has scrolled to the bottom of eleven panels should not have to scroll back up to act on what they just read. `[data-cc="task-actions"]` and every control inside it are untouched in structure — the capabilities, their disabled states and their server-supplied reasons render exactly as `TaskActions` writes them. */ /* Mobile: pinned to the bottom, with the content inset so the last panel is not underneath it. `safe-area-inset-bottom` keeps it clear of the gesture bar. */ @media (max-width: 1279px) { main.workspace-main > [data-cc="task-actions"] { position: sticky; bottom: 0; z-index: 25; margin-inline: calc(-1 * var(--cc-space-2)); padding-bottom: max(var(--cc-space-3), env(safe-area-inset-bottom)); box-shadow: var(--cc-elevation-raised); } /* Content inset: nothing hides beneath the bar at the end of the page. */ main.workspace-main { padding-bottom: var(--cc-space-12); } } /* Desktop: a right rail. The bar is fixed to the viewport and the workspace reserves its width as padding, so the rail overlays nothing — "content inset so nothing hides beneath it" is a padding rule, not a hope. */ @media (min-width: 1280px) { main.workspace-main { max-width: none; padding-inline-end: calc(18rem + var(--cc-space-6)); } main.workspace-main > [data-cc="task-actions"] { position: fixed; inset-inline-end: var(--cc-space-5); top: calc(var(--cc-layout-topbar) + var(--cc-space-5)); z-index: 25; width: 18rem; max-height: calc(100dvh - var(--cc-layout-topbar) - var(--cc-space-10)); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; align-items: stretch; box-shadow: var(--cc-elevation-raised); } main.workspace-main > [data-cc="task-actions"] [data-cc="task-action"] { flex-direction: column; align-items: stretch; } /* Scoped to the rail. The 34ch cap elsewhere is doing real work — a capability reason is a server sentence of unbounded length, and uncapping it globally is how a page starts scrolling sideways at 1440. */ main.workspace-main > [data-cc="task-actions"] [data-cc="capability-reason"] { max-width: none; } /* The rail is fixed to the VIEWPORT, so "content inset" has to include the chrome above the workspace as well as the workspace itself — otherwise the rail sits on top of the demo lab's controls (or, in api mode, on top of the upstream statement). Scoped to the workspace's own toolbar by its `data-surface`, because the rail exists on no other surface. */ [data-cc="dev-toolbar"][data-surface="workspace"], [data-cc="workspace-links"] { padding-inline-end: calc(18rem + var(--cc-space-6)); } } /* ---------- 375px (CHK-DS-029) ---------- No horizontal page scroll, 16px body, 44px targets. The shell contributes three things that could break that and this is where each is answered. */ @media (max-width: 480px) { .cc-topbar { gap: var(--cc-space-2); } .cc-topbar__brand { font-size: var(--cc-font-size-sm); } .cc-topbar__tenant, .cc-session__role { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; } .cc-section-row { padding: var(--cc-space-3); } } /* ---------- the sign-in hero (CHK-DS-060) ---------- The one dark ground under a heading in this shell, and the reason it is allowed here and nowhere else: sign-in is the only screen in the clinician portal with no clinical content on it, so it is the only screen where the brand can be the loudest thing present without competing with a clinical fact. Everywhere else the ink is chrome and the content is paper. The lockup is a dark-ground asset (its wordmark is white), so this is also the only place outside the topbar it can be rendered at all. */ .cc-sign-in__hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cc-space-4); margin: calc(-1 * var(--cc-space-6)) calc(-1 * var(--cc-space-5)) var(--cc-space-8); padding: var(--cc-space-10) var(--cc-space-8); background: var(--cc-chrome-bg); background-image: var(--cc-grad-hero); border-bottom: 1px solid var(--cc-chrome-border); color: var(--cc-chrome-fg); } .cc-sign-in__hero .cc-brand-lockup { padding: 0; margin: 0; } .cc-sign-in__hero .cc-brand-lockup img { height: 44px; } .cc-sign-in__hero h1 { margin: 0; color: var(--cc-chrome-fg); font-family: var(--cc-font-display); font-size: var(--cc-font-size-2xl); font-weight: var(--cc-font-weight-heavy); line-height: var(--cc-line-tight); letter-spacing: -0.02em; } .cc-sign-in__hero :focus-visible { outline-color: var(--cc-focus-ring-on-inverse); } /* The role picker's heading, with its mark. One mark for the choice — not five competing beside five principals (REDESIGN-SPEC §5, CHK-DS-050). */ .cc-sign-in__pick { display: flex; align-items: center; gap: var(--cc-space-4); margin-top: var(--cc-space-8); } .cc-sign-in__pick h2 { margin: 0; font-family: var(--cc-font-display); } /* ---------- empty states (CHK-DS-058) ---------- Statement, explanation, next action, and a mark beside all three. The mark is `aria-hidden` and carries none of the meaning: delete it and the state still reads (`EmptyState.tsx`). */ .cc-empty-state { display: flex; align-items: flex-start; gap: var(--cc-space-4); margin: var(--cc-space-4) 0; padding: var(--cc-space-6); border: 1px dashed var(--cc-border-strong); border-radius: var(--cc-radius-card); background: var(--cc-surface-sunken); } .cc-empty-state__body { min-width: 0; } .cc-empty-state__statement { margin: 0; font-family: var(--cc-font-display); font-size: var(--cc-font-size-lg); font-weight: var(--cc-font-weight-semibold); color: var(--cc-text-primary); } .cc-empty-state__explanation, .cc-empty-state__action { margin: var(--cc-space-2) 0 0; max-width: var(--cc-layout-prose); color: var(--cc-text-secondary); } /* The success confirmation's mark sits beside the result heading, not above it (CHK-DS-050). */ .cc-result-head { display: flex; align-items: center; gap: var(--cc-space-3); } .cc-result-head h2 { margin: 0; } @media (max-width: 480px) { .cc-sign-in__hero { padding: var(--cc-space-8) var(--cc-space-5); } .cc-sign-in__hero .cc-brand-lockup img { height: 32px; } .cc-empty-state { flex-direction: column; } } /* ---------- the workspace panel nav, grouped (CHK-DS-017) ---------- Four named groups over the same eleven anchors. The group heading is a LABEL, not a control: nothing here can hide a panel, and `WorkspaceSections.tsx` says at length why the distinction matters. */ /* The `

` is now a row of GROUPS rather than a row of links, so the flex gap between them is the group gutter. It stays sticky and stays one strip. */ .cc-panel-nav ol { gap: var(--cc-space-2) var(--cc-space-6); align-items: flex-start; } .cc-panel-nav__group { display: flex; flex-direction: column; gap: var(--cc-space-1); } .cc-panel-nav__group-label { color: var(--cc-text-muted); font-family: var(--cc-font-display); font-size: var(--cc-font-size-xs); font-weight: var(--cc-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; } /* The group holding the addressed panel gets a weight change on its label — a second channel beside the `aria-current` on the link itself. */ .cc-panel-nav__group[data-active="true"] .cc-panel-nav__group-label { color: var(--cc-text-secondary); } .cc-panel-nav__group > ul { display: flex; flex-wrap: wrap; gap: var(--cc-space-1) var(--cc-space-3); margin: 0; padding: 0; list-style: none; } /* ========================================================================= LANDSCAPE MOBILE (CHK-DS-035) — 667×375 Last in the layer, deliberately: it has to outrank the `max-width: 1279px` and `min-width: 1280px` blocks above, which is where the sticky action bar is declared, and it does that by cascade order rather than by a specificity trick nobody can read. 667×375 is the same phone as 375×667 turned sideways, and it is the geometry a clinician actually holds a phone in to read a wide table. Three of this shell's decisions are about a TALL viewport and each costs vertical room a landscape phone does not have: a sticky 56px topbar, a sticky context header under it, and a sticky action bar at the bottom. Stacked, they leave about 180px of scrollable content out of 375 — and the action bar is the one that matters, because on the workspace it is the surface's clinical actions and it would be pinned over the panels the clinician is reading in order to decide. So in this geometry they stop being sticky and become part of the document. Nothing is hidden, nothing is removed and no target shrinks: every control is still on the page, still 44px, still in the same order. CHK-DS-034's promise — "content inset so nothing hides beneath it" — is kept in the strongest way available, which is that there is nothing on top of anything. Measured in the engine at 667×375 by `e2e/specs/landscape-mobile.spec.ts`. ========================================================================= */ @media (max-height: 480px) and (orientation: landscape) { /* Scoped through the shell rather than written as a bare `.cc-topbar` / `.cc-context-header` rule, and that is not cosmetic: `clinical-shell.test` reads the LAST bare rule for each of those selectors to prove the cascade lands where CHK-DS-028 and CHK-FE-025 need it to. A media-query override appended at the end of the layer would have made this file the last word on a question it is not answering — so it wins by specificity instead, which is also what it means. */ .cc-shell__main .cc-topbar { position: static; } .cc-shell__main .cc-context-header { position: static; top: auto; } main.workspace-main > [data-cc="task-actions"] { position: static; width: auto; max-height: none; margin-inline: 0; box-shadow: var(--cc-elevation-card); } /* The sticky bar's content inset is no longer paying for anything. */ main.workspace-main { padding-bottom: var(--cc-space-8); padding-inline-end: var(--cc-space-5); } /* The drawer is the full height of a short viewport; its head must not eat a third of it. */ .cc-drawer__head { padding-bottom: var(--cc-space-2); } /* The sign-in hero is a full-bleed dark band; at 375px tall it would be the entire first screen and the role picker would be below the fold. */ .cc-sign-in__hero { padding: var(--cc-space-5) var(--cc-space-6); } } /* ========================================================================= NARROW PORTRAIT (CHK-FE-491 · WCAG 2.2 2.5.8) — 320×640, 375×812 The same defect the landscape block above fixes, in the other geometry, and it took axe in a real engine to find it. The `max-width: 1279px` rule pins the action bar to the bottom of the viewport, and `main.workspace-main`'s `padding-bottom` keeps the LAST panel out from under it. That inset is a fixed length; the bar's height is not. At `max-width: 700px` the bar turns into a column — one full-width control per row, plus each control's capability reason — and at 320px it measures 274px against a 640px viewport. A bar that is 43 % of the screen is not a bar, and what it covers is not the end of the page: pinned to `bottom: 0` it holds the lower two fifths of the viewport at every scroll position, and the disposition selector sits directly above it. Axe measured ATTEST and ESCALATE — attest and escalate, on the surface where a clinician commits a case — with 19.7px of unobscured height under a "Verify value" button that belongs to a different component. So the bar stops being sticky exactly where it stops fitting, on the same reasoning the landscape block states: nothing is hidden, nothing is removed and no target shrinks — every control is still on the page, still 44px and still in the same order, and now there is nothing on top of anything. The breakpoint is `max-width: 700px` because that is where the bar becomes a column (`shells/clinical.css`), which is what makes it too tall to float. Scoped through `.cc-shell__main` rather than written as a bare rule, for the reason the landscape block gives: `clinical-shell.test` reads the LAST bare `[data-cc="task-actions"]` rule to prove CHK-DS-034's cascade, so this wins by specificity instead of by being the last word on a question it is not answering. ========================================================================= */ @media (max-width: 700px) { .cc-shell__main main.workspace-main > [data-cc="task-actions"] { position: static; margin-inline: 0; box-shadow: var(--cc-elevation-card); } /* The inset was paying for a bar that no longer floats over anything. */ .cc-shell__main main.workspace-main { padding-bottom: var(--cc-space-8); } } /* ========================================================================= print/clinical.css — paper, not a screen. Loaded LAST so it can override anything. Pure ink on pure paper (21:1) through the two print tokens, because a printed report is photocopied and faxed and must survive both. ========================================================================= */ /* ---------- print: black on white, no chrome ---------- */ @media print { /* CHK-FE-029 — a printed clinical page carries the versions it was computed under, and CHK-FE-126's override reason is part of the clinical record. A collapsed disclosure prints as a triangle where the fact should be. */ .cc-version-stamp > .cc-version-panel { display: grid; } .cc-dual-stage__reason > p { display: block; } .demo-banner, .cc-modal-scrim, .provenance-drawer, .provenance-panel, [data-cc="task-actions"], select, button { display: none !important; } body { background: var(--cc-print-paper); color: var(--cc-print-ink); font-size: 11pt; } main, main.patient-main { max-width: none; padding: 0; } [data-cc="patient-report"] { max-width: none; margin: 0; padding: 0; border: none; border-radius: 0; box-shadow: none; background: var(--cc-print-paper); background-image: none; color: var(--cc-print-ink); font-size: 11pt; } [data-cc="patient-report"] h2, [data-cc="patient-report"] p { color: var(--cc-print-ink); } /* CHK-FE-096 / P13 FR-13.74 — the PREVIEW treatment SURVIVES PRINT. 'display: block !important' outranks the blanket chrome-hiding rules above, so no future print rule can hide the watermark by accident. The border and the generated stripe bands re-assert the mark in pure black on white, and 'print-color-adjust: exact' stops the print pipeline from discarding the rendering. There is deliberately NO '@media print' rule anywhere in this stylesheet that sets the watermark to 'display: none'. */ [data-cc="preview-watermark"] { display: block !important; visibility: visible !important; background: var(--cc-print-paper); color: var(--cc-print-ink); border: 2px solid var(--cc-print-ink); border-radius: 0; print-color-adjust: exact; -webkit-print-color-adjust: exact; break-inside: avoid; break-after: avoid; } [data-cc="watermark-band"] { display: block !important; color: var(--cc-print-ink); opacity: 1; print-color-adjust: exact; -webkit-print-color-adjust: exact; } [data-cc="preview-watermark-text"] { display: block !important; color: var(--cc-print-ink); font-weight: 700; } /* A preview printed from any surface repeats the mark at the top of every printed page, so a detached later page is still identifiable as a preview. */ [data-cc="patient-report"]:has([data-cc="preview-watermark"]), [data-cc="practitioner-report"]:has([data-cc="preview-watermark"]) { border: 2px solid var(--cc-print-ink); print-color-adjust: exact; } [data-metaphor="prose-banner"], [data-metaphor="capsule"], [data-cc="separation-statement"], [data-cc="element-status"], [data-cc="locale-fallback-notice"] { background: var(--cc-print-paper); color: var(--cc-print-ink); border: 1px solid var(--cc-print-ink); box-shadow: none; border-radius: 0; } [data-cc="patient-report"] section { break-inside: avoid; } .panel { border: 1px solid var(--cc-print-ink); box-shadow: none; background: var(--cc-print-paper); } /* FE-3.14 / CHK-FE-173 — the practitioner report prints complete: every section, the version panel, the attestation block and the rule-id references. No section is print-hidden. */ [data-cc="report-release-action"] { display: none !important; } [data-cc="practitioner-report"] { margin: 0; } [data-cc="practitioner-report"] > section, [data-cc="practitioner-report"] > section[data-section-class="control"] { display: block !important; break-inside: avoid; margin: 0 0 12pt; padding: 6pt 0 0; background: var(--cc-print-paper); color: var(--cc-print-ink); border: none; border-top: 1px solid var(--cc-print-ink); border-radius: 0; box-shadow: none; } [data-cc="practitioner-report"] h2, [data-cc="practitioner-report"] h3, [data-cc="practitioner-report"] p, [data-cc="practitioner-report"] li, [data-cc="practitioner-report"] td, [data-cc="practitioner-report"] th { color: var(--cc-print-ink); } /* Trace links print as their rule-id references. */ [data-cc="rule-link"]::after, [data-cc="raw-artifact-link"]::after { content: " [" attr(href) "]"; font-size: 8pt; } [data-cc="section-reason-codes"] [data-cc="reason-code"], [data-cc="section-narrative"], [data-cc="primary-determinant-marker"], [data-cc="calculated-stage-line"], [data-cc="exposure-statement"], [data-cc="separation-statement"], [data-cc="section-status"], [data-cc="version-stamp-row"], [data-cc="contract-defect-banner"], [data-cc="section-defect"] { background: var(--cc-print-paper); color: var(--cc-print-ink); border: 1px solid var(--cc-print-ink); border-radius: 0; box-shadow: none; } /* 07 — a degraded state must survive print too: a printout that omits the identity-conflict block, the staleness banner or the supersession notice would read as an ordinary report. FE-7.2 forbids that silence. */ .cc-identity-conflict, .cc-staleness-banner, .cc-supersession-interrupt, .cc-degradation-notice { display: block !important; background: var(--cc-print-paper); background-image: none; color: var(--cc-print-ink); border: 2px solid var(--cc-print-ink); border-radius: 0; box-shadow: none; break-inside: avoid; print-color-adjust: exact; } .cc-identity-conflict h2, .cc-identity-conflict h3, .cc-identity-conflict p, .cc-identity-conflict li, .cc-staleness-banner p, .cc-supersession-interrupt h2, .cc-supersession-interrupt p, .cc-degradation-notice p { color: var(--cc-print-ink); } [data-cc="override-reason-text"] { max-height: none; overflow: visible; } [data-cc="what-changed-table"], [data-cc="provenance-table"] { min-width: 0; font-size: 9pt; } .cc-table-wrap { overflow: visible; margin: 0; padding: 0; } /* CHK-FE-302 — the source provenance table has a COMPLETE print layout: it unwraps out of its scroller (above), wraps inside every cell instead of clipping, and repeats its header on every page it spans. A printed report whose provenance table stopped at the fold would be a report that quietly dropped inputs. */ [data-cc="provenance-table"] { table-layout: auto; width: 100%; } [data-cc="provenance-table"] thead { display: table-header-group; } [data-cc="provenance-table"] tr { break-inside: avoid; } [data-cc="provenance-table"] th, [data-cc="provenance-table"] td { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; } /* CHK-FE-301 — the incomplete-provenance flag survives print. On paper the caution surface is gone, so the row keeps a heavy left rule and the words stay: a printed report must not read as if every input were stage-eligible. */ [data-cc="provenance-row"][data-flagged="true"] > *:first-child { border-inline-start: 3px solid var(--cc-print-ink); } [data-cc="provenance-incomplete-flag"], [data-cc="not-stage-eligible"] { border: 1px solid var(--cc-print-ink); background: var(--cc-print-paper); color: var(--cc-print-ink); } /* The raw artifact viewer prints as the document, not as a scrolling box. */ .cc-artifact-text { max-height: none; overflow: visible; border: 1px solid var(--cc-print-ink); } }