/* ClearCardio — patient 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: #F4F6FA; --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: #5D6C83; --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: #2563EB; --cc-action-primary-bg-hover: #1D4ED8; --cc-action-primary-fg: #FFFFFF; --cc-action-primary-border: #1D4ED8; --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-hero-bg: #2563EB; --cc-hero-fg: #FFFFFF; --cc-hero-glow: rgba(255, 255, 255, 0); --cc-brand-logo-ground: #0B1828; --cc-holo-ground: #070F1A; --cc-holo-line: #55B5D8; --cc-holo-heart: #FF8491; --cc-holo-hero-line: #FFFFFF; --cc-border-panel: rgba(15, 31, 51, 0); --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-label: 0.75rem; --cc-font-size-sm: 0.875rem; --cc-font-size-data: 0.875rem; --cc-font-size-md: 0.9375rem; --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-label: 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-tracking-tight: -0.01em; --cc-tracking-caps: 0.04em; --cc-tracking-wide: 0.16em; --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: 16px; --cc-radius-card-lg: 24px; --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; --cc-size-control: 40px; --cc-size-touch: 44px; --cc-size-logo: 44px; --cc-size-logo-signin: 96px; --cc-focus-width: 3px; --cc-z-base: 1; --cc-z-sticky: 20; --cc-z-chrome: 30; --cc-z-float: 40; --cc-z-drawer: 50; --cc-z-dialog: 60; --cc-z-overlay: 70; --cc-z-session: 80; --cc-z-session-end: 90; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="high-contrast"]) { --cc-surface-page: #070F1A; --cc-surface-card: #0D1C2B; --cc-surface-sunken: #050B14; --cc-surface-inverse: #294870; --cc-surface-brand-subtle: #122638; --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: #55B5D8; --cc-text-link-hover: #8FD3EC; --cc-border-default: #20415A; --cc-border-strong: #2F5F80; --cc-border-control: #7E97BE; --cc-border-brand: #55B5D8; --cc-border-brand-subtle: #20415A; --cc-border-inverse: #294870; --cc-brand-accent: #55B5D8; --cc-action-primary-border: #C6D9F6; --cc-action-secondary-bg: #0D1C2B; --cc-action-secondary-bg-hover: #122638; --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: #55B5D8; --cc-accent-text: #FF8491; --cc-hero-bg: #0A2438; --cc-hero-fg: #F4F8FF; --cc-hero-glow: rgba(42, 148, 191, 0.28); --cc-brand-logo-ground: rgba(7, 15, 26, 0); --cc-holo-ground: rgba(7, 15, 26, 0); --cc-holo-hero-line: #55B5D8; --cc-border-panel: #20415A; --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 0 24px rgba(42, 148, 191, 0.07); --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-primary-border: #000000; --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-hero-bg: #00265C; --cc-hero-glow: rgba(0, 0, 0, 0); --cc-brand-logo-ground: #000000; --cc-border-panel: #000000; --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: #070F1A; --cc-surface-card: #0D1C2B; --cc-surface-sunken: #050B14; --cc-surface-inverse: #294870; --cc-surface-brand-subtle: #122638; --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: #55B5D8; --cc-text-link-hover: #8FD3EC; --cc-border-default: #20415A; --cc-border-strong: #2F5F80; --cc-border-control: #7E97BE; --cc-border-brand: #55B5D8; --cc-border-brand-subtle: #20415A; --cc-border-inverse: #294870; --cc-brand-accent: #55B5D8; --cc-action-primary-border: #C6D9F6; --cc-action-secondary-bg: #0D1C2B; --cc-action-secondary-bg-hover: #122638; --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: #55B5D8; --cc-accent-text: #FF8491; --cc-hero-bg: #0A2438; --cc-hero-fg: #F4F8FF; --cc-hero-glow: rgba(42, 148, 191, 0.28); --cc-brand-logo-ground: rgba(7, 15, 26, 0); --cc-holo-ground: rgba(7, 15, 26, 0); --cc-holo-hero-line: #55B5D8; --cc-border-panel: #20415A; --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 0 24px rgba(42, 148, 191, 0.07); --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-primary-border: #000000; --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-hero-bg: #00265C; --cc-hero-glow: rgba(0, 0, 0, 0); --cc-brand-logo-ground: #000000; --cc-border-panel: #000000; --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(/patient/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(/patient/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(/patient/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(/patient/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(/patient/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(/patient/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(/patient/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(/patient/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(/patient/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(/patient/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%; } /* The `hidden` attribute means hidden. Without this, any rule that sets `display` on an element (a flex row, a grid) silently un-hides it, and a panel the markup says is absent paints anyway. */ [hidden] { display: none !important; } /* Form controls take the page's face and size instead of the user agent's 13px system font. Below 16px, iOS zooms the page when a field takes focus, and a reason field in a clinical dialog that zooms the viewport away from the dialog's own buttons is a real, reported way to lose one's place. */ input, select, textarea { font: inherit; } /* ---------- 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); text-wrap: pretty; } small { font-size: var(--cc-font-size-sm); } /* A rule is a divider in the border token, not the user agent's inset grey double line (two UA colours this token set never scored). */ hr { border: 0; border-block-start: 1px solid var(--cc-border-default); margin-block: var(--cc-space-5); } 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); } /* THE TYPE FLOOR (UX audit finding 3). Data values are never below `font-size-data` (14px) and numbers and dates align in tabular figures; a label may drop to `font-size-label` (12px) only at the medium weight. Element selectors at zero specificity so any component rule still wins. */ :where(td, th, dd, time, output) { font-variant-numeric: tabular-nums; } :where(td, dd) { font-size: var(--cc-font-size-data); } :where(dt, th, label, legend) { font-weight: var(--cc-font-weight-label); } 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 ---------- THE focus ring. One rule, one width, every control in the product. Two layers used to re-declare it at 2px on the controls they happened to own, which is the same defect as a thin ring everywhere except that it is invisible in review; the width is a token so a third cannot. */ /* No `border-radius` here. It used to set `--cc-radius-sm` on whatever took focus, which RESHAPED the element rather than ringing it: a pill button, a square table scroller and a rounded input all snapped to 4px corners the moment a keyboard reached them, and the ring followed the new shape. The outline already follows the element's own radius in every engine this product supports, so the focused control now keeps its shape. */ :focus-visible { outline: var(--cc-focus-width) solid var(--cc-focus-ring); outline-offset: 2px; } /* 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; } /* TWO STATEMENTS IN ONE CELL ARE TWO LINES. A report cell that holds a classification and the evidence for it — the comparability verdict and the vendor note behind it, a limitation's category and its sentence — was built out of adjacent inline spans with nothing between them, so JSX stripped the newline and the browser ran them together: "Not comparable — scanner changePrior: GE Revolution · Current: Siemens syngo-6.2", "missing_dataCT-FFR not available this cycle". A staging read of the case dossier found four of these on one document. A separator character would have fixed the spelling and not the reading: these are two facts and the second is subordinate to the first, so they get two lines and the second is set quieter. Declared here rather than in a shell, because what produces them is the shared report body, which renders in all three. */ .cc-cell-line { display: block; } .cc-cell-line + .cc-cell-line { margin-block-start: var(--cc-space-1); color: var(--cc-text-secondary); } /* The archival provenance reference, which sits BESIDE a figure rather than welded to it. The interactive drill-down is a control and carries its own spacing; this is a bare token and inherited none, so an archived report printed "Highprov-conf" and "312 mm³prov-tpv" — on the surface whose whole argument is that every value can be traced to where it came from. */ .cc-archival-ref { margin-inline-start: var(--cc-space-1); color: var(--cc-text-muted); } /* ========================================================================= skip-link.css — the WCAG 2.4.1 bypass link, once. It was written three times, with three different mechanics, and the differences were not decisions: · Shell A (`shells/clinical.css`) fixed, top: -100px · Shell B (`shells/governance-chrome`) fixed, top: -100px · Shell C (`shells/patient.css`) absolute, top: -4rem, and a brand border instead of the focus colour The patient shell's `position: absolute` is the one that matters: an absolute skip link is positioned against its nearest positioned ancestor, so it parks itself off the top of whatever box that turns out to be rather than off the top of the VIEWPORT — and on a page whose first ancestor is scrolled, an off-screen skip link can be on screen. It is fixed here, in all three shells. Two properties this element must keep, whatever else changes about it: 1. It is NEVER `display: none` or `visibility: hidden`. Either takes it out of the tab order, and being in the tab order is the entire feature. 2. It does not TRANSITION into view. `top` is a layout property — the one thing REDESIGN-SPEC §4 forbids animating (CHK-DS-044) — and a keyboard user reading a link that is still moving is the accessibility version of the same objection. `--cc-z-overlay` rather than a bigger number than whatever else is on the page: the skip link has to be reachable over the chrome and over a floating panel, and under the session-expired states, which is exactly where that stratum sits. ========================================================================= */ .cc-skip-link { position: fixed; top: calc(-1 * var(--cc-space-16)); inset-inline-start: var(--cc-space-3); z-index: var(--cc-z-overlay); padding: var(--cc-space-2) var(--cc-space-4); background: var(--cc-surface-card); color: var(--cc-text-link); border: 2px solid var(--cc-focus-ring); border-radius: var(--cc-radius-md); box-shadow: var(--cc-elevation-raised); font-family: var(--cc-font-display); font-size: var(--cc-font-size-sm); font-weight: var(--cc-font-weight-semibold); text-decoration: none; } .cc-skip-link:focus { top: var(--cc-space-3); } /* Touch target (N28): 44px, not the 42px its padding happened to give. */ .cc-skip-link { display: inline-flex; align-items: center; min-block-size: var(--cc-size-touch, 44px); } [data-cc-theme="patient"] { --cc-font-size-sm: 0.9375rem; --cc-font-size-base: 1.0625rem; --cc-font-size-lg: 1.3125rem; --cc-font-size-xl: 1.5rem; --cc-font-size-2xl: 1.875rem; --cc-line-base: 1.7; --cc-line-relaxed: 1.8; --cc-line-snug: 1.5; --cc-surface-page: #F4F6FA; --cc-surface-card: #FFFFFF; --cc-surface-sunken: #F1F5F9; --cc-text-secondary: #1E293B; --cc-border-default: #E2E8F0; --cc-brand-accent: #294870; --cc-accent: #A5C4F0; --cc-accent-strong: #2563EB; --cc-accent-text: #1D4ED8; --cc-accent-deep: #1E40AF; --cc-accent-grad-start: #2563EB; --cc-grad-cta: linear-gradient(135deg, #2563EB 0%, #1D4ED8 60%, #1E40AF 100%); --cc-action-primary-bg: #2563EB; --cc-action-primary-bg-hover: #1D4ED8; --cc-action-primary-fg: #FFFFFF; --cc-layout-measure: 62ch; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="high-contrast"]) [data-cc-theme="patient"] { --cc-surface-page: #070F1A; --cc-surface-card: #0D1C2B; --cc-surface-sunken: #050B14; --cc-text-secondary: #E2E8F0; --cc-border-default: #20415A; --cc-brand-accent: #55B5D8; --cc-accent: #55B5D8; --cc-accent-text: #55B5D8; --cc-accent-strong: #2B5DA8; --cc-accent-deep: #003D8F; --cc-accent-grad-start: #2B5DA8; --cc-grad-cta: linear-gradient(135deg, #2B5DA8 0%, #1D4A8F 60%, #003D8F 100%); --cc-action-primary-bg: #2563EB; --cc-action-primary-bg-hover: #1D4ED8; --cc-action-primary-fg: #FFFFFF; } } @media (prefers-contrast: more) { :root:not([data-theme="light"]):not([data-theme="dark"]) [data-cc-theme="patient"] { --cc-surface-page: #FFFFFF; --cc-surface-card: #E6E6E6; --cc-surface-sunken: #D4D4D4; --cc-text-secondary: #171717; --cc-border-default: #333333; --cc-brand-accent: #001A33; --cc-action-secondary-bg: #FFFFFF; --cc-accent: #9FC5FF; --cc-accent-text: #00265C; --cc-accent-strong: #00265C; --cc-accent-deep: #00224F; --cc-accent-grad-start: #003D8F; --cc-grad-cta: linear-gradient(135deg, #003D8F 0%, #00265C 60%, #00224F 100%); --cc-action-primary-bg: #00265C; --cc-action-primary-bg-hover: #00224F; --cc-action-primary-fg: #FFFFFF; } } :root[data-theme="dark"] [data-cc-theme="patient"] { --cc-surface-page: #070F1A; --cc-surface-card: #0D1C2B; --cc-surface-sunken: #050B14; --cc-text-secondary: #E2E8F0; --cc-border-default: #20415A; --cc-brand-accent: #55B5D8; --cc-accent: #55B5D8; --cc-accent-text: #55B5D8; --cc-accent-strong: #2B5DA8; --cc-accent-deep: #003D8F; --cc-accent-grad-start: #2B5DA8; --cc-grad-cta: linear-gradient(135deg, #2B5DA8 0%, #1D4A8F 60%, #003D8F 100%); --cc-action-primary-bg: #2563EB; --cc-action-primary-bg-hover: #1D4ED8; --cc-action-primary-fg: #FFFFFF; } :root[data-theme="high-contrast"] [data-cc-theme="patient"] { --cc-surface-page: #FFFFFF; --cc-surface-card: #E6E6E6; --cc-surface-sunken: #D4D4D4; --cc-text-secondary: #171717; --cc-border-default: #333333; --cc-brand-accent: #001A33; --cc-action-secondary-bg: #FFFFFF; --cc-accent: #9FC5FF; --cc-accent-text: #00265C; --cc-accent-strong: #00265C; --cc-accent-deep: #00224F; --cc-accent-grad-start: #003D8F; --cc-grad-cta: linear-gradient(135deg, #003D8F 0%, #00265C 60%, #00224F 100%); --cc-action-primary-bg: #00265C; --cc-action-primary-bg-hover: #00224F; --cc-action-primary-fg: #FFFFFF; } /* THE REGION, NEVER THE DOCUMENT ROOT — and the exclusion is load-bearing. This block gives a patient surface its base type, and it was written when the theme attribute could only be on a region: Shell A puts it on the preview div. Shell C now declares the same attribute on the HTML element (the whole document is a patient surface, apps/patient/app/layout.tsx), and an unqualified selector therefore set the ROOT font size from a rem token. rem on the root element resolves against the initial 16px, so the root came out at 1.0625 x 16 = 17px — and then every other rem in the document, sizes and spacing alike, was measured in that 17px unit. shells/patient.css sets body font-size to var(--cc-font-size-base) and produced 18.0625px instead of the 17px the token names: the portal's whole type and rhythm ran 6.25 % large, which is the double scale the print note one screen down already warns about. The root's font size is the unit the document is measured IN. Nothing that is expressed in that unit may set it. :where() rather than a bare :not(), because this rule's SPECIFICITY is load- bearing too. print/clinical.css paints the report black on white with [data-cc="patient-report"] — the same (0,1,0) as this selector, winning on source order because it loads last. A bare :not(html) is (0,1,1) and takes that win away: the patient surface came out slate on paper. :where() adds nothing, so the exclusion is free. */ [data-cc-theme="patient"]:where(:not(html)) { font-size: var(--cc-font-size-base); line-height: var(--cc-line-base); color: var(--cc-text-secondary); } [data-cc-theme="patient"][data-cc="patient-report"] { display: block; margin-block-start: var(--cc-space-6); padding: var(--cc-space-8) var(--cc-space-8) var(--cc-space-10); background: var(--cc-surface-card); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-xl); } [data-cc-theme="patient"] section { margin-block-end: var(--cc-space-8); } [data-cc-theme="patient"] section:last-child { margin-block-end: 0; } /* THE HEADING RANK, WHICH USED TO INVERT (the product owner's staging walk, item 14: "font sizes vary with no system, alignment irregular"). h2 was font-size lg at the inherited weight 600. Two of this profile's h3s — data-cc="patient-fact-label" and data-cc="patient-group-label", both real h3 elements — set lg at BOLD, and [attr] [attr] (0,2,0) beats [attr] h3 (0,1,1), so those h3s rendered heavier than the h2 above them while the profile's OTHER h3s stayed at base/600. Three visually different h3s and a section heading lighter than two of them is not a system, and a reader has no way to recover the outline from the type. h2 is now a step above every h3 in both size and weight, and the two emphatic h3s below take their emphasis from weight alone at the h3 size. */ [data-cc-theme="patient"] h2 { margin-block-end: var(--cc-space-3); font-size: var(--cc-font-size-xl); font-weight: var(--cc-font-weight-bold); line-height: var(--cc-line-snug); color: var(--cc-text-primary); } [data-cc-theme="patient"] h3 { margin-block-end: var(--cc-space-2); font-size: var(--cc-font-size-base); font-weight: var(--cc-font-weight-semibold); line-height: var(--cc-line-snug); color: var(--cc-text-primary); } /* THE MEASURE, ON EVERYTHING WITH AN EDGE. It was p, li and h2 only, so a paragraph stopped at the measure while the card, the callout, the fact block and the chart table beside it ran to the shell's full layout maximum. Two right-hand edges in the same column is the "alignment irregular" of the report; there is nothing irregular about any one of these blocks on its own. */ [data-cc-theme="patient"] p, [data-cc-theme="patient"] li, [data-cc-theme="patient"] h2, [data-cc-theme="patient"] h3, [data-cc-theme="patient"] [data-metaphor="prose-banner"], [data-cc-theme="patient"] [data-metaphor="capsule"], [data-cc-theme="patient"] [data-cc="separation-statement"], [data-cc-theme="patient"] [data-cc="patient-fact"], [data-cc-theme="patient"] [data-cc="patient-what-changed-group"], [data-cc-theme="patient"] [data-cc="patient-chart-table"] { max-width: var(--cc-layout-measure); } [data-cc-theme="patient"] p { margin-block-end: var(--cc-space-3); } [data-cc-theme="patient"] ul { margin-block: 0 var(--cc-space-3); padding-inline-start: var(--cc-space-5); } /* Element 1 — a flat prose banner. */ [data-cc-theme="patient"] [data-metaphor="prose-banner"] { padding: var(--cc-space-6); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-lg); background: var(--cc-surface-page); } /* THE STAGE, AS THE COVER OF THE REPORT (design audit item 13). It was font-size-xl and weight 600 — a subtitle, in a nested card, the same size as a section heading. It is the finding the whole document is about, and the reader who takes one thing away takes this one, so it is set at the display step: the brand face, its heaviest weight, tight leading, negative tracking. clamp() rather than a fixed step because there is no display token in the scale above 2xl and a 3.5rem numeral would overflow a 320px column; it lands between the 2xl step and roughly 3.5rem, on the reading measure. What the audit ALSO asked for — a drawn 0-to-4 scale with the reader's position marked — is not here, and cannot be drawn from what this component is given. stage_display is the SERVER's string ("Stage 2"), and patient-report.ts actively refuses a bare number in that field: the contract exists so a client can never render a stage it composed itself. Marking a position needs the ordinal, and getting one here means parsing a clinical sentence — which is the failure the refusal was written to prevent. The scale is stated in WORDS instead, in the screen's lead ("five stages, numbered 0 to 4, a higher number means more disease"), which is a ratified catalogue string and is read before the number. Drawing it needs a numeric stage on StageMeaningContent; that is a contract change. */ [data-cc-theme="patient"] [data-cc="patient-stage-display"] { margin-block-end: var(--cc-space-3); font-family: var(--cc-font-display); font-size: clamp(var(--cc-font-size-2xl), 8vw, 3.5rem); font-weight: var(--cc-font-weight-heavy); line-height: 1.05; letter-spacing: -0.03em; color: var(--cc-text-primary); } /* The sentence that says what the number means, immediately under it and set as a lead rather than as body copy: a reader who stops after two lines has read the finding and its meaning, which is the pair FR-10.29 asks for. */ [data-cc-theme="patient"] [data-cc="patient-stage-meaning"] { font-size: var(--cc-font-size-lg); line-height: var(--cc-line-snug); color: var(--cc-text-primary); } /* Element 4 — a capsule. A different silhouette, not a different colour. */ [data-cc-theme="patient"] [data-metaphor="capsule"] { padding: var(--cc-space-6) var(--cc-space-8); border: 2px solid var(--cc-brand-accent); border-radius: 28px; background: var(--cc-surface-page); } /* The PulseScore's own type, and it is deliberately QUIETER than the stage's. Both blocks carry a large number, and the audit found the obvious risk: a reader who meets "2" and "78" with no typographic difference between them reads 78 as the important one, because it is the bigger number and because a score out of a hundred is a shape everybody already knows. That is FR-10.31 [PATENT] failing in the type rather than in the markup — the stage is the finding and the score is the control, and only one of them is the subject of the report. So the score gets the body face at the base step with weight, against the stage's display face at the xl step. The capsule silhouette is still what separates the two blocks in greyscale; this is what ranks them. */ [data-cc-theme="patient"] [data-cc="patient-pulsescore-display"] { font-size: var(--cc-font-size-base); font-weight: var(--cc-font-weight-semibold); color: var(--cc-text-primary); } [data-cc-theme="patient"] [data-cc="patient-pulsescore-scale"] { display: block; color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } /* THE SEPARATION STATEMENT, AS A CALLOUT AND NOT AS A DEAD CONTROL (design audit item 15). It is the single most important sentence on this element — "the score is not the stage" is FR-10.31 [PATENT] rendered as a sentence, and it may not be collapsed or dismissed. It was drawn as a grey box with a hairline border, radius-md and bold text, which on a page whose only other bordered rectangles are buttons is the silhouette of a DISABLED BUTTON. The audit read it as one, which means a reader can. A callout is a different silhouette: no full border, a heavy rule down the leading edge in the brand accent, the accent's own tint for a ground, and the radius only on the trailing corners so it reads as attached to the rule rather than as a free-floating control. Same words, same rank, nothing that looks pressable. */ [data-cc-theme="patient"] [data-cc="separation-statement"] { margin-block-start: var(--cc-space-5); padding: var(--cc-space-4) var(--cc-space-5); border: 0; border-inline-start: 5px solid var(--cc-brand-accent); border-radius: 0 var(--cc-radius-md) var(--cc-radius-md) 0; background: var(--cc-surface-sunken); font-weight: var(--cc-font-weight-semibold); color: var(--cc-text-primary); } /* Element 3 — four stacked blocks, each headed. Never a tile row. THE AUDIT ASKED FOR A 2×2 GRID OF TILES HERE, AND IT IS DECLINED. The complaint under it is real and is fixed below: four paragraphs separated only by a 2px hairline is a wall of text, and the first thing a reader loses in a wall of text is which sentence belongs to which fact. But the REMEDY the audit proposed is the specific shape FR-10.31 [PATENT] exists to forbid. Four equal tiles in a 2×2 block are read as one composite score with four components — a dashboard — and the whole point of "four separate facts" is that they are separate: how much disease there is, how fast it is moving, how the arteries are behaving and what was inherited are four findings, not four quarters of one number. So they stay in ONE COLUMN, in the vocabulary's order, and what changes is the separation: each fact is a card with its own ground and its own heading rather than a paragraph behind a filet. Nothing about a stacked card can be read as a quadrant of anything. (The audit's other half — "a plain-language title, not engine jargon" — is the SERVER's label. This layer cannot change a word of it; a client that rewrote a fact's name would be a client editing a clinical document.) */ [data-cc-theme="patient"] [data-cc="patient-fact"] { margin-block-end: var(--cc-space-4); padding: var(--cc-space-5); border: 1px solid var(--cc-border-default); border-inline-start: 4px solid var(--cc-brand-accent); border-radius: 0 var(--cc-radius-lg) var(--cc-radius-lg) 0; background: var(--cc-surface-page); } [data-cc-theme="patient"] [data-cc="patient-fact-label"] { font-size: var(--cc-font-size-base); font-weight: var(--cc-font-weight-bold); } [data-cc-theme="patient"] [data-cc="patient-fact"] p:last-child { margin-block-end: 0; } [data-cc-theme="patient"] [data-cc="patient-fact"]:last-child { margin-block-end: 0; } /* Element 5 — WHAT CHANGED, and the three groups told apart (audit item 16). Three

s with identical treatment, one after another, and the only thing distinguishing "what improved" from "what got worse" was reading the server's heading carefully. The audit asked for soft green / amber / grey. THE COLOUR HALF IS DECLINED, and the reason is the rule this whole profile exists for. Green and amber here are state.pass.* and state.caution.* — the clinician shell's verdict palette about a governed check — and FE-9.21 forbids reusing one on a patient's own report, with CLINICIAN_ALARM_TOKENS and a test over this stylesheet's bytes enforcing it. A patient who learns that amber means "worse" on this page has learned a colour code for their own heart; the next amber thing they see, in any context, says it again. The separation is drawn the way this profile draws every other separation (see the stage/PulseScore note above): by SILHOUETTE. Each group is its own card with its own leading rule, and the rule's WEIGHT ranks them — the server's own words stay the thing that carries the meaning, which is also what survives greyscale, a colour-blind reader and a printout. / [data-cc-theme="patient"] [data-cc="patient-what-changed-group"] { margin-block-end: var(--cc-space-4); padding: var(--cc-space-5); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-lg); background: var(--cc-surface-page); } [data-cc-theme="patient"] [data-cc="patient-what-changed-group"]:last-child { margin-block-end: 0; } [data-cc-theme="patient"] [data-cc="patient-group-label"] { font-size: var(--cc-font-size-base); font-weight: var(--cc-font-weight-bold); } / The group whose contents a reader most needs to find gets the heaviest edge — it is a rank, in the one channel that is not a colour code. / [data-cc-theme="patient"] [data-cc="patient-what-changed-group"][data-group="worsened"] { border-inline-start: 5px solid var(--cc-brand-accent); } [data-cc-theme="patient"] [data-cc="patient-what-changed-group"][data-group="improved"] { border-inline-start: 5px solid var(--cc-border-strong); } / An empty group stays in the DOM and says so (CHK-FE-258); it is drawn as the quietest of the three so it does not compete with the two that have content. / [data-cc-theme="patient"] [data-cc="patient-group-empty"] { color: var(--cc-text-muted); } / ---- THE TERM–VALUE–NOTE STACK ---------------------------------------- The patient surface renders the same three-part row in six places: a term or label, the value or schedule that belongs to it, and a note about it. Every one of them was authored as sibling s joined by a single space, which on screen is one run-on line: "Blood test — lipids, including Lp(a) Planned for November 2026 Your clinic will contact you to arrange a date." "Lp(a) 112 nmol/L Your Lp(a) is inherited and stays broadly the same…" "Replaced by a newer report This version was replaced by a newer report on…" "— Dr. R. Chen, Treating practitioner 20 August 2026" Three sentences with no punctuation between them, on the surface whose whole requirement is plain language. It is ONE defect and it gets ONE fix, and the fix is here rather than in the six components because the parts are already marked: each span carries the data-cc name of what it is, which is a structure the markup states and the stylesheet had simply never drawn. Making them blocks is also the only fix available to all six — three of the sites are inside PatientReportView, which Shell A and Shell C share, so a per-component fix would be three components and two shells agreeing not to drift. The rendered TEXT is untouched: nothing here adds a word, a separator character or a punctuation mark to server copy, which is the line a patient surface may not cross. display:block on the span rather than a wrapper element, so the reading order, the accessible name and the print flow are exactly what they were. / [data-cc-theme="patient"] [data-cc="measurement-label"], [data-cc-theme="patient"] [data-cc="patient-driver-name"], [data-cc-theme="patient"] [data-cc="history-status-word"], [data-cc-theme="patient"] [data-cc="clinician-steps-attribution"] { display: block; font-weight: var(--cc-font-weight-semibold); color: var(--cc-text-primary); } [data-cc-theme="patient"] [data-cc="measurement-schedule"], [data-cc-theme="patient"] [data-cc="patient-driver-display"], [data-cc-theme="patient"] [data-cc="patient-fact-display"], [data-cc-theme="patient"] [data-cc="patient-item-display"] { display: block; } / The note is the quietest of the three — it explains the two above it. / [data-cc-theme="patient"] [data-cc="measurement-note"], [data-cc-theme="patient"] [data-cc="patient-driver-statement"], [data-cc-theme="patient"] [data-cc="history-supersession-note"], [data-cc-theme="patient"] [data-cc="clinician-steps-recorded"], [data-cc-theme="patient"] [data-cc="clinician-steps-verbatim"] { display: block; margin-block-start: var(--cc-space-1); color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } / A stacked row needs air between rows, or three three-line items read as one nine-line paragraph. / [data-cc-theme="patient"] [data-cc="measurement"], [data-cc-theme="patient"] [data-cc="patient-inherited-driver"], [data-cc-theme="patient"] [data-cc="patient-what-changed-item"] { margin-block-end: var(--cc-space-4); } / Element 8 — the clinician's own words, marked as a quotation. / [data-cc-theme="patient"] [data-cc="clinician-next-steps"] { margin: 0; padding: var(--cc-space-4) var(--cc-space-5); border-inline-start: 3px solid var(--cc-brand-accent); background: var(--cc-surface-sunken); color: var(--cc-text-primary); } [data-cc-theme="patient"] [data-cc="clinician-next-steps"] footer { margin-block-start: var(--cc-space-2); color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } / Reflow (WCAG 1.4.10). The narrow-viewport treatment belongs to the report, not to whichever shell is showing it — a preview that reflows differently from the release is a preview of a different document on a phone. / @media (max-width: 640px) { [data-cc-theme="patient"][data-cc="patient-report"] { padding: var(--cc-space-5); border-radius: var(--cc-radius-lg); } } / ONE FRAME ON A PHONE, NOT THREE (patient UX round 3). At 375px the report was a card inside the page's gutter, holding cards inside its own padding: the reading column of the stage banner started 65px from the screen edge and ended 65px from the other, so a 375px phone set the finding a patient came for in about 245px — five or six words a line, at the size this profile chose for a reader who may be older. The frames were not wrong; there were just two too many of them for the width. Below the phone breakpoint the report's own frame goes (the page IS the document there, and the page already has a gutter), and the blocks inside it keep their borders and rules — the silhouettes that separate stage from PulseScore and one fact from the next are untouched — but spend a smaller step of padding. Same document, same order, same edges; more words a line. / @media (max-width: 480px) { [data-cc-theme="patient"][data-cc="patient-report"] { padding: 0; border: 0; border-radius: 0; background: transparent; } [data-cc-theme="patient"] [data-metaphor="prose-banner"], [data-cc-theme="patient"] [data-cc="patient-chart-figure"] { padding: var(--cc-space-4); } [data-cc-theme="patient"] [data-metaphor="capsule"] { padding: var(--cc-space-5) var(--cc-space-4); border-radius: var(--cc-radius-xl); } [data-cc-theme="patient"] [data-cc="patient-fact"], [data-cc-theme="patient"] [data-cc="patient-what-changed-group"] { padding: var(--cc-space-4); } [data-cc-theme="patient"] [data-cc="separation-statement"], [data-cc-theme="patient"] [data-cc="clinician-next-steps"] { padding: var(--cc-space-3) var(--cc-space-4); } } / The report's charts (FE-4.24, CHK-FE-226). Three channels, one of which is a picture, so nothing here may be the ONLY carrier of anything: the plot is one line in one colour, and the sentence above it and the table below it carry the same content in words (FE-4.20). Every dimension is intrinsic or relative. The figure has no fixed width and the svg no fixed height, so the chart reflows with the column at 320 px and at 200 % zoom instead of forcing the page sideways (FE-4.21, CHK-FE-223). / [data-cc-theme="patient"] [data-cc="patient-chart-figure"] { margin: 0; padding: var(--cc-space-5); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-lg); background: var(--cc-surface-page); } / WCAG 2.4.11 — a point is a tab stop, and base.css already draws the one focus indicator this product has, on every :focus-visible. What it cannot do is stop an SVG mark from being clipped by the edge of the plot box while it wears that indicator, which is what the overflow declaration here is for. / [data-cc-theme="patient"] [data-cc="patient-chart-svg"] { display: block; inline-size: 100%; block-size: auto; margin-block: var(--cc-space-4); overflow: visible; } [data-cc-theme="patient"] [data-cc="patient-chart-segment"] { stroke: var(--cc-brand-accent); stroke-width: 2; fill: none; } [data-cc-theme="patient"] [data-cc="patient-chart-mark"] { fill: var(--cc-brand-accent); stroke: var(--cc-surface-page); stroke-width: 2; } / The axis labels live INSIDE the viewBox, so this length is in SVG user units, not CSS pixels: it is the label's size relative to the plot, and it is what keeps a label proportional to the line it sits under at every container width. A rem-based type token here would be scaled twice — once by the root font size and again by the viewBox — and would grow or shrink against the plot rather than with it. The colour is a token: text.muted on surface.page is the pairing patient-theme.test.ts already holds above 4.5:1 in both profiles. / / 14px was a raw pixel value: it does not participate in the rem scale and does not answer to a browser's own text-size setting (WCAG 1.4.4). The scale's small step is what 14px was approximating. / [data-cc-theme="patient"] [data-cc="patient-chart-point-label"] { fill: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } / The value axis (FE-4.24). Gridlines are the faintest thing in the figure — they are the scale the line is read against, not a thing to read — and the row labels take the same muted pairing as the date labels under the plot. Lengths are SVG user units for the reason above: they belong to the viewBox. The border.default hairline on surface.page is the pairing this profile already uses for the figure's own frame. / [data-cc-theme="patient"] [data-cc="patient-chart-gridline"] { stroke: var(--cc-border-default); stroke-width: 1; } [data-cc-theme="patient"] [data-cc="patient-chart-axis-label"] { fill: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } / The value at the mark is the one label in the figure a reader is meant to READ rather than orient by, so it takes the primary ink and the display face — the same treatment the history table gives the date a reader scans by. / [data-cc-theme="patient"] [data-cc="patient-chart-value-label"] { fill: var(--cc-text-primary); font-family: var(--cc-font-display); font-size: var(--cc-font-size-sm); font-weight: var(--cc-font-weight-semibold); } [data-cc-theme="patient"] [data-cc="patient-chart-table"] { inline-size: 100%; border-collapse: collapse; font-size: var(--cc-font-size-sm); } [data-cc-theme="patient"] [data-cc="patient-chart-table"] caption { margin-block-end: var(--cc-space-2); color: var(--cc-text-muted); text-align: start; } [data-cc-theme="patient"] [data-cc="patient-chart-table"] th, [data-cc-theme="patient"] [data-cc="patient-chart-table"] td { padding: var(--cc-space-2) var(--cc-space-3); border-block-end: 1px solid var(--cc-border-default); text-align: start; vertical-align: top; } / A defect and a block are the two states a patient may see that are not their report. Both are bordered and worded; neither is coloured red. / / Both scoped. The second selector had no theme-scope prefix, so this profile's treatment leaked into any shell that loads the layer. / [data-cc-theme="patient"] [data-cc="patient-element-defect"], [data-cc-theme="patient"] [data-cc="patient-report-blocked"] { padding: var(--cc-space-5); border: 1px solid var(--cc-border-strong); border-inline-start: 5px solid var(--cc-text-subtle); border-radius: var(--cc-radius-lg); background: var(--cc-surface-sunken); } / ========================================================================= theme-control.css — the ThemeControl primitive (packages/ui-primitives `ThemeControl`, CHK-DS-006). Three buttons in a group, exactly one of them `aria-pressed="true"`. The pressed treatment is a GROUND plus a weight plus the attribute, never a colour alone: `aria-pressed` is what a screen reader announces and what this sheet keys on, so the visual state and the announced state cannot disagree (INV-FE-4). It renders on the ink chrome in all three shells, in BOTH schemes, so it spends `--cc-chrome-` throughout — the half of the palette that is the same in the light and dark profiles. That is not a shortcut: a control for switching schemes that changed appearance as you used it would be reporting its own side effect rather than its state. ========================================================================= / .cc-theme-control { display: inline-flex; align-items: center; /* FE-T.18 / WCAG 1.4.10 — the group WRAPS, and never widens the page. It was a single nowrap row while the set was three short words. The set is `THEME_CHOICES` and the fourth member arrived with the high-contrast profile, whose label is a phrase in every shell ("High contrast" in the clinician and auditor chrome, "Easier to read" in the patient catalogue, beside "Same as my device") — so the row is now wider than a 320px viewport and wider than the patient header's share of a 375px one, and a nowrap inline-flex in a nowrap header pushed the DOCUMENT sideways rather than scrolling inside anything. Wrapping is the reflow this control should have had from the start: the labels stay words, no option is dropped below a breakpoint, and the group's min-content is one option rather than four. `max-inline-size` caps it at its container in the shells whose header does not itself wrap, so the cap holds wherever the control is placed rather than only where a shell remembered to constrain it. Logical, so an RTL locale mirrors it (CHK-FE-440). / flex-wrap: wrap; max-inline-size: 100%; gap: 2px; padding: 2px; border: 1px solid var(--cc-chrome-border-strong); / HALF OF ONE ROW, not the pill radius. On one row the two are the same shape (a 44px option + 2px padding + 1px border is a 50px-tall group, so 25px IS the pill). But the group wraps — the patient catalogue's labels do at 375px — and a 9999px radius on a two-row box draws a lozenge whose corners cut into "Easier to read". Half a row keeps the pill on one line and turns into a rounded rectangle on two. / border-radius: calc(var(--cc-size-touch) / 2 + 3px); background: var(--cc-chrome-bg); } .cc-theme-control__option { / `--cc-size-touch` is the touch minimum (WCAG 2.5.5, REDESIGN-SPEC "medical-grade simplicity"), and this rule now SPENDS it instead of naming it in a comment above a 32. The E2E audit measured these four options at 147x32, 55x32, 54x32 and 111x32 — the only targets in the product below the minimum; everything else, down to "Print this page" at 151x48, already cleared it. The one they made hardest to press was "Easier to read", the control that exists for the reader least able to press a small one. It still does not burst the topbar. The group's own 2px padding and 1px border put a 44px option in a 50px pill inside a 56px `min-height` bar, and below the tablet breakpoint the bar wraps and the group wraps with it. / min-height: var(--cc-size-touch); padding: var(--cc-space-1) var(--cc-space-3); border: 0; border-radius: var(--cc-radius-pill); background: transparent; color: var(--cc-chrome-fg-muted); font-family: inherit; font-size: var(--cc-font-size-xs); font-weight: var(--cc-font-weight-semibold); letter-spacing: 0.02em; white-space: nowrap; cursor: pointer; } / NO TRANSITION, and that is a decision rather than an omission. Every other control in the product fades its hover over `--cc-motion-fast`, and the first draft of this file did too. It came out on the wrong side of a rule Shell C already holds: `apps/patient/test/anxiety-layout-and-live-regions.test.tsx` asserts the patient shell has NO transition at all — "stated as none, not relaxed to at most one: if a transition ever arrives in this shell it should have to argue for itself here" — and this layer is one of the three the patient portal loads. The argument does not hold up. A 150ms colour fade on a three-state switch buys a reader nothing; what it costs is the one shell in the product built for someone who may be frightened, and a rule that shell can state without exceptions. So the state change is instant, in all three shells, and Shell C's claim stays a claim. / / ---------- the four states, each declaring BOTH of its colours ---------- EVERY state below sets a ground AND an ink, and none of them inherits either from the idle state. That is not belt-and-braces, it is the fix for a real defect: these options are `

` is hidden from sight and not from the accessibility tree, so the column relationships a screen reader reads are unchanged; the two cell labels (aria-hidden, catalogue words) say which column a cell came from, since there is no header row to say it. Nothing scrolls sideways (WCAG 1.4.10). */ .cc-table-wrap:has(> [data-cc="history-table"]) { overflow: visible; } [data-cc="history-table"], [data-cc="history-table"] tbody { display: block; inline-size: 100%; } [data-cc="history-table"] thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } [data-cc="history-table"] caption { display: block; padding: 0 0 var(--cc-space-3); color: var(--cc-text-muted); font-size: var(--cc-font-size-sm); } [data-cc="history-entry"] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-3) var(--cc-space-6); margin-block-end: var(--cc-space-4); padding: var(--cc-space-5) var(--cc-space-6); background: var(--cc-surface-card); border: var(--cc-patient-surface-border); border-radius: var(--cc-patient-surface-radius); box-shadow: var(--cc-elevation-raised); } [data-cc="history-entry"][data-current="true"] { border-color: var(--cc-accent-strong); } [data-cc="history-entry"] :is(th, td) { display: block; inline-size: auto; padding: 0; border: 0; } [data-cc="history-cell-label"] { display: block; color: var(--cc-text-muted); font-size: var(--cc-font-size-xs); font-weight: var(--cc-font-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; } /* The link is the card's first line and its target: a block at the touch minimum, so the whole title line opens the report. */ [data-cc="history-entry-link"] { display: block; min-block-size: var(--cc-size-touch); padding-block: var(--cc-space-2); color: var(--cc-text-primary); font-family: var(--cc-font-display); font-size: var(--cc-font-size-lg); font-weight: var(--cc-font-weight-bold); letter-spacing: -0.01em; text-decoration: none; } [data-cc="history-entry-link"]:hover { text-decoration: underline; } @media (min-width: 720px) { [data-cc="history-entry"] { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: start; } [data-cc="history-entry"] > td[data-cc="history-entry-status"] { grid-column: 2; grid-row: 1 / span 2; } } /* Each explanation is a white rounded card: the term as its title, the disclosure pill under it, the definition a soft tinted block. */ .cc-glossary-entry { margin-bottom: var(--cc-space-4); padding: var(--cc-space-5) var(--cc-space-6); background: var(--cc-surface-card); border: var(--cc-patient-surface-border); border-radius: var(--cc-patient-surface-radius); box-shadow: var(--cc-elevation-raised); } .cc-glossary-entry > :is(h2, h3) { font-family: var(--cc-font-display); font-size: var(--cc-font-size-lg); font-weight: var(--cc-font-weight-bold); letter-spacing: -0.01em; } /* The glossary's index — "Jump to a word" (patient UX round 3). A wrapping row of words, each a full touch target, on the sunken ground so it reads as the page's contents rather than as a sixth explanation. The links are ordinary underlined links — they go somewhere on the page, they do not do anything. */ .cc-glossary-index { margin-block: var(--cc-space-2) var(--cc-space-6); padding: var(--cc-space-5) var(--cc-space-6); background: var(--cc-surface-card); border: var(--cc-patient-surface-border); border-radius: var(--cc-patient-surface-radius); box-shadow: var(--cc-elevation-raised); } .cc-glossary-index .cc-glossary-index__label { margin-block-end: var(--cc-space-3); font-size: var(--cc-font-size-base); font-weight: var(--cc-font-weight-semibold); } /* The words, as pill chips: each a full touch target, each a plain link to its own heading on the page. */ .cc-glossary-index ul { display: flex; flex-wrap: wrap; gap: var(--cc-space-2); margin: 0; padding: 0; list-style: none; } .cc-glossary-index li { margin: 0; } .cc-glossary-index a { display: inline-flex; align-items: center; min-block-size: var(--cc-size-touch); padding-inline: var(--cc-space-4); border: 1px solid var(--cc-border-default); border-radius: var(--cc-radius-pill); background: var(--cc-surface-sunken); color: var(--cc-text-primary); font-family: var(--cc-font-display); font-weight: var(--cc-font-weight-semibold); text-decoration: none; } .cc-glossary-index a:hover { border-color: var(--cc-action-primary-bg); } /* The disclosure control. It shipped as a bare `

Sign in to see your report