/*!
 * DHCW Single Record Design System — complete stylesheet
 * v0.3.0 · generated by packages/web/build.mjs · do not edit by hand.
 * Licence: MIT. Roboto is embedded under the Apache 2.0 licence.
 */

/* ═══ fonts ═══════════════════════════════════════════════════════ */
/**
 * Auto-generated by @dhcw/sr-tokens — do not edit manually.
 * Roboto (latin subset, variable 100-900), Apache License 2.0.
 * Embedded as a data URI so the face resolves with no network request and no
 * relative-path assumptions — including inside sandboxed prototype embeds.
 */
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(data:font/woff2;base64,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) format("woff2");
}

/* ═══ tokens (light) ══════════════════════════════════════════════ */
/**
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --color-blue-50: #f4f5f8; /** Default page background (light mode) */
  --color-blue-100: #eceef3;
  --color-blue-200: #d4d8e2;
  --color-blue-300: #aab1c6;
  --color-blue-400: #828dac; /** Interactive/Disabled — semantic anchor */
  --color-blue-500: #5c6991;
  --color-blue-600: #4c72ae;
  --color-blue-700: #3d6199;
  --color-blue-800: #325083; /** Brand primary (light mode) */
  --color-blue-850: #2c3e72; /** DHCW organisational navy. Carried from the DHCW Figma primitives, where it is the corporate blue used for application chrome. White text on it is 10.3:1 (AAA). Not the Single Record brand primary — that is Blue/800. */
  --color-blue-900: #1e3050;
  --color-cyan-50: #f4fafc;
  --color-cyan-100: #ebf5fa;
  --color-cyan-300: #d6eaf2;
  --color-cyan-400: #afd4e5; /** Interactive/Link in dark mode */
  --color-cyan-500: #8dc0da;
  --color-cyan-600: #71accd;
  --color-cyan-700: #12a3c9; /** Brand secondary + Border/Focus (both modes) */
  --color-cyan-800: #0d8bad;
  --color-cyan-850: #0c7b99; /** Surface/Small Cards in dark mode */
  --color-cyan-900: #0a6a84;
  --color-navy-100: #cdcfd6;
  --color-navy-300: #9ea1af; /** Border/Disabled, Text/Disabled (dark) */
  --color-navy-500: #707488; /** Text/Disabled in light mode */
  --color-navy-700: #464c64;
  --color-navy-900: #1b294a;
  --color-red-50: #fef3f2;
  --color-red-100: #fcdbd9;
  --color-red-200: #f9b5b1;
  --color-red-300: #f48b85;
  --color-red-400: #ec5e56;
  --color-red-500: #e03a31;
  --color-red-600: #d5281b;
  --color-red-700: #b32014;
  --color-red-800: #8b190f;
  --color-red-900: #5f110a;
  --color-green-50: #f0faf4;
  --color-green-100: #d9efe5;
  --color-green-200: #aeddc9;
  --color-green-300: #7bcaaa;
  --color-green-400: #4ab88b;
  --color-green-500: #1fa66d;
  --color-green-600: #007f3b;
  --color-green-700: #006630;
  --color-green-800: #004d24;
  --color-green-900: #003319;
  --color-yellow-50: #fffaeb;
  --color-yellow-100: #fdf3d7;
  --color-yellow-200: #fde8ab;
  --color-yellow-300: #fbd97f;
  --color-yellow-400: #face62;
  --color-yellow-500: #f8ca4d;
  --color-yellow-600: #b47800;
  --color-yellow-700: #8a5a00; /** Warning banner/pill text colour */
  --color-yellow-800: #6b4400;
  --color-yellow-900: #4a3000; /** Darkest warning text on light surfaces */
  --color-info-blue-50: #eef5fc;
  --color-info-blue-100: #d6e8f5;
  --color-info-blue-200: #aecce8;
  --color-info-blue-300: #7eb0d9;
  --color-info-blue-400: #4e95ca;
  --color-info-blue-500: #267ab8;
  --color-info-blue-600: #0d62a3; /** Interactive/Primary (dark mode) */
  --color-info-blue-700: #005aa8; /** Interactive/Link (light), Status/Info */
  --color-info-blue-800: #004483; /** Interactive/Primary Hover (dark mode) */
  --color-info-blue-900: #002e5c;
  --color-grey-50: #f7fafa; /** Lightest neutral wash */
  --color-grey-100: #f0f4f5; /** Grey background. NHS grey-5. */
  --color-grey-200: #d8dde0; /** Default borders. NHS grey-4. */
  --color-grey-300: #c6cdd1; /** Subtle dividers, disabled fills (1.6:1) */
  --color-grey-400: #aeb7bd; /** Borders, dividers — non-text (2.0:1). NHS grey-3. */
  --color-grey-500: #768692; /** Muted/placeholder fill, disabled text, icons, strong borders (3.75:1 — passes 3:1 non-text; below 4.5:1 for body text). NHS grey-2. */
  --color-grey-600: #4c6272; /** Secondary/hint text (6.4:1 — AA). NHS grey-1. Accessible placeholder-text value. */
  --color-grey-700: #3b4e5b; /** Headings on grey surfaces (8.7:1) */
  --color-grey-800: #2c3a44; /** Strong text on tinted surfaces (11.7:1) */
  --color-grey-900: #212b32; /** Primary text (14.4:1 on white) */
  --color-white-default: #ffffff; /** Card and panel surfaces in light mode; Text/Inverse on saturated fills */
  --color-border-subtle: #f0f4f5; /** Ultra-light border for row dividers and internal table separators. Use only on white or near-white backgrounds where Border/Default would be too prominent. Do not use as the only structural indicator on a surface. */
  --color-border-default: #d8dde0; /** Standard border for inputs, cards, and section dividers. */
  --color-border-strong: #768692; /** The boundary of a UI component — checkbox and radio at rest, switch track on hover, sub-tab pill outline. 3.75:1 on white and 3.44:1 on the page background, clearing the 3:1 of WCAG 2.2 SC 1.4.11. Was Grey/600 (6.37:1) until 2026-09-08. Not a text colour. Kept in step with sr.color.border.strong by the build — see the border-token divergence check in packages/tokens/build.js. */
  --color-border-focus: #0d8bad; /** Focus ring colour — Cyan/800 (DDR-025, amending DDR-006). Applied to all interactive elements on keyboard focus. Always paired with Border/Width/Strong (2px) and an inner gap ring. Kept in step with sr.color.border.focus by hand: this token and the sr-prefixed one are the known duplication awaiting a token-structure decision. */
  --sr-color-interactive-primary: #325083; /** Brand primary. White text on blue-800 = 7.1:1 (AAA). */
  --sr-color-interactive-primary-hover: #1e3050; /** Hover step for primary. */
  --sr-color-interactive-secondary: #1b294a; /** Muted dark for secondary interactive elements. */
  --sr-color-interactive-link: #005aa8; /** Inline link colour. 6.8:1 on surface/background (AA). */
  --sr-color-interactive-destructive: #d5281b; /** Destructive UI action (delete, remove). Pair with confirmation. */
  --sr-color-interactive-disabled: #828dac; /** Disabled interactive element fill. */
  --sr-color-interactive-on-accent: #325083; /** Interactive text or icon sitting ON surface/accent — a current nav item, a row action. Same value as interactive/primary in light mode, so nothing changes here; it exists because dark mode needs a different answer. Primary is a FILL colour and stays saturated in dark, where an accent surface is also dark — 2.07:1. This token carries the light-on-dark counterpart instead. */
  --sr-color-interactive-on-accent-hover: #1e3050; /** Hover step for interactive/on-accent. Darker in light mode, lighter in dark — hover always moves away from the surface, and which direction that is depends on the mode. */
  --sr-color-surface-background: #f4f5f8; /** Default page/app background. */
  --sr-color-surface-small-cards: #ffffff; /** A small card that carries TEXT ONLY and sits inside a section card — a stat tile, a count. White here, and the same white as section-cards, because light mode already separates the two planes with the page tint behind them. Dark mode is where the two diverge; see the dark description before putting anything other than text on this surface. */
  --sr-color-surface-section-cards: #ffffff; /** Primary background for card sections in modular layout. */
  --sr-color-surface-accent: #ebf5fa; /** Tinted surface — highlighted regions, callouts. */
  --sr-color-surface-subtle: #f4f5f8; /** Subtle section background — table rows, inactive tabs. */
  --sr-color-text-primary: #212b32; /** Default text. 15.6:1 on surface/background (AAA). */
  --sr-color-text-secondary: #4c6272; /** Supporting text. 7.2:1 on surface/background (AAA). */
  --sr-color-text-inverse: #ffffff; /** Text on a surface whose lightness is the OPPOSITE of the current mode: dark text in light mode's terms. It therefore flips between modes — white here, near-black in dark. Do not use it on a saturated brand fill; that is text/on-fill. */
  --sr-color-text-on-fill: #ffffff; /** Text on a saturated interactive or status fill — a primary button, a destructive button, a filled badge. White in BOTH modes, because those fills stay saturated in both. This is the distinction text/inverse cannot make: inverse is relative to the mode, this is absolute. */
  --sr-color-text-disabled: #707488; /** Disabled text. 4.6:1 on surface/background (AA). */
  --sr-color-border-subtle: #f0f4f5;
  --sr-color-border-default: #d8dde0;
  --sr-color-border-strong: #768692; /** The boundary of a UI component — checkbox and radio at rest, switch track on hover, sub-tab pill outline. Clears the 3:1 of WCAG 2.2 SC 1.4.11 on both light surfaces: 3.75:1 on white, 3.44:1 on the page background. Was Grey/600 (6.37:1) until 2026-09-08; lightened so a control outline reads as an affordance without shouting, which matters where several sit in a row. Not a text colour — 3.75:1 is under the 4.5:1 SC 1.4.3 wants for body text. Dividers, card outlines and table rules are NOT control boundaries and stay on border/default. */
  --sr-color-border-focus: #0d8bad; /** Focus ring — Cyan/800 in both modes (DDR-025, amending DDR-006). Cyan/700 was 2.95:1 on a card and 2.71:1 on the page, under the 3:1 SC 1.4.11 requires. Cyan/800 is the only stop clearing 3:1 in both modes: darker stops fix light mode and fail dark, where surfaces are navy. */
  --sr-color-border-disabled: #9ea1af;
  --sr-color-brand-accent: #12a3c9; /** Decorative accent only. Borders, icon strokes, chart accents, tab indicators. Never use as a filled surface with text on top. */
  --sr-color-status-critical: #b32014; /** Red/700 (#B32014) — raised from Red/600 for AA contrast on light status surfaces and text. */
  --sr-color-status-critical-surface: #fef3f2; /** Red/50 (#FEF3F2) — lightened from Red/100 so Status/Critical text on it reaches 6.16:1 (was 5.19:1). */
  --sr-color-status-success: #006630; /** Green/700 (#006630) — raised from Green/600 for AA contrast on light status surfaces and text. */
  --sr-color-status-success-surface: #f0faf4; /** Green/50 (#F0FAF4) — lightened from Green/100 so Status/Success text on it reaches 6.69:1 (was 5.92:1). */
  --sr-color-status-warning: #f8ca4d;
  --sr-color-status-warning-surface: #fffaeb; /** Yellow/50 (#FFFAEB) — lightened from Yellow/100 to match the other status surfaces. Note that Status/Warning (Yellow/500) on it is 1.49:1 and must never carry text unaided; see the warning-role exception in the Icons guidance. */
  --sr-color-status-info: #005aa8;
  --sr-color-status-info-surface: #eef5fc; /** Info Blue/50 (#EEF5FC) — lightened from Info Blue/100 so Status/Info text on it reaches 6.31:1 (was 5.52:1). */
  --sr-icon-size-xs: 16px; /** 16px — inline icons within dense content */
  --sr-icon-size-sm: 20px; /** 20px — standard inline icons */
  --sr-icon-size-md: 24px; /** 24px — default icon size, matching the source grid 1:1 */
  --sr-icon-size-lg: 32px; /** 32px — prominent icons, empty states */
  --sr-icon-stroke: 1; /** 1px at every size (DDR-023). There is deliberately no per-size variant. */
  --sr-icon-color-default: #212b32; /** Default icon colour — matches primary text */
  --sr-icon-color-subtle: #4c6272; /** Subdued icon — matches secondary text */
  --sr-icon-color-inverse: #ffffff; /** Icon on dark or coloured surfaces */
  --sr-icon-color-interactive: #325083; /** Interactive icon (clickable, hoverable) */
  --sr-icon-color-critical: #b32014; /** Critical / error state icon */
  --sr-icon-color-warning: #f8ca4d; /** Warning state icon */
  --sr-icon-color-success: #006630; /** Success / confirmed state icon */
  --sr-icon-color-info: #005aa8; /** Informational icon */
  --space-0: 0px; /** Explicit zero */
  --space-1: 4px; /** Icon padding, micro gaps */
  --space-2: 8px; /** Tight component internals */
  --space-3: 12px; /** Compact form elements */
  --space-4: 16px; /** Default internal padding */
  --space-5: 20px;
  --space-6: 24px; /** Section spacing within panels */
  --space-8: 32px; /** Component separation */
  --space-10: 40px;
  --space-12: 48px; /** Section breaks */
  --space-16: 64px; /** Major layout sections */
  --space-20: 80px; /** Page-level vertical rhythm */
  --space-24: 96px;
  --font-family-primary: Roboto; /** Primary UI typeface */
  --font-family-fallback: Arial,sans-serif; /** System fallback stack */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --font-size-12: 12px;
  --font-size-14: 14px;
  --font-size-16: 16px;
  --font-size-18: 18px;
  --font-size-20: 20px;
  --font-size-24: 24px;
  --font-size-28: 28px;
  --font-size-36: 36px;
  --font-line-height-16: 16px;
  --font-line-height-20: 20px;
  --font-line-height-24: 24px;
  --font-line-height-28: 28px;
  --font-line-height-32: 32px;
  --font-line-height-36: 36px;
  --font-line-height-44: 44px;
  --font-letter-spacing-default: 0px; /** No additional tracking — body text and headings */
  --font-letter-spacing-wide: 0.3px; /** Expanded tracking — labels and UI controls */
  --font-letter-spacing-caption: 0.2px; /** Gentle expansion — captions and supporting text */
  --icon-size-xs: 16px; /** Smallest inline icon — within dense content such as table cells */
  --icon-size-sm: 20px; /** Small inline icon — standard inline usage */
  --icon-size-md: 24px; /** Default icon size. Matches the 24x24 source grid 1:1 */
  --icon-size-lg: 32px; /** Large icon — prominent placements and empty states */
  --icon-stroke: 1; /** 1px, at every size. DDR-023: Lucide ships 2px and Single Record overrides it globally. Do NOT vary stroke by size — this token previously carried a 2 'default' and a 1.75 'dense' pair that no icon has ever used. Every SVG in foundations/iconography/svg/ is stroke-width 1, and npm run check:icons fails on any that is not. */
  --icon-variant-outline: outline; /** Default variant for all icons. Stroke only, no fill. */
  --icon-variant-filled: filled; /** Reserved for navigation active states only. Filled variants are not assigned speculatively — each must be explicitly required by a navigation component. A mark that needs a second colour is a component, not an icon (DDR-027). */
  --spacing-component-xs: 4px; /** Icon-only buttons, tight badges */
  --spacing-component-sm: 8px; /** Compact inputs, table cells */
  --spacing-component-md: 16px; /** Default padding for most components */
  --spacing-component-lg: 24px; /** Panels, cards */
  --spacing-component-xl: 32px; /** Large containers */
  --spacing-form-field-gap: 24px; /** Vertical gap between form fields */
  --spacing-form-label-gap: 8px; /** Gap between label and input */
  --spacing-form-hint-gap: 4px; /** Gap between hint text and input */
  --spacing-form-error-gap: 4px; /** Gap between error message and input */
  --spacing-form-group-gap: 32px; /** Gap between field groups / fieldsets */
  --spacing-layout-xs: 16px; /** Column gutters (mobile) */
  --spacing-layout-sm: 24px; /** Column gutters (tablet) */
  --spacing-layout-md: 32px; /** Column gutters (desktop) */
  --spacing-layout-section: 48px; /** Between page sections */
  --spacing-layout-page: 64px; /** Page padding / top-level margins */
  --breakpoint-mobile-max: 767px; /** Maximum width for mobile styles. Use: @media (max-width: 767px) */
  --breakpoint-tablet-min: 768px; /** Minimum width for tablet styles. Use: @media (min-width: 768px) */
  --breakpoint-desktop-min: 1024px; /** Minimum width for desktop styles and desktop typography tokens. Use: @media (min-width: 1024px) */
  --breakpoint-large-min: 1280px; /** Minimum width for large desktop layouts. Use: @media (min-width: 1280px) */
  --breakpoint-xlarge-min: 1440px; /** Minimum width for extra-large desktop layouts. Use: @media (min-width: 1440px) */
  --border-width-1: 1px; /** Global: raw 1px border width. */
  --border-width-2: 2px; /** Global: raw 2px border width. */
  --border-width-default: 1px; /** Standard 1px border for inputs, cards, dividers, and section edges. */
  --border-width-strong: 2px; /** Emphasis border for active states, selected rows, and focus ring outer stroke. */
  --radius-0: 0px; /** Global: no rounding. */
  --radius-2: 2px; /** Global: minimal rounding. */
  --radius-4: 4px; /** Global: standard rounding. */
  --radius-8: 8px; /** Global: prominent rounding. */
  --radius-9999: 9999px; /** Global: pill / full-round. */
  --radius-none: 0px; /** No rounding. Use for tables, data grids, full-bleed containers, elements that must butt against screen edges or adjacent cells. */
  --radius-sm: 2px; /** Subtle rounding. Use for form inputs, text areas, select controls, inline tags, small badges, and chips. */
  --radius-md: 4px; /** Standard rounding. Use for buttons, cards, panels, notification banners, and tooltips. Default for most interactive components. */
  --radius-lg: 8px; /** Prominent rounding. Use for modals, side drawers, floating menus, and large overlay surfaces. */
  --radius-full: 9999px; /** Pill shape. Use for status chips, avatar rings, toggle switches, and search input end-caps. Not appropriate for rectangular content containers. */
  --elevation-raised: 0 1px 4px rgba(27, 41, 74, 0.12); /** Cards and panels: a gentle lift from the page surface. Use only where a border alone is insufficient to separate a surface from its background, for example a white card on a near-white page. Also used by the patient banner and the navigation sidebar. */
  --elevation-overlay: 0 4px 16px rgba(27, 41, 74, 0.18); /** All floating layers: modals, side drawers, dropdown menus and tooltips. The deeper shadow communicates that the surface sits above the page rather than on it. Never use the raised step for a floating layer — a card-weight shadow reads flat against a modal's own backdrop. */
  --size-touch-24: 24px; /** Global: WCAG 2.2 AA minimum (SC 2.5.8). Requires ≥10px inactive spacing on all sides. */
  --size-touch-32: 32px; /** Global: desktop compact target. Desktop mouse contexts only. */
  --size-touch-44: 44px; /** Global: WCAG 2.2 AAA (SC 2.5.5). Required for all touch interfaces. */
  --size-logo-xs: 24px; /** Absolute minimum. Reserved for compact icon-only usage in dense UI. */
  --size-logo-sm: 32px; /** Small — icon in compact placement, full logo in footers. */
  --size-logo-md: 48px; /** Standard — default for both icon and full logo in primary UI. */
  --size-logo-lg: 64px; /** Large — prominent full logo placement. */
  --size-logo-xl: 80px; /** Extra large — hero areas and splash screens. */
  --size-logo-2xl: 96px; /** Maximum — print, marketing, and full-bleed digital layouts. */
  --size-logo-icon-default: 32px; /** Icon in standard UI contexts: headers, navigation, app chrome. → 32px */
  --size-logo-icon-compact: 24px; /** Icon in dense UI: breadcrumbs, chips, inline context labels. → 24px */
  --size-logo-icon-prominent: 48px; /** Icon in hero areas and authentication screens. → 48px */
  --size-logo-full-default: 48px; /** Full lockup in page headers and primary placement. → 48px */
  --size-logo-full-compact: 32px; /** Full lockup in footers and secondary placement. → 32px */
  --size-logo-full-prominent: 64px; /** Full lockup in splash screens, print, and marketing. → 64px */
  --touch-default: 44px; /** 44px. WCAG 2.2 AAA (SC 2.5.5). REQUIRED for all MAUI (touch) interactive elements — no exceptions. Strongly recommended as the default for Blazor desktop. Use this unless a compact variant is explicitly justified. */
  --touch-compact: 32px; /** 32px. Desktop (Blazor) only — never use on MAUI. Permitted for secondary actions in genuinely dense layouts: row-level action icons, inline icon buttons in data tables. Requires documented rationale in the component spec. Must not be used for primary or destructive actions. */
  --touch-minimum: 24px; /** 24px. WCAG 2.2 AA floor (SC 2.5.8) — only valid with the spacing exception: the target must have ≥10px of inactive space on all sides (total interactive area ≥44px). Desktop only. Absolute last resort for extreme-density contexts such as icon-only action columns in data grids. Document the spacing justification in the component spec. */
  --logo-icon-size: 32px; /** Controls the height (and equal width) of all Logos component icon variants (Type=Icon). Default: 32px. Override at instance level by referencing a different Size/Logo/Icon/* alias token. */
  --logo-full-height: 48px; /** Controls the height of all Logos component full lockup variants (Type=Full). Width scales proportionally per brand aspect ratio. Default: 48px. Override at instance level by referencing a different Size/Logo/Full/* alias token. */
}

/* ═══ typography utilities ════════════════════════════════════════ */
/**
 * Auto-generated by @dhcw/sr-tokens — do not edit manually.
 * Responsive typography utility classes (mobile-first): the base rule is the
 * mobile scale; the desktop scale is applied at min-width: 1024px.
 * Apply directly, e.g. <h1 class="sr-type-heading-xl">…</h1>
 *
 * Component CSS that cannot add a class uses the composite properties
 * instead — always BOTH, never one:
 *   font: var(--sr-type-body-s-font);
 *   letter-spacing: var(--sr-type-body-s-letter-spacing);
 * Never hand-pick the raw font-size and line-height tokens to build one.
 */

:root {
  --sr-type-heading-xl-font: 700 28px/36px Roboto, Arial, sans-serif;
  --sr-type-heading-xl-letter-spacing: 0px;
  --sr-type-heading-l-font: 700 24px/32px Roboto, Arial, sans-serif;
  --sr-type-heading-l-letter-spacing: 0px;
  --sr-type-heading-m-font: 700 20px/28px Roboto, Arial, sans-serif;
  --sr-type-heading-m-letter-spacing: 0px;
  --sr-type-heading-s-font: 700 18px/24px Roboto, Arial, sans-serif;
  --sr-type-heading-s-letter-spacing: 0px;
  --sr-type-heading-xs-font: 500 16px/24px Roboto, Arial, sans-serif;
  --sr-type-heading-xs-letter-spacing: 0px;
  --sr-type-body-m-font: 400 16px/24px Roboto, Arial, sans-serif;
  --sr-type-body-m-letter-spacing: 0px;
  --sr-type-body-s-font: 400 14px/20px Roboto, Arial, sans-serif;
  --sr-type-body-s-letter-spacing: 0px;
  --sr-type-label-font: 500 14px/20px Roboto, Arial, sans-serif;
  --sr-type-label-letter-spacing: 0.3px;
  --sr-type-caption-font: 400 12px/16px Roboto, Arial, sans-serif;
  --sr-type-caption-letter-spacing: 0.2px;
}

.sr-type-heading-xl {
  font-family: Roboto, Arial, sans-serif;
  font-size: 28px;
  line-height: 36px;
  font-weight: 700;
  letter-spacing: 0px;
}

.sr-type-heading-l {
  font-family: Roboto, Arial, sans-serif;
  font-size: 24px;
  line-height: 32px;
  font-weight: 700;
  letter-spacing: 0px;
}

.sr-type-heading-m {
  font-family: Roboto, Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
  letter-spacing: 0px;
}

.sr-type-heading-s {
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0px;
}

.sr-type-heading-xs {
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0px;
}

.sr-type-body-m {
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0px;
}

.sr-type-body-s {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0px;
}

.sr-type-label {
  font-family: Roboto, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0.3px;
}

.sr-type-caption {
  font-family: Roboto, Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.2px;
}

@media (min-width: 1024px) {
  :root {
    --sr-type-heading-xl-font: 700 36px/44px Roboto, Arial, sans-serif;
    --sr-type-heading-xl-letter-spacing: 0px;
    --sr-type-heading-l-font: 700 28px/36px Roboto, Arial, sans-serif;
    --sr-type-heading-l-letter-spacing: 0px;
    --sr-type-heading-m-font: 700 24px/32px Roboto, Arial, sans-serif;
    --sr-type-heading-m-letter-spacing: 0px;
    --sr-type-heading-s-font: 700 20px/28px Roboto, Arial, sans-serif;
    --sr-type-heading-s-letter-spacing: 0px;
  }

  .sr-type-heading-xl {
    font-family: Roboto, Arial, sans-serif;
    font-size: 36px;
    line-height: 44px;
    font-weight: 700;
    letter-spacing: 0px;
  }

  .sr-type-heading-l {
    font-family: Roboto, Arial, sans-serif;
    font-size: 28px;
    line-height: 36px;
    font-weight: 700;
    letter-spacing: 0px;
  }

  .sr-type-heading-m {
    font-family: Roboto, Arial, sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: 0px;
  }

  .sr-type-heading-s {
    font-family: Roboto, Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    letter-spacing: 0px;
  }
}

/* ═══ icons ═══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Icon
 * Sizing/colour tokens for icons rendered via @dhcw/sr-icons.
 * See SINGLE-RECORD-DS-REFERENCE.md §13 Iconography for the full size/colour scale.
 */

.sr-icon {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}
.sr-icon svg {
  width: 100%;
  height: 100%;
}

/* Sizes come from the token layer. These used to be four hardcoded px values
   with the token name written beside them in a comment — the comment was the
   only link, and `sr.icon.size.*` was not emitted to any platform at all, so
   nothing could have consumed it. Both halves are fixed: the tokens build now
   includes semantic/iconography.json, and these rules read it. */
.sr-icon--xs { width: var(--sr-icon-size-xs); height: var(--sr-icon-size-xs); } /* inline within dense content */
.sr-icon--sm { width: var(--sr-icon-size-sm); height: var(--sr-icon-size-sm); } /* standard inline icons */
.sr-icon--md { width: var(--sr-icon-size-md); height: var(--sr-icon-size-md); } /* default — matches the 24px source grid 1:1 */
.sr-icon--lg { width: var(--sr-icon-size-lg); height: var(--sr-icon-size-lg); } /* prominent icons, empty states */

.sr-icon--inherit     { color: inherit; } /* icon sits inside a coloured ancestor (e.g. .sr-button) and must track its currentColor */
.sr-icon--default     { color: var(--sr-color-text-primary); }
.sr-icon--subtle      { color: var(--sr-color-text-secondary); }
.sr-icon--inverse     { color: var(--sr-color-text-inverse); }
.sr-icon--interactive { color: var(--sr-color-interactive-primary); }
.sr-icon--critical    { color: var(--sr-color-status-critical); }
.sr-icon--warning     { color: var(--sr-color-status-warning); }
.sr-icon--success     { color: var(--sr-color-status-success); }
.sr-icon--info        { color: var(--sr-color-status-info); }

/* ═══ autocomplete ════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Autocomplete (searchable select / combobox)
 *
 * A composition of the SEARCH field and the SELECT listbox popover. It owns
 * almost no styling of its own: the field comes from `.sr-search__*` and the
 * menu from `.sr-select__*`, so the three read as one system. Consumes
 * @dhcw/sr-tokens. Import search.css and select.css alongside this file.
 *
 * Why those two and not one:
 *   You TYPE into it, so the field is a Search field — Search is the system's
 *   only search field (the Input set's `Type=Search` variants were removed on
 *   2026-06-04). An earlier version of this file claimed to compose "the Input
 *   search field", which by then did not exist.
 *   You CHOOSE A VALUE from it, so the menu is a Select menu — the picked
 *   option carries the brand fill that means "this is the current value".
 *   Search's own Typeahead popover is styled differently on purpose: its rows
 *   are results to act on, not a value that stays chosen.
 *
 * Autocomplete vs Search Typeahead:
 *   Autocomplete resolves to a value from a known set and has a chevron, so
 *   the list can be browsed without typing — clinical code lookup, ward and
 *   clinician pickers. Typeahead looks a query up; choosing a row navigates or
 *   fetches. For a short fixed list use Select; for free text use Input.
 *
 * Anatomy:
 *   .sr-autocomplete            — vertical stack (label / hint / control / error)
 *   .sr-search__label / __hint  — reused from Search
 *   .sr-autocomplete__control   — positioning context for the popover
 *   .sr-search__field           — the search field (leading icon, input, clear)
 *   .sr-autocomplete__toggle    — chevron; the part Search does not have
 *   .sr-select__menu / __option — results listbox (reused from Select)
 *   .sr-autocomplete__empty     — "no results" row
 *
 * Semantics: input is role="combobox" aria-autocomplete="list"; the results
 * are role="listbox"/role="option" (same ARIA as Select).
 */

.sr-autocomplete {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  box-sizing: border-box;
}

.sr-autocomplete__control {
  position: relative;
  width: 100%;
}

/* Chevron — the affordance saying this field has a list behind it, and the
   same glyph Select uses so the two read as one kind of control. This is the
   one control Autocomplete adds to the Search field it borrows. */
.sr-autocomplete__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sr-color-text-secondary);
  cursor: pointer;
}
.sr-autocomplete__toggle svg { width: 20px; height: 20px; }
.sr-autocomplete__toggle:hover { color: var(--sr-color-text-primary); }

/* "No results" row inside the reused Select menu. Search's own empty state
   lives in .sr-search__status-row; this one has to match the Select menu it
   sits in, which has different padding. */
.sr-autocomplete__empty {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-3);
  color: var(--sr-color-text-secondary);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
}

/* The matched run inside an option comes from Search (.sr-search__match). On a
   selected or keyboard-active Select option the row is brand-filled, so the
   bolded run must inherit the inverse text colour rather than staying dark. */
.sr-select__option:hover .sr-search__match,
.sr-select__option.is-active .sr-search__match,
.sr-select__option[aria-selected='true'] .sr-search__match {
  color: inherit;
}

/* ═══ bottom-nav ══════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Bottom navigation (mobile)
 * Reference HTML/CSS implementation, matched to the Figma Footer Nav mobile
 * variant (665:16526). This is primary navigation for small screens — a fixed
 * bar of icon-over-label tabs — NOT the desktop Footer (save/version bar).
 * Consumes @dhcw/sr-tokens CSS custom properties.
 *
 * Anatomy: a row of equal-width tabs; the active tab uses aria-current="page"
 * and the interactive-link colour.
 */

.sr-bottom-nav {
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  background-color: var(--sr-color-surface-section-cards);
  border-top: 1px solid var(--sr-color-border-subtle);
}

.sr-bottom-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex: 1 1 0;
  min-width: 0;
  padding: var(--space-2) var(--space-1);
  border: none;
  background: transparent;
  color: var(--sr-color-text-secondary);
  text-decoration: none;
  cursor: pointer;
}
/* Rest is Text/Secondary — icon and label together, so an inactive tab reads
   as one quiet unit. Hover and the current tab both go to Interactive/Link:
   the tab bar is navigation, and blue is what "you can go here / you are here"
   means everywhere else in the product. Hover must not go darker than rest —
   that reads as the control switching off under the cursor. */
.sr-bottom-nav__item:hover {
  color: var(--sr-color-interactive-link);
}
.sr-bottom-nav__item:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--sr-color-border-focus);
}
.sr-bottom-nav__item[aria-current="page"] {
  color: var(--sr-color-interactive-link);
}

.sr-bottom-nav__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
}
.sr-bottom-nav__icon svg {
  width: 100%;
  height: 100%;
}

.sr-bottom-nav__label {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  white-space: nowrap;
}

/* ═══ breadcrumbs ═════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Breadcrumbs
 * Reference HTML/CSS implementation, matched to the Figma Breadcrumbs set
 * (1307:19303, Device=Desktop, Levels=Four). Consumes @dhcw/sr-tokens
 * CSS custom properties.
 *
 * Two types, both in that set:
 *   Multilevel (default) — ordered list of links separated by "/", the last
 *     (current page) item rendered as plain text with aria-current="page".
 *   Back (.sr-breadcrumbs--back) — a single chevron-left link back to the
 *     immediate parent, for narrow screens and deep hierarchies where the full
 *     trail would wrap. It names the destination ("Back to level three"), never
 *     just "Back", so it does not depend on browser history.
 */

.sr-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-breadcrumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.sr-breadcrumbs__link {
  color: var(--sr-color-interactive-link);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  text-decoration: underline;
}
.sr-breadcrumbs__link:hover {
  color: var(--sr-color-interactive-primary);
}
.sr-breadcrumbs__link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-surface-section-cards), 0 0 0 4px var(--sr-color-border-focus);
}

.sr-breadcrumbs__separator {
  color: var(--sr-color-text-secondary);
  font: var(--sr-type-body-m-font);
  letter-spacing: var(--sr-type-body-m-letter-spacing);
}

.sr-breadcrumbs__current {
  color: var(--sr-color-text-secondary);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
}

/* ---------- Type=Back ----------
   One link, a chevron and a destination. The chevron is decorative — the link
   text carries the meaning — so it is hidden from assistive technology. */
.sr-breadcrumbs--back .sr-breadcrumbs__item {
  gap: var(--space-1);
}

/* Pairs with `sr-icon sr-icon--sm` from the icons package, which sets the box;
   this only adds the colour and stops it shrinking beside a long label. */
.sr-breadcrumbs__back-icon {
  flex: 0 0 auto;
  color: var(--sr-color-text-secondary);
}

/* ═══ button ══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Button
 * Reference HTML/CSS implementation, matched to the Figma Button set (1346:500).
 * Consumes @dhcw/sr-tokens CSS custom properties.
 *
 * Properties (mirroring the Figma component):
 *   Type:  Primary | Secondary | Ghost | Destructive
 *          Destructive renders RED (Interactive/Destructive) for irreversible
 *          actions (delete, remove). Aligns with the GDS "Warning" button
 *          (which is also red); renamed Destructive here to avoid colliding
 *          with the amber Status/Warning language used elsewhere. See DDR-008.
 *   Size:  Large | Default | Small
 *   State: Default | Hover | Focus | Disabled (CSS pseudo-classes)
 *   Slots: optional leading / trailing icon (16px), via .sr-button__icon
 */

.sr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2); /* 8px */
  box-sizing: border-box;
  /* Button text is `label` at every size — DESIGN-SYSTEM names it as one of
     label's three uses. Only the box changes between sizes (height, padding,
     radius); the text does not, so it is set once here. */
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sr-button__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.sr-button__icon svg {
  width: 100%;
  height: 100%;
}

/* ---------- Sizes (fixed height + horizontal padding, content centred) ---------- */
.sr-button--large {
  height: 48px;
  padding: 0 var(--space-6); /* 24px */
  border-radius: var(--radius-lg); /* 8px */
}
.sr-button--default {
  height: 40px;
  padding: 0 var(--space-6); /* 24px */
  border-radius: var(--radius-lg); /* 8px */
}
.sr-button--small {
  height: 32px;
  padding: 0 var(--space-3); /* 12px */
  border-radius: var(--radius-md); /* 4px */
}

/* ---------- Type: Primary ---------- */
.sr-button--primary {
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-on-fill);
}
.sr-button--primary:hover {
  background-color: var(--sr-color-interactive-primary-hover);
}

/* ---------- Type: Secondary ---------- */
.sr-button--secondary {
  background-color: transparent;
  color: var(--sr-color-interactive-primary);
  border-color: var(--sr-color-interactive-primary);
}
.sr-button--secondary:hover {
  background-color: var(--color-cyan-100);
}

/* ---------- Type: Ghost ---------- */
.sr-button--ghost {
  background-color: transparent;
  color: var(--sr-color-interactive-primary);
  border-color: transparent;
}
.sr-button--ghost:hover {
  background-color: var(--color-cyan-100);
  border-color: var(--sr-color-interactive-primary);
}

/* ---------- Type: Destructive (red — irreversible actions) ---------- */
.sr-button--destructive {
  background-color: var(--sr-color-interactive-destructive);
  color: var(--sr-color-text-on-fill);
}
.sr-button--destructive:hover {
  background-color: var(--color-red-700);
}

/* ---------- Focus (all types) — SR cyan ring, DDR-006 ---------- */
.sr-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--sr-color-surface-background),
    0 0 0 4px var(--sr-color-border-focus);
}

/* ---------- Disabled (all types) ---------- */
.sr-button:disabled,
.sr-button[aria-disabled="true"] {
  cursor: not-allowed;
}
.sr-button--primary:disabled,
.sr-button--primary[aria-disabled="true"] {
  background-color: var(--sr-color-interactive-disabled);
  color: var(--sr-color-text-on-fill);
}
.sr-button--secondary:disabled,
.sr-button--secondary[aria-disabled="true"],
.sr-button--ghost:disabled,
.sr-button--ghost[aria-disabled="true"] {
  background-color: transparent;
  color: var(--sr-color-text-disabled);
  border-color: var(--color-border-subtle);
}
.sr-button--ghost:disabled,
.sr-button--ghost[aria-disabled="true"] {
  border-color: transparent;
}
.sr-button--destructive:disabled,
.sr-button--destructive[aria-disabled="true"] {
  background-color: var(--sr-color-status-critical-surface);
  color: var(--sr-color-interactive-destructive);
}

/* ═══ checkbox ════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Checkbox
 * Reference HTML/CSS implementation, matched to the Figma Checkbox sets:
 *   Checkbox                  (1517:13764) — Orientation × Legend × Hint × Error × Required
 *   Checkbox/Building blocks  (843:14568)  — State × Checked × Indeterminate (11 variants)
 * Consumes @dhcw/sr-tokens.
 *
 * Anatomy (group, vertical stack, gap = space-1):
 *   .sr-checkbox-group__legend   — group legend (+ required asterisk)
 *   .sr-checkbox-group__hint     — helper text (Caption)
 *   .sr-checkbox-group__error    — validation message (Caption + status/error-circle)
 *   .sr-checkbox-group__options  — the options, gap space-3 (vertical) / space-6 (horizontal)
 *
 * Anatomy (single option):
 *   .sr-checkbox__input — the real <input type="checkbox">, transparent and
 *                         laid over the box so it keeps native semantics,
 *                         keyboard behaviour and the :checked / :indeterminate
 *                         / :disabled pseudo-classes.
 *   .sr-checkbox__label — draws the box (::before) and the tick or dash (::after).
 *
 * The input is never display:none or visibility:hidden — that would remove it
 * from the accessibility tree and the tab order. Following the NHS.UK / GDS
 * approach, it stays a real focusable control sized over the visible box.
 *
 * Required marker: per components/form-fields.md the asterisk sits on the group
 * legend, not on individual options, and is decorative — pair with aria-required.
 */

/* ---------- Group ---------- */

.sr-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 0; /* fieldset defaults to min-content; let it shrink */
}

.sr-checkbox-group__legend {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  padding: 0;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-checkbox-group__required {
  color: var(--sr-color-status-critical);
}

.sr-checkbox-group__hint {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

.sr-checkbox-group__error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-status-critical);
}
.sr-checkbox-group__error-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.sr-checkbox-group__error-icon svg { width: 100%; height: 100%; }

/* Error group gains the inset rule, matching the Figma error variants. */
.sr-checkbox-group--error {
  border-left: var(--border-width-2) solid var(--sr-color-status-critical);
  padding-left: var(--space-3);
}

/* ---------- Options list ---------- */

.sr-checkbox-group__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-1);
}
.sr-checkbox-group__options--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-6);
}

/* ---------- Single option ---------- */

.sr-checkbox {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 20px;
  /* Set here as well as on the group: a single checkbox is valid on its own
     (for example a table's select-all) and must not inherit the page default. */
}

.sr-checkbox__input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sr-checkbox__label {
  display: inline-block;
  padding-left: 28px; /* 20px box + space-2 gap */
  min-height: 20px;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-primary);
  cursor: pointer;
}

/* Label-less checkbox — the box on its own, for table selection cells.
   The accessible name must come from aria-label on the input. */
.sr-checkbox--bare .sr-checkbox__label {
  padding-left: 20px;
  min-width: 20px;
}

/* The box */
.sr-checkbox__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background-color: var(--sr-color-surface-section-cards);
  /* Border/Strong, not Border/Default. An unchecked box is a UI component
     boundary under WCAG 2.2 SC 1.4.11, which requires 3:1: Grey/200 gave
     1.37:1 on white, Border/Strong gives 3.75:1. Asserted by check:contrast,
     so the ratio lives there rather than in this comment. */
  border: var(--border-width-2) solid var(--sr-color-border-strong);
  border-radius: var(--radius-sm);
}

/* The tick / dash, hidden until checked or indeterminate */
.sr-checkbox__label::after {
  content: "";
  position: absolute;
  opacity: 0;
  box-sizing: border-box;
}

/* Tick: two borders on a rotated box, so it scales with tokens and needs no asset. */
.sr-checkbox__input:checked + .sr-checkbox__label::after {
  opacity: 1;
  top: 5px;
  left: 4px;
  width: 11px;
  height: 5px;
  border: solid var(--sr-color-text-inverse);
  border-width: 0 0 var(--border-width-2) var(--border-width-2);
  background: transparent;
  transform: rotate(-45deg);
}

/* Indeterminate wins over checked, matching native behaviour. */
.sr-checkbox__input:indeterminate + .sr-checkbox__label::after {
  opacity: 1;
  top: 9px;
  left: 4px;
  width: 11px;
  height: 2px;
  border: 0;
  background-color: var(--sr-color-text-inverse);
  transform: none;
}

/* ---------- States ---------- */

/* Hover previews the checked colour. It cannot stay on Border/Strong now that
   rest uses it — that would make hover a no-op. */
.sr-checkbox__input:hover:not(:disabled) + .sr-checkbox__label::before {
  border-color: var(--sr-color-interactive-primary);
}

.sr-checkbox__input:checked + .sr-checkbox__label::before,
.sr-checkbox__input:indeterminate + .sr-checkbox__label::before {
  background-color: var(--sr-color-interactive-primary);
  border-color: var(--sr-color-interactive-primary);
}
.sr-checkbox__input:checked:hover:not(:disabled) + .sr-checkbox__label::before,
.sr-checkbox__input:indeterminate:hover:not(:disabled) + .sr-checkbox__label::before {
  background-color: var(--sr-color-interactive-primary-hover);
  border-color: var(--sr-color-interactive-primary-hover);
}

/* Focus ring: 3px Cyan/700 outside stroke on the box only (DDR-006). */
.sr-checkbox__input:focus-visible + .sr-checkbox__label::before {
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}

/* Error: red box in every checked state. */
.sr-checkbox--error .sr-checkbox__label::before {
  border-color: var(--sr-color-interactive-destructive);
}
.sr-checkbox--error .sr-checkbox__input:checked + .sr-checkbox__label::before,
.sr-checkbox--error .sr-checkbox__input:indeterminate + .sr-checkbox__label::before {
  background-color: var(--sr-color-interactive-destructive);
  border-color: var(--sr-color-interactive-destructive);
}

/* Disabled */
.sr-checkbox__input:disabled,
.sr-checkbox__input:disabled + .sr-checkbox__label {
  cursor: not-allowed;
}
.sr-checkbox__input:disabled + .sr-checkbox__label {
  color: var(--sr-color-text-disabled);
}
.sr-checkbox__input:disabled + .sr-checkbox__label::before {
  background-color: var(--sr-color-surface-section-cards);
  border-color: var(--sr-color-border-disabled);
}
.sr-checkbox__input:disabled:checked + .sr-checkbox__label::before,
.sr-checkbox__input:disabled:indeterminate + .sr-checkbox__label::before {
  background-color: var(--sr-color-border-disabled);
  border-color: var(--sr-color-border-disabled);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .sr-checkbox__label::before,
  .sr-checkbox__label::after {
    transition: none;
  }
}

/* ═══ date-input ══════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Date input (3-field)
 * GDS/NHS "Date input" pattern: three separate day/month/year text fields.
 * The DEFAULT control for dates the user knows (DOB, admission, onset). See
 * DDR-012. Consumes @dhcw/sr-tokens.
 *
 * Anatomy:
 *   <fieldset .sr-date-input>
 *     <legend .sr-date-input__legend>       — the date being asked for
 *     .sr-date-input__hint                  — optional helper text
 *     .sr-date-input__fields                — Day / Month / Year
 *       .sr-date-input__item
 *         label + input (numeric)
 *     .sr-date-input__error                 — one message per group
 */

.sr-date-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.sr-date-input__legend {
  padding: 0;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-date-input__required {
  color: var(--sr-color-status-critical);
}

.sr-date-input__hint {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

.sr-date-input__fields {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-1);
}

.sr-date-input__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sr-date-input__item-label {
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-primary);
}

.sr-date-input__field {
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
  color: var(--sr-color-text-primary);
  font: inherit;
  font: var(--sr-type-body-m-font);
  letter-spacing: var(--sr-type-body-m-letter-spacing);
}
.sr-date-input__field:focus {
  outline: none;
  border-color: var(--sr-color-border-focus);
  box-shadow: inset 0 0 0 1px var(--sr-color-border-focus);
}
/* Width signals expected length (GDS): 2 chars for day/month, 4 for year. */
.sr-date-input__field--day,
.sr-date-input__field--month {
  width: 48px;
}
.sr-date-input__field--year {
  width: 72px;
}

/* ---------- Error ---------- */
.sr-date-input--error .sr-date-input__field {
  border-color: var(--sr-color-status-critical);
  box-shadow: inset 0 0 0 1px var(--sr-color-status-critical);
}
.sr-date-input__error {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-status-critical);
}

/* ---------- Disabled ---------- */
.sr-date-input--disabled .sr-date-input__field {
  background-color: var(--sr-color-surface-subtle);
  border-color: var(--sr-color-border-disabled);
  box-shadow: none;
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
}

/* ═══ date-picker ═════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Date picker (calendar popover)
 * Custom calendar built against SR tokens (no third-party date library — see
 * DDR-012). For CHOOSING dates (scheduling, availability), not for known dates
 * — use Date input (3-field) for those.
 *
 * Anatomy:
 *   .sr-datepicker                — positioning wrapper
 *     .sr-datepicker__field        — text field + calendar trigger button
 *     .sr-datepicker__popover      — role="dialog" calendar
 *       .sr-datepicker__header      — prev / month-year / next
 *       .sr-datepicker__grid        — weekday row + day cells
 */

.sr-datepicker {
  position: relative;
  display: inline-block;
}

.sr-datepicker__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  /* 220px is the designed width, but as a cap rather than a fixed size: a
     control that cannot shrink below its drawn width overflows any narrower
     container, which is what put a horizontal scrollbar inside the Send /
     Receive / Tag modals when two of these sit in one row. */
  width: 100%;
  max-width: 220px;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 var(--space-2) 0 var(--space-3);
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
}
.sr-datepicker__field:focus-within {
  border-color: var(--sr-color-border-focus);
  box-shadow: inset 0 0 0 1px var(--sr-color-border-focus);
}
.sr-datepicker--error .sr-datepicker__field {
  border-color: var(--sr-color-status-critical);
  box-shadow: inset 0 0 0 1px var(--sr-color-status-critical);
}
.sr-datepicker__input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-datepicker__input::placeholder {
  color: var(--sr-color-text-secondary);
}
.sr-datepicker__input:focus {
  outline: none;
}
.sr-datepicker__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sr-color-text-secondary);
  cursor: pointer;
}
.sr-datepicker__trigger:hover {
  color: var(--sr-color-text-primary);
}
.sr-datepicker__trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-border-focus);
}
.sr-datepicker__trigger svg {
  width: 20px;
  height: 20px;
}

/* ---------- Popover ---------- */
.sr-datepicker__popover {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  z-index: 20;
  width: 280px;
  box-sizing: border-box;
  padding: var(--space-3);
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-overlay);
}

.sr-datepicker__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}
.sr-datepicker__title {
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-datepicker__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sr-color-text-secondary);
  cursor: pointer;
}
.sr-datepicker__nav:hover {
  background-color: var(--sr-color-surface-subtle);
  color: var(--sr-color-text-primary);
}
.sr-datepicker__nav:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-border-focus);
}
.sr-datepicker__nav svg {
  width: 20px;
  height: 20px;
}

.sr-datepicker__weekdays,
.sr-datepicker__week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}
.sr-datepicker__weekday {
  padding: var(--space-1) 0;
  text-align: center;
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

.sr-datepicker__day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 1px 0;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sr-color-text-primary);
  font: inherit;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  cursor: pointer;
}
.sr-datepicker__day:hover {
  background-color: var(--sr-color-surface-subtle);
}
.sr-datepicker__day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-border-focus);
}
.sr-datepicker__day--outside {
  color: var(--sr-color-text-disabled);
}
.sr-datepicker__day--today {
  box-shadow: inset 0 0 0 1px var(--sr-color-border-strong);
}
.sr-datepicker__day[aria-selected="true"] {
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
}
.sr-datepicker__day:disabled {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
}

/* ═══ footer ══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Footer (page action bar)
 * Reference HTML/CSS implementation, matched to the Figma Footer Nav set
 * (665:16525, Type=Desktop). Consumes @dhcw/sr-tokens CSS custom properties.
 * Action buttons reuse .sr-button (Secondary/Primary, Small) — see
 * packages/web/src/button/button.css.
 */

.sr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  height: 60px;
  box-sizing: border-box;
  padding: var(--space-3);
  background-color: var(--sr-color-surface-section-cards);
  border-top: 1px solid var(--sr-color-border-subtle);
}

/* ---------- Pinned to the bottom (the default) ----------
   The bar sits at the bottom of every screen: the version has to be readable
   without scrolling, because it is what staff read out when reporting a
   fault, and a committing action should not be somewhere you have to hunt
   for. `sticky`, not `fixed`: fixed would be positioned against the viewport
   and would have to be told the width of any sidebar beside it, which the
   component cannot know. Sticky keeps it inside its own column, so it spans
   the content area and no further, and it needs no z-index games.

   Two conditions make this behave as "pinned" in both directions, and both
   belong to the page, not to this component:
     - the column holding the footer is at least viewport height, so on a
       short page the bar is pushed to the bottom rather than floating up
       under the content;
     - the content above it grows to fill that height.
   A page that does neither still gets a correct footer, just not a pinned
   one. */
.sr-footer--sticky {
  position: sticky;
  bottom: 0;
  margin-top: auto;
}

.sr-footer__version {
  flex: 1 1 0;
  min-width: 0;
  color: var(--sr-color-text-secondary);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
}

.sr-footer__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
/* An action bar with no actions is still a footer: the version stays. The
   empty group is dropped entirely rather than left to contribute its gap. */
.sr-footer__actions:empty {
  display: none;
}

/* ═══ header ══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Header
 * Reference HTML/CSS implementation, matched to the Figma Header bar set
 * (475:19980, Type=Desktop 1). Consumes @dhcw/sr-tokens CSS custom properties.
 *
 * Anatomy:
 *   .sr-header              — wrapper (utility bar + main bar)
 *     .sr-header__utility     — top strip: "Report an issue" + language toggle
 *     .sr-header__main        — logo + search + notification + avatar
 *
 * Note: the "Cymraeg" utility link carries a leading globe icon
 * (location/language, from the Figma icon set 2962:53479).
 */

.sr-header {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  background-color: var(--sr-color-surface-section-cards);
}

/* ---------- Utility bar ---------- */
.sr-header__utility {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
  height: 40px;
  padding: var(--space-4) var(--space-10);
  box-sizing: border-box;
}

.sr-header__utility-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 32px;
  padding: var(--space-1) var(--space-4);
  border: none;
  background: transparent;
  color: var(--sr-color-interactive-primary);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.sr-header__utility-link:hover {
  text-decoration: underline;
}
.sr-header__utility-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.sr-header__utility-icon svg {
  width: 100%;
  height: 100%;
}
.sr-header__utility-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-surface-section-cards), 0 0 0 4px var(--sr-color-border-focus);
}

/* ---------- Main bar ---------- */
.sr-header__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: var(--space-4) var(--space-10);
  box-sizing: border-box;
  border-bottom: 1px solid var(--sr-color-border-default);
}

.sr-header__logo img {
  display: block;
  height: 48px;
  width: auto;
}

/* ---------- Search (compact header instance) ---------- */
.sr-header__search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 240px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-md);
}
.sr-header__search-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--sr-color-text-secondary);
}
.sr-header__search-icon svg {
  width: 100%;
  height: 100%;
}
.sr-header__search-input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-header__search-input::placeholder {
  color: var(--sr-color-text-secondary);
}
.sr-header__search-input:focus {
  outline: none;
}
.sr-header__search:focus-within {
  border-color: var(--sr-color-interactive-primary);
}

/* ---------- Actions (notification + avatar) ---------- */
.sr-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.sr-header__notification {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--sr-color-text-secondary);
  cursor: pointer;
}
.sr-header__notification:hover {
  background-color: var(--sr-color-surface-subtle);
  color: var(--sr-color-text-primary);
}
.sr-header__notification:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-surface-section-cards), 0 0 0 4px var(--sr-color-border-focus);
}
.sr-header__notification svg {
  width: 24px;
  height: 24px;
}

/* ---------- Avatar (Initials, SM) ---------- */
.sr-header__avatar {
  position: relative;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background-color: var(--sr-color-interactive-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sr-header__avatar-initials {
  color: var(--sr-color-text-inverse);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
}
.sr-header__avatar-status {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--sr-color-status-success);
  border: 1.5px solid var(--sr-color-surface-section-cards);
}

/* ---------- Desktop 2 (single bar: search + org + language) ---------- */
/* No logo — this variant pairs with the sidebar Navigation, which carries the
 * brand lockup. Figma Header bar Type=Desktop 2 (815:20262).
 *
 * 64px, matching the sidebar's own header/logo block, so the two bottom rules
 * form one continuous line across the top of the app. */
.sr-header--bar .sr-header__main {
  height: 64px;
  border-bottom: none;
  border: 1px solid var(--sr-color-border-default);
  /* Search sits with the utility cluster on the right rather than being
     pushed to the far left by space-between — they read as one group. */
  justify-content: flex-end;
  gap: var(--space-4);
}
/* The bar variant has no logo competing for width, so the search can hold its
   full placeholder rather than truncating it. */
.sr-header--bar .sr-header__search {
  width: 280px;
}
.sr-header__cluster {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.sr-header__org,
.sr-header__lang {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 36px;
  padding: 0 var(--space-3);
  border: none;
  border-right: 1px solid var(--sr-color-border-subtle);
  background: transparent;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  white-space: nowrap;
  cursor: pointer;
}
.sr-header__org {
  color: var(--sr-color-text-secondary);
}
.sr-header__lang {
  color: var(--sr-color-interactive-primary);
}
.sr-header__org svg,
.sr-header__lang svg {
  width: 16px;
  height: 16px;
}
.sr-header__org:hover,
.sr-header__lang:hover {
  text-decoration: none;
  color: var(--sr-color-text-primary);
}
.sr-header__org:focus-visible,
.sr-header__lang:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-border-focus);
}

/* ---------- Hamburger (mobile) ---------- */
.sr-header__menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-color-text-primary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.sr-header__menu:hover {
  background-color: var(--sr-color-surface-subtle);
}
.sr-header__menu:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-surface-section-cards), 0 0 0 4px var(--sr-color-border-focus);
}
.sr-header__menu svg {
  width: 24px;
  height: 24px;
}

/* ---------- Mobile variants (Figma Type=Mobile 1 / Mobile 2) ---------- */
/* Single compact bar: no utility strip, no inline search. The logo uses the
 * symbol mark. Mobile 1 centres the logo with a leading hamburger; Mobile 2
 * left-aligns the logo with no hamburger. */
.sr-header--mobile .sr-header__utility,
.sr-header--mobile .sr-header__search {
  display: none;
}
.sr-header--mobile .sr-header__main {
  height: 56px;
  padding: var(--space-3) var(--space-4);
  gap: var(--space-3);
}
.sr-header--mobile .sr-header__logo {
  flex: 1 1 auto;
  min-width: 0;
}
.sr-header--mobile .sr-header__logo img {
  height: 32px;
}
/* Mobile 1 — centred logo between the hamburger and the actions. */
.sr-header--mobile.sr-header--centered .sr-header__logo {
  display: flex;
  justify-content: center;
}

/* ---------- Responsive ----------
   Breakpoints are the design system's (foundations/grid-and-layout.md):
   Tablet 768, Desktop 1024. Media queries cannot read var(), so the values
   are literal here. */

/* Below Desktop: the desktop-2 bar's 40px side padding and 280px fixed search
   are sized for a 1280px frame. Let the search flex instead so the bar fits. */
@media (max-width: 1023px) {
  .sr-header__main {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  .sr-header--bar .sr-header__search {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Below Tablet: the org name and "Cymraeg" label are the first things to go —
   the language toggle keeps its globe icon, which is the recognisable part,
   and the org switcher is not present on this variant anyway. A fixed-width
   search would otherwise push the avatar off-screen. */
@media (max-width: 767px) {
  .sr-header__main {
    padding-left: var(--space-3);
    padding-right: var(--space-3);
    gap: var(--space-2);
  }
  /* :not(.sr-icon) matters — <Icon> renders a <span>, so a bare `span`
     selector hides the globe as well as the word, leaving an empty button. */
  .sr-header--bar .sr-header__org > span:not(.sr-icon),
  .sr-header--bar .sr-header__lang > span:not(.sr-icon) {
    display: none;
  }
  .sr-header--bar .sr-header__org,
  .sr-header--bar .sr-header__lang {
    padding: 0 var(--space-2);
  }
}

/* ═══ input ═══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Input
 * Reference HTML/CSS implementation, matched to the Figma Input set (840:14593):
 * Type=Text|Password|Phone|Calendar|Time|Textarea, State=Default|Focus|Error|
 * Disabled, with optional Label and Hint. Consumes @dhcw/sr-tokens.
 *
 * Anatomy (vertical stack, gap = space-1):
 *   .sr-input__label   — field label (+ required asterisk)
 *   .sr-input__hint    — helper/hint text (above the field)
 *   .sr-input__field   — bordered row: [leading icon] control [trailing icon]
 *   .sr-input__error   — validation message (Error state only)
 *
 * State is driven by real interaction where possible: focus via :focus-within,
 * error via the .sr-input--error modifier + aria-invalid, disabled via the
 * disabled attribute + .sr-input--disabled.
 *
 * Note: Calendar/Time render as a field with a trailing icon; the picker
 * popover (date picker) is a separate, deferred component.
 */

.sr-input {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  box-sizing: border-box;
}

.sr-input__label {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-input__required {
  color: var(--sr-color-status-critical);
}

.sr-input__hint {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

.sr-input__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
}
.sr-input__field:focus-within {
  border-color: var(--sr-color-border-focus);
  /* inset ring reads as a 2px focus border with no layout shift */
  box-shadow: inset 0 0 0 1px var(--sr-color-border-focus);
}

.sr-input__field--textarea {
  align-items: stretch;
  min-height: auto;
  padding: var(--space-2) var(--space-3);
}

.sr-input__control {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--sr-color-text-primary);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
}
.sr-input__control::placeholder {
  color: var(--sr-color-text-secondary);
}
.sr-input__control:focus {
  outline: none;
}
textarea.sr-input__control {
  resize: vertical;
  min-height: 72px;
  padding: 0;
}

.sr-input__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--sr-color-text-secondary);
}
.sr-input__icon svg {
  width: 100%;
  height: 100%;
}

.sr-input__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.sr-input__toggle:hover {
  color: var(--sr-color-text-primary);
}
.sr-input__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-border-focus);
}

/* ---------- Error ---------- */
.sr-input--error .sr-input__field {
  border-color: var(--sr-color-status-critical);
  box-shadow: inset 0 0 0 1px var(--sr-color-status-critical);
}
.sr-input__error {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-status-critical);
}

/* ---------- Disabled ---------- */
.sr-input--disabled .sr-input__field {
  background-color: var(--sr-color-surface-subtle);
  border-color: var(--sr-color-border-disabled);
  box-shadow: none;
}
.sr-input--disabled .sr-input__control {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
}
.sr-input--disabled .sr-input__label,
.sr-input--disabled .sr-input__icon {
  color: var(--sr-color-text-disabled);
}

/* Accessible label with no visual footprint — used by Input's `hideLabel`,
   for search bars whose placeholder carries the visible meaning.

   NOTE: this is duplicated from table.css. Each component CSS file in this
   package is independently importable, so a shared utility has to live in
   every file that uses it until there is a foundations stylesheet to hold it.
   Worth extracting when a third component needs it. */
.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Trailing action inside the field (scan trigger, unit toggle, clear).
   Inside the border so it reads as part of the field, with a divider so it is
   still legible as a separate control rather than decoration. */
.sr-input__trailing {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  align-self: stretch;
  margin-left: var(--space-2);
  padding-left: var(--space-2);
  border-left: 1px solid var(--sr-color-border-subtle);
}

/* ═══ inset-text ══════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Inset text
 *
 * A block of prose held apart from the prose around it. Author-written, always
 * present, part of the page.
 *
 *   Inset text is part of the page. A banner is an event.
 *
 * That line is the whole boundary. A Notification banner appears because
 * something happened — a save succeeded, a record is locked, the system goes
 * down at 2am. Inset text was typed by whoever wrote the page and is there
 * every time it loads. See DDR-032.
 *
 * Deliberately absent, because each would blur that boundary:
 *   - no icon          — an icon reads as a status change
 *   - no heading       — a heading makes it a section, not an aside
 *   - no actions       — a button makes it a call to action, which IS a banner
 *   - no status colour — a coloured bar reports something; nothing happened
 *
 * The Figma component (`3613:17859`) drew this in informational blue with
 * `Status/Info` on the bar, which made it indistinguishable from the banner's
 * Call to action variant. It has been rebound to `Surface/Subtle` and
 * `Border/Strong`, and this file is that narrowed component.
 */

.sr-inset-text {
  /* A neutral surface and a neutral bar: the block is set apart, not flagged.
     Border/Strong is 3.44:1 on the page background — a visible boundary under
     SC 1.4.11 — but it is never asked to carry meaning on its own. The
     indentation and the surface do that, so it survives greyscale. */
  background: var(--sr-color-surface-subtle);
  border-left: 4px solid var(--sr-color-border-strong);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);

  /* Type is inherited, like Link. Inset text sits inside body copy and must
     read at whatever size that copy is set in; fixing a size here would make a
     14px table note render at 16px. */
  color: var(--sr-color-text-primary);
}

/* The block's own padding sets the space above the first line and below the
   last. Without this the paragraph margins add to it and the text floats. */
.sr-inset-text > :first-child { margin-top: 0; }
.sr-inset-text > :last-child { margin-bottom: 0; }

/* ═══ link ════════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Link
 * Reference HTML/CSS implementation, matched to the Figma "Link" set
 * (1636:21236) on page 1636:21000. Consumes @dhcw/sr-tokens.
 *
 * Navigation, not action. A link goes somewhere; a Button does something. If it
 * changes state without changing location, it is a Button wearing a link's
 * clothes, and a screen-reader user will be told it is a link and find it is not.
 *
 * Anatomy:
 *   .sr-link             — the link itself, inline by default
 *   .sr-link--lg/md/sm   — the three Figma sizes, for standalone links
 *   .sr-link--destructive— leads to a destructive flow
 *   .sr-link--icon       — carries a leading icon; switches to inline-flex
 *   .sr-link__icon       — the 16/20px leading icon, decorative
 *
 * Three departures from the Figma set, each with its reason. The set is the
 * design intent; these are what it takes to hold in both colour modes and in
 * running prose.
 *
 * 1. NO PADDING ON THE BASE LINK. Figma draws each variant as a 4px-padded chip,
 *    which is the room the focus ring needs. Padding on an inline link disturbs
 *    the line box of the paragraph it sits in, so the ring is drawn with
 *    `outline-offset` instead — same visual gap, no effect on layout.
 *
 * 2. THE BASE LINK INHERITS ITS TYPE. A link inside a sentence should be the
 *    size of that sentence. The three size modifiers carry the Figma values and
 *    are for standalone links, where the link is the whole line.
 *
 * 3. HOVER THICKENS THE UNDERLINE RATHER THAN CHANGING COLOUR. Figma's hover is
 *    `Interactive/Primary Hover`, which is 12.09:1 in light and **1.47:1 in
 *    dark** — a dark navy on a dark page. No existing token darkens in light and
 *    lightens in dark, so hover cannot be a colour change without a new one
 *    (proposed: `interactive/link-hover`; colour changes need sign-off, see
 *    CLAUDE.md). Thickening the underline is GDS's own hover and works in both
 *    modes with no new token.
 */

.sr-link {
  color: var(--sr-color-interactive-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Hover and active thicken the underline. The colour is deliberately unchanged;
   see note 3 above. `text-decoration-thickness` does not reflow the line. */
.sr-link:hover {
  text-decoration-thickness: 3px;
}

/* The system's focus ring: drawn outside the element so it is never clipped and
   never moves the text, with the same 2px offset the other components use. The
   underline stays — removing it on focus leaves the link identifiable by the
   ring alone, which is a colour-and-shape cue a magnifier user may be zoomed
   past. */
.sr-link:focus-visible {
  outline: 2px solid var(--sr-color-border-focus);
  outline-offset: 2px;
}

/* ---------- Type ---------- */
/* Leads to a destructive flow — "Remove patient", "Delete draft". Pair with a
   confirmation step; the link opens the flow, it does not perform the act.
   DARK MODE: interactive/destructive is a FILL colour (white sits on it) and is
   2.84:1 as text on the dark page. Recorded as an open finding in
   scripts/check-contrast.mjs — it needs a dark-safe red before a destructive
   link is used on a dark surface. */
.sr-link--destructive {
  color: var(--sr-color-interactive-destructive);
}

/* ---------- Sizes ----------
   For standalone links. An inline link takes its size from its paragraph.

   Each carries 4px of vertical padding, which is the other half of what note 1
   above dismissed. A link inside a block of text is exempt from SC 2.5.8, but a
   standalone one is not, and the line boxes alone are 24 / 20 / 16px — two of
   the three under the 24px minimum. Vertical padding on an inline element grows
   the hit area without touching the line box, so the target clears 24px at every
   size and nothing moves. This is what Figma's 4px chip padding was for. */
.sr-link--lg,
.sr-link--md,
.sr-link--sm {
  padding: var(--space-1) 0;
}
.sr-link--lg {
  font: var(--sr-type-body-m-font);
  letter-spacing: var(--sr-type-body-m-letter-spacing);
}
.sr-link--md {
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
}
.sr-link--sm {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
}

/* ---------- Leading icon ----------
   Only applied when there is an icon, because inline-flex stops a link wrapping
   across lines — which is fine for a standalone link and wrong inside prose. */
.sr-link--icon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}
.sr-link__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}
.sr-link__icon svg { width: 100%; height: 100%; }
/* The small size takes a 16px icon, so the icon never outgrows its label. */
.sr-link--sm .sr-link__icon { width: 16px; height: 16px; }

/* ---------- Disabled ----------
   Driven by aria-disabled rather than a class alone, so the styling cannot get
   out of step with what assistive technology is told. A disabled link is
   usually the wrong pattern: prefer removing the link and leaving plain text. */
.sr-link[aria-disabled='true'] {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
  pointer-events: none;
}
.sr-link[aria-disabled='true']:hover {
  text-decoration-thickness: 1px;
}

/* ═══ modal ═══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Modal dialog
 * Reference HTML/CSS implementation, matched to the Figma Modal set (3807:36855):
 * Size = Small | Medium | Large, with a Modal Content slot.
 * Consumes @dhcw/sr-tokens.
 *
 * Built on the native <dialog> element opened with showModal(). That gives us,
 * with no JavaScript and no dependency:
 *   - top-layer rendering (never clipped by overflow or z-index elsewhere)
 *   - a real ::backdrop
 *   - focus containment inside the dialog
 *   - Escape to dismiss
 *   - focus returned to the invoking element on close
 * Because it lives here in the CSS layer rather than in a React library, Blazor
 * and MAUI get the same behaviour through the shared stylesheet. See DDR-008 for
 * the base-modal / composed-pattern split.
 *
 * Anatomy (column, gap = space-4):
 *   .sr-modal__header — title + close button
 *   .sr-modal__body   — the content slot, rules above and below, scrolls if tall
 *   .sr-modal__footer — actions, right-grouped per DDR-018
 *
 * Elevation: `--elevation-overlay`, which foundations/tokens/elevation.md
 * reserves for modals, drawers and dropdowns. A card-weight shadow would read
 * flat against the modal's own backdrop.
 */

.sr-modal {
  /* Reset the user-agent dialog box. */
  padding: var(--space-6);
  border: 0;
  border-radius: var(--radius-lg);
  background-color: var(--sr-color-surface-section-cards);
  color: var(--sr-color-text-primary);
  box-shadow: var(--elevation-overlay);

  width: 480px; /* Medium is the default size */
  max-width: calc(100vw - var(--space-8));
  max-height: calc(100vh - var(--space-8));
  box-sizing: border-box;
  overflow: hidden; /* the body scrolls, not the dialog */
}

/* The UA hides a closed dialog with `display: none`. Only apply the flex layout
   while open, or the dialog would render when it should be hidden. */
.sr-modal[open] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.sr-modal::backdrop {
  /* Navy-900 at 48%, matching the shadow colour family rather than pure black. */
  background-color: rgba(27, 41, 74, 0.48);
}

/* ---------- Sizes ---------- */
.sr-modal--small { width: 380px; }
.sr-modal--medium { width: 480px; }
.sr-modal--large { width: 840px; }

/* ---------- Header ---------- */
.sr-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex: 0 0 auto;
}

.sr-modal__title {
  margin: 0;
  font: var(--sr-type-heading-xs-font);
  letter-spacing: var(--sr-type-heading-xs-letter-spacing);
  color: var(--sr-color-text-primary);
}

.sr-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  /* The glyph is 16px per the Figma; the target is padded out to 24px, the
     WCAG 2.2 SC 2.5.8 floor, since a close button has no label to extend it. */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sr-color-text-primary);
  cursor: pointer;
}
.sr-modal__close svg { width: 16px; height: 16px; }
.sr-modal__close:hover {
  background-color: var(--sr-color-surface-subtle);
}
.sr-modal__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}

/* ---------- Body ----------
   Rules above and below the content. With the container's space-4 gap this
   reproduces the Figma spacing: 16px, rule, 16px, content, 16px, rule, 16px.
   The body is itself a flex column with the same space-4 gap between its own
   children: plain text content (p, ul) gets that spacing "for free" from
   default margins, but a custom form built from unmargined component
   wrappers (Select, Input, Checkbox) has nothing supplying it and rendered
   with its fields touching until this was added. */
.sr-modal__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-block: var(--space-4);
  border-top: 1px solid var(--sr-color-border-default);
  border-bottom: 1px solid var(--sr-color-border-default);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-secondary);
}
.sr-modal__body > :first-child { margin-top: 0; }
.sr-modal__body > :last-child { margin-bottom: 0; }

/* ---------- Footer ----------
   Right-grouped, primary action last, per DDR-018. */
.sr-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  flex: 0 0 auto;
  flex-wrap: wrap;
}

/* ---------- Page scroll lock ----------
   Native <dialog> does not lock background scrolling; the wrapper adds this
   class to <body> while a modal is open. */
.sr-modal-open {
  overflow: hidden;
}

/* ---------- Narrow viewports ---------- */
@media (max-width: 480px) {
  .sr-modal,
  .sr-modal--small,
  .sr-modal--medium,
  .sr-modal--large {
    width: calc(100vw - var(--space-4));
  }
  .sr-modal__footer {
    /* Stack actions so neither is squeezed below a usable width. Primary stays
       last in DOM order, so it stacks at the bottom nearest the thumb. */
    flex-direction: column-reverse;
    align-items: stretch;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sr-modal,
  .sr-modal::backdrop {
    animation: none;
    transition: none;
  }
}

/* ═══ navigation ══════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Navigation (Sidebar)
 * Reference HTML/CSS implementation, matched to the Figma Navigation set
 * (Navigation/Sidebar/Desktop, 725:8903 — Type=Sectioned & Type=Linear, each
 * with State=Expanded / Collapsed ("rail", 108px) / Collapsed 2 (icon-only,
 * 48px)). Consumes @dhcw/sr-tokens CSS custom properties.
 *
 * Anatomy:
 *   .sr-nav                 — sidebar container (fixed width, full height column)
 *     .sr-nav__header        — logo + collapse toggle, bottom border
 *     .sr-nav__body          — scrollable section list (grows to fill space)
 *       .sr-nav__section      — one labelled group (e.g. PATIENTS)
 *         .sr-nav__section-label
 *         .sr-nav__list
 *           .sr-nav__item      — nav row: icon + label + optional badge/chevron
 *     .sr-nav__footer        — Settings / Log out, top border, pinned to bottom
 *
 * State: Default | Hover | Focus (CSS pseudo-classes) | Active (aria-current="page")
 * Submenu: items with children render trailing chevron-down; current item
 *          uses aria-current="page" rather than a bespoke "active" class so
 *          assistive tech announces the current section.
 */

.sr-nav {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* 248px — the Figma item building block (`665:21099`) is 248px wide and
     `foundations/grid-and-layout.md` derives the EPR content zones from a
     248px sidebar. The component shipped at 220px, which left the grid spec
     28px out and truncated "Appointments" whenever a row carried both a badge
     and a chevron. Reconciled to 248px on both sides at once, 2026-08. */
  width: 248px;
  /* Full-height rail that stays put while the page content scrolls. Figma
     draws the sidebar at the full 832px frame height in every variant, so
     this is the component's intended behaviour, not a layout choice left to
     the consumer. `height: 100%` does NOT work here: inside an auto-height
     flex row the percentage resolves against an indefinite height and the
     background collapses to the content. */
  position: sticky;
  top: 0;
  height: 100vh;
  flex: 0 0 auto;
  box-sizing: border-box;
  background-color: var(--sr-color-surface-section-cards);
  /* Figma Elevation/Raised — no elevation token exists yet, value matches spec */
  box-shadow: var(--elevation-raised);
}

/* Icon-only (Figma State=Collapsed 2, `3569:15850` / `2212:7613`): **48px**.
   This was 72px, which matched neither the Figma frame nor the component's own
   guidelines — the doc has always said 48. 48px holds a 24px icon with 12px
   either side; the label is a tooltip, so nothing else needs room. */
.sr-nav--collapsed {
  width: 48px;
}
.sr-nav--collapsed .sr-nav__list,
.sr-nav--collapsed .sr-nav__footer {
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}

/* "Rail" collapsed state (Figma State=Collapsed, 108px). The icon sits ABOVE
   the label, both centred, and the label stays permanently visible — it is not
   a truncated version of the expanded row. Item box is 44px tall on a 60px
   pitch (Figma 125:5360 / DS 1942:7143). Labels drop to 12px so the longest
   ("Patient Search") fits the 92px content box without truncating.

   Distinct from .sr-nav--collapsed (Figma State=Collapsed 2, 48px icon-only),
   which has no persistent label and reveals one on hover/focus instead. */
.sr-nav--rail {
  width: 108px;
}
.sr-nav--rail .sr-nav__section-label,
.sr-nav--rail .sr-nav__item-badge,
.sr-nav--rail .sr-nav__item-chevron,
.sr-nav--rail .sr-nav__submenu {
  display: none;
}
.sr-nav--rail .sr-nav__collapse {
  transform: rotate(180deg);
}
.sr-nav--rail .sr-nav__logo {
  display: none;
}
.sr-nav--rail .sr-nav__header {
  justify-content: center;
}
.sr-nav--rail .sr-nav__list {
  gap: var(--space-4);
  padding: 0 var(--space-2);
}
.sr-nav--rail .sr-nav__item {
  justify-content: center;
  padding: var(--space-1) var(--space-2);
  min-height: 44px;
}
.sr-nav--rail .sr-nav__item-main {
  flex-direction: column;
  gap: var(--space-1);
  text-align: center;
}
.sr-nav--rail .sr-nav__item-label {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
}

/* ---------- Header ---------- */
/* 64px, matching the product adaptation (Figma 125:5361) rather than the
   80px on the DS master (665:20955). 64px is also the Header bar's height, so
   the sidebar's bottom rule lines up with the header's instead of sitting 16px
   below it. See the handoff note on the 80/64 discrepancy. */
.sr-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: var(--space-3);
  border-bottom: 1px solid var(--sr-color-border-default);
  box-sizing: border-box;
}

.sr-nav__logo img {
  display: block;
  height: 28px;
  width: auto;
}

.sr-nav__collapse {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--sr-color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.sr-nav__collapse:hover {
  color: var(--sr-color-text-primary);
}
.sr-nav__collapse:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-surface-section-cards), 0 0 0 4px var(--sr-color-border-focus);
}
.sr-nav--collapsed .sr-nav__collapse {
  transform: rotate(180deg);
}
/* Collapsed: the brand lockup is hidden; only the toggle remains, centred. */
.sr-nav--collapsed .sr-nav__logo {
  display: none;
}
.sr-nav--collapsed .sr-nav__header {
  justify-content: center;
}

/* ---------- Body / sections ---------- */
.sr-nav__body {
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /* 24px below the header rule before the first item (Figma: header ends at
     64, list starts at 88). */
  padding: var(--space-6) 0 var(--space-4);
}

.sr-nav__section-label {
  display: block;
  padding: var(--space-1) var(--space-5);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
  text-transform: uppercase;
}

.sr-nav__list {
  display: flex;
  flex-direction: column;
  padding: 0 var(--space-3);
  list-style: none;
  margin: 0;
}

/* Sectioned nav packs items flush inside a group (Figma 665:20955, 36px
   pitch) because the section labels already separate them. Linear has no
   labels, so items carry their own separation: 36px item + 16px gap = the
   52px pitch of the product adaptation (125:5361). */
.sr-nav--linear .sr-nav__list {
  gap: var(--space-4);
}

.sr-nav--collapsed .sr-nav__section-label {
  display: none;
}

/* ---------- Nav item ---------- */
.sr-nav__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border: none;
  background: transparent;
  color: var(--sr-color-text-primary);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.sr-nav__item:hover {
  background-color: var(--sr-color-surface-subtle);
}
.sr-nav__item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-surface-section-cards), 0 0 0 4px var(--sr-color-border-focus);
}
.sr-nav__item[aria-current="page"] {
  background-color: var(--sr-color-surface-accent);
  color: var(--sr-color-interactive-on-accent);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
}

.sr-nav__item-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

.sr-nav__item-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: inherit;
}
.sr-nav__item-icon svg {
  width: 100%;
  height: 100%;
}

.sr-nav__item-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-nav__item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 32px;
  height: 20px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  text-align: center;
}

.sr-nav__item-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--sr-color-text-secondary);
  transition: transform 0.15s ease;
}
.sr-nav__item-chevron svg {
  width: 100%;
  height: 100%;
}
/* Expanded submenu — chevron points up. */
.sr-nav__item-chevron--open {
  transform: rotate(180deg);
}

/* ---------- Submenu ---------- */
.sr-nav__submenu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  /* Indent children under the parent's label (icon width + gaps). */
  padding: var(--space-1) var(--space-3) var(--space-1) calc(var(--space-3) + 16px + var(--space-2));
}

.sr-nav__subitem {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  color: var(--sr-color-text-secondary);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  text-decoration: none;
}
.sr-nav__subitem:hover {
  background-color: var(--sr-color-surface-subtle);
  color: var(--sr-color-text-primary);
}
.sr-nav__subitem:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-surface-section-cards), 0 0 0 4px var(--sr-color-border-focus);
}
.sr-nav__subitem[aria-current="page"] {
  color: var(--sr-color-interactive-on-accent);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
}

/* Collapsed rail never shows submenus. */
.sr-nav--collapsed .sr-nav__submenu {
  display: none;
}

.sr-nav--collapsed .sr-nav__item-badge,
.sr-nav--collapsed .sr-nav__item-chevron {
  display: none;
}
.sr-nav--collapsed .sr-nav__item {
  position: relative;
  justify-content: center;
}

/* The icon-only rail does not scroll its own body.
   Its labels are tooltips positioned outside the 48px width, and `.sr-nav__body`
   sets `overflow-y: auto` — which per the overflow spec forces `overflow-x` to
   `auto` as well, because a visible axis cannot sit beside a clipped one. The
   hidden tooltips therefore contributed to the rail's scroll width (measured:
   144px of content in a 48px rail) and it grew a horizontal scrollbar, while a
   shown tooltip would have been clipped by the same container.
   Widening the rail is not the fix — 48px is the Figma width (`3569:15850`),
   and a tooltip is deliberately wider than the rail it belongs to. Where a
   product has more destinations than fit the rail's height, the 108px
   collapsed state is the one that scrolls cleanly and keeps its labels
   in-flow. */
.sr-nav--collapsed .sr-nav__body {
  overflow: visible;
}

/* Icon-only label becomes a tooltip. Revealed on :hover AND :focus-visible —
   never hover alone. A keyboard user tabbing through the rail can only ever
   trigger :focus-visible, so a hover-only reveal would leave them with an
   icon and no name (fails WCAG 2.2 SC 1.4.13 / 2.1.1). Screen readers are
   unaffected either way — aria-label already names every item. */
.sr-nav--collapsed .sr-nav__item-label {
  position: absolute;
  left: calc(100% + var(--space-2));
  top: 50%;
  transform: translateY(-50%);
  width: max-content;
  max-width: 200px;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: var(--sr-color-text-primary);
  color: var(--sr-color-text-inverse);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  white-space: normal;
  /* The expanded row truncates its label with an ellipsis; a tooltip must not.
     It exists precisely to show the name in full, so it overrides the
     `overflow: hidden` / `text-overflow: ellipsis` it would otherwise inherit
     from the base rule and wraps inside its 200px instead. */
  overflow: visible;
  text-overflow: clip;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.1s ease;
  z-index: 20;
}
.sr-nav--collapsed .sr-nav__item:hover .sr-nav__item-label,
.sr-nav--collapsed .sr-nav__item:focus-visible .sr-nav__item-label {
  opacity: 1;
  visibility: visible;
}

/* ---------- Footer ---------- */
.sr-nav__footer {
  display: flex;
  flex-direction: column;
  padding: var(--space-2) var(--space-3) var(--space-6);
  border-top: 1px solid var(--sr-color-border-default);
}

/* ═══ patient-banner ══════════════════════════════════════════════ */
/**
 * DHCW Single Record — Patient banner
 * Reference HTML/CSS implementation, matched to the Figma Patient Banner set
 * (1711:15585): Type = Fill | Border, State = Expanded | Collapsed.
 * Consumes @dhcw/sr-tokens.
 *
 * Safety-critical. This strip is how clinical staff know which patient they are
 * looking at, so it must survive zoom and reflow without hiding identity. The
 * name, NHS number and DOB stay visible in BOTH states — collapsing hides the
 * secondary detail, never the identifiers.
 *
 * Anatomy (expanded):
 *   .sr-patient-banner__alerts   — adverse reactions + warnings cards
 *   .sr-patient-banner__identity — name, deceased tag, demographics grid, toggle
 *   .sr-patient-banner__actions  — Change patient / Open record / Print label
 *
 * Type=Fill tints the alert cards (Red/50, Yellow/100); Type=Border keeps them
 * white with a coloured rule. Fill is the default: the tint carries more
 * peripheral signal in a dense screen. Both pair colour with a text label, so
 * neither relies on colour alone (SC 1.4.1).
 */

.sr-patient-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--sr-color-surface-section-cards);
  border-radius: var(--radius-lg);
  box-shadow: var(--elevation-raised);
}

/* ---------- Alert cards ---------- */

.sr-patient-banner__alerts {
  display: flex;
  gap: var(--space-2);
  flex: 0 1 auto;
}

.sr-patient-banner__alert {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  box-sizing: border-box;
  min-width: 200px;
  max-width: 240px;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
}

.sr-patient-banner__alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}

.sr-patient-banner__alert-edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sr-color-text-primary);
  cursor: pointer;
}
.sr-patient-banner__alert-edit svg { width: 16px; height: 16px; }
.sr-patient-banner__alert-edit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}

.sr-patient-banner__alert-list {
  margin: 0;
  padding-left: var(--space-4);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-secondary);
}
.sr-patient-banner__alert-text {
  margin: 0;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
}
/* The reaction itself is the clinically significant part — emphasised. */
.sr-patient-banner__alert-value {
  color: var(--sr-color-status-critical);
}

/* Reactions card */
.sr-patient-banner__alert--reactions {
  background-color: var(--color-red-50);
}
.sr-patient-banner__alert--reactions .sr-patient-banner__alert-text {
  color: var(--sr-color-status-critical);
}

/* Warnings card */
.sr-patient-banner__alert--warnings {
  background-color: var(--color-yellow-100);
}
.sr-patient-banner__alert--warnings .sr-patient-banner__alert-text {
  color: var(--color-yellow-700);
}

/* Type=Border — white card, coloured rule instead of a tint. */
.sr-patient-banner--border .sr-patient-banner__alert {
  background-color: var(--sr-color-surface-section-cards);
  border-color: var(--sr-color-status-critical);
}

/* ---------- Identity ---------- */

.sr-patient-banner__identity {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
}

.sr-patient-banner__name-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* The patient's name is the single most important string in the product.
   Heading XS (16/24/500) — one step above the demographics it sits over. */
.sr-patient-banner__name {
  margin: 0;
  font: var(--sr-type-heading-xs-font);
  letter-spacing: var(--sr-type-heading-xs-letter-spacing);
  color: var(--sr-color-text-primary);
}

.sr-patient-banner__flag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background-color: var(--sr-color-status-critical-surface);
  color: var(--sr-color-status-critical);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  white-space: nowrap;
}

.sr-patient-banner__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  padding: 0;
  border: 0;
  background: none;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-interactive-link);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}
.sr-patient-banner__toggle svg { width: 16px; height: 16px; }
.sr-patient-banner__toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
  border-radius: var(--radius-sm);
}

/* Demographics: two independent columns when there is room, one when there is
   not. Columns are explicit rather than row-paired, so a field never jumps
   column when an optional one (date of death) is absent. */
.sr-patient-banner__details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0 var(--space-6);
  align-items: start;
  margin: 0;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-secondary);
}
.sr-patient-banner__col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Inline rather than flex so a long value (an address) wraps back to the left
   edge instead of hanging indented under the value, as designed. */
.sr-patient-banner__field {
  min-width: 0;
}
.sr-patient-banner__field dt,
.sr-patient-banner__field dd {
  display: inline;
  margin: 0;
}
.sr-patient-banner__field dt::after {
  content: " ";
}

/* Deceased date is the one demographic that carries clinical weight. */
.sr-patient-banner__field--deceased dt,
.sr-patient-banner__field--deceased dd {
  color: var(--sr-color-status-critical);
}

.sr-patient-banner__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sr-color-interactive-primary);
  cursor: pointer;
  vertical-align: middle;
}
.sr-patient-banner__copy svg { width: 14px; height: 14px; }
.sr-patient-banner__copy:hover { background-color: var(--sr-color-surface-subtle); }
.sr-patient-banner__copy:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}

/* ---------- Actions ---------- */

.sr-patient-banner__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.sr-patient-banner__actions .sr-button {
  justify-content: flex-start;
  width: 100%;
}

/* ---------- Collapsed ---------- */

.sr-patient-banner--collapsed {
  align-items: center;
  padding: var(--space-2) var(--space-4);
}
.sr-patient-banner--collapsed .sr-patient-banner__identity {
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.sr-patient-banner--collapsed .sr-patient-banner__details {
  display: flex;
  gap: var(--space-4);
}
.sr-patient-banner--collapsed .sr-patient-banner__actions {
  flex-direction: row;
}

/* Collapsed alert summary — count pills instead of the full cards. */
.sr-patient-banner__summary {
  display: flex;
  gap: var(--space-2);
  flex: 0 0 auto;
}
.sr-patient-banner__pill {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  border: 1px solid currentColor;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  white-space: nowrap;
}
.sr-patient-banner__pill--reactions { color: var(--sr-color-status-critical); }
.sr-patient-banner__pill--warnings { color: var(--color-yellow-700); }

/* Collapsing changes how much detail is shown, not which type the banner is.
   Type=Fill therefore keeps its tint on the pills (Figma 1711:15585) — the
   same Red/50 and Yellow/100 as the expanded alert cards — so a product does
   not appear to switch type when the user collapses the banner. Type=Border
   keeps the pills white with a coloured rule, matching its cards, and so
   inherits the base rule above unchanged. */
.sr-patient-banner__pill--reactions { background-color: var(--color-red-50); }
.sr-patient-banner__pill--warnings { background-color: var(--color-yellow-100); }
.sr-patient-banner--border .sr-patient-banner__pill {
  background-color: var(--sr-color-surface-section-cards);
}

/* ---------- Mid-width viewports ----------
   Stacked vertically, the actions column is only as wide as its widest
   button — but it still sits in the same row as the alerts and identity,
   competing with the identity column for width. That is what pushes the
   demographics grid down to one column well before the banner needs to
   stack outright. Wrapping actions onto their own row, horizontally, removes
   them from that competition entirely: alerts + identity keep the full row
   to themselves, so two columns of demographics survive further down. */
@media (max-width: 1439px) {
  .sr-patient-banner {
    flex-wrap: wrap;
  }
  .sr-patient-banner__actions {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .sr-patient-banner__actions .sr-button {
    width: auto;
  }
}

/* ---------- Narrow viewports ----------
   Identity must never be pushed off screen, so the banner stacks rather than
   scrolling horizontally. */
@media (max-width: 1023px) {
  .sr-patient-banner,
  .sr-patient-banner--collapsed {
    flex-direction: column;
    align-items: stretch;
  }
  .sr-patient-banner__alerts { flex-wrap: wrap; }
  .sr-patient-banner__alert { max-width: none; flex: 1 1 200px; }
  /* Actions is already row/wrap/auto-width from the 1439px tier above. */
}

/* ═══ radio ═══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Radio
 * Reference HTML/CSS implementation, matched to the Figma Radio set
 * (Radio, Radio/Templates, Radio/Building blocks) and deliberately kept
 * structurally identical to checkbox.css — same 20px control, same 28px label
 * offset, same focus ring, same error treatment. The only visual differences
 * are the round shape and the dot instead of a tick.
 *
 * Anatomy:
 *   .sr-radio-group          — <fieldset> wrapping one set of options
 *     .sr-radio-group__legend
 *     .sr-radio-group__hint
 *     .sr-radio-group__error
 *     .sr-radio-group__options[--horizontal]
 *       .sr-radio            — one option: input + label
 *
 * Use a radio group when the choice is single-select and all options should be
 * visible at once. For many options, use Select (UI Standards #18).
 */

/* ---------- Group ---------- */

.sr-radio-group {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
}

.sr-radio-group__legend {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0;
  margin-bottom: var(--space-2);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}

/* Decorative — the accessible requirement is carried by aria-required on the
   group, per components/form-fields.md. */
.sr-radio-group__required {
  color: var(--sr-color-interactive-destructive);
}

.sr-radio-group__hint {
  margin: 0 0 var(--space-2);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-secondary);
}

.sr-radio-group__error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-bottom: var(--space-2);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-interactive-destructive);
}

.sr-radio-group__error-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.sr-radio-group__error-icon svg { width: 100%; height: 100%; }

.sr-radio-group--error {
  padding-left: var(--space-3);
  border-left: var(--border-width-2) solid var(--sr-color-interactive-destructive);
}

.sr-radio-group__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.sr-radio-group__options--horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
}

/* ---------- Single option ---------- */

.sr-radio {
  position: relative;
  display: flex;
  align-items: flex-start;
  min-height: 20px;
}

.sr-radio__input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 20px;
  height: 20px;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.sr-radio__label {
  display: inline-block;
  padding-left: 28px; /* 20px control + space-2 gap */
  min-height: 20px;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-primary);
  cursor: pointer;
}

/* The ring */
.sr-radio__label::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  background-color: var(--sr-color-surface-section-cards);
  /* Border/Strong, not Border/Default — same SC 1.4.11 reasoning as Checkbox:
     Grey/200 gave 1.37:1 on white against the 3:1 the criterion requires. */
  border: var(--border-width-2) solid var(--sr-color-border-strong);
  border-radius: var(--radius-full);
}

/* The dot, hidden until checked */
.sr-radio__label::after {
  content: "";
  position: absolute;
  opacity: 0;
  box-sizing: border-box;
  top: 5px;
  left: 5px;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--sr-color-text-inverse);
}

.sr-radio__input:checked + .sr-radio__label::after {
  opacity: 1;
}

/* ---------- States ---------- */

/* Hover previews the checked colour; Border/Strong is now the rest state. */
.sr-radio__input:hover:not(:disabled) + .sr-radio__label::before {
  border-color: var(--sr-color-interactive-primary);
}

.sr-radio__input:checked + .sr-radio__label::before {
  background-color: var(--sr-color-interactive-primary);
  border-color: var(--sr-color-interactive-primary);
}
.sr-radio__input:checked:hover:not(:disabled) + .sr-radio__label::before {
  background-color: var(--sr-color-interactive-primary-hover);
  border-color: var(--sr-color-interactive-primary-hover);
}

/* Focus ring: 3px Cyan/700 outside stroke on the control only (DDR-006). */
.sr-radio__input:focus-visible + .sr-radio__label::before {
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}

/* Error: red ring in every checked state. */
.sr-radio--error .sr-radio__label::before {
  border-color: var(--sr-color-interactive-destructive);
}

/* ---------- Disabled ---------- */

.sr-radio__input:disabled + .sr-radio__label {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
}
.sr-radio__input:disabled + .sr-radio__label::before {
  background-color: var(--sr-color-surface-subtle);
  border-color: var(--sr-color-border-subtle);
}
.sr-radio__input:disabled:checked + .sr-radio__label::before {
  background-color: var(--sr-color-interactive-disabled);
  border-color: var(--sr-color-interactive-disabled);
}

/* ---------- Card types ---------- */

/*
 * Figma Radio (915:30830) ships four types. `Simple` is the label-only option
 * above; the three below put the option in a bordered box so it can carry a
 * description, and differ only in what is on the left and how selection is
 * shown:
 *
 *   Card Radio  ring on the left, selection shown by the border turning navy
 *   Card        ring on the left, selection shown by the whole card filling
 *   Card Icon   24px icon on the left, selection shown by the whole card filling
 *
 * The box lives on the label, not on .sr-radio, so `:checked +` reaches it with
 * a sibling selector and no :has() — the same mechanism the simple radio uses
 * for its ring, and it keeps the whole card clickable.
 *
 * Deviation from Figma, deliberate: Card Radio draws a 16px ring there and the
 * other types draw 20px. Code uses 20px everywhere, matching Simple and
 * Checkbox. One control size is worth more than the 4px; the Figma set should
 * be normalised to 20px rather than the code forked to match it.
 */

.sr-radio--card {
  display: block;
  min-height: 0;
}

.sr-radio--card .sr-radio__input {
  top: 10px; /* card padding 8 + 2 to sit on the label's first text line */
  left: 12px;
}

.sr-radio--card .sr-radio__label {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  padding: var(--space-2) var(--space-3) var(--space-2) 40px; /* 12 pad + 20 ring + 8 gap */
  background-color: var(--sr-color-surface-section-cards);
  border: var(--border-width-default) solid var(--sr-color-border-default);
  border-radius: var(--radius-md);
}

.sr-radio--card .sr-radio__label::before { top: 10px; left: 12px; }
.sr-radio--card .sr-radio__label::after  { top: 15px; left: 17px; }

.sr-radio__title {
  display: block;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-primary);
}

.sr-radio__description {
  display: block;
  margin-top: var(--space-1);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

/* Focus moves to the whole card, since the card is the target. */
.sr-radio--card .sr-radio__input:focus-visible + .sr-radio__label {
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}
.sr-radio--card .sr-radio__input:focus-visible + .sr-radio__label::before {
  box-shadow: none;
}

.sr-radio--card .sr-radio__input:hover:not(:disabled) + .sr-radio__label {
  border-color: var(--sr-color-border-strong);
}

/* Type: Card Radio — selection is the border. */
.sr-radio--card-outline .sr-radio__input:checked + .sr-radio__label {
  border-color: var(--sr-color-interactive-primary);
}

/* Types: Card and Card Icon — selection fills the card, so every piece of text
   and the dot invert with it. */
.sr-radio--card-filled .sr-radio__input:checked + .sr-radio__label {
  background-color: var(--sr-color-interactive-primary);
  border-color: var(--sr-color-interactive-primary);
}
.sr-radio--card-filled .sr-radio__input:checked + .sr-radio__label .sr-radio__title,
.sr-radio--card-filled .sr-radio__input:checked + .sr-radio__label .sr-radio__description {
  color: var(--sr-color-text-inverse);
}
.sr-radio--card-filled .sr-radio__input:checked + .sr-radio__label::before {
  background-color: transparent;
  border-color: var(--sr-color-text-inverse);
}

/* Type: Card Icon — a 24px icon replaces the ring. The icon is decorative; the
   label still carries the accessible name. */
.sr-radio--card-icon .sr-radio__label {
  padding-left: 44px; /* 12 pad + 24 icon + 8 gap */
}
.sr-radio--card-icon .sr-radio__label::before,
.sr-radio--card-icon .sr-radio__label::after {
  content: none;
}

.sr-radio__icon {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 24px;
  height: 24px;
  color: var(--sr-color-text-primary);
  pointer-events: none;
}
.sr-radio__icon svg { width: 100%; height: 100%; }

.sr-radio--card-icon .sr-radio__input:checked ~ .sr-radio__icon {
  color: var(--sr-color-text-inverse);
}

.sr-radio--card.sr-radio--error .sr-radio__label {
  border-color: var(--sr-color-interactive-destructive);
}

.sr-radio--card .sr-radio__input:disabled + .sr-radio__label {
  background-color: var(--sr-color-surface-subtle);
  border-color: var(--sr-color-border-subtle);
}
.sr-radio--card .sr-radio__input:disabled + .sr-radio__label .sr-radio__title,
.sr-radio--card .sr-radio__input:disabled + .sr-radio__label .sr-radio__description {
  color: var(--sr-color-text-disabled);
}
.sr-radio--card-filled .sr-radio__input:disabled:checked + .sr-radio__label {
  background-color: var(--sr-color-interactive-disabled);
  border-color: var(--sr-color-interactive-disabled);
}
.sr-radio--card-filled .sr-radio__input:disabled:checked + .sr-radio__label .sr-radio__title,
.sr-radio--card-filled .sr-radio__input:disabled:checked + .sr-radio__label .sr-radio__description {
  color: var(--sr-color-text-inverse);
}

/* Accessible name with no visual footprint — used by RadioGroup's `hideLegend`
   where the surrounding copy already names the choice on screen. Same
   declaration as input.css and table.css; there is no shared utilities
   stylesheet yet, and a component's CSS must stand alone when imported by
   itself. Consolidating the three is worth doing once one exists. */
.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══ search ══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Search
 * Reference HTML/CSS implementation, matched to the Figma "Search" set
 * (1715:375) and "Search Suggestions" set (1716:238) on page 1701:17851.
 * Consumes @dhcw/sr-tokens.
 *
 * Search is the ONLY search field in the system. The Input set's `Type=Search`
 * variants were removed on 2026-06-04 — a search box is not a text input with a
 * different icon, because it owns a clear affordance, a loading state, an
 * optional submit button and (for Typeahead) a suggestions popover.
 *
 * Types, matching the Figma `Type` property:
 *   Basic            — live inline filter, no submit step.
 *   With Button      — submitted query; .sr-search__submit alongside the field.
 *   With Icon Button — same, but a 40x40 icon-only button where space is tight.
 *   Typeahead        — Basic plus the .sr-search__suggestions popover.
 *
 * Anatomy (vertical stack, gap = space-1), mirroring Input and Select:
 *   .sr-search__label       — field label (+ required asterisk)
 *   .sr-search__hint        — helper text (above the field)
 *   .sr-search__row         — field + optional submit button, side by side
 *   .sr-search__control     — positioning context for the popover
 *   .sr-search__field       — bordered row: search icon, control, clear/spinner
 *   .sr-search__suggestions — listbox popover (role="listbox")
 *   .sr-search__suggestion  — one result row (role="option")
 *   .sr-search__error       — validation message (Error state only)
 *
 * Semantics: for Typeahead the control is role="combobox" with aria-expanded,
 * aria-controls and aria-activedescendant; see search.stories.js for a working
 * keyboard reference, and Search.jsx in @dhcw/sr-react.
 */

.sr-search {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  box-sizing: border-box;
}

.sr-search__label {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-search__required {
  color: var(--sr-color-status-critical);
}

.sr-search__hint {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

/* Field and submit button sit on one row, 8px apart. */
.sr-search__row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
}

/* Positioning context for the suggestions popover. It wraps the FIELD only, so
   the popover aligns to the input rather than to the input plus the button. */
.sr-search__control {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
}

/* ---------- Field ---------- */
.sr-search__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 var(--space-3); /* 12px */
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
}

/* Focus — the 1px border stays and a 3px ring is drawn OUTSIDE it, so nothing
   in the row moves when focus lands. Same treatment as Select; DDR-006. */
.sr-search__field:focus-within {
  border-color: var(--sr-color-border-default);
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}

.sr-search__icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--sr-color-text-secondary);
}
.sr-search__icon svg { width: 100%; height: 100%; }

.sr-search__control-input {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--sr-color-text-primary);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
}
.sr-search__control-input::placeholder {
  color: var(--sr-color-text-secondary);
}
.sr-search__control-input:focus { outline: none; }
/* We draw our own clear button, so suppress the browser's native one — two
   crosses in the same field is worse than none. */
.sr-search__control-input::-webkit-search-cancel-button,
.sr-search__control-input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* Clear (x) — present once there is a query. */
.sr-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--sr-color-text-secondary);
  cursor: pointer;
}
.sr-search__clear svg { width: 20px; height: 20px; }
.sr-search__clear:hover { color: var(--sr-color-text-primary); }
.sr-search__clear:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-border-focus);
}

/* Spinner — replaces the clear button while a query is in flight. */
.sr-search__spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--sr-color-text-secondary);
}
.sr-search__spinner svg {
  width: 100%;
  height: 100%;
  animation: sr-search-spin 1s linear infinite;
}
@keyframes sr-search-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sr-search__spinner svg { animation-duration: 3s; }
}

/* ---------- Submit button ----------
   Sized to the field (40px) rather than to the Button component's own metrics,
   which is why this is not a Button instance: a Button next to a 40px field
   would not line up. Visual language is Button/Primary. */
.sr-search__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 var(--space-6); /* 24px */
  border: none;
  border-radius: var(--radius-sm);
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  cursor: pointer;
}
.sr-search__submit:hover:not(:disabled) {
  background-color: var(--sr-color-interactive-primary-hover);
}
.sr-search__submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}
/* Disabled until the query is valid — the Figma Default state ships this way,
   so an empty search bar cannot be submitted. */
.sr-search__submit:disabled {
  background-color: var(--sr-color-interactive-disabled);
  cursor: not-allowed;
}

/* Icon-only variant: a 40x40 square, matching the field height. Above the
   24x24 minimum of WCAG 2.2 SC 2.5.8 (AA). */
.sr-search__submit--icon {
  width: 40px;
  padding: 0;
}
.sr-search__submit--icon svg { width: 20px; height: 20px; }

/* ---------- Suggestions popover (Typeahead) ---------- */
.sr-search__suggestions {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-overlay);
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
.sr-search__suggestions[hidden] { display: none; }

/* A result row is two lines — the thing found, then what disambiguates it.
   Unlike a Select option (one line, a value being chosen) a suggestion is a
   RESULT, which is why this list is styled separately rather than reusing
   .sr-select__option. */
.sr-search__suggestion {
  display: flex;
  flex-direction: column;
  gap: 1px;
  /* Figma draws 10/14; both are off the 4px grid, so this snaps to 8/12 —
     the same left inset as a Select option, which keeps the two lists aligned
     when they sit in the same form. */
  padding: var(--space-2) var(--space-3);
  background-color: var(--sr-color-surface-section-cards);
  cursor: pointer;
}
.sr-search__suggestion + .sr-search__suggestion {
  border-top: 1px solid var(--sr-color-border-subtle);
}

.sr-search__suggestion-label {
  font: var(--sr-type-body-m-font);
  letter-spacing: var(--sr-type-body-m-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-search__suggestion-meta {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

/* Hover and keyboard-active share one treatment: a soft accent wash. The row
   keeps Text/Primary rather than inverting, because inverted text would fight
   the bolded match inside it. The active row is also carried by
   aria-activedescendant, so this is not a colour-only cue. */
.sr-search__suggestion:hover,
.sr-search__suggestion.is-active {
  background-color: var(--sr-color-surface-accent);
}

/* The matched substring, bolded in place. */
.sr-search__match {
  font-weight: var(--font-weight-bold);
}

/* Loading and empty rows live in the same popover. */
.sr-search__status-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: var(--space-4) var(--space-3);
  color: var(--sr-color-text-secondary);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  text-align: center;
}
.sr-search__status-row svg { width: 20px; height: 20px; }
.sr-search__status-row .sr-search__spinner { color: inherit; }

/* ---------- Error ---------- */
.sr-search--error .sr-search__field {
  border-color: var(--sr-color-status-critical);
  box-shadow: inset 0 0 0 1px var(--sr-color-status-critical);
}
.sr-search--error .sr-search__field:focus-within {
  box-shadow:
    inset 0 0 0 1px var(--sr-color-status-critical),
    0 0 0 3px var(--sr-color-border-focus);
}
/* Icon as well as colour, so the error is not carried by the border alone. */
.sr-search__error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-status-critical);
}
.sr-search__error-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.sr-search__error-icon svg { width: 100%; height: 100%; }

/* ---------- Disabled ---------- */
.sr-search--disabled .sr-search__field {
  background-color: var(--sr-color-surface-background);
  border-color: var(--sr-color-border-disabled);
  box-shadow: none;
}
.sr-search--disabled .sr-search__control-input {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
}
.sr-search--disabled .sr-search__label,
.sr-search--disabled .sr-search__icon {
  color: var(--sr-color-text-disabled);
}

/* Accessible label with no visual footprint — for a standalone search bar
   whose placeholder carries the visible meaning. Every search field still
   needs a real label; hiding it is a layout choice, not a licence to drop it.

   NOTE: duplicated from input.css and table.css. Each component stylesheet in
   this package is independently importable, so a shared utility has to live in
   every file that uses it until there is a foundations stylesheet to hold it.
   Three copies now — this is the point at which extracting it is overdue. */
.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ═══ segmented-control ═══════════════════════════════════════════ */
/**
 * DHCW Single Record — Segmented control
 * Reference HTML/CSS implementation, matched to the Figma Toggle/Segmented
 * Control set (segment building block 2752:40, two-option example 2770:55996):
 * State=Default|Hover|Focus|Disabled × Selected. Consumes @dhcw/sr-tokens.
 *
 * A single-select control: choose ONE of a small set of mutually-exclusive
 * options/views (e.g. Quick search | Advanced). NOT the Toggle Switch (boolean
 * on/off). Options are buttons with aria-pressed inside a role="group" (or
 * implement as a radiogroup/tablist with arrow-key navigation); exactly one is
 * selected at a time.
 */

.sr-segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1); /* 4px */
  padding: var(--space-1); /* 4px */
  background-color: var(--sr-color-surface-subtle);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-lg); /* 8px track */
}

.sr-segmented__option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) 18px; /* 8px vertical, 18px horizontal (Figma) */
  border: none;
  border-radius: var(--radius-md); /* 4px segment */
  background: transparent;
  color: var(--sr-color-text-secondary);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* Hover (unselected) — soft blue wash + brand-blue text. */
.sr-segmented__option:hover:not([aria-pressed="true"]):not(:disabled) {
  background-color: var(--sr-color-surface-accent);
  color: var(--sr-color-interactive-primary);
}

/* Selected — brand blue fill, inverse text, subtle lift. */
.sr-segmented__option[aria-pressed="true"] {
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
}

/* Focus — Cyan/700 ring outside the segment (DDR-006). */
.sr-segmented__option:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-surface-subtle), 0 0 0 4px var(--sr-color-border-focus);
}
.sr-segmented__option[aria-pressed="true"]:focus-visible {
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.06),
    0 0 0 2px var(--sr-color-surface-subtle),
    0 0 0 4px var(--sr-color-border-focus);
}

/* Disabled — unselected: muted text; selected: muted outline (not a filled blue). */
.sr-segmented__option:disabled {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
}
.sr-segmented__option[aria-pressed="true"]:disabled {
  background-color: var(--sr-color-surface-subtle);
  border: 1px solid var(--sr-color-border-default);
  color: var(--sr-color-text-disabled);
  box-shadow: none;
}

/* ═══ select ══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Select
 * Reference HTML/CSS implementation, matched to the Figma Select set
 * (building blocks 1517:14820, option items 1517:14856, composed 1517:14471).
 * Consumes @dhcw/sr-tokens.
 *
 * Anatomy (vertical stack, gap = space-1), mirroring Input:
 *   .sr-select__label  — legend/label (+ required asterisk)
 *   .sr-select__hint   — helper text (above the control)
 *   .sr-select__trigger— the closed control: value + chevron-down
 *   .sr-select__menu   — listbox popover (role="listbox")
 *   .sr-select__option — one option (role="option")
 *   .sr-select__error  — validation message (Error state only)
 *
 * States (from Figma building blocks):
 *   Default  — white fill, 1px Border/Default.
 *   Focus/open — 3px Border/Focus (Cyan/700) outer ring.
 *   Error    — Status/Critical border.
 *   Disabled — Surface/Background fill, Border/Disabled, Text/Disabled.
 */

.sr-select {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  width: 100%;
  box-sizing: border-box;
}

.sr-select__label {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}
.sr-select__required {
  color: var(--sr-color-status-critical);
}

.sr-select__hint {
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

/* Positioning context for the popover. */
.sr-select__control {
  position: relative;
  width: 100%;
}

/* ---------- Trigger (closed control) ---------- */
.sr-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 var(--space-2) 0 var(--space-3); /* pr 8, pl 12 */
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-primary);
  text-align: left;
  cursor: pointer;
}
/* Placeholder (no value chosen yet). */
.sr-select__trigger[data-placeholder="true"] {
  color: var(--sr-color-text-secondary);
}
.sr-select__value {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sr-select__chevron {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--sr-color-text-secondary);
  transition: transform 0.15s ease;
}
.sr-select__chevron svg { width: 100%; height: 100%; }

.sr-select__trigger:focus-visible,
.sr-select__trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--sr-color-border-default);
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}
.sr-select__trigger[aria-expanded="true"] .sr-select__chevron {
  transform: rotate(180deg);
}

/* ---------- Menu (listbox popover) ---------- */
.sr-select__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
  box-shadow: var(--elevation-overlay);
  max-height: 280px;
  overflow-y: auto;
}
.sr-select__menu[hidden] { display: none; }

.sr-select__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 40px;
  padding: 0 var(--space-2) 0 var(--space-3);
  border-radius: var(--radius-sm);
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-secondary);
  cursor: pointer;
}
.sr-select__option-chevron {
  display: inline-flex;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: inherit;
}
.sr-select__option-chevron svg { width: 100%; height: 100%; }

/* Hover — soft Info Blue/50 wash, text stays secondary (distinct from active). */
.sr-select__option:hover {
  background-color: var(--sr-color-surface-accent);
  color: var(--sr-color-text-secondary);
}
/* Keyboard-active and selected — brand-blue fill, inverse text (+ white chevron). */
.sr-select__option.is-active,
.sr-select__option[aria-selected="true"] {
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
}
.sr-select__option[aria-disabled="true"] {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
  background: transparent;
}

/* ---------- Error ---------- */
.sr-select--error .sr-select__trigger {
  border-color: var(--sr-color-status-critical);
  box-shadow: inset 0 0 0 1px var(--sr-color-status-critical);
}
.sr-select--error .sr-select__trigger:focus-visible,
.sr-select--error .sr-select__trigger[aria-expanded="true"] {
  box-shadow: inset 0 0 0 1px var(--sr-color-status-critical), 0 0 0 3px var(--sr-color-border-focus);
}
.sr-select__error {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-status-critical);
}
.sr-select__error-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}
.sr-select__error-icon svg { width: 100%; height: 100%; }

/* ---------- Disabled ---------- */
.sr-select--disabled .sr-select__trigger {
  background-color: var(--sr-color-surface-background);
  border-color: var(--sr-color-border-disabled);
  color: var(--sr-color-text-disabled);
  box-shadow: none;
  cursor: not-allowed;
}
.sr-select--disabled .sr-select__chevron {
  color: var(--sr-color-text-disabled);
}
.sr-select--disabled .sr-select__label {
  color: var(--sr-color-text-disabled);
}

/* ═══ stat-card ═══════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Stat card
 * Reference HTML/CSS implementation, matched to the Figma "Stat Card" set
 * (431:11996) on page 1517:15118. Consumes @dhcw/sr-tokens.
 *
 * One number, named. A dashboard made of these is a pattern; the card itself is
 * a component, which is why it lives here and the dashboard does not.
 *
 * Anatomy — a two-column grid, content on the left and the icon on the right:
 *   .sr-stat-card          — the card: surface, radius, shadow, optional accent
 *   .sr-stat-card__label   — what the number counts
 *   .sr-stat-card__value   — the number
 *   .sr-stat-card__support — one supporting line: a period, a note, a change
 *   .sr-stat-card__delta   — the signed change inside the supporting line
 *   .sr-stat-card__icon    — decorative, 20x20, hidden from AT
 *
 * The icon is a grid child pinned to the top of the right-hand column, NOT a
 * sibling of the label. It used to sit inside a `__head` row with the label,
 * which meant the value-first layout carried the icon down the card with it —
 * the icon belongs to the card, not to whichever text happens to be first.
 *
 * Layouts, replacing the five `Type` variants the Figma set enumerates
 * (DDR-031). Figma's Title Top / Title_Hint / Trend are one layout with and
 * without a supporting line, so they collapse:
 *   (default)                  — label, value, optional supporting line
 *   .sr-stat-card--value-first — value, then label. Figma `Count Top`
 *   .sr-stat-card--inline      — value and label on one row. Figma `Single line`
 *
 * The accent bar is OPT-IN. The default card has no bar, matching Figma's
 * `Border=Hidden` variants, which are the ones reached for most often.
 *
 * The card is NOT interactive. It has no hover, no focus and no role. If a
 * number should open something, put a Link under it or make the whole tile a
 * Button — a div with a click handler is neither, and this component will not
 * grow into one.
 */

.sr-stat-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-2);
  row-gap: var(--space-1);
  align-content: start;
  box-sizing: border-box;
  /* Surface/Small Cards, which is what all ten Figma variants are bound to. It
     was section-cards here until 2026-09-16 — the same value in both modes, so
     nothing looked wrong, but it meant the dark-mode card had no plane of its
     own. See the dark-mode block at the foot of this file. */
  background-color: var(--sr-color-surface-small-cards);
  border-radius: var(--radius-md);
  box-shadow: var(--elevation-raised);

  /* The accent bar is always in the box, transparent when there is no accent,
     and the left padding is short by its width. An accented card and a plain
     one are then the same size and inset their text alike, which is what lets
     the two sit in one row without the text stepping 4px sideways. */
  border-left: 4px solid transparent;
  padding: var(--space-4);
  padding-left: calc(var(--space-4) - 4px);
}

/* ---------- Accent: opt-in emphasis ----------
   Emphasis, not status on its own. A bar that changes colour and nothing else
   carries meaning in colour alone (SC 1.4.1), so a warning or critical card
   must also say so in the supporting line — the accent reinforces the words, it
   does not replace them. See the guidelines. */
.sr-stat-card--accent-primary { border-left-color: var(--sr-color-interactive-primary); }
.sr-stat-card--accent-warning { border-left-color: var(--sr-color-status-warning); }
.sr-stat-card--accent-critical { border-left-color: var(--sr-color-status-critical); }

/* ---------- Content ----------
   Rows are explicit rather than auto-placed, so a layout modifier can move the
   value above the label without dragging the icon along with it. */

/* Figma draws the label in Interactive/Primary. It is not that here, for two
   reasons: nothing on this card is interactive, and in dark mode the dark-mode
   primary lands at 2.07:1 on the dark card surface. Text/Primary is the correct
   semantic and clears 4.5:1 in both modes; the hierarchy is carried by size. */
.sr-stat-card__label {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}

.sr-stat-card__value {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  font: var(--sr-type-heading-m-font);
  letter-spacing: var(--sr-type-heading-m-letter-spacing);
  color: var(--sr-color-text-primary);
  /* A column of stat cards is read down the digits, so they have to line up. */
  font-variant-numeric: tabular-nums;
}

.sr-stat-card__support {
  grid-column: 1;
  grid-row: 3;
  margin: 0;
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing);
  color: var(--sr-color-text-secondary);
}

/* Decorative. The label already names the number, so an icon that repeats it
   adds nothing to a screen reader and is marked aria-hidden in the markup.
   Pinned to the top of the card in every layout. */
.sr-stat-card__icon {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--sr-color-text-secondary);
}
.sr-stat-card__icon svg { width: 100%; height: 100%; }

/* The signed change, as a small tinted chip rather than coloured text.
   Status text straight onto the card surface is a pair the token set does not
   support: the status colours are deliberately pinned to their light-mode 700
   steps "because status surfaces stay light in dark mode", so `status/critical`
   on a dark card is 1.97:1. On its own status surface it is a pair the system
   already asserts and already passes, in both modes — so the delta carries its
   surface with it.

   Colour is still the second signal, never the first: the sign is part of the
   text, so "-5%" reads as a fall in greyscale, to a screen reader, and to
   someone who cannot tell the red from the green. Figma draws the delta bolder;
   it is not bolded here because the scale has no bold caption (DDR-005). */
.sr-stat-card__delta {
  display: inline-block;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}
.sr-stat-card__delta--up {
  color: var(--sr-color-status-success);
  background-color: var(--sr-color-status-success-surface);
}
.sr-stat-card__delta--down {
  color: var(--sr-color-status-critical);
  background-color: var(--sr-color-status-critical-surface);
}
/* A movement that is neither good nor bad — a count that simply changed. No
   chip, because a neutral tint would be a colour that means nothing. */
.sr-stat-card__delta--neutral { color: var(--sr-color-text-secondary); }

/* ---------- Value first (Figma `Count Top`) ----------
   The number leads and the label explains it. For a row of cards scanned as
   numbers rather than read as sentences. Only the two text rows swap; the icon
   keeps row 1 of column 2 and stays at the top of the card. */
.sr-stat-card--value-first .sr-stat-card__value { grid-row: 1; }
.sr-stat-card--value-first .sr-stat-card__label { grid-row: 2; }

/* ---------- Inline (Figma `Single line`) ----------
   One row, and deliberately the short card: roughly 40px against the stacked
   card's ~100px. For a strip above a table, a toolbar, or a phone screen where
   a full card would take the space the content needs.

   `align-self: start` is what keeps it short. Grid items stretch to the tallest
   in their row by default, so an inline card sharing a row with a stacked one
   was being pulled to the stacked card's height — short in its own markup and
   not short on the page, which is the only place it matters. */
.sr-stat-card--inline {
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  align-self: start;
  column-gap: var(--space-2);
  row-gap: 0;
  padding: var(--space-2) var(--space-3);
  padding-left: calc(var(--space-3) - 4px);
}
/* The number leads, as the Figma variant draws it. */
.sr-stat-card--inline .sr-stat-card__value {
  grid-column: 1;
  grid-row: 1;
  font: var(--sr-type-heading-s-font);
  letter-spacing: var(--sr-type-heading-s-letter-spacing);
}
.sr-stat-card--inline .sr-stat-card__label {
  grid-column: 2;
  grid-row: 1;
  color: var(--sr-color-text-secondary);
}
.sr-stat-card--inline .sr-stat-card__support { grid-column: 3; grid-row: 1; }
/* No icon at this size: it would be the widest thing in the card and say the
   least. The React component drops it from the markup; this is the backstop for
   hand-written HTML. */
.sr-stat-card--inline .sr-stat-card__icon { display: none; }

/* ---------- Dark mode: everything on the card goes white ----------
   In dark mode Surface/Small Cards is Cyan/850, the teal that makes a stat tile
   read as its own plane against the navy section card behind it (2.70:1, where
   the two matching left it at 1.00:1). See DDR-033.

   Cyan/850 sits in the middle of the luminance range, so almost nothing reads
   on it. White is 4.87:1 — over the 4.5:1 line, but only just, and there is no
   headroom below it: `text/secondary` is 3.56:1, and the lightest grey that
   still reads as grey is under the line too. The full table is in DDR-033.
   So the secondary line cannot stay secondary *by colour* here. It takes
   `text/on-fill`, which is white in both modes precisely for saturated fills,
   and the hierarchy is carried by size instead — 24px value, 14px label, 12px
   support, which is a stronger signal than the tint was anyway.

   This is also why this surface is text-only. A border, a control outline or an
   interactive fill on the teal is under 2:1 and cannot be fixed by choosing a
   different stop, which is what keeps checkbox cards, radio cards, the search
   menu and the footer on section-cards. */
[data-theme="dark"] .sr-stat-card__support,
[data-theme="dark"] .sr-stat-card__icon,
[data-theme="dark"] .sr-stat-card__delta--neutral,
[data-theme="dark"] .sr-stat-card--inline .sr-stat-card__label {
  color: var(--sr-color-text-on-fill);
}

/* ---------- Row of cards ----------
   Provided because every use of this component so far has been a row of them,
   and a grid written from scratch each time is a grid that drifts. Stacked
   cards share a height so their accent bars line up; inline cards opt out. */
.sr-stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

/* A strip of inline cards: they size to their content rather than sharing a
   twelfth of the width, and wrap onto another line when the row runs out. */
.sr-stat-cards--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ═══ status-indicator ════════════════════════════════════════════ */
/**
 * DHCW Single Record — Status indicator (filled)
 * The Figma "warnings/*" group: filled status badges (success / error /
 * warning). These are NOT part of the outline icon set — they are two-tone
 * filled marks whose colour carries meaning, driven by semantic status
 * tokens. Geometry is derived from Lucide (ISC), not traced from third-party
 * artwork. See DDR-013.
 *
 * The disc/triangle uses currentColor (set by the status modifier); the glyph
 * is knocked out. Success/error use a white glyph on a dark fill; warning uses
 * a dark glyph on amber for legibility (yellow-sign convention).
 */

.sr-status-indicator {
  display: inline-flex;
  flex: 0 0 auto;
  line-height: 0;
}
.sr-status-indicator svg {
  width: 100%;
  height: 100%;
}

.sr-status-indicator--sm { width: 16px; height: 16px; }
.sr-status-indicator--md { width: 20px; height: 20px; }
.sr-status-indicator--lg { width: 24px; height: 24px; }

.sr-status-indicator--success { color: var(--sr-color-status-success); }
.sr-status-indicator--error { color: var(--sr-color-status-critical); }
.sr-status-indicator--warning { color: var(--sr-color-status-warning); }

/* "No status recorded" — the dash the Figma page draws as its fourth mark,
   confirmed as the `action/remove` icon rather than a new one. It is the
   conventional not-applicable mark in a status column, so it is muted rather
   than coloured: there is nothing to report, and a colour would report it.

   It is the one mark in the family that is a bare stroke rather than a glyph
   knocked out of a filled shape. That is what is drawn, and it is also what a
   dash should be — normalising it into a filled disc would make "nothing here"
   look like a state. Text/Secondary clears 3:1 for SC 1.4.11. */
.sr-status-indicator--none { color: var(--sr-color-text-secondary); }

/* The dash comes from the outline icon set, which is drawn at 1px (DDR-013).
   Beside three solid two-tone discs at 16px a 1px rule reads as a rendering
   fault rather than a mark, so it takes the family's weight here. This is the
   only place the icon set's stroke is overridden, and it is overridden in the
   stylesheet rather than by redrawing the path — the geometry stays shared. */
.sr-status-indicator--none svg { stroke-width: 2; }

/* ═══ switch ══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Toggle switch
 * Reference HTML/CSS implementation, matched to the Figma Toggle/Switch set
 * (958:10576): State=Default|Hover|Focus|Disabled × Checked=On|Off.
 * Consumes @dhcw/sr-tokens.
 *
 * Rendered as a <button role="switch" aria-checked>; the visible label is the
 * accessible name. Track 44×24, thumb 20 with a 2px inset (20px travel).
 */

.sr-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.sr-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 24px;
  border-radius: var(--radius-full);
  /* Border/Strong, not Border/Default. The thumb's POSITION is what says on or
     off, so the thumb has to be distinguishable from the track it sits in —
     SC 1.4.11, 3:1. On Border/Default the white thumb was 1.37:1, effectively
     invisible, and the track itself was 1.26:1 against the page so the whole
     control had no boundary either. Border/Strong fixes both: 3.75:1 thumb to
     track, 3.44:1 track to page. */
  background-color: var(--sr-color-border-strong);
  transition: background-color 0.15s ease;
}
.sr-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
  /* Surface/Section Cards flips with the mode — white on light, dark navy on
     dark — which is what keeps the thumb legible against a track that also
     flips (Border/Strong is Grey/500 light, Navy/300 dark). 3.75:1 light,
     5.13:1 dark. A fixed white thumb would be 2.57:1 in dark mode. */
  background-color: var(--sr-color-surface-section-cards);
  transition: transform 0.15s ease;
}

/* Checked, the thumb sits on a FILLED interactive surface rather than a neutral
   track, so it takes the colour meant for exactly that — white in both modes.
   Leaving it on the flipping surface colour gave 2.07:1 in dark mode, where the
   dark thumb and the dark blue track are close in luminance. 8.04:1 light,
   6.38:1 dark. */
.sr-switch[aria-checked="true"] .sr-switch__thumb {
  background-color: var(--sr-color-text-on-fill);
}

.sr-switch__label {
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}

.sr-switch[aria-checked="true"] .sr-switch__track {
  background-color: var(--sr-color-interactive-primary);
}
.sr-switch[aria-checked="true"] .sr-switch__thumb {
  transform: translateX(20px);
}

/* Hover used to darken the track to Border/Strong. Now that Border/Strong IS
   the rest colour that is a no-op, and the obvious replacement — previewing the
   checked colour, as Checkbox and Radio do — would make an OFF switch look ON.
   So hover moves to the label instead, which is the same signal Tabs and the
   sub-tab pill already use. */
.sr-switch:hover .sr-switch__label {
  color: var(--sr-color-interactive-primary);
}
.sr-switch[aria-checked="true"]:hover .sr-switch__track {
  background-color: var(--sr-color-interactive-primary-hover);
}

.sr-switch:focus-visible {
  outline: none;
}
.sr-switch:focus-visible .sr-switch__track {
  box-shadow: 0 0 0 2px var(--sr-color-surface-section-cards), 0 0 0 4px var(--sr-color-border-focus);
}

.sr-switch:disabled {
  cursor: not-allowed;
}
.sr-switch:disabled .sr-switch__track {
  background-color: var(--sr-color-border-disabled);
}
.sr-switch[aria-checked="true"]:disabled .sr-switch__track {
  background-color: var(--sr-color-interactive-disabled);
}
.sr-switch:disabled .sr-switch__label {
  color: var(--sr-color-text-disabled);
}

/* ═══ table ═══════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Data table
 * Reference HTML/CSS implementation for tabular clinical/administrative data.
 * Matched to the Figma Table set (1363:22598). Consumes @dhcw/sr-tokens.
 *
 * Styling (from Figma):
 *   Header row — Info Blue/50 fill, 36px, Label type (Roboto Medium 14/20,
 *                letter-spacing wide), Text/Primary.
 *   Body cell  — 40px, Body S (Roboto Regular 14/20), Text/Secondary,
 *                Border/Subtle bottom divider.
 *
 * Layouts (`.sr-table--{layout}` — the Storybook "layout" toggle):
 *   plain        — column headers only.
 *   kebab-left   — leading column of kebab (nav/menu-kebab) row-menu buttons.
 *   icons-left   — leading column of direct row-action icon buttons.
 *   row-headers  — column headers on top AND a row-header cell down the left.
 *
 * Row action / menu icons render in Interactive/Primary (brand blue), NOT the
 * default black icon colour — a row action is an interactive affordance.
 * Destructive actions (delete/remove) opt into red. See spec.md.
 */

.sr-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* `overflow-x: auto` scrolls the table but does not, on its own, stop a
     table wider than the wrapper from extending the page's own horizontal
     scroll — the wrapper scrolls AND the whole page scrolls behind it.
     Paint containment is what actually holds the table inside this box. It
     changes nothing visually (a scroll container already clips its content),
     and without it every consumer has to wrap the table in a second
     `overflow-x: auto` ancestor to get the containment this element exists
     to provide. Verified at 390px: without it the page scrolls 72px. */
  contain: paint;
}

.sr-table {
  width: 100%;
  border-collapse: collapse;
  border-radius: var(--radius-none, 0); /* data grids are full-bleed */
  background-color: var(--sr-color-surface-section-cards);
}

/* ---------- Caption ----------
   A caption names the table for screen-reader users. Styled rather than left at
   the browser default (centred, inherited serif). Where the surrounding page
   already names the table — a patient banner above a notes list, say — keep the
   caption and hide it visually with .sr-visually-hidden rather than dropping it. */
.sr-table caption {
  caption-side: top;
  text-align: left;
  padding: 0 var(--space-2) var(--space-2);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}

/* ---------- Header ---------- */
.sr-table__head th,
.sr-table th.sr-table__rowhead {
  height: 36px;
  text-align: left;
  vertical-align: middle;
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
  background-color: var(--sr-color-surface-accent);
  padding: var(--space-2); /* 8px */
  white-space: nowrap;
}
.sr-table__head th.sr-table__head--numeric {
  text-align: right;
}
.sr-table__head th.sr-table__head--actions {
  width: 57px;
  text-align: center;
}

/* Row-header cell (left column of the row-headers layout) — 40px like a body row. */
.sr-table th.sr-table__rowhead {
  height: 40px;
  border-bottom: 1px solid var(--sr-color-border-subtle);
}

/* Accessible label with no visual footprint (e.g. the actions column header). */
.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Body ---------- */
.sr-table__cell {
  height: 40px;
  padding: var(--space-2); /* 8px */
  border-bottom: 1px solid var(--sr-color-border-subtle);
  vertical-align: middle;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
  color: var(--sr-color-text-secondary);
}
.sr-table__cell--numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.sr-table__row:hover .sr-table__cell,
.sr-table__row:hover .sr-table__actions {
  background-color: var(--sr-color-surface-subtle);
}
.sr-table__row--selected .sr-table__cell,
.sr-table__row--selected .sr-table__actions {
  background-color: var(--sr-color-surface-accent);
}
.sr-table__row:last-child .sr-table__cell,
.sr-table__row:last-child .sr-table__actions,
.sr-table__row:last-child .sr-table__rowhead {
  border-bottom: none;
}

/* ---------- Selection column ----------
   Figma building block "Row - Check" (1122:14467): a 36px column holding a
   20px checkbox — 8px padding either side. The checkbox itself comes from
   packages/web/src/checkbox; use the `--bare` modifier so the box carries no
   label, and name it with aria-label on the input. */
.sr-table__select {
  width: 36px;
  padding: 0 var(--space-2);
  text-align: center;
  vertical-align: middle;
}
td.sr-table__select {
  border-bottom: 1px solid var(--sr-color-border-subtle);
}
.sr-table__head th.sr-table__select {
  height: 36px;
  background-color: var(--sr-color-surface-accent);
}
.sr-table__select .sr-checkbox {
  display: inline-flex;
  vertical-align: middle;
}

/* ---------- Sortable column header ----------
   Figma building block "Sortable header" (1122:14466). The header cell keeps
   aria-sort; the button inside it is what the user activates, so the sort
   control is reachable and named without making the whole cell interactive. */
.sr-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.sr-table__sort:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--sr-color-border-focus);
}
.sr-table__sort-icon {
  display: inline-flex;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  /* Unsorted is a quieter affordance than an applied sort. */
  color: var(--sr-color-text-secondary);
}
.sr-table__sort-icon svg { width: 100%; height: 100%; }

.sr-table__head th[aria-sort="ascending"] .sr-table__sort-icon,
.sr-table__head th[aria-sort="descending"] .sr-table__sort-icon {
  color: var(--sr-color-interactive-primary);
}

/* ---------- Sticky header (opt-in) ----------
   For long scrolling lists, so column headers stay visible. Opt-in because it
   only behaves correctly when the table scrolls inside a bounded container. */
.sr-table--sticky-head .sr-table__head th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* ---------- Row actions (leading or trailing icon cell) ---------- */
.sr-table__actions {
  padding: var(--space-3) var(--space-2); /* 12px 8px */
  border-bottom: 1px solid var(--sr-color-border-subtle);
  white-space: nowrap;
  text-align: center;
}
.sr-table__actions--trailing {
  text-align: right;
}

.sr-table__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;   /* sr.touch.compact — dense in-table secondary action */
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md); /* 4px */
  background-color: transparent;
  /* Interactive blue — the icon (stroke=currentColor) inherits this, so row
     action / menu icons are brand blue, never black. */
  color: var(--sr-color-interactive-primary);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sr-table__action svg,
.sr-table__action .sr-button__icon {
  width: 20px;
  height: 20px;
}
.sr-table__action .sr-button__icon svg {
  width: 100%;
  height: 100%;
}
.sr-table__action:hover {
  background-color: var(--sr-color-surface-accent);
  color: var(--sr-color-interactive-on-accent-hover);
}
.sr-table__action:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--sr-color-surface-section-cards),
    0 0 0 4px var(--sr-color-border-focus);
}
.sr-table__action:disabled,
.sr-table__action[aria-disabled="true"] {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
}

/* Destructive row action (delete/remove) — red, not blue. */
.sr-table__action--destructive {
  color: var(--sr-color-interactive-destructive);
}
.sr-table__action--destructive:hover {
  background-color: var(--sr-color-status-critical-surface, var(--sr-color-surface-subtle));
  color: var(--color-red-700);
}

/* ═══ tabs ════════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Tabs
 * Reference HTML/CSS implementation, matched to the Figma "Menu Tab" set
 * (817:7219 on page 1753:21420): State=Default|Hover|Focus|Active|Disabled ×
 * Orientation=Horizontal|Vertical. Consumes @dhcw/sr-tokens.
 *
 * Tabs switch the VIEW: one tablist controls one panel region, and exactly one
 * tab is selected. Not the Segmented control — that picks a value within a view
 * and is a group of buttons with aria-pressed. If choosing changes what is
 * rendered below it, it is Tabs; if it filters or sets an option, it is the
 * Segmented control.
 *
 * Markup follows the WAI-ARIA tabs pattern: role="tablist" > role="tab" with
 * aria-selected and aria-controls, each pointing at a role="tabpanel". Keyboard
 * behaviour (roving tabindex, arrow keys, Home/End) is the consumer's job —
 * see tabs.stories.js for a working reference, and Tabs.jsx in @dhcw/sr-react.
 */

.sr-tabs {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  /* The strip carries no track line. The Figma component does not draw one, and
     inventing a rule here would put code ahead of the design. If a track is
     wanted, it is a Figma change first. */
}

.sr-tabs__tab {
  /* 40px tall, 16px padding LEFT AND RIGHT ONLY, 8px gap — from the component.
     `padding: var(--space-4)` applied 16px on all four sides, which made every
     tab 52px tall (20px line box + 32px) rather than the specified 40px. The
     min-height was satisfied and so nothing complained. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2); /* 8px */
  min-height: 40px;
  padding: 0 var(--space-4); /* 0 16px */
  border: none;
  background: transparent;
  color: var(--sr-color-text-primary);
  font: var(--sr-type-body-s-font); /* 14/20 Regular */
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/**
 * There is deliberately NO width reservation here.
 *
 * The selected tab is Medium with 0.3px tracking and the rest are Regular with
 * none, so selecting a tab widens it by about 3px and nudges the tabs to its
 * right. An earlier version tried to absorb that by rendering the label again
 * at the selected weight in a `::after`, collapsed to zero height.
 *
 * That did not work. `.sr-tabs__tab` is a flex container, so the pseudo-element
 * became a flex ITEM and sat BESIDE the label with the 8px gap between them,
 * rather than behind it. Every tab came out roughly twice as wide as its own
 * text — 164px for a label measuring 62px. Nothing looked broken because every
 * tab was inflated by the same proportion, and the check it was meant to
 * satisfy — "does the strip shift on select" — passed for the wrong reason.
 * The bug only surfaced when the strip started wrapping and four tabs claimed
 * four rows.
 *
 * Doing it properly needs the label wrapped in its own element so the two
 * copies can be stacked in one grid cell; a bare text node cannot be placed.
 * That is not worth it for 3px. The better fix is in the design: keep one
 * weight and let colour and the 3px indicator carry selection, which is
 * already raised in components/tabs/spec.md. Until then the 3px reflow stays,
 * and it is far less harmful than what it replaced.
 */

/* Hover — soft page-background wash, brand-blue label. Unselected tabs only:
   the selected tab is already at its strongest and has nowhere to go. */
.sr-tabs__tab:hover:not([aria-selected='true']):not(:disabled) {
  background-color: var(--sr-color-surface-background);
  color: var(--sr-color-interactive-primary);
}

/* Selected — Medium label plus a 3px indicator on the leading edge.
   The indicator is an inset shadow rather than a border so it cannot change the
   40px height or nudge the label. */
.sr-tabs__tab[aria-selected='true'] {
  color: var(--sr-color-interactive-primary);
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  box-shadow: inset 0 -3px 0 var(--sr-color-interactive-primary);
}

/* Focus — 2px Border/Focus ring (DDR-025), drawn outside so it does not disturb
   the layout. Selected AND focused keeps both: the ring is where you are, the
   indicator is what is showing. */
.sr-tabs__tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-border-focus);
}
.sr-tabs__tab[aria-selected='true']:focus-visible {
  box-shadow:
    inset 0 -3px 0 var(--sr-color-interactive-primary),
    0 0 0 2px var(--sr-color-border-focus);
}

.sr-tabs__tab:disabled,
.sr-tabs__tab[aria-disabled='true'] {
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
  background: transparent;
}

/* Count badge — a pill, Interactive/Primary with white text.
   Decorative: the count must also reach the accessible name of the tab, or a
   screen reader announces the tab without it. */
.sr-tabs__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 20px;
  padding: 0 var(--space-2); /* 0 8px */
  border-radius: var(--radius-full);
  background-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-on-fill);
  font: var(--sr-type-caption-font); /* 12/16 Regular */
  letter-spacing: var(--sr-type-caption-letter-spacing);
}

.sr-tabs__tab:disabled .sr-tabs__badge,
.sr-tabs__tab[aria-disabled='true'] .sr-tabs__badge {
  background-color: var(--sr-color-interactive-disabled);
}

/* ── Level=Secondary: sub-tab pills ────────────────────────────────────────
   The second level of a two-level tab structure (DDR-030). The outer tablist
   selects a group; that group's PANEL contains one of these.

   It is a pill, not a smaller underlined tab, because two identical strips
   stacked are ambiguous about which row you are on. It is a BARE pill — no
   track — because the track is what distinguishes the Segmented control:

     track = filter (aria-pressed, sets an option within this view)
     no track = navigate (role=tab, switches which view you see)

   32px against the parent's 40px. A child that outweighs its parent inverts
   the hierarchy. */

.sr-tabs--secondary {
  gap: var(--space-2); /* 8px — pills are separate controls, not a strip */
  flex-wrap: wrap;
  row-gap: var(--space-2);
}

.sr-tabs--secondary .sr-tabs__tab {
  min-height: 32px;
  padding: 0 var(--space-3); /* 0 12px */
  box-sizing: border-box;
  /* Border/Strong (Grey/500, 3.75:1) not Border/Default (1.37:1). The border
     is what says "this is an option", so it is a UI component boundary under
     WCAG 2.2 SC 1.4.11 and needs 3:1. Asserted by check:contrast. */
  border: 1px solid var(--sr-color-border-strong);
  border-radius: var(--radius-full);
  box-shadow: none; /* no indicator at this level — the fill carries selection */
  color: var(--sr-color-text-secondary);
}

/* Hover leaves the BORDER ALONE and moves only the wash and the label.
   Taking the border to Interactive/Primary — the treatment Checkbox and Radio
   use — would make a hovered pill identical to Button/Secondary, which is also
   transparent with a blue outline and a blue label. Only the radius would
   separate "switch to this view" from "do this thing". */
.sr-tabs--secondary .sr-tabs__tab:hover:not([aria-selected='true']):not(:disabled) {
  background-color: var(--sr-color-surface-accent);
  color: var(--sr-color-interactive-primary);
}

.sr-tabs--secondary .sr-tabs__tab[aria-selected='true'] {
  background-color: var(--sr-color-interactive-primary);
  border-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
  box-shadow: none;
}

/* The ring is offset by a 2px halo in the surface colour so the cyan never sits
   directly against the pill's own border. Same treatment as the Segmented
   control and the Switch. */
.sr-tabs--secondary .sr-tabs__tab:focus-visible,
.sr-tabs--secondary .sr-tabs__tab[aria-selected='true']:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--sr-color-surface-section-cards),
    0 0 0 4px var(--sr-color-border-focus);
}

.sr-tabs--secondary .sr-tabs__tab:disabled,
.sr-tabs--secondary .sr-tabs__tab[aria-disabled='true'] {
  border-color: var(--sr-color-border-disabled);
  color: var(--sr-color-text-disabled);
  background: transparent;
}

/* Vertical secondary stacks the pills and lets each hug its own label, rather
   than stretching them all to the widest — a column of full-width pills reads
   as a menu, not as a set of options. */
.sr-tabs--secondary.sr-tabs--vertical {
  align-items: flex-start;
}
.sr-tabs--secondary.sr-tabs--vertical .sr-tabs__tab[aria-selected='true'] {
  box-shadow: none;
}

/* ── Vertical ──────────────────────────────────────────────────────────────
   Same tab, stacked, with the indicator on the left edge. Set
   aria-orientation="vertical" on the tablist so Up/Down become the arrow keys
   a screen reader user is told to press. */

.sr-tabs--vertical {
  flex-direction: column;
  align-items: stretch;
}

.sr-tabs--vertical .sr-tabs__tab {
  justify-content: flex-start;
  text-align: left;
}

.sr-tabs--vertical .sr-tabs__tab[aria-selected='true'] {
  box-shadow: inset 3px 0 0 var(--sr-color-interactive-primary);
}

.sr-tabs--vertical .sr-tabs__tab[aria-selected='true']:focus-visible {
  box-shadow:
    inset 3px 0 0 var(--sr-color-interactive-primary),
    0 0 0 2px var(--sr-color-border-focus);
}

/* ── Panels ───────────────────────────────────────────────────────────────
   The panel is focusable so that a keyboard user who tabs off the tablist lands
   in the content it controls rather than skipping past it. */

.sr-tabs__panel {
  padding: var(--space-4) 0;
  color: var(--sr-color-text-primary);
  font: var(--sr-type-body-m-font);
}

.sr-tabs__panel:focus-visible {
  outline: 2px solid var(--sr-color-border-focus);
  outline-offset: 2px;
}

.sr-tabs__panel[hidden] {
  display: none;
}

/* ── Overflow ─────────────────────────────────────────────────────────────
   A horizontal strip that outgrows its container WRAPS onto another row.

   This used to scroll, on the argument that a wrapped tablist reads as two
   rows of unrelated controls. That argument lost to a stronger one: a
   horizontally scrolling strip gives no indication that anything is off-screen,
   so it hides tabs from the very people who most need to see them. Clinicians
   are explicit that hidden navigation costs them — it adds recall effort and
   damages discoverability. Wrapping shows every tab at once, which is the point
   of a tab strip. Vertical stacks are unaffected.

   The row-gap is deliberate and small: 4px detaches a selected tab's 3px bottom
   indicator from the row beneath it, so the indicator cannot read as a rule
   over the following row, while staying tight enough that the rows still read
   as one control. */

.sr-tabs:not(.sr-tabs--vertical) {
  flex-wrap: wrap;
  row-gap: var(--space-1);
}

@media (prefers-reduced-motion: reduce) {
  .sr-tabs__tab {
    transition: none;
  }
}

/* ═══ tags ════════════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Tag
 * Pill-shaped label. Figma Tags sets: Tags/status (399:7984) and
 * Tags/filter (3229:71674). Consumes @dhcw/sr-tokens.
 *
 * Two variants:
 *   .sr-tag--status  (default) — soft surface FILL + matching border + text.
 *                    Types: Blue | Green | Red | Yellow | Grey | Outline.
 *                    Non-interactive label (status, category).
 *   .sr-tag--filter  — OUTLINE only (transparent fill) + a close button, for
 *                    dismissible filters. Types: Blue | Green | Red | Yellow |
 *                    Black. Always carries an .sr-tag__close button.
 *
 * Colour is a secondary signal only — the text always carries the meaning.
 * Size: Default (24px) | Small (16px).
 */

.sr-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: var(--space-2); /* 8px */
  border: 0.5px solid transparent;
  border-radius: var(--radius-full); /* pill */
  font: var(--sr-type-caption-font);
  letter-spacing: var(--sr-type-caption-letter-spacing); /* 0.2px */
  white-space: nowrap;
}

/* ---------- Sizes (status: symmetric padding) ---------- */
.sr-tag--default {
  height: 24px;
  padding: 0 var(--space-4); /* 16px */
}
.sr-tag--small {
  height: 16px;
  padding: 0 var(--space-2); /* 8px */
}

/* Filter tags trim the trailing padding so the close button sits neatly. */
.sr-tag--filter.sr-tag--default {
  gap: var(--space-2);
  padding: 0 var(--space-2) 0 var(--space-3); /* pl 12, pr 8 */
}
.sr-tag--filter.sr-tag--small {
  gap: var(--space-1);
  padding: 0 var(--space-1) 0 var(--space-2); /* pl 8, pr 4 */
}

/* ---------- Type colours (border + text — shared by both variants) ---------- */
.sr-tag--blue   { border-color: var(--sr-color-status-info);     color: var(--sr-color-status-info); }
.sr-tag--green  { border-color: var(--sr-color-status-success);  color: var(--sr-color-status-success); }
.sr-tag--red    { border-color: var(--sr-color-status-critical); color: var(--sr-color-status-critical); }
.sr-tag--yellow { border-color: var(--color-yellow-700);         color: var(--color-yellow-700); }
.sr-tag--grey   { border-color: var(--sr-color-text-secondary);  color: var(--sr-color-text-secondary); }
.sr-tag--outline,
.sr-tag--black  { border-color: var(--sr-color-border-strong);   color: var(--sr-color-text-primary); }

/* ---------- Status variant: soft surface fill ---------- */
.sr-tag--status.sr-tag--blue   { background-color: var(--sr-color-status-info-surface); }
.sr-tag--status.sr-tag--green  { background-color: var(--sr-color-status-success-surface); }
.sr-tag--status.sr-tag--red    { background-color: var(--sr-color-status-critical-surface); }
.sr-tag--status.sr-tag--yellow { background-color: var(--sr-color-status-warning-surface); }
.sr-tag--status.sr-tag--grey   { background-color: var(--sr-color-surface-background); }
.sr-tag--status.sr-tag--outline { background-color: transparent; }

/* ---------- Filter variant: outline only (transparent fill) ---------- */
.sr-tag--filter { background-color: transparent; }

/* ---------- Count variant: a 24px disc holding a number ----------
 * Figma Tags/count (3504:12900). Same colour vocabulary as status, but the
 * shape is fixed: a circle, so a two-digit count and a one-digit count line up
 * in a column. It takes the surface fills from status rather than defining its
 * own, so recolouring a status token recolours both.
 *
 * `dark-blue` is unique to this variant — a solid Interactive/Primary disc for
 * the one count on a screen that is the primary total. Use it once, if at all.
 */
.sr-tag--count {
  width: 24px;
  height: 24px;
  padding: 0;
  gap: 0;
  justify-content: center;
  font-variant-numeric: tabular-nums; /* digits keep their column */
}
.sr-tag--count.sr-tag--blue   { background-color: var(--sr-color-status-info-surface); }
.sr-tag--count.sr-tag--green  { background-color: var(--sr-color-status-success-surface); }
.sr-tag--count.sr-tag--red    { background-color: var(--sr-color-status-critical-surface); }
.sr-tag--count.sr-tag--yellow { background-color: var(--sr-color-status-warning-surface); }
.sr-tag--count.sr-tag--grey   { background-color: var(--sr-color-surface-background); }
.sr-tag--count.sr-tag--outline {
  background-color: transparent;
  border-color: var(--sr-color-border-default);
  color: var(--sr-color-text-secondary);
}
.sr-tag--count.sr-tag--dark-blue {
  background-color: var(--sr-color-interactive-primary);
  border-color: var(--sr-color-interactive-primary);
  color: var(--sr-color-text-inverse);
}

/* A count that runs to three digits stops being a circle rather than
   clipping its own number. */
.sr-tag--count.sr-tag--wide {
  width: auto;
  min-width: 24px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
}

/* ---------- Close button (filter tags) ---------- */
.sr-tag__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: inherit; /* inherits the tag's text colour */
  cursor: pointer;
}
.sr-tag__close svg {
  width: 14px;
  height: 14px;
}
.sr-tag__close:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.sr-tag__close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--sr-color-border-focus);
}

/* ═══ time-select ═════════════════════════════════════════════════ */
/**
 * DHCW Single Record — Time select
 * Constrained time entry as a native <select> of slots (DDR-012 — no wheel /
 * spinner picker). For free time entry use Input type="time" instead.
 * Consumes @dhcw/sr-tokens.
 */

.sr-time-select {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.sr-time-select__label {
  font: var(--sr-type-label-font);
  letter-spacing: var(--sr-type-label-letter-spacing);
  color: var(--sr-color-text-primary);
}

.sr-time-select__control {
  /* Cap, not a fixed size — see the same note on .sr-datepicker__field. */
  width: 100%;
  max-width: 140px;
  height: 40px;
  box-sizing: border-box;
  padding: 0 var(--space-3);
  background-color: var(--sr-color-surface-section-cards);
  border: 1px solid var(--sr-color-border-default);
  border-radius: var(--radius-sm);
  color: var(--sr-color-text-primary);
  font: inherit;
  font: var(--sr-type-body-s-font);
  letter-spacing: var(--sr-type-body-s-letter-spacing);
}
.sr-time-select__control:focus {
  outline: none;
  border-color: var(--sr-color-border-focus);
  box-shadow: inset 0 0 0 1px var(--sr-color-border-focus);
}
.sr-time-select--error .sr-time-select__control {
  border-color: var(--sr-color-status-critical);
  box-shadow: inset 0 0 0 1px var(--sr-color-status-critical);
}
.sr-time-select__control:disabled {
  background-color: var(--sr-color-surface-subtle);
  border-color: var(--sr-color-border-disabled);
  color: var(--sr-color-text-disabled);
  cursor: not-allowed;
}