/*
 * CymruBlazor - bundled stylesheet.
 *
 * Generated by tools/CymruBlazor.CssBundler from:
 *   cymrublazor.css
 *
 * Do not edit this file directly. Edit the individual
 * stylesheets, and the @import list above, instead.
 */

@layer reset,
       tokens,
       base,
       layout,
       components,
       utilities,
       overrides;

/* ---- base/reset.css ---- */
@layer reset {
@layer reset;

/*
 * CymruBlazor Reset
 *
 * A minimal CSS reset designed for component libraries.
 *
 * Goals:
 *  - Consistent sizing
 *  - Predictable layout
 *  - Accessible defaults
 *  - No visual opinion
 *  - No Bootstrap assumptions
 */

/* ==========================================================================
   Box Model
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ==========================================================================
   Root
   ========================================================================== */

html {
  hanging-punctuation: first last;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
dl,
dd {
  margin: 0;
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul[role="list"],
ol[role="list"] {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ==========================================================================
   Media
   ========================================================================== */

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

svg {
  fill: none;
}

/* ==========================================================================
   Form Controls
   ========================================================================== */

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: transparent;
  border: none;
}

button:disabled {
  cursor: not-allowed;
}

/* ==========================================================================
   Links
   ========================================================================== */

a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* ==========================================================================
   Tables
   ========================================================================== */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* ==========================================================================
   Text Overflow
   ========================================================================== */

p,
li,
figcaption {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/* ==========================================================================
   Horizontal Rule
   ========================================================================== */

hr {
  border: 0;
  border-top: var(--cymru-border-width-thin) solid var(--cymru-color-border);

  margin-block: var(--cymru-space-6);
}

/* ==========================================================================
   Hidden Attribute
   ========================================================================== */

[hidden] {
  display: none !important;
}

/* ==========================================================================
   Disabled State
   ========================================================================== */

:disabled {
  cursor: not-allowed;
}
}

/* ---- tokens/colours.css ---- */
@layer tokens {
@layer tokens;

/*
 * CymruBlazor Design Tokens - Colours
 *
 * Sourced from the DHCW "Single Record Design System" Figma file
 * (Foundations > Colour Tokens), which is itself the authoritative source
 * for NHS Wales digital product colour going forward - not generic NHS
 * England blue (#005eb8), which this file previously (incorrectly) used
 * as the brand primary.
 *
 * Primitive colour tokens hold raw values. Components must consume
 * semantic tokens only - see the second half of this file.
 */

/* ==========================================================================
   Primitive Palette
   ========================================================================== */

:root {
  /* Blue - NHS Wales Blue, primary brand */
  --cymru-blue-900: #1e3050;
  --cymru-blue-800: #325083; /* brand primary */
  --cymru-blue-700: #3d6199;
  --cymru-blue-600: #4c72ae;
  --cymru-blue-500: #5c6991;
  --cymru-blue-400: #828dac;
  --cymru-blue-300: #aab1c6;
  --cymru-blue-200: #d4d8e2;
  --cymru-blue-100: #eceef3;
  --cymru-blue-50: #f4f5f8;

  /* Cyan - DHCW Blue, secondary/accent brand */
  --cymru-cyan-900: #0a6a84;
  --cymru-cyan-800: #0d8bad;
  --cymru-cyan-700: #12a3c9; /* brand secondary */
  --cymru-cyan-600: #71accd;
  --cymru-cyan-500: #8dc0da;
  --cymru-cyan-400: #afd4e5;
  --cymru-cyan-300: #d6eaf2;
  --cymru-cyan-100: #ebf5fa;
  --cymru-cyan-50: #f4fafc;

  /* Navy - DHCW Navy, structural chrome (header/footer accent) */
  --cymru-navy-900: #1b294a;
  --cymru-navy-700: #464c64;
  --cymru-navy-500: #707488;
  --cymru-navy-300: #9ea1af;
  --cymru-navy-100: #cdcfd6;

  /* Neutral - UI grey palette */
  --cymru-grey-900: #212b32; /* primary text */
  --cymru-grey-800: #2c3a44; /* strong text */
  --cymru-grey-700: #3b4e5b; /* heading on grey */
  --cymru-grey-600: #4c6272; /* secondary text */
  --cymru-grey-500: #768692; /* placeholder */
  --cymru-grey-400: #aeb7bd; /* border / divider */
  --cymru-grey-300: #c6cdd1; /* subtle divider */
  --cymru-grey-200: #d8dde0; /* border default */
  --cymru-grey-100: #f0f4f5; /* surface default */
  --cymru-grey-50: #f7fafa; /* lightest wash */
  --cymru-white: #ffffff;

  /* Status - clinical and UI status colours */
  --cymru-red-700: #8a1e16; /* critical text on surface (>= 4.5:1 WCAG AA) */
  --cymru-red-600: #d5281b; /* critical */
  --cymru-red-100: #fcdbd9; /* critical surface */

  --cymru-green-700: #005a28; /* success text on surface (>= 4.5:1 WCAG AA) */
  --cymru-green-600: #007f3b; /* success */
  --cymru-green-100: #d9efe5; /* success surface */

  --cymru-yellow-500: #f8ca4d; /* warning - distinct from focus ring */
  --cymru-yellow-100: #fdf6dc; /* warning surface */

  /* Info blue is its own family, deliberately separate from the Blue
     brand scale above - reusing brand blue for "info" status previously
     made brand and status colours indistinguishable. */
  --cymru-info-blue-700: #005aa8;
  --cymru-info-blue-100: #d6e8f5;

  /* Focus ring - visually distinct from warning yellow */
  --cymru-focus-yellow: #ffeb3b;
}

/* ==========================================================================
   Semantic Colour Tokens
   ========================================================================== */

:root {
  /* Brand */

  --cymru-color-primary: var(--cymru-blue-800);
  --cymru-color-primary-hover: var(--cymru-blue-900);
  --cymru-color-primary-subtle: var(--cymru-blue-100);
   --cymru-color-primary-text: var(--cymru-white);

  /* The accent colour when used as *text on a surface* rather than as a
     filled background. --cymru-color-primary is deliberately dark in the
     dark theme (it has to carry white text); reusing it as a foreground
     on a dark surface drops below WCAG AA. Themes that darken primary
     must give this token a lighter value. */
  --cymru-color-primary-on-surface: var(--cymru-color-primary);

  /* sr.color.interactive.secondary */
  --cymru-color-secondary: var(--cymru-navy-900);

  /* sr.color.brand.accent - decorative ONLY (borders, icon strokes, chart
     accents, tab indicators). Per the design system: never use as a
     filled surface requiring white text - that's what
     --cymru-color-accent (below) is for. */
  --cymru-color-brand-accent: var(--cymru-cyan-700);

  /* Accent - the darker navy DHCW pairs with NHS Wales blue for headers,
     footers, and other "structural" chrome (site header/footer, not
     in-page content). This is sr.color.interactive.secondary's value,
     not sr.color.brand.accent - see the distinction above. */
  --cymru-color-accent: var(--cymru-navy-900);
  --cymru-color-accent-text: var(--cymru-white);

  /* Surface */

  /* sr.color.surface.background - the page sits on pale grey; cards/
     panels are white and visually float above it. Previously both were
     white here, losing that layering entirely. */
  --cymru-color-background: var(--cymru-grey-100);
  --cymru-color-surface: var(--cymru-white);

  /* sr.color.surface.subtle */
  --cymru-color-surface-alt: var(--cymru-blue-50);

  /* sr.color.surface.accent - accent/highlight backgrounds */
  --cymru-color-surface-accent: var(--cymru-cyan-100);

  /* Borders */

  --cymru-color-border: var(--cymru-grey-200);
  --cymru-color-border-strong: var(--cymru-grey-600);

  /* Typography */

  --cymru-color-text: var(--cymru-grey-900);
  --cymru-color-text-muted: var(--cymru-grey-600);
  --cymru-color-text-inverse: var(--cymru-white);

  /* Links - sr.color.interactive.link is its own info-blue family,
     deliberately distinct from the brand Blue scale used for buttons/nav. */

  --cymru-color-link: var(--cymru-info-blue-700);
  --cymru-color-link-hover: var(--cymru-navy-900);
  /* No visited-link token is defined in the source design system - kept
     as a reasonable substitute, distinguishable from the primary link
     colour, in the absence of an authoritative value. */
  --cymru-color-link-visited: var(--cymru-blue-600);

  /* Status */

  --cymru-color-success: var(--cymru-green-600);
  --cymru-color-success-text: var(--cymru-green-700);
  --cymru-color-success-background: var(--cymru-green-100);

  --cymru-color-warning: var(--cymru-yellow-500);
  --cymru-color-warning-background: var(--cymru-yellow-100);

  --cymru-color-danger: var(--cymru-red-600);
  --cymru-color-danger-text: var(--cymru-red-700);
  --cymru-color-danger-background: var(--cymru-red-100);

  --cymru-color-info: var(--cymru-info-blue-700);
  --cymru-color-info-background: var(--cymru-info-blue-100);

  /* Focus - sr.color.border.focus. Previously (incorrectly) grey-900,
     a leftover guess from before the semantic tokens were available. */

  --cymru-color-focus: var(--cymru-focus-yellow);
  --cymru-color-focus-text: var(--cymru-grey-900);
  --cymru-color-focus-outline: var(--cymru-focus-yellow);

  /* Disabled */

  --cymru-color-disabled: var(--cymru-grey-300);
  --cymru-color-disabled-text: var(--cymru-grey-500);
  --cymru-color-disabled-background: var(--cymru-grey-100);

  /* Selection */

  --cymru-color-selection: var(--cymru-blue-100);
}
}

/* ---- tokens/typography.css ---- */
@layer tokens {
@layer tokens;

/*
 * CymruBlazor Design Tokens - Typography
 *
 * Sourced from the DHCW "Single Record Design System" Figma file
 * (Foundations > Typography). Two structural corrections from the
 * previous version of this file:
 *
 *  1. Font family is Roboto, not "Segoe UI" - Frutiger is excluded on
 *     Single Record products for licensing reasons, and Roboto (not
 *     Segoe UI) is the documented system fallback choice.
 *  2. Heading sizes are DISCRETE desktop (>=1024px) / mobile (<768px)
 *     pairs, not fluid clamp() interpolation. Implemented below via a
 *     @media block that redefines the custom properties at the 768px
 *     breakpoint - redefining a custom property's VALUE inside @media is
 *     valid CSS (unlike using var() inside a media *condition*, which
 *     genuinely isn't supported - see the note this corrects in
 *     breakpoints.css).
 *
 * The Figma source defines 5 heading tiers (xl/l/m/s/xs). CymruBlazor's
 * existing TypographyVariant enum and CyTypography component expose 6
 * (H1-H6), to avoid a breaking rename across the enum/component/tests
 * shipped in the previous release. H5 and H6 both map to the xs tier
 * (16px) - Figma's scale doesn't go smaller than that for headings - so
 * they render visually identical, differentiated only by the semantic
 * tag `CyTypography.As` produces.
 */

:root {
  /* ==========================================================================
       Font Families
       ========================================================================== */

  --cymru-font-family-base: "Roboto", Arial, Helvetica, sans-serif;

  --cymru-font-family-monospace:
    "Cascadia Code", "Consolas", "Courier New", monospace;

  /* ==========================================================================
       Font Weights
       ========================================================================== */

  /*
   * Only three weights are defined in the design system: Regular 400,
   * Medium 500, Bold 700. "Semibold" is not a distinct design-system
   * weight - it's kept as an alias to Bold so existing consumers
   * (strong/b, card and alert titles) don't need individual updates,
   * while the actual weight VALUE used everywhere stays within the
   * three sanctioned steps.
   */

  --cymru-font-weight-regular: 400;
  --cymru-font-weight-medium: 500;
  --cymru-font-weight-semibold: 700;
  --cymru-font-weight-bold: 700;

  /* ==========================================================================
       Primitive Size Scale (Tier 1) - 11 steps, px converted to rem @ 16px
       ========================================================================== */

  --cymru-font-size-scale-64: 4rem; /* 64px */
  --cymru-font-size-scale-48: 3rem; /* 48px */
  --cymru-font-size-scale-36: 2.25rem; /* 36px */
  --cymru-font-size-scale-32: 2rem; /* 32px */
  --cymru-font-size-scale-27: 1.6875rem; /* 27px */
  --cymru-font-size-scale-26: 1.625rem; /* 26px */
  --cymru-font-size-scale-22: 1.375rem; /* 22px */
  --cymru-font-size-scale-19: 1.1875rem; /* 19px */
  --cymru-font-size-scale-16: 1rem; /* 16px */
  --cymru-font-size-scale-14: 0.875rem; /* 14px */
  --cymru-font-size-scale-12: 0.75rem; /* 12px */

  /* Kept for existing consumers that reference the old xs/sm/md/lg/xl/2xl/3xl
     scale names directly (e.g. component CSS written before this token
     correction) - aliased onto the corrected Tier 1 values above rather
     than left with the old, incorrect fluid clamp() sizes. */
  --cymru-font-size-xs: var(--cymru-font-size-scale-12);
  --cymru-font-size-sm: var(--cymru-font-size-scale-14);
  --cymru-font-size-md: var(--cymru-font-size-scale-16);
  --cymru-font-size-lg: var(--cymru-font-size-scale-19);
  --cymru-font-size-xl: var(--cymru-font-size-scale-22);
  --cymru-font-size-2xl: var(--cymru-font-size-scale-27);
  --cymru-font-size-3xl: var(--cymru-font-size-scale-36);

  /* ==========================================================================
       Semantic Typography (Tier 2) - mobile values (<768px, the default)
       ========================================================================== */

  --cymru-font-size-heading-1: var(--cymru-font-size-scale-32); /* heading-xl */
  --cymru-line-height-heading-1: 1.21875; /* 39/32 */

  --cymru-font-size-heading-2: var(--cymru-font-size-scale-27); /* heading-l */
  --cymru-line-height-heading-2: 1.22222; /* 33/27 */

  --cymru-font-size-heading-3: var(--cymru-font-size-scale-22); /* heading-m */
  --cymru-line-height-heading-3: 1.31818; /* 29/22 */

  --cymru-font-size-heading-4: var(--cymru-font-size-scale-19); /* heading-s */
  --cymru-line-height-heading-4: 1.42105; /* 27/19 */

  --cymru-font-size-heading-5: var(--cymru-font-size-scale-16); /* heading-xs */
  --cymru-line-height-heading-5: 1.5; /* 24/16 */

  --cymru-font-size-heading-6: var(--cymru-font-size-scale-16); /* heading-xs */
  --cymru-line-height-heading-6: 1.5; /* 24/16 */

  /* Body/label/caption do not vary between desktop and mobile. */

  --cymru-font-size-body: var(--cymru-font-size-scale-16); /* body-m */
  --cymru-line-height-body-size: 1.5; /* 24/16 */

  --cymru-font-size-body-small: var(--cymru-font-size-scale-14); /* body-s */
  --cymru-line-height-body-small: 1.71429; /* 24/14 */

  --cymru-font-size-label: var(--cymru-font-size-scale-14);
  --cymru-line-height-label: 1.42857; /* 20/14 */

  --cymru-font-size-caption: var(--cymru-font-size-scale-12);
  --cymru-line-height-caption: 1.33333; /* 16/12 */

  /* ==========================================================================
       Line Heights (generic, non-typography-scale uses)
       ========================================================================== */

  --cymru-line-height-tight: 1.2;
  --cymru-line-height-heading: 1.25;
  --cymru-line-height-body: 1.5;
  --cymru-line-height-relaxed: 1.7;

  /* ==========================================================================
       Letter Spacing
       ========================================================================== */

  --cymru-letter-spacing-tight: -0.02em;
  --cymru-letter-spacing-normal: 0;
  --cymru-letter-spacing-wide: 0.02em;

  /* Design-system-specific values, given in px (not em) in the source. */
  --cymru-letter-spacing-default: 0;
  --cymru-letter-spacing-label: 0.7px;
  --cymru-letter-spacing-caption: 0.24px;

  /* ==========================================================================
       Default Typography
       ========================================================================== */

  --cymru-font-family: var(--cymru-font-family-base);

  --cymru-font-size: var(--cymru-font-size-body);

  --cymru-font-weight: var(--cymru-font-weight-regular);

  --cymru-line-height: var(--cymru-line-height-body);
}

/* ==========================================================================
   Desktop heading overrides (>=768px - per the design system's own
   documented Blazor guidance: "@media (min-width: 768px) { apply desktop
   tokens }". This is deliberately NOT the same 1024px used by
   breakpoints.css's *grid* desktop tier - typography switches to the
   desktop scale a tier earlier (at tablet width) than the column/gutter
   grid does.)
   ========================================================================== */

@media (min-width: 48rem) {
  :root {
    --cymru-font-size-heading-1: var(--cymru-font-size-scale-48); /* heading-xl */
    --cymru-line-height-heading-1: 1.125; /* 54/48 */

    --cymru-font-size-heading-2: var(--cymru-font-size-scale-36); /* heading-l */
    --cymru-line-height-heading-2: 1.16667; /* 42/36 */

    --cymru-font-size-heading-3: var(--cymru-font-size-scale-26); /* heading-m */
    --cymru-line-height-heading-3: 1.23077; /* 32/26 */

    --cymru-font-size-heading-4: var(--cymru-font-size-scale-22); /* heading-s */
    --cymru-line-height-heading-4: 1.36364; /* 30/22 */

    /* heading-xs (heading-5/6) is unchanged at desktop widths. */
  }
}
}

/* ---- tokens/spacing.css ---- */
@layer tokens {
@layer tokens;

/*
 * CymruBlazor Design Tokens - Spacing
 *
 * Sourced from the DHCW "Single Record Design System" Figma file
 * (Foundations > Spacing Tokens): a 4px base-unit, 13-step scale.
 *
 * IMPORTANT naming correction from the previous version of this file:
 * Figma's primitive token NAME directly encodes the multiplier of the
 * 4px base unit - space.6 = 6 x 4px = 24px, space.12 = 12 x 4px = 48px,
 * and so on. The previous version of this file used a compact
 * sequential index (space-1..space-9) instead, where e.g. space-3 meant
 * "the third step" (16px) rather than "3 x 4px" (12px). Every consumer
 * across the codebase has been renamed to match this file - see
 * CONTRIBUTING.md's note on keeping generated classes and their backing
 * CSS in sync; the same discipline applies to token names.
 *
 * Components should consume semantic spacing tokens (spacing.component.*,
 * spacing.form.*, spacing.layout.*) wherever a specific one exists for
 * the situation - see Tier 2 below - and fall back to the primitive
 * scale directly only when no semantic token fits.
 */

:root {
  /* ==========================================================================
       Tier 1 - Primitive Scale (13 steps, 0-96px)
       ========================================================================== */

  --cymru-space-0: 0; /* Explicit zero - removing default spacing */
  --cymru-space-1: 0.25rem; /* 4px - icon padding, micro gaps */
  --cymru-space-2: 0.5rem; /* 8px - tight component internals */
  --cymru-space-3: 0.75rem; /* 12px - compact form elements */
  --cymru-space-4: 1rem; /* 16px - default internal padding */
  --cymru-space-5: 1.25rem; /* 20px */
  --cymru-space-6: 1.5rem; /* 24px - section spacing within panels */
  --cymru-space-8: 2rem; /* 32px - component separation */
  --cymru-space-10: 2.5rem; /* 40px */
  --cymru-space-12: 3rem; /* 48px - section breaks */
  --cymru-space-16: 4rem; /* 64px - major layout sections */
  --cymru-space-20: 5rem; /* 80px - page-level vertical rhythm */
  --cymru-space-24: 6rem; /* 96px */

  /* ==========================================================================
       Tier 2 - Semantic Tokens: spacing.component.*
       Inside UI components: buttons, badges, cards, inputs.
       ========================================================================== */

  --cymru-spacing-component-xs: var(--cymru-space-1); /* 4px - icon-to-text gap, badge/chip padding */
  --cymru-spacing-component-sm: var(--cymru-space-2); /* 8px - button vertical padding, tag padding */
  --cymru-spacing-component-md: var(--cymru-space-4); /* 16px - button horizontal padding, standard field padding */
  --cymru-spacing-component-lg: var(--cymru-space-6); /* 24px - card internal padding */
  --cymru-spacing-component-xl: var(--cymru-space-8); /* 32px - spacious card/panel padding */

  /* ==========================================================================
       Tier 2 - Semantic Tokens: spacing.form.*
       Vertical rhythm of form fields.
       ========================================================================== */

  --cymru-spacing-form-label-gap: var(--cymru-space-2); /* 8px - label text to input box */
  --cymru-spacing-form-hint-gap: var(--cymru-space-1); /* 4px - input box to hint text */
  --cymru-spacing-form-error-gap: var(--cymru-space-1); /* 4px - input box to error message */
  --cymru-spacing-form-field-gap: var(--cymru-space-6); /* 24px - between complete fields */
  --cymru-spacing-form-group-gap: var(--cymru-space-8); /* 32px - between field groups/fieldsets */

  /* ==========================================================================
       Tier 2 - Semantic Tokens: spacing.layout.*
       Between panels, sections, and page-level containers.
       ========================================================================== */

  --cymru-spacing-layout-xs: var(--cymru-space-4); /* 16px - within the same card/panel; mobile column gutters */
  --cymru-spacing-layout-sm: var(--cymru-space-6); /* 24px - side-by-side cards/panels; tablet gutters */
  --cymru-spacing-layout-md: var(--cymru-space-8); /* 32px - major content blocks; desktop gutters */
  --cymru-spacing-layout-section: var(--cymru-space-12); /* 48px - between distinct page sections */
  --cymru-spacing-layout-page: var(--cymru-space-16); /* 64px - page outer top/bottom padding */

  /* ==========================================================================
       Accessibility - Touch Target Sizing
       WCAG 2.2 SC 2.5.8 (AA): every interactive element needs a minimum
       44x44px hit target. Not on the 4px scale exactly (44 = 11 x 4), so
       expressed as its own token rather than reusing a space.N alias.
       ========================================================================== */

  --cymru-touch-target-min: 2.75rem; /* 44px */

  /* ==========================================================================
       Legacy aliases - kept so existing component-padding/margin/layout-gap
       references (predating the semantic layer above) keep working with
       the corrected primitive values.
       ========================================================================== */

  --cymru-padding-xs: var(--cymru-space-1);
  --cymru-padding-sm: var(--cymru-space-2);
  --cymru-padding-md: var(--cymru-space-4);
  --cymru-padding-lg: var(--cymru-space-6);
  --cymru-padding-xl: var(--cymru-space-8);

  --cymru-margin-xs: var(--cymru-space-1);
  --cymru-margin-sm: var(--cymru-space-2);
  --cymru-margin-md: var(--cymru-space-4);
  --cymru-margin-lg: var(--cymru-space-6);
  --cymru-margin-xl: var(--cymru-space-8);

  --cymru-layout-gap-xs: var(--cymru-space-1);
  --cymru-layout-gap-sm: var(--cymru-space-2);
  --cymru-layout-gap-md: var(--cymru-space-4);
  --cymru-layout-gap-lg: var(--cymru-space-6);
  --cymru-layout-gap-xl: var(--cymru-space-8);

  --cymru-container-padding-inline: var(--cymru-space-4);
  --cymru-container-padding-block: var(--cymru-space-6);

  --cymru-section-spacing: var(--cymru-space-12);

  --cymru-control-padding-inline: var(--cymru-space-4);
  --cymru-control-padding-block: var(--cymru-space-2);

  --cymru-control-gap: var(--cymru-space-2);

  --cymru-card-padding: var(--cymru-space-6);
  --cymru-card-gap: var(--cymru-space-4);

  --cymru-button-padding-inline: var(--cymru-space-4);
  --cymru-button-padding-block: var(--cymru-space-2);

  --cymru-button-gap: var(--cymru-space-2);

  --cymru-list-gap: var(--cymru-space-2);

  --cymru-dialog-padding: var(--cymru-space-8);

  --cymru-focus-offset: 2px;
}
}

/* ---- tokens/elevation.css ---- */
@layer tokens {
@layer tokens;

/*
 * CymruBlazor Design Tokens - Elevation
 *
 * This file defines:
 *   1. Border widths
 *   2. Border radius
 *   3. Shadows (Elevation)
 *   4. Z-Index
 *
 * Components should consume semantic tokens wherever possible.
 */

:root {
  /* ==========================================================================
       Border Widths
       ========================================================================== */

  --cymru-border-width-none: 0;
  --cymru-border-width-thin: 1px;
  --cymru-border-width-medium: 2px;
  --cymru-border-width-thick: 3px;

  /* ==========================================================================
       Border Radius
       ========================================================================== */

  --cymru-radius-none: 0;

  --cymru-radius-xs: 0.125rem; /* 2px */
  --cymru-radius-sm: 0.25rem; /* 4px */
  --cymru-radius-md: 0.5rem; /* 8px */
  --cymru-radius-lg: 0.75rem; /* 12px */
  --cymru-radius-xl: 1rem; /* 16px */
  --cymru-radius-pill: 9999px;
  --cymru-radius-circle: 50%;

  /* ==========================================================================
       Shadows
       ========================================================================== */

  /*
   * Sourced from the DHCW "Single Record Design System" Figma file
   * (Foundations > Elevation & Shadow). Two structural corrections from
   * the previous version of this file:
   *
   *  1. Shadow colour is navy-900 (#1B294A), not generic black - "reads
   *     as a tinted shadow on white surfaces; warmer and more on-brand
   *     than generic grey-black, and less harsh on clinical displays"
   *     (source rationale).
   *  2. The design system defines exactly THREE role-named shadow
   *     tokens - not a generic xs/sm/md/lg/xl scale. "Shadow is reserved
   *     for elements that genuinely float above the page. Borders and
   *     surface colours handle structural hierarchy everywhere else."
   *     GDS/NHS England use shadow in one place only (button press
   *     affordance); this design system extends that deliberately and
   *     minimally to three uses, each with exactly one named job. Do not
   *     stack elevation tokens, and do not use shadow decoratively - if
   *     its purpose can't be explained in one sentence, use a border
   *     instead. Focus rings are never shadow-based - see
   *     --cymru-color-focus-outline.
   */

  /* sr.elevation.button - press affordance on primary/outline/warning/
     destructive buttons. Directional (bottom-only), GDS-aligned at 2px.
     Ghost buttons and disabled buttons of any variant use none. */
  --cymru-shadow-button: 0 2px 0 var(--cymru-navy-900);

  /* sr.elevation.raised - cards and panels: a gentle lift off the page.
     Use only when a border alone is insufficient to separate a surface
     (e.g. a card on a similarly-coloured background). */
  --cymru-shadow-raised: 0 1px 4px rgb(27 41 74 / 0.12);

  /* sr.elevation.overlay - modals, drawers, dropdown menus, tooltips:
     all floating layers above the page. Pair with a scrim where content
     behind should be obscured. */
  --cymru-shadow-overlay: 0 4px 16px rgb(27 41 74 / 0.18);

  --cymru-shadow-none: none;

  /*
   * Legacy generic scale, retained for existing consumers that haven't
   * migrated to the three named tokens above, retinted to navy-900 for
   * visual consistency rather than left as generic black. xs/sm map onto
   * "raised", lg/xl extrapolate beyond "overlay" for the rare case a
   * deeper layer is genuinely needed - prefer the named tokens over
   * these directly in new component CSS.
   */

  --cymru-shadow-xs: 0 1px 2px rgb(27 41 74 / 0.08);
  --cymru-shadow-sm: var(--cymru-shadow-raised);
  --cymru-shadow-md: 0 2px 8px rgb(27 41 74 / 0.15);
  --cymru-shadow-lg: var(--cymru-shadow-overlay);
  --cymru-shadow-xl: 0 8px 24px rgb(27 41 74 / 0.22);

  /* ==========================================================================
       Semantic Elevation
       ========================================================================== */

  --cymru-elevation-surface: var(--cymru-shadow-none);

  --cymru-elevation-card: var(--cymru-shadow-sm);

  --cymru-elevation-dropdown: var(--cymru-shadow-md);

  --cymru-elevation-popover: var(--cymru-shadow-lg);

  --cymru-elevation-dialog: var(--cymru-shadow-xl);

  /* ==========================================================================
       Semantic Border Radius
       ========================================================================== */

  --cymru-radius-control: var(--cymru-radius-sm);

  --cymru-radius-card: var(--cymru-radius-xl);

  --cymru-radius-dialog: var(--cymru-radius-lg);

  --cymru-radius-badge: var(--cymru-radius-pill);

  /* ==========================================================================
       Semantic Border Width
       ========================================================================== */

  --cymru-border-width-control: var(--cymru-border-width-thin);

  --cymru-border-width-focus: var(--cymru-border-width-medium);

  --cymru-border-width-divider: var(--cymru-border-width-thin);

  /* ==========================================================================
       Z-Index Scale
       ========================================================================== */

  /*
     * Components should always consume semantic z-index
     * tokens instead of numeric values.
     */

  --cymru-z-base: 0;
  --cymru-z-dropdown: 1000;
  --cymru-z-sticky: 1020;
  --cymru-z-fixed: 1030;
  --cymru-z-overlay: 1040;
  --cymru-z-modal: 1050;
  --cymru-z-popover: 1060;
  --cymru-z-tooltip: 1070;
  --cymru-z-toast: 1080;
}
}

/* ---- tokens/breakpoints.css ---- */
@layer tokens {
@layer tokens;

/*
 * CymruBlazor Design Tokens - Breakpoints & Grid
 *
 * Sourced from the DHCW "Single Record Design System" Figma file
 * (Foundations > Grid & Layout System): 5 breakpoints, 3 grid
 * configurations (mobile/tablet fluid, desktop fixed-margin), plus an
 * EPR-application content-zone adjustment for the 248px navigation
 * sidebar.
 *
 * Corrections from the previous version of this file:
 *  - The previous 4-tier scale (mobile 480 / tablet 768 / desktop 1024 /
 *    wide 1440) is replaced with the documented 5-tier scale below - it
 *    was missing the "Large" (1280px) tier entirely, and "mobile" was
 *    set to 480px rather than the documented 0-767px range.
 *  - "CSS custom properties cannot be used inside @media queries" (the
 *    previous version of this comment) is only true for using var()
 *    inside a media *condition* (`@media (min-width: var(--x))` genuinely
 *    doesn't work) - it does NOT mean a custom property's *value* can't
 *    be redefined inside a @media block, which is valid, common CSS and
 *    is exactly how tokens/typography.css implements its desktop/mobile
 *    heading-size switch. Media query *conditions* below still use
 *    literal values, for that genuine reason.
 *
 * Platform guidance (from the source): Blazor web targets Desktop and
 * Tablet only - the EPR sidebar reduces content width, so design against
 * the content zone, not the full frame. .NET MAUI is adaptive across
 * phone/tablet/desktop.
 */

:root {
  /* ==========================================================================
       Grid Breakpoints (5 tiers + one wide/dual-screen tier)
       ========================================================================== */

  --cymru-breakpoint-mobile-max: 47.9375rem; /* 767px */
  --cymru-breakpoint-tablet-min: 48rem; /* 768px */
  --cymru-breakpoint-tablet-max: 63.9375rem; /* 1023px */
  --cymru-breakpoint-desktop-min: 64rem; /* 1024px */
  --cymru-breakpoint-desktop-max: 79.9375rem; /* 1279px */
  --cymru-breakpoint-large-min: 80rem; /* 1280px */
  --cymru-breakpoint-large-max: 89.9375rem; /* 1439px */
  --cymru-breakpoint-xlarge-min: 90rem; /* 1440px */
  --cymru-breakpoint-2xl-min: 96rem; /* 1536px - ultra-wide/dual-screen */

  /* Kept for existing consumers using the old, simpler names - aliased
     onto the corrected scale above. "desktop" here means "tablet and up"
     (48rem/768px), matching the source's own Blazor typography guidance
     (see tokens/typography.css) - use the more specific tokens above for
     anything grid/column-related, where desktop genuinely starts at
     1024px, one tier later. */
  --cymru-breakpoint-mobile: 48rem; /* 768px */
  --cymru-breakpoint-tablet: 48rem; /* 768px */
  --cymru-breakpoint-desktop: 64rem; /* 1024px */
  --cymru-breakpoint-wide: 90rem; /* 1440px */

  /* ==========================================================================
       Grid Configuration per Breakpoint
       ========================================================================== */

  --cymru-grid-columns-mobile: 4;
  --cymru-grid-columns-tablet: 8;
  --cymru-grid-columns-desktop: 12; /* unchanged through Large/XLarge/2xl */

  --cymru-gutter-mobile: var(--cymru-space-4); /* 16px */
  --cymru-gutter-tablet: var(--cymru-space-6); /* 24px */
  --cymru-gutter-desktop: var(--cymru-space-6); /* 24px, through Large */
  --cymru-gutter-xlarge: var(--cymru-space-8); /* 32px, from XLarge (1440px) */

  --cymru-margin-mobile: var(--cymru-space-4); /* 16px */
  --cymru-margin-tablet: var(--cymru-space-8); /* 32px */
  --cymru-margin-desktop: var(--cymru-space-10); /* 40px, at 1024px */
  --cymru-margin-large: var(--cymru-space-16); /* 64px, at 1280px */
  --cymru-margin-xlarge: var(--cymru-space-20); /* 80px, at 1440px */

  /* ==========================================================================
       EPR Application Grid - content zone when the 248px navigation
       sidebar is visible. Design against the content zone, not the full
       frame width.
       ========================================================================== */

  --cymru-epr-sidebar-width: 15.5rem; /* 248px */

  /* ==========================================================================
       Maximum Content Widths
       ========================================================================== */

  --cymru-max-width-body-text: 45rem; /* 720px - long-form content/prose */
  --cymru-max-width-form: 35rem; /* 560px - single-column forms */
  --cymru-max-width-page: 87.5rem; /* 1400px - page container */

  /* ==========================================================================
       Maximum Container Widths (CyContainer)
       ========================================================================== */

  /*
   * CyContainer's Size enum (Small/Medium/Large/ExtraLarge) is a general
   * layout primitive, not tied to a specific content type the way the
   * source's named max-widths are - reinterpreted here as a reasonable
   * progression through those named widths rather than left on the
   * previous, purely breakpoint-derived scale (480/768/1024/1280/1440).
   */

  --cymru-container-sm: var(--cymru-max-width-form); /* 560px */
  --cymru-container-md: var(--cymru-max-width-body-text); /* 720px */
  --cymru-container-lg: var(--cymru-breakpoint-desktop-min); /* 1024px */
  --cymru-container-xl: var(--cymru-max-width-page); /* 1400px */
  --cymru-container-2xl: var(--cymru-breakpoint-2xl-min); /* 1536px */

  /* ==========================================================================
       Reading Width
       ========================================================================== */

  --cymru-reading-width: 75ch;
}
}

/* ---- tokens/aliases.css ---- */
@layer tokens {
/*
 * CymruBlazor Design Tokens - Semantic aliases (added 1.7.0)
 *
 * Names that consuming apps reasonably reach for, that now resolve to
 * something sensible instead of silently falling through a
 * `var(--x, #fallback)` to a hard-coded colour.
 *
 * SCOPING - read before editing. Every token here is derived from another
 * token via var(). A var() is resolved on the element that DECLARES it, and
 * the *computed* result is what children inherit. Themes are applied on
 * `.cy-theme-provider[data-theme]` and on <body> (via :has()), never on
 * :root, so an alias declared on :root alone would keep its light-theme value
 * inside a dark provider. Declaring the alias on every theme scope makes it
 * re-resolve there. scripts/GenerateTokens.cs --check enforces
 * this for every derived token.
 */

:root,
[data-theme],
body:has(.cy-theme-provider[data-theme]) {
  /* Surface */
  --cymru-color-surface-subtle: var(--cymru-color-surface-alt);
  /* Hover tint derived from the *current* surface and text colours, so it is
     correct in light, dark and high-contrast without per-theme values. */
  --cymru-color-surface-hover: color-mix(
    in srgb,
    var(--cymru-color-surface),
    var(--cymru-color-text) 6%
  );

  /* Text */
  --cymru-color-text-secondary: var(--cymru-color-text-muted);

  /* Status: the border and text roles the original set was missing. Each
     follows an existing token, so it flips with the theme automatically. */
  --cymru-color-success-border: var(--cymru-color-success);
  --cymru-color-warning-border: var(--cymru-color-warning);
  --cymru-color-warning-text: var(--cymru-color-text);
  --cymru-color-danger-border: var(--cymru-color-danger);
  --cymru-color-info-border: var(--cymru-color-info);
  --cymru-color-info-text: var(--cymru-color-info);

  /* Focus ring */
  --cymru-focus-ring-width: var(--cymru-border-width-focus);
  --cymru-focus-ring-color: var(--cymru-color-focus-outline);
  --cymru-focus-ring-offset: 2px;

  /* Typography */
  --cymru-font-family-mono: var(--cymru-font-family-monospace);
  --cymru-font-mono: var(--cymru-font-family-monospace);

  /* Shape and elevation */
  --cymru-radius-full: var(--cymru-radius-pill);
  /* Heavier than --cymru-shadow-xl (dialogs). Not for decoration: the design
     system reserves shadow for a few roles (see elevation.css). */
  --cymru-shadow-2xl: 0 16px 40px rgb(27 41 74 / 0.28);

  /* Page width policy (CyPage Width = Narrow | Default | Wide | Full) */
  --cymru-page-max-width-narrow: var(--cymru-container-md);
  --cymru-page-max-width-default: var(--cymru-container-lg);
  --cymru-page-max-width-wide: var(--cymru-container-xl);
  --cymru-page-max-width-full: none;
}
}

/* ---- tokens/colour-aliases.generated.css ---- */
@layer tokens {
/*
 * GENERATED by scripts/GenerateTokens.cs - do not edit.
 *
 * UK-spelling aliases (--cymru-colour-*) for every --cymru-color-* token.
 * Declared on every theme scope for the same reason as tokens/aliases.css:
 * each alias must re-resolve inside a theme provider.
 */

:root,
[data-theme],
body:has(.cy-theme-provider[data-theme]) {
  --cymru-colour-accent: var(--cymru-color-accent);
  --cymru-colour-accent-text: var(--cymru-color-accent-text);
  --cymru-colour-background: var(--cymru-color-background);
  --cymru-colour-border: var(--cymru-color-border);
  --cymru-colour-border-strong: var(--cymru-color-border-strong);
  --cymru-colour-brand-accent: var(--cymru-color-brand-accent);
  --cymru-colour-danger: var(--cymru-color-danger);
  --cymru-colour-danger-background: var(--cymru-color-danger-background);
  --cymru-colour-danger-border: var(--cymru-color-danger-border);
  --cymru-colour-danger-text: var(--cymru-color-danger-text);
  --cymru-colour-disabled: var(--cymru-color-disabled);
  --cymru-colour-disabled-background: var(--cymru-color-disabled-background);
  --cymru-colour-disabled-text: var(--cymru-color-disabled-text);
  --cymru-colour-focus: var(--cymru-color-focus);
  --cymru-colour-focus-outline: var(--cymru-color-focus-outline);
  --cymru-colour-focus-text: var(--cymru-color-focus-text);
  --cymru-colour-info: var(--cymru-color-info);
  --cymru-colour-info-background: var(--cymru-color-info-background);
  --cymru-colour-info-border: var(--cymru-color-info-border);
  --cymru-colour-info-text: var(--cymru-color-info-text);
  --cymru-colour-link: var(--cymru-color-link);
  --cymru-colour-link-hover: var(--cymru-color-link-hover);
  --cymru-colour-link-visited: var(--cymru-color-link-visited);
  --cymru-colour-primary: var(--cymru-color-primary);
  --cymru-colour-primary-hover: var(--cymru-color-primary-hover);
  --cymru-colour-primary-on-surface: var(--cymru-color-primary-on-surface);
  --cymru-colour-primary-subtle: var(--cymru-color-primary-subtle);
  --cymru-colour-primary-text: var(--cymru-color-primary-text);
  --cymru-colour-secondary: var(--cymru-color-secondary);
  --cymru-colour-selection: var(--cymru-color-selection);
  --cymru-colour-success: var(--cymru-color-success);
  --cymru-colour-success-background: var(--cymru-color-success-background);
  --cymru-colour-success-border: var(--cymru-color-success-border);
  --cymru-colour-success-text: var(--cymru-color-success-text);
  --cymru-colour-surface: var(--cymru-color-surface);
  --cymru-colour-surface-accent: var(--cymru-color-surface-accent);
  --cymru-colour-surface-alt: var(--cymru-color-surface-alt);
  --cymru-colour-surface-hover: var(--cymru-color-surface-hover);
  --cymru-colour-surface-subtle: var(--cymru-color-surface-subtle);
  --cymru-colour-text: var(--cymru-color-text);
  --cymru-colour-text-inverse: var(--cymru-color-text-inverse);
  --cymru-colour-text-muted: var(--cymru-color-text-muted);
  --cymru-colour-text-secondary: var(--cymru-color-text-secondary);
  --cymru-colour-warning: var(--cymru-color-warning);
  --cymru-colour-warning-background: var(--cymru-color-warning-background);
  --cymru-colour-warning-border: var(--cymru-color-warning-border);
  --cymru-colour-warning-text: var(--cymru-color-warning-text);
}
}

/* ---- base/accessibility.css ---- */
@layer base {
@layer base;

/*
 * CymruBlazor Accessibility Foundation
 *
 * Provides:
 *  - WCAG 2.2 AA focus indicators
 *  - Reduced motion support
 *  - Forced colours compatibility
 *  - High contrast preferences
 *  - Selection colours
 *  - Improved scrolling behaviour
 */

/* ==========================================================================
   Keyboard Focus
   ========================================================================== */

/*
 * Remove browser defaults in favour of a consistent focus style.
 */

:focus {
  outline: none;
}

/*
 * Display focus only for keyboard users.
 */

:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus);

  outline-offset: var(--cymru-focus-offset);

  box-shadow: 0 0 0 2px var(--cymru-color-focus-outline);
}

/*
 * Mouse users should not receive focus rings.
 */

:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

/* ==========================================================================
   Text Selection
   ========================================================================== */

::selection {
  background: var(--cymru-color-selection);

  color: var(--cymru-color-text);
}

/* ==========================================================================
   Skip Links
   ========================================================================== */

.cymru-skip-link {
  position: absolute;

  left: var(--cymru-space-4);

  top: calc(-1 * var(--cymru-space-20));

  z-index: var(--cymru-z-toast);

  padding: var(--cymru-space-2) var(--cymru-space-4);

  background: var(--cymru-color-focus);

  color: var(--cymru-color-focus-text);

  text-decoration: none;

  border-radius: var(--cymru-radius-sm);

  transition: top 150ms;
}

.cymru-skip-link:focus-visible {
  top: var(--cymru-space-4);
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: 0.01ms !important;

    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Smooth Scrolling
   ========================================================================== */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ==========================================================================
   High Contrast (Windows)
   ========================================================================== */

@media (forced-colors: active) {
  * {
    forced-color-adjust: auto;
  }

  :focus-visible {
    outline: 2px solid Highlight;

    outline-offset: 2px;

    box-shadow: none;
  }

  button,
  input,
  select,
  textarea {
    border: 1px solid ButtonText;
  }
}

/* ==========================================================================
   Increased Contrast Preference
   ========================================================================== */

@media (prefers-contrast: more) {
  :root {
    --cymru-color-border: var(--cymru-color-text);

    --cymru-border-width-control: var(--cymru-border-width-medium);
  }

  :focus-visible {
    outline-width: 3px;
  }
}

/* ==========================================================================
   Printing
   ========================================================================== */

@media print {
  * {
    box-shadow: none !important;

    text-shadow: none !important;
  }

  a {
    text-decoration: underline;
  }
}
}

/* ---- base/typography.css ---- */
@layer base {
@layer base;

/*
 * CymruBlazor Base Typography
 *
 * tokens/typography.css only declares custom properties - nothing in the
 * bundle previously applied them to real elements, so headings, body text,
 * links and lists all rendered in the browser default styles.
 *
 * This file is the missing "application" layer: it consumes the semantic
 * typography tokens and sets sensible, accessible defaults for every
 * consuming application. Components remain free to override locally via
 * CSS isolation.
 */

/* ==========================================================================
   Document defaults
   ========================================================================== */

html {
  font-family: var(--cymru-font-family);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--cymru-font-family);
  font-size: var(--cymru-font-size-body);
  font-weight: var(--cymru-font-weight-regular);
  line-height: var(--cymru-line-height-body);
  color: var(--cymru-color-text);
  background-color: var(--cymru-color-background);
}

/* ==========================================================================
   Headings
   ========================================================================== */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--cymru-font-family);
  font-weight: var(--cymru-font-weight-bold);
  letter-spacing: var(--cymru-letter-spacing-default);
  color: var(--cymru-color-text);
  margin-block: 0 var(--cymru-space-4);
}

h1 {
  font-size: var(--cymru-font-size-heading-1);
  line-height: var(--cymru-line-height-heading-1);
}

h2 {
  font-size: var(--cymru-font-size-heading-2);
  line-height: var(--cymru-line-height-heading-2);
}

h3 {
  font-size: var(--cymru-font-size-heading-3);
  line-height: var(--cymru-line-height-heading-3);
}

h4 {
  font-size: var(--cymru-font-size-heading-4);
  line-height: var(--cymru-line-height-heading-4);
}

h5 {
  font-size: var(--cymru-font-size-heading-5);
  line-height: var(--cymru-line-height-heading-5);
}

h6 {
  font-size: var(--cymru-font-size-heading-6);
  line-height: var(--cymru-line-height-heading-6);
}

/* ==========================================================================
   Body text
   ========================================================================== */

p {
  margin-block: 0 var(--cymru-space-4);
}

small,
.cymru-text-caption {
  font-size: var(--cymru-font-size-caption);
  line-height: var(--cymru-line-height-caption);
  letter-spacing: var(--cymru-letter-spacing-caption);
}

strong,
b {
  font-weight: var(--cymru-font-weight-semibold);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
  color: var(--cymru-color-link);
  text-decoration-thickness: max(1px, 0.0625rem);
  text-underline-offset: 0.15em;
}

a:hover {
  color: var(--cymru-color-link-hover);
}

a:visited {
  color: var(--cymru-color-link-visited);
}

/* ==========================================================================
   Lists
   ========================================================================== */

ul,
ol {
  margin-block: 0 var(--cymru-space-4);
  padding-inline-start: var(--cymru-space-6);
}

li {
  line-height: var(--cymru-line-height-body);
}

/* ==========================================================================
   Code
   ========================================================================== */

code,
kbd,
pre,
samp {
  font-family: var(--cymru-font-family-monospace);
  font-size: 0.95em;
}
}

/* ---- layout/containers.css ---- */
@layer layout {
@layer layout;

/*
 * CymruBlazor Layout - Container
 *
 * Backs the <CyContainer> component (Components/Layout/CyContainer.razor),
 * whose BaseCssClass is "cy-container". Previous versions of this file
 * targeted a "cymru-container" naming convention that no component ever
 * emitted, so containers rendered with zero layout styling.
 */

.cy-container {
  width: 100%;

  margin-inline: auto;

  padding-inline: var(--cymru-gutter-mobile);

  box-sizing: border-box;
}

.cy-container--sm {
  max-width: var(--cymru-container-sm);
}

.cy-container--md {
  max-width: var(--cymru-container-md);
}

.cy-container--lg {
  max-width: var(--cymru-container-lg);
}

.cy-container--xl {
  max-width: var(--cymru-container-xl);
}

.cy-container--fluid {
  max-width: none;
}

.cy-container--no-padding {
  padding-inline: 0;
}

/*
 * Responsive gutters
 */

@media (min-width: 48rem) {
  .cy-container {
    padding-inline: var(--cymru-gutter-tablet);
  }

  .cy-container--no-padding {
    padding-inline: 0;
  }
}

@media (min-width: 64rem) {
  .cy-container {
    padding-inline: var(--cymru-gutter-desktop);
  }

  .cy-container--no-padding {
    padding-inline: 0;
  }
}

@media (min-width: 90rem) {
  .cy-container {
    padding-inline: var(--cymru-gutter-xlarge);
  }

  .cy-container--no-padding {
    padding-inline: 0;
  }
}
}

/* ---- layout/grid.css ---- */
@layer layout {
@layer layout;

/*
 * CymruBlazor Layout - Stack, Cluster, Grid, Sidebar & Centre primitives
 *
 * Every class in this file is generated directly by CssBuilder inside the
 * matching component's *.razor.cs. Keep these two files in sync:
 *
 *   CyStack   -> cy-stack, cy-stack--horizontal|vertical, cy-stack--wrap,
 *                cy-gap-{size}, cy-align-{align}, cy-justify-{justify}
 *   CyCluster -> cy-cluster, cy-cluster--wrap,
 *                cy-gap-{size}, cy-align-{align}, cy-justify-{justify}
 *   CyGrid    -> cy-grid, cy-grid--cols-{n|auto}, cy-gap-{size},
 *                cy-grid--dense, cy-grid--auto-rows
 *   CySidebar -> cy-sidebar, cy-sidebar--left|right, cy-sidebar--sm|md|lg,
 *                cy-sidebar--compact|icon-only|collapsed, cy-sidebar__header,
 *                cy-sidebar__brand, cy-sidebar__toggle
 *                (conventions: cy-sidebar__item, cy-sidebar__label,
 *                cy-sidebar__heading - see the Sidebar section below)
 *   CyCenter  -> cy-center, cy-center--horizontal|vertical,
 *                cy-center--full-height
 *
 * {size} values come from ComponentSize/GridGap and are the enum name
 * lower-cased (e.g. ExtraSmall -> extrasmall).
 */

/* ==========================================================================
   Shared gap / align / justify utilities
   (consumed by cy-stack and cy-cluster)
   ========================================================================== */

.cy-gap-none,
.cy-gap-unspecified {
  gap: 0;
}

.cy-gap-extrasmall {
  gap: var(--cymru-layout-gap-xs);
}

.cy-gap-small {
  gap: var(--cymru-layout-gap-sm);
}

.cy-gap-medium {
  gap: var(--cymru-layout-gap-md);
}

.cy-gap-large {
  gap: var(--cymru-layout-gap-lg);
}

.cy-gap-extralarge {
  gap: var(--cymru-layout-gap-xl);
}

.cy-align-stretch {
  align-items: stretch;
}

.cy-align-start {
  align-items: flex-start;
}

.cy-align-center {
  align-items: center;
}

.cy-align-end {
  align-items: flex-end;
}

.cy-align-baseline {
  align-items: baseline;
}

.cy-justify-start {
  justify-content: flex-start;
}

.cy-justify-center {
  justify-content: center;
}

.cy-justify-end {
  justify-content: flex-end;
}

.cy-justify-spacebetween {
  justify-content: space-between;
}

.cy-justify-spacearound {
  justify-content: space-around;
}

.cy-justify-spaceevenly {
  justify-content: space-evenly;
}

/* ==========================================================================
   Stack
   ========================================================================== */

.cy-stack {
  display: flex;

  flex-direction: column;

  /* No hardcoded gap here - the .cy-gap-{size} modifier class (always
     applied alongside this one, generated by CyStack.razor.cs's
     BuildCssClass) supplies it. A hardcoded `gap: ...` here previously
     always won the cascade tie against .cy-gap-small/.cy-gap-large/etc.
     (equal specificity, declared later in this file), which meant the
     Gap parameter had no visible effect for any value except Medium -
     see the matching fix on .cy-grid and .cy-cluster below. */
}

.cy-stack--horizontal {
  flex-direction: row;
}

.cy-stack--vertical {
  flex-direction: column;
}

.cy-stack--wrap {
  flex-wrap: wrap;
}

/*
 * Opt-in utility: collapses a horizontal cy-stack to a vertical column
 * below the tablet/desktop breakpoint (matches the .cy-sidebar breakpoint
 * below). Deliberately NOT applied to .cy-stack--horizontal by default -
 * many horizontal stacks (button rows, toolbars) are meant to wrap in
 * place rather than stack vertically, so this is opt-in via the Class
 * parameter (e.g. <CyStack Class="cy-stack--collapse-tablet">) on the
 * specific instances that need it, such as a sidebar+main-content layout.
 * See MainLayout.razor for the canonical usage.
 */
@media (max-width: 63.99rem) {
  .cy-stack--collapse-tablet.cy-stack--horizontal {
    flex-direction: column;
  }
}

/* ==========================================================================
   Cluster
   ========================================================================== */

.cy-cluster {
  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  /* See the matching comment on .cy-stack above - no hardcoded gap
     here; the .cy-gap-{size} modifier class supplies it. */
}

.cy-cluster--wrap {
  flex-wrap: wrap;
}

/* ==========================================================================
   Grid
   ========================================================================== */

.cy-grid {
  display: grid;

  /* See the matching comment on .cy-stack above - no hardcoded gap
     here; the .cy-gap-{size} modifier class supplies it. */
}

.cy-grid--cols-auto {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.cy-grid--cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.cy-grid--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cy-grid--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cy-grid--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.cy-grid--cols-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.cy-grid--cols-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.cy-grid--cols-12 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.cy-grid--dense {
  grid-auto-flow: dense;
}

.cy-grid--auto-rows {
  grid-auto-rows: 1fr;
}

@media (max-width: 47.99rem) {
  .cy-grid--cols-2,
  .cy-grid--cols-3,
  .cy-grid--cols-4,
  .cy-grid--cols-5,
  .cy-grid--cols-6,
  .cy-grid--cols-12 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
  .cy-grid--cols-3,
  .cy-grid--cols-4,
  .cy-grid--cols-5,
  .cy-grid--cols-6,
  .cy-grid--cols-12 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Sidebar
   ========================================================================== */

/*
 * <CySidebar> renders an <aside>. It is designed to sit as a flex item
 * alongside <main> inside a horizontal <CyStack> (see MainLayout.razor),
 * so it is sized with flex-basis rather than assuming a CSS Grid parent.
 */

.cy-sidebar {
  flex: 0 0 auto;

  /* Always span the full height of the row it sits in, even when the parent
     sets align-items: flex-start (an item's own align-self beats its
     container's align-items), so the sidebar background and border reach the
     bottom of the page instead of stopping at the end of its content. */
  align-self: stretch;

  box-sizing: border-box;

  border-inline-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);

  background-color: var(--cymru-color-surface);
}

.cy-sidebar--right {
  border-inline-end: 0;
  border-inline-start: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  order: 1;
}

.cy-sidebar--sm {
  flex-basis: 14rem;
  width: 14rem;
}

.cy-sidebar--md {
  flex-basis: 18rem;
  width: 18rem;
}

.cy-sidebar--lg {
  flex-basis: 22rem;
  width: 22rem;
}

/*
 * Hidden state. The aside itself collapses to zero width, but it must be
 * the containing block for .cy-sidebar__reveal-handle (position: relative)
 * and must NOT clip it (overflow: visible) - otherwise the handle is either
 * placed against some distant ancestor (off-screen, causing a horizontal
 * scrollbar) or clipped by the very box it is meant to escape from. Every
 * other child is display: none, which removes the header, brand and nav
 * links from layout, the tab order and the accessibility tree, so there is
 * nothing invisible left to Tab into. (Not applied while the mobile drawer
 * is open - the drawer always shows its full contents.)
 */
.cy-sidebar--collapsed {
  position: relative;
  flex-basis: 0;
  width: 0;
  overflow: visible;
  border-width: 0;
}

.cy-sidebar--collapsed:not(.cy-sidebar--mobile-open) > :not(.cy-sidebar__reveal-handle) {
  display: none;
}

/*
 * Belt and braces: consumer stylesheets are unlayered, so they always beat
 * this layered file - e.g. a consumer rule such as ".app-nav { display: flex }"
 * defeats the display: none above. visibility is inherited and is almost never
 * set by consumers, so it reliably removes anything still rendered from view,
 * the tab order and the accessibility tree. The reveal handle opts back in.
 */
.cy-sidebar--collapsed:not(.cy-sidebar--mobile-open) {
  visibility: hidden;
}

/*
 * CySidebar.Brand - optional lockup (e.g. <CyBrandLogo />) at the top
 * of the sidebar, paired with the expand/collapse chevron toggle in a
 * shared header row. Brand always renders, in every collapse state
 * (see CySidebar.razor.cs) - CySidebar has no way to know what's
 * inside it, so it's up to the consumer's fragment to swap in
 * something narrow (e.g. <CyBrandLogo SymbolOnly="@Collapsed" />) once
 * collapsed. The rules below just handle the *layout* switch, from a
 * side-by-side row while expanded to a stacked column once the rail
 * narrows to Compact or IconOnly width.
 */
.cy-sidebar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cymru-space-2);

  padding: var(--cymru-space-2) var(--cymru-space-4);
  border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

.cy-sidebar__brand {
  min-width: 0;
  flex: 1 1 auto;
}

.cy-sidebar__toggle,
.cy-sidebar__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;

  width: 2rem;
  height: 2rem;

  border: none;
  border-radius: var(--cymru-radius-sm);
  background: transparent;
  color: var(--cymru-color-text-muted);
  cursor: pointer;
}

.cy-sidebar__toggle:hover,
.cy-sidebar__step:hover {
  background-color: var(--cymru-color-surface-alt);
}

.cy-sidebar__toggle:focus-visible,
.cy-sidebar__step:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

/*
 * Once collapsed to either rail, there's no longer room for the brand
 * and the toggle side by side - stack them instead (brand's own
 * content is expected to have shrunk to an icon-sized mark by now) and
 * centre both, matching how the collapsed nav items centre themselves.
 */
.cy-sidebar--compact .cy-sidebar__header,
.cy-sidebar--icon-only .cy-sidebar__header {
  flex-direction: column;
  justify-content: center;
  padding-inline: var(--cymru-space-1);
}

/*
 * Directional size controls (three or more States): a narrow chevron and a
 * widen chevron side by side. Expanded shows only "narrow" (pushed to the end
 * of the row), the last state shows only "widen", every state in between
 * shows both.
 */
.cy-sidebar__steps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  gap: var(--cymru-space-1);
  margin-inline-start: auto;
}

.cy-sidebar--compact .cy-sidebar__steps,
.cy-sidebar--icon-only .cy-sidebar__steps {
  justify-content: center;
  inline-size: 100%;
}


.cy-sidebar--compact .cy-sidebar__brand,
.cy-sidebar--icon-only .cy-sidebar__brand {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
}

/*
 * cy-sidebar__item - a navigation row (icon + cy-sidebar__label). It must be
 * a flex container in EVERY state: the Compact and IconOnly rules below set
 * flex-direction / align-items / justify-content, which do nothing on a block
 * element (the icon and label would just flow inline and wrap unpredictably).
 * A consumer's own unlayered rules still override any of this.
 */
.cy-sidebar__item {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-3);
  padding: var(--cymru-space-2) var(--cymru-space-4);
  border-radius: var(--cymru-radius-md);
  color: var(--cymru-color-text);
  text-decoration: none;
  cursor: pointer;
}

.cy-sidebar__item > .cy-icon {
  flex: 0 0 auto;
}

.cy-sidebar__item:hover {
  background-color: var(--cymru-color-surface-alt);
}

.cy-sidebar__item:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: -2px;
}

.cy-sidebar__item[aria-current="page"] {
  background-color: var(--cymru-color-primary-subtle);
  color: var(--cymru-color-primary);
  font-weight: var(--cymru-font-weight-medium);
}

/*
 * CollapseMode.Compact - collapses to a narrow rail that keeps a short
 * label stacked beneath each item's icon (reference design: the
 * "Dashboard / Patient Search / Referrals ..." rail with visible
 * labels). Consumers opt each nav row into the icon-over-label layout
 * via class "cy-sidebar__item", and each row's text via
 * "cy-sidebar__label" - both are plain conventions, not components.
 */
.cy-sidebar--compact {
  flex-basis: 6.5rem;
  width: 6.5rem;
  overflow: hidden;
}

.cy-sidebar--compact .cy-sidebar__item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cymru-space-1);
  text-align: center;
  padding: var(--cymru-space-2);
}

.cy-sidebar--compact .cy-sidebar__item > .cy-icon {
  margin-inline: auto;
}

.cy-sidebar--compact .cy-sidebar__label {
  font-size: var(--cymru-font-size-xs);
  white-space: normal;
  line-height: var(--cymru-line-height-tight, 1.2);
}

/*
 * CollapseMode.IconOnly - the narrowest rail: icons only, no labels, no
 * brand lockup (reference design: the bare icon-column rail). Labels
 * are hidden visually (not removed / not aria-hidden) so screen reader
 * users are unaffected.
 */
.cy-sidebar--icon-only {
  flex-basis: 5rem;
  width: 5rem;
  overflow: hidden;
}

.cy-sidebar--icon-only .cy-sidebar__item {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--cymru-space-2);
  min-block-size: 3rem;
}

/* With no label to carry meaning, the icon is the whole control, so it is
   drawn at 1.5rem (24px, the CyIcon default) rather than the 20px used beside
   a label. CyIcon only sets width/height presentation attributes, which any
   CSS rule overrides. Centred in the rail by the flex rules above. */
.cy-sidebar--icon-only .cy-sidebar__item .cy-icon {
  width: 1.5rem;
  height: 1.5rem;
  margin-inline: auto;
}

/*
 * Shared "visually hidden, still in the accessible tree" treatment for
 * cy-sidebar__label (IconOnly) and cy-sidebar__heading (Compact and
 * IconOnly both hide group headings - the reference design shows no
 * section headings once the sidebar has collapsed to either rail).
 */
.cy-sidebar--icon-only .cy-sidebar__label,
.cy-sidebar--compact .cy-sidebar__heading,
.cy-sidebar--icon-only .cy-sidebar__heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Hidden Sidebar Reveal Handle --- */
.cy-sidebar__reveal-handle {
    visibility: visible;
    position: absolute;
    top: 0.75rem;
    inset-inline-start: 100%;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin: 0;
    border: 1px solid var(--cymru-color-border, #e2e8f0);
    border-inline-start: none;
    border-start-end-radius: var(--cymru-radius-md, 0.375rem);
    border-end-end-radius: var(--cymru-radius-md, 0.375rem);
    background-color: var(--cymru-color-surface, #ffffff);
    color: var(--cymru-color-text, #1e293b);
    cursor: pointer;
    box-shadow: var(--cymru-shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cy-sidebar--right .cy-sidebar__reveal-handle {
    inset-inline-start: auto;
    inset-inline-end: 100%;
    border-inline-start: 1px solid var(--cymru-color-border, #e2e8f0);
    border-inline-end: none;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    border-start-start-radius: var(--cymru-radius-md, 0.375rem);
    border-end-start-radius: var(--cymru-radius-md, 0.375rem);
}

.cy-sidebar__reveal-handle:hover,
.cy-sidebar__reveal-handle:focus-visible {
    background-color: var(--cymru-color-surface-alt, #f1f5f9);
    color: var(--cymru-color-primary-on-surface, #0284c7);
    outline: 2px solid var(--cymru-color-focus, #38bdf8);
    outline-offset: 1px;
}

/* --- Mobile Drawer and Backdrop --- */
.cy-sidebar__backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--cymru-z-overlay);
    background-color: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(2px);
    transition: opacity 0.2s ease-in-out;
}

.cy-sidebar__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    margin-inline-start: auto;
    border: 1px solid var(--cymru-color-border, #e2e8f0);
    border-radius: var(--cymru-radius-md, 0.375rem);
    background-color: var(--cymru-color-surface, #ffffff);
    color: var(--cymru-color-text, #1e293b);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cy-sidebar__close:hover,
.cy-sidebar__close:focus-visible {
    background-color: var(--cymru-color-surface-alt, #f1f5f9);
    color: var(--cymru-color-danger, #ef4444);
    outline: 2px solid var(--cymru-color-focus, #38bdf8);
    outline-offset: 1px;
}

@media (max-width: 47.99rem) {
    .cy-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: var(--cymru-z-modal);
        display: flex;
        flex-direction: column;
        max-width: min(85vw, 20rem);
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .cy-sidebar--left {
        inset-inline-start: 0;
        transform: translateX(-100%);
    }

    .cy-sidebar--right {
        inset-inline-end: 0;
        transform: translateX(100%);
    }

    .cy-sidebar--mobile-open.cy-sidebar--left,
    .cy-sidebar--mobile-open.cy-sidebar--right {
        transform: translateX(0);
        box-shadow: var(--cymru-shadow-xl, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1));
    }

    /* A closed drawer is off-canvas, so it must also leave the tab order and
       accessibility tree. visibility flips after the slide-out finishes. */
    .cy-sidebar:not(.cy-sidebar--mobile-open) {
        visibility: hidden;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.25s;
    }

    .cy-sidebar--mobile-open {
        visibility: visible;
    }

    /* The open drawer is a programmatic focus target (tabindex="-1") for
       CyFocusTrap-style containment; it is not a control, so no ring. */
    .cy-sidebar--mobile-open:focus {
        outline: none;
    }

    /* State=Hidden describes the desktop rail; an open drawer always shows
       its full contents. */
    .cy-sidebar--mobile-open.cy-sidebar--collapsed {
        flex-basis: auto;
        width: 100%;
        overflow: auto;
    }

    /* The reveal handle is a desktop affordance; on mobile the consumer's
       own control opens the drawer via MobileOpen. */
    .cy-sidebar__reveal-handle {
        display: none;
    }
}

/*
 * CollapseMode.Disabled - the sidebar can never collapse, so no
 * additional width/overflow rule is needed here; CySidebar simply never
 * applies --collapsed/--compact/--icon-only while in this mode (see
 * CySidebar.razor.cs, EffectiveCollapsed). data-collapse-mode="disabled"
 * remains available as a styling/testing hook for consumers who want to
 * visually distinguish a non-collapsible sidebar (e.g. hide a toggle
 * trigger entirely rather than rendering one that does nothing).
 */

@media (max-width: 63.99rem) {
  .cy-sidebar {
    flex-basis: 100%;
    width: 100%;
    border-inline-end: 0;
    border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  }

  .cy-sidebar--right {
    border-inline-start: 0;
    border-block-start: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  }

  /* Declared after the rules above so Hidden still wins the cascade tie. */
  .cy-sidebar--collapsed {
    flex-basis: 0;
    width: 0;
    border-width: 0;
  }
}

/*
 * Note: <CyCenter> ("cy-center") is intentionally NOT duplicated here.
 * Unlike the other layout primitives, CyCenter.razor.css already defines
 * its rules correctly using real class selectors (not the unsupported
 * :host selector - see the note below), so Blazor's CSS isolation scopes
 * it correctly on its own.
 */
}

/* ---- layout/page.css ---- */
@layer layout {
@layer layout;

/*
 * CymruBlazor Layout - CyPage and CyPageSection
 *
 * Class names are generated by CyPage.razor.cs and CyPageSection.razor.cs.
 * The widths come from the --cymru-page-max-width-* tokens in tokens/aliases.css.
 */

.cy-page {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--cymru-gutter-mobile);
  box-sizing: border-box;
  max-width: var(--cymru-page-max-width-default);
}

.cy-page--narrow {
  max-width: var(--cymru-page-max-width-narrow);
}

.cy-page--default {
  max-width: var(--cymru-page-max-width-default);
}

.cy-page--wide {
  max-width: var(--cymru-page-max-width-wide);
}

.cy-page--full {
  max-width: var(--cymru-page-max-width-full);
}

.cy-page--no-padding {
  padding-inline: 0;
}

@media (min-width: 48rem) {
  .cy-page {
    padding-inline: var(--cymru-gutter-tablet);
  }

  .cy-page--no-padding {
    padding-inline: 0;
  }
}

@media (min-width: 64rem) {
  .cy-page {
    padding-inline: var(--cymru-gutter-desktop);
  }

  .cy-page--no-padding {
    padding-inline: 0;
  }
}

@media (min-width: 90rem) {
  .cy-page {
    padding-inline: var(--cymru-gutter-xlarge);
  }

  .cy-page--no-padding {
    padding-inline: 0;
  }
}

.cy-page-section + .cy-page-section {
  margin-block-start: var(--cymru-space-8);
}

.cy-page-section__heading {
  margin: 0 0 var(--cymru-space-4);
}
}

/* ---- components/accordion.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Content - CyAccordion / CyAccordionItem
 *
 * Class names here are generated by CyAccordion.razor.cs and
 * CyAccordionItem.razor.cs's BuildCssClass() - keep the two in sync
 * (see CONTRIBUTING.md).
 */

.cy-accordion {
  display: flex;

  flex-direction: column;

  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);

  border-radius: var(--cymru-radius-sm);

  overflow: hidden;
}

.cy-accordion-item {
  border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

.cy-accordion-item:last-child {
  border-block-end: none;
}

.cy-accordion-item__heading {
  margin: 0;
}

.cy-accordion-item__trigger {
  display: flex;

  align-items: center;

  gap: var(--cymru-space-2);

  width: 100%;

  padding: var(--cymru-spacing-component-md);

  background: var(--cymru-color-surface);
  border: none;

  color: var(--cymru-color-text);

  font-size: 1rem;
  font-weight: 600;
  text-align: start;

  cursor: pointer;
}

.cy-accordion-item__trigger:hover {
  background-color: var(--cymru-color-surface-alt);
}

.cy-accordion-item__trigger:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: -2px;
}

.cy-accordion-item__trigger:disabled {
  color: var(--cymru-color-disabled-text);
  cursor: not-allowed;
}

.cy-accordion-item__chevron {
  flex: 0 0 auto;

  transition: transform 150ms ease;
}

.cy-accordion-item__trigger[aria-expanded="true"] .cy-accordion-item__chevron {
  transform: rotate(180deg);
}

.cy-accordion-item__panel {
  padding: var(--cymru-spacing-component-md);

  color: var(--cymru-color-text);
}

.cy-accordion-item__panel :last-child {
  margin-block-end: 0;
}
}

/* ---- components/badges.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Content - CyBadge
 *
 * Class names here are generated by CyBadge.razor.cs's BuildCssClass() -
 * keep the two in sync (see CONTRIBUTING.md).
 */

.cy-badge {
  display: inline-flex;

  align-items: center;

  gap: var(--cymru-spacing-component-xs);

  padding: var(--cymru-space-1) var(--cymru-space-3);

  border: var(--cymru-border-width-thin) solid transparent;

  border-radius: var(--cymru-radius-sm);

  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;

  white-space: nowrap;
}

.cy-badge--pill {
  border-radius: 999px;
}

.cy-badge--primary {
  background-color: var(--cymru-color-primary-subtle);
  color: var(--cymru-color-primary);
}

.cy-badge--secondary {
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-secondary);
}

.cy-badge--tertiary {
  background-color: var(--cymru-color-surface-accent);
  color: var(--cymru-color-brand-accent);
}

.cy-badge--success {
  background-color: var(--cymru-color-success-background);
  color: var(--cymru-color-success-text);
}

.cy-badge--warning {
  background-color: var(--cymru-color-warning-background);
  /* Deliberately var(--cymru-color-text), not var(--cymru-color-warning) -
     the warning accent colour (--cymru-yellow-500) is too light to read
     against its own pale background. CyAlert makes the same choice for
     its message text for the same reason. */
  color: var(--cymru-color-text);
}

.cy-badge--danger {
  background-color: var(--cymru-color-danger-background);
  color: var(--cymru-color-danger-text);
}

.cy-badge--info {
  background-color: var(--cymru-color-info-background);
  color: var(--cymru-color-info);
}

.cy-badge--surface {
  background-color: var(--cymru-color-surface);
  border-color: var(--cymru-color-border);
  color: var(--cymru-color-text);
}

.cy-badge--neutral {
  background-color: var(--cymru-color-background);
  border-color: var(--cymru-color-border);
  color: var(--cymru-color-text-muted);
}

.cy-badge__label {
  display: inline-block;
}

.cy-badge__dismiss {
  position: relative;

  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 1rem;
  height: 1rem;

  padding: 0;

  background: transparent;
  border: none;
  border-radius: 999px;

  color: currentColor;

  cursor: pointer;
}

.cy-badge__dismiss:hover {
  background-color: rgb(0 0 0 / 0.08);
}

.cy-badge__dismiss:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

/* WCAG 2.2 SC 2.5.8 - 44x44px minimum touch target, without growing the
   badge's compact visual size. ((44 - 16) / 2 = 14px expansion on each side.) */
.cy-badge__dismiss::before {
  content: "";
  position: absolute;
  inset: -0.875rem;
}
}

/* ---- components/code-block.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Content - CyCodeBlock
 *
 * Class names here are generated by CyCodeBlock.razor - keep the two in
 * sync (see CONTRIBUTING.md).
 *
 * Deliberately dark regardless of the active CyThemeProvider theme (code
 * blocks conventionally read as a fixed "console" surface in both light
 * and dark-mode documentation sites) - this is why colours here are
 * literal, not the semantic --cymru-color-* tokens used elsewhere, which
 * are theme-reactive by design.
 */

.cy-code-block {
  overflow: hidden;

  border-radius: var(--cymru-radius-sm);

  background-color: #0f172a;
}

.cy-code-block__header {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: var(--cymru-space-2) var(--cymru-space-4);

  border-block-end: var(--cymru-border-width-thin) solid rgb(255 255 255 / 0.1);

  background-color: #1e293b;
}

.cy-code-block__language {
  color: #94a3b8;

  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cy-code-block__copy {
  display: inline-flex;

  align-items: center;

  gap: var(--cymru-space-1);

  padding: var(--cymru-space-1) var(--cymru-space-2);

  background: transparent;
  border: var(--cymru-border-width-thin) solid rgb(255 255 255 / 0.15);
  border-radius: var(--cymru-radius-sm);

  color: #94a3b8;

  font-size: 0.75rem;

  cursor: pointer;
}

.cy-code-block__copy:hover {
  background-color: rgb(255 255 255 / 0.08);
  color: #e2e8f0;
}

.cy-code-block__copy:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-code-block__pre {
  margin: 0;

  padding: var(--cymru-space-4);

  overflow-x: auto;

  color: #e2e8f0;

  font-family: var(--cymru-font-family-monospace);
  font-size: 0.875rem;
  line-height: 1.6;
}

.cy-code-block__code {
  font-family: inherit;
}
}

/* ---- components/tabs.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Layout - CyTabs / CyTabPanel
 *
 * Class names here are generated by CyTabs.razor.cs's TabButtonClass() and
 * BuildCssClass() - keep the two in sync (see CONTRIBUTING.md).
 */

.cy-tabs__list {
  display: flex;

  gap: var(--cymru-space-1);

  border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

.cy-tabs__tab {
  padding: var(--cymru-spacing-component-sm) var(--cymru-spacing-component-md);

  background: transparent;
  border: none;
  border-block-end: var(--cymru-border-width-thick) solid transparent;

  color: var(--cymru-color-text-muted);

  font-size: 0.9375rem;
  font-weight: 600;

  cursor: pointer;

  /* Sit flush against the shared border-block-end above. */
  margin-block-end: calc(var(--cymru-border-width-thin) * -1);
}

.cy-tabs__tab:hover {
  color: var(--cymru-color-text);
}

.cy-tabs__tab:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: -2px;
}

.cy-tabs__tab:disabled {
  color: var(--cymru-color-disabled-text);
  cursor: not-allowed;
}

.cy-tabs__tab--active {
  border-block-end-color: var(--cymru-color-primary-on-surface);
  color: var(--cymru-color-primary-on-surface);
}

.cy-tabs__panel {
  padding-block-start: var(--cymru-spacing-component-md);
}

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

/* ---- components/theming.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Theming - CyThemeProvider
 *
 * <CyThemeProvider> renders a wrapper <div data-theme="..."> so the
 * [data-theme="dark"] / [data-theme="high-contrast"] selectors in
 * wwwroot/css/themes/*.css have something to attach to. Consumers
 * typically wrap their entire application in it, so the wrapper must not
 * introduce an extra box in the layout flow (this would otherwise break
 * height:100vh flex/grid app shells with an unexpected block-level
 * ancestor). display: contents removes the box while keeping the
 * data-theme attribute (and therefore the theme) applied to its
 * descendants via normal CSS selector matching.
 *
 * Because this wrapper never generates a box, <body> itself sits
 * *outside* the data-theme attribute's reach - it's an ancestor of the
 * wrapper, not a descendant. wwwroot/css/themes/dark.css and
 * high-contrast.css compensate with an additional
 * `body:has(.cy-theme-provider[data-theme="..."])` selector so <body>'s
 * own background/text colour (set in base/typography.css) - and
 * anything using `color: inherit`/`currentColor` - still switches
 * correctly. See the comment at the top of themes/dark.css for the full
 * explanation; keep that selector in sync with any future theme added
 * here.
 */

.cy-theme-provider {
  display: contents;
}
}

/* ---- components/typography.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Content - CyTypography
 *
 * base/typography.css already styles bare h1-h6/p/etc. elements. This file
 * covers CyTypography's *variant* classes so its visual result stays
 * identical to the equivalent bare element regardless of which tag
 * As="..." actually renders (see CyTypography.cs for why the tag can
 * differ from the variant).
 *
 * H1-H6 map to the design system's heading-xl/l/m/s/xs/xs tiers (see
 * tokens/typography.css for the mapping rationale - H5 and H6 are both
 * the xs tier, since the source design system only defines 5 heading
 * sizes). BodyLarge is a CymruBlazor-specific addition, not part of the
 * design system's 9 core semantic tokens (heading-xl/l/m/s/xs, body-m/s,
 * label, caption).
 */

.cy-typography--h1 {
  font-size: var(--cymru-font-size-heading-1);
  font-weight: var(--cymru-font-weight-bold);
  line-height: var(--cymru-line-height-heading-1);
}

.cy-typography--h2 {
  font-size: var(--cymru-font-size-heading-2);
  font-weight: var(--cymru-font-weight-bold);
  line-height: var(--cymru-line-height-heading-2);
}

.cy-typography--h3 {
  font-size: var(--cymru-font-size-heading-3);
  font-weight: var(--cymru-font-weight-bold);
  line-height: var(--cymru-line-height-heading-3);
}

.cy-typography--h4 {
  font-size: var(--cymru-font-size-heading-4);
  font-weight: var(--cymru-font-weight-bold);
  line-height: var(--cymru-line-height-heading-4);
}

.cy-typography--h5 {
  font-size: var(--cymru-font-size-heading-5);
  font-weight: var(--cymru-font-weight-bold);
  line-height: var(--cymru-line-height-heading-5);
}

.cy-typography--h6 {
  font-size: var(--cymru-font-size-heading-6);
  font-weight: var(--cymru-font-weight-bold);
  line-height: var(--cymru-line-height-heading-6);
}

.cy-typography--body {
  font-size: var(--cymru-font-size-body);
  font-weight: var(--cymru-font-weight-regular);
  line-height: var(--cymru-line-height-body-size);
}

.cy-typography--bodylarge {
  font-size: var(--cymru-font-size-lg);
  line-height: var(--cymru-line-height-body);
}

.cy-typography--bodysmall {
  font-size: var(--cymru-font-size-body-small);
  line-height: var(--cymru-line-height-body-small);
}

.cy-typography--caption {
  display: inline-block;
  font-size: var(--cymru-font-size-caption);
  line-height: var(--cymru-line-height-caption);
  letter-spacing: var(--cymru-letter-spacing-caption);
  color: var(--cymru-color-text-muted);
}

.cy-typography--label {
  font-size: var(--cymru-font-size-label);
  font-weight: var(--cymru-font-weight-medium);
  line-height: var(--cymru-line-height-label);
  letter-spacing: var(--cymru-letter-spacing-label);
}
}

/* ---- components/cards.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Content - CyCard
 *
 * Class names here are generated by CyCard.razor.cs's BuildCssClass() -
 * keep the two in sync (see CONTRIBUTING.md).
 */

.cy-card {
  display: flex;

  flex-direction: column;

  background-color: var(--cymru-color-surface);

  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);

  border-radius: var(--cymru-radius-card);

  overflow: hidden;

  color: inherit;

  text-decoration: none;
}

/*
 * The design system defines exactly one shadow role for cards -
 * sr.elevation.raised ("gentle lift... use only when a border alone is
 * insufficient"). There is no legitimate deeper card shadow: the next
 * step up, sr.elevation.overlay, is reserved for floating layers (modals,
 * drawers, tooltips) sitting in a genuinely separate layer above the
 * page - using it for a merely-emphasised card would misrepresent that
 * layering to the user. Medium/Large therefore intentionally resolve to
 * the same value as Small, not a deeper one.
 *
 * Decision recorded 2026-09-26 (roadmap D4): accepted as correct, not a
 * bug. Closed in known-issues-and-backlog.md. Revisit only if a real
 * consumer asks for graduated elevation and can point to a design-system
 * update defining the missing shadow role(s) - don't invent one here.
 */

.cy-card--elevation-none,
.cy-card--elevation-unspecified {
  box-shadow: var(--cymru-shadow-none);
}

.cy-card--elevation-small,
.cy-card--elevation-medium,
.cy-card--elevation-large {
  box-shadow: var(--cymru-shadow-raised);
}

/*
 * Interactive (whole-card link) treatment - rendered as <a> when
 * CyCard.Href is set. Must have a visible focus indicator distinct from
 * hover, per WCAG 2.2's focus-appearance requirements.
 */

.cy-card--interactive {
  cursor: pointer;
  transition:
    box-shadow 150ms ease,
    border-color 150ms ease;
}

.cy-card--interactive:hover {
  border-color: var(--cymru-color-border-strong);
  box-shadow: var(--cymru-shadow-raised);
}

.cy-card--interactive:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-card__header {
  padding: var(--cymru-space-4) var(--cymru-space-6) 0;
}

.cy-card__body {
  padding: var(--cymru-space-6);
  flex: 1 1 auto;
}

.cy-card__footer {
  padding: 0 var(--cymru-space-6) var(--cymru-space-6);
}

/*
 * CyCard additions (1.12.0). Every rule below is opt-in through a class that CyCard only emits for a
 * non-default parameter, so a card with default parameters renders and looks exactly as before.
 * Text colour is set in the same rule as the fill, and only tokens that every theme defines are used.
 */

.cy-card--outlined {
  box-shadow: var(--cymru-shadow-none);
}

.cy-card--flat {
  box-shadow: var(--cymru-shadow-none);
  border-color: transparent;
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text);
}

.cy-card--padding-compact .cy-card__header {
  padding: var(--cymru-space-3) var(--cymru-space-4) 0;
}

.cy-card--padding-compact .cy-card__body {
  padding: var(--cymru-space-4);
}

.cy-card--padding-compact .cy-card__footer {
  padding: 0 var(--cymru-space-4) var(--cymru-space-4);
}

.cy-card--padding-none .cy-card__header,
.cy-card--padding-none .cy-card__body,
.cy-card--padding-none .cy-card__footer {
  padding: 0;
}

.cy-card__title {
  margin: 0;
}

.cy-card__body[hidden] {
  display: none;
}

/* Collapsible: the title is a full-width disclosure button. */
.cy-card--collapsible .cy-card__header {
  padding-block-end: var(--cymru-space-4);
}

.cy-card--collapsible .cy-card__body {
  padding-block-start: 0;
}

.cy-card__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cymru-space-4);
  inline-size: 100%;
  min-block-size: var(--cymru-touch-target-min);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.cy-card__toggle:hover .cy-card__toggle-text {
  text-decoration: underline;
}

.cy-card__toggle:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-card__toggle-icon {
  display: inline-flex;
  flex-shrink: 0;
}

@media (forced-colors: active) {
  .cy-card--flat {
    border-color: CanvasText;
  }
}
}

/* ---- components/alerts.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Content - CyAlert
 *
 * Class names here are generated by CyAlert.razor.cs's BuildCssClass() -
 * keep the two in sync (see CONTRIBUTING.md).
 */

.cy-alert {
  display: flex;

  align-items: flex-start;

  gap: var(--cymru-space-4);

  padding: var(--cymru-space-4) var(--cymru-space-6);

  border: var(--cymru-border-width-thin) solid transparent;

  border-inline-start-width: var(--cymru-border-width-thick);

  border-radius: var(--cymru-radius-sm);
}

.cy-alert--info {
  background-color: var(--cymru-color-info-background);
  border-color: var(--cymru-color-info);
}

.cy-alert--success {
  background-color: var(--cymru-color-success-background);
  border-color: var(--cymru-color-success);
}

.cy-alert--warning {
  background-color: var(--cymru-color-warning-background);
  border-color: var(--cymru-color-warning);
}

.cy-alert--danger {
  background-color: var(--cymru-color-danger-background);
  border-color: var(--cymru-color-danger);
}

.cy-alert__content {
  flex: 1 1 auto;

  min-width: 0;

  /* WCAG 1.4.10 Reflow: a long unbroken string (URL, identifier) must wrap
     inside the alert rather than widen the whole page. */
  overflow-wrap: anywhere;
}

.cy-alert__title {
  display: block;
  margin-block-end: var(--cymru-space-1);
}

.cy-alert__message {
  color: var(--cymru-color-text);
}

.cy-alert__message :last-child {
  margin-block-end: 0;
}

.cy-alert__dismiss {
  position: relative;

  flex: 0 0 auto;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 1.5rem;
  height: 1.5rem;

  padding: 0;

  background: transparent;
  border: none;
  border-radius: var(--cymru-radius-sm);

  font-size: 1.25rem;
  line-height: 1;
  color: var(--cymru-color-text-muted);

  cursor: pointer;
}

.cy-alert__dismiss:hover {
  background-color: rgb(0 0 0 / 0.06);
  color: var(--cymru-color-text);
}

.cy-alert__dismiss:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

/* WCAG 2.2 SC 2.5.8 - 44x44px minimum touch target, without growing the
   button's 24px visual size (which would look oversized inside an
   inline alert). ((44 - 24) / 2 = 10px expansion on each side.) */
.cy-alert__dismiss::before {
  content: "";
  position: absolute;
  inset: -0.625rem;
}
}

/* ---- components/forms.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Forms - CyTextBox, CySelect, CyCheckbox, CyTextArea,
 * CyRadioGroup/CyRadio, CyDateInput, CyValidationSummary
 *
 * Class names generated by each component's markup - keep in sync (see
 * CONTRIBUTING.md). ".valid"/".invalid"/".modified" are NOT generated by
 * this library - they come from the framework's own
 * EditContext.FieldCssClass(FieldIdentifier), surfaced via InputBase's
 * built-in CssClass property, which CyFormFieldComponentBase.BuildFieldCssClass
 * folds in alongside our own classes.
 */

/* ==========================================================================
   Field wrapper (shared structure)
   ========================================================================== */

.cy-field {
  display: flex;

  flex-direction: column;

  gap: var(--cymru-space-1);

  margin-block-end: var(--cymru-space-6);
}

.cy-field__label {
  font-weight: var(--cymru-font-weight-semibold);
  font-size: var(--cymru-font-size-body);
  color: var(--cymru-color-text);
}

.cy-field__required-indicator {
  color: var(--cymru-color-danger);
  margin-inline-start: var(--cymru-space-1);
}

.cy-field__hint {
  margin: 0;
  font-size: var(--cymru-font-size-sm);
  color: var(--cymru-color-text-muted);
}

.cy-field__error {
  margin: 0;
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-semibold);
  color: var(--cymru-color-danger);
}

.cy-field.invalid .cy-textbox,
.cy-field.invalid .cy-input,
.cy-field.invalid .cy-select,
.cy-field--invalid .cy-textbox,
.cy-field--invalid .cy-input,
.cy-field--invalid .cy-select {
  border-color: var(--cymru-color-danger);
}

/* A raw control inside a <CyField> (or any markup) is flagged by ARIA alone. */
.cy-input[aria-invalid="true"],
.cy-select[aria-invalid="true"],
.cy-textarea[aria-invalid="true"] {
  border-color: var(--cymru-color-danger);
}

/* ==========================================================================
   CyTextBox / CySelect
   ========================================================================== */

.cy-textbox,
.cy-input,
.cy-select {
  box-sizing: border-box;

  width: 100%;
  /* WCAG 2.2 SC 2.5.8 - 44x44px minimum touch target. */
  min-height: var(--cymru-touch-target-min);

  padding: var(--cymru-space-2) var(--cymru-space-4);

  font-family: var(--cymru-font-family);
  font-size: var(--cymru-font-size-body);
  color: var(--cymru-color-text);

  background-color: var(--cymru-color-surface);

  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-sm);
}

.cy-textbox:focus-visible,
.cy-input:focus-visible,
.cy-select:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 1px;
}

.cy-textbox:disabled,
.cy-input:disabled,
.cy-select:disabled {
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text-muted);
  cursor: not-allowed;
}

.cy-select {
  cursor: pointer;
}

/* ==========================================================================
   CyCheckbox
   ========================================================================== */

.cy-field--checkbox {
  gap: var(--cymru-space-2);
}

.cy-checkbox {
  display: flex;

  align-items: center;

  /* WCAG 2.2 SC 2.5.8 - 44x44px minimum touch target. The visual
     checkbox stays 20px (below); the row's own height provides the
     expanded hit area rather than growing the checkbox itself. */
  min-height: var(--cymru-touch-target-min);

  gap: var(--cymru-space-2);
}

.cy-checkbox__input {
  width: 1.25rem;
  height: 1.25rem;

  accent-color: var(--cymru-color-primary);

  cursor: pointer;
}

.cy-checkbox__input:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-checkbox__input:disabled {
  cursor: not-allowed;
}

.cy-checkbox__label {
  font-size: var(--cymru-font-size-body);
  color: var(--cymru-color-text);
  cursor: pointer;
}

/* ==========================================================================
   CyTextArea
   ========================================================================== */

.cy-textarea {
  box-sizing: border-box;

  display: block;

  width: 100%;

  padding: var(--cymru-space-2) var(--cymru-space-4);

  font-family: var(--cymru-font-family);
  font-size: var(--cymru-font-size-body);
  color: var(--cymru-color-text);

  background-color: var(--cymru-color-surface);

  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-sm);

  resize: vertical;
}

.cy-textarea:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 1px;
}

.cy-textarea:disabled {
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text-muted);
  cursor: not-allowed;
}

.cy-field.invalid .cy-textarea,
.cy-field--invalid .cy-textarea {
  border-color: var(--cymru-color-danger);
}

/* ==========================================================================
   CyRadioGroup / CyRadio
   ========================================================================== */

.cy-radio-group {
  border: 0;
  padding: 0;
  margin-inline: 0;
}

.cy-radio-group legend.cy-field__label {
  padding: 0;
  width: 100%;
}

.cy-radios {
  display: flex;

  flex-direction: column;

  gap: var(--cymru-space-3);
}

.cy-radio-item {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  /* WCAG 2.2 SC 2.5.8 - 44x44px minimum touch target. */
  min-height: var(--cymru-touch-target-min);

  column-gap: var(--cymru-space-2);
}

.cy-radio-item__input {
  width: 1.25rem;
  height: 1.25rem;

  accent-color: var(--cymru-color-primary);

  cursor: pointer;
}

.cy-radio-item__input:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-radio-item__input:disabled {
  cursor: not-allowed;
}

.cy-radio-item__label {
  font-size: var(--cymru-font-size-body);
  color: var(--cymru-color-text);
  cursor: pointer;
}

.cy-radio-item__hint {
  flex-basis: 100%;

  margin: 0;

  /* Indented to sit under the label text, not the radio input itself -
     matches the DHCW/GOV.UK visual convention for per-option hints. */
  margin-inline-start: calc(1.25rem + var(--cymru-space-2));

  font-size: var(--cymru-font-size-sm);
  color: var(--cymru-color-text-muted);
}

/* ==========================================================================
   CyDateInput
   ========================================================================== */

.cy-date-input-group {
  border: 0;
  padding: 0;
  margin-inline: 0;
}

.cy-date-input-group legend.cy-field__label {
  padding: 0;
  width: 100%;
}

.cy-date-input {
  display: flex;

  flex-wrap: wrap;

  gap: var(--cymru-space-4);
}

.cy-date-input__item {
  display: flex;

  flex-direction: column;

  gap: var(--cymru-space-1);
}

.cy-date-input__label {
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-semibold);
  color: var(--cymru-color-text);
}

.cy-date-input__input {
  box-sizing: border-box;

  /* Fixed, character-based widths rather than the full-width .cy-textbox
     - a day/month/year segment has a known maximum length, so a fluid
     full-width field would only mislead users about how much to type. */
  padding: var(--cymru-space-2) var(--cymru-space-3);

  font-family: var(--cymru-font-family);
  font-size: var(--cymru-font-size-body);
  color: var(--cymru-color-text);

  background-color: var(--cymru-color-surface);

  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-sm);

  /* WCAG 2.2 SC 2.5.8 - 44x44px minimum touch target. */
  min-height: var(--cymru-touch-target-min);
}

.cy-date-input__input--day,
.cy-date-input__input--month {
  width: 3.5rem;
}

.cy-date-input__input--year {
  width: 5.5rem;
}

.cy-date-input__input:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 1px;
}

.cy-date-input__input:disabled {
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text-muted);
  cursor: not-allowed;
}

.cy-field.invalid .cy-date-input__input,
.cy-field--invalid .cy-date-input__input {
  border-color: var(--cymru-color-danger);
}

/* ==========================================================================
   CyValidationSummary
   ========================================================================== */

.cy-validation-summary {
  padding: var(--cymru-space-6);

  background-color: var(--cymru-color-danger-background);

  border: var(--cymru-border-width-thin) solid var(--cymru-color-danger);
  border-inline-start-width: var(--cymru-border-width-thick);
  border-radius: var(--cymru-radius-sm);

  margin-block-end: var(--cymru-space-6);
}

.cy-validation-summary__title {
  color: var(--cymru-color-danger);
  margin-block-end: var(--cymru-space-2);
}

/* Framework-rendered elements inside <ValidationSummary> - class names
   ("validation-errors", "validation-message") come from
   Microsoft.AspNetCore.Components.Forms.ValidationSummary itself. */

.cy-validation-summary .validation-errors {
  margin: 0;
  padding-inline-start: var(--cymru-space-6);
  list-style: disc;
}

.cy-validation-summary .validation-message {
  color: var(--cymru-color-danger);
  font-size: var(--cymru-font-size-body);
}

/* ==========================================================================
   Supported primitives for raw markup (1.8.0)

   .cy-input, .cy-select and .cy-textarea style a native control to match the
   CymruBlazor fields, in every theme. .cy-label and .cy-hint are the same
   label/hint typography as .cy-field__label / .cy-field__hint. They carry
   their own colours from theme tokens, so raw markup needs no dark-mode
   overrides. (.cy-textbox remains the class CyTextBox renders.)
   ========================================================================== */

.cy-label {
  font-weight: var(--cymru-font-weight-semibold);
  font-size: var(--cymru-font-size-body);
  color: var(--cymru-color-text);
}

.cy-hint {
  margin: 0;
  font-size: var(--cymru-font-size-sm);
  color: var(--cymru-color-text-muted);
}

/* ==========================================================================
   CyField (group mode renders a fieldset)
   ========================================================================== */

fieldset.cy-field--group {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-width: 0;
}

fieldset.cy-field--group > legend.cy-field__label {
  padding: 0;
  width: 100%;
}

/* ==========================================================================
   CyNumberInput - input with a trailing unit
   ========================================================================== */

.cy-input-affix {
  display: flex;

  align-items: center;

  gap: var(--cymru-space-2);
}

.cy-number-input {
  /* A number rarely needs the full width; the unit sits beside it. */
  width: auto;
  max-inline-size: 12rem;
}

.cy-input-affix__suffix {
  font-size: var(--cymru-font-size-body);
  color: var(--cymru-color-text);
}

/* ==========================================================================
   CyCheckboxGroup
   ========================================================================== */

.cy-checkbox-group {
  border: 0;
  padding: 0;
  margin-inline: 0;
  min-width: 0;
}

.cy-checkbox-group legend.cy-field__label {
  padding: 0;
  width: 100%;
}

.cy-checkboxes {
  display: flex;

  flex-direction: column;

  gap: var(--cymru-space-3);
}

.cy-checkbox-group__item {
  flex-wrap: wrap;
}

.cy-checkbox-group__item-hint {
  flex-basis: 100%;

  margin: 0;

  /* Sits under the label text, not the checkbox - same convention as radios. */
  margin-inline-start: calc(1.25rem + var(--cymru-space-2));

  font-size: var(--cymru-font-size-sm);
  color: var(--cymru-color-text-muted);
}
}

/* ---- components/navigation.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Layout Chrome - CySkipLink, CyBreadcrumb, CyPageHeader,
 * CyHeader, CyNavigation, CyHeroBanner, CyFooter
 *
 * Class names generated by each component - keep in sync (see
 * CONTRIBUTING.md).
 */

/* ==========================================================================
   CySkipLink
   ========================================================================== */

/*
 * .u-sr-only-focusable (utilities/screen-reader.css) already handles the
 * hide-until-focused mechanic. This adds the visible "banner" treatment
 * for when it IS focused.
 */

.cy-skip-link:focus,
.cy-skip-link:focus-visible {
  position: fixed;
  top: var(--cymru-space-2);
  left: var(--cymru-space-2);
  z-index: var(--cymru-z-toast);

  padding: var(--cymru-space-2) var(--cymru-space-6);

  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-primary-on-surface);

  border: var(--cymru-border-width-medium) solid var(--cymru-color-primary-on-surface);
  border-radius: var(--cymru-radius-sm);

  font-weight: var(--cymru-font-weight-semibold);
  text-decoration: none;
}

/* ==========================================================================
   CyBreadcrumb
   ========================================================================== */

.cy-breadcrumb__list {
  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: var(--cymru-space-2);

  margin: 0;
  padding: 0;

  list-style: none;

  font-size: var(--cymru-font-size-sm);
}

.cy-breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin-inline-start: var(--cymru-space-2);
  color: var(--cymru-color-text-muted);
}

.cy-breadcrumb__link {
  color: var(--cymru-color-link);
}

.cy-breadcrumb__current {
  color: var(--cymru-color-text-muted);
}

/* ==========================================================================
   CyPageHeader
   ========================================================================== */

.cy-page-header {
  padding-block: var(--cymru-space-12);
}

.cy-page-header__breadcrumb {
  margin-block-end: var(--cymru-space-4);
}

.cy-page-header__subtitle {
  color: var(--cymru-color-text-muted);
  margin-block-start: var(--cymru-space-1);
}

.cy-page-header__eyebrow {
  margin: 0 0 var(--cymru-space-1);
  color: var(--cymru-color-text-muted);
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-semibold);
}

/* Title and status badges share a line and wrap together on narrow screens. */
.cy-page-header__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cymru-space-2) var(--cymru-space-4);
}

.cy-page-header__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cymru-space-2);
}

/* ==========================================================================
   CyHeader
   ========================================================================== */

.cy-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cymru-space-6);

  padding: var(--cymru-space-3) var(--cymru-space-6);

  font-size: var(--cymru-font-size-sm);
}

/*
 * Background variants - same four values and same light/dark-text split
 * as CyFooter, so a header+footer pair using the matching colour reads
 * as one deliberate pairing rather than two independently-styled bars.
 */
.cy-header--primary {
  background-color: var(--cymru-color-accent);
  color: var(--cymru-color-accent-text);
}

.cy-header--secondary {
  background-color: var(--cymru-color-secondary);
  color: var(--cymru-color-text-inverse);
}

.cy-header--surface {
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  border-bottom: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

.cy-header--neutral {
  background-color: var(--cymru-grey-100);
  color: var(--cymru-color-text);
}

.cy-header--sticky {
  position: sticky;
  top: 0;
  z-index: var(--cymru-z-sticky);
}

.cy-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.cy-header__content {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cymru-space-6);
  flex: 1;
}

.cy-header__actions {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-2);
  flex-shrink: 0;
  margin-inline-start: auto;
}

.cy-header a {
  color: inherit;
  text-decoration: none;
}

.cy-header a:hover {
  text-decoration: underline;
}

.cy-header a:focus-visible {
  outline: var(--cymru-border-width-focus) solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 768px) {
  .cy-header {
    padding: var(--cymru-space-3) var(--cymru-space-4);
  }
}

/* ==========================================================================
   CyNavigation
   ========================================================================== */

.cy-navigation {
  position: relative;

  background-color: var(--cymru-color-surface);

  border-bottom: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

.cy-navigation__bar {
  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: var(--cymru-space-4) var(--cymru-space-6);
}

.cy-navigation__brand {
  display: flex;
  align-items: center;
}

/* Hidden at desktop widths - the menu is always visible there. */

.cy-navigation__toggle {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  /* WCAG 2.2 SC 2.5.8 - 44x44px minimum touch target. */
  width: var(--cymru-touch-target-min);
  height: var(--cymru-touch-target-min);

  padding: 0;

  background: transparent;
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-sm);

  cursor: pointer;
}

.cy-navigation__toggle:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-navigation__toggle-icon,
.cy-navigation__toggle-icon::before,
.cy-navigation__toggle-icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: var(--cymru-color-text);
}

.cy-navigation__toggle-icon::before {
  content: "";
  transform: translateY(-6px);
}

.cy-navigation__toggle-icon::after {
  content: "";
  transform: translateY(4px);
}

/* Mobile: menu is a collapsible panel, hidden unless open. */

.cy-navigation__menu {
  display: none;

  flex-direction: column;

  margin: 0;
  padding: 0 var(--cymru-space-6) var(--cymru-space-6);

  list-style: none;
}

.cy-navigation__menu--open {
  display: flex;
}

.cy-navigation__link {
  display: block;
  padding: var(--cymru-space-2) 0;
  color: var(--cymru-color-text);
  text-decoration: none;
}

.cy-navigation__link:hover {
  color: var(--cymru-color-primary-on-surface);
}

.cy-navigation__link--active {
  color: var(--cymru-color-text);
  font-weight: var(--cymru-font-weight-semibold);
}

.cy-theme-provider[data-theme="dark"] .cy-navigation__link--active {
  color: #ffffff !important;
  background-color: var(--cymru-grey-900);
  padding-inline: var(--cymru-space-2);
}

body:has(.cy-theme-provider[data-theme="dark"]) .cy-navigation__link--active {
  color: #ffffff !important;
  background-color: var(--cymru-grey-900);
  padding-inline: var(--cymru-space-2);
}

/* Desktop: menu is always visible, laid out horizontally; toggle hidden. */

@media (min-width: 64rem) {
  .cy-navigation__toggle {
    display: none;
  }

  .cy-navigation__menu {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: var(--cymru-space-8);
    padding: 0 var(--cymru-space-6) 0 0;
  }

  .cy-navigation__link {
    padding: var(--cymru-space-2) 0;
  }
}

/* ==========================================================================
   CyHeroBanner
   ========================================================================== */

.cy-hero-banner {
  padding: var(--cymru-space-20) var(--cymru-space-6);
}

.cy-hero-banner--primary {
  background: linear-gradient(135deg, var(--cymru-color-primary), var(--cymru-blue-900));
}

.cy-hero-banner--accent {
  background-color: var(--cymru-color-accent);
}

.cy-hero-banner--plain {
  background: none;
}

/*
 * Rescopes text/link colour for any descendant content (including
 * consumer-authored buttons/links in ChildContent) so it's legible by
 * default on a dark hero background, rather than requiring every
 * consumer to hand-write a background-specific override.
 */

.cy-hero-banner--inverse {
  --cymru-color-text: var(--cymru-color-text-inverse);
  --cymru-color-link: var(--cymru-color-text-inverse);
  --cymru-color-link-hover: var(--cymru-color-text-inverse);
}

.cy-hero-banner__content {
  max-width: var(--cymru-container-md);
}

.cy-hero-banner__subtitle {
  margin-block-start: var(--cymru-space-2);
  opacity: 0.9;
}

.cy-hero-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cymru-space-4);
  margin-block-start: var(--cymru-space-8);
}

/* ==========================================================================
   CyFooter
   ========================================================================== */

.cy-footer {
  padding: var(--cymru-space-12) var(--cymru-space-6);

  font-size: var(--cymru-font-size-sm);
}

/*
 * Background variants - Primary (navy) is the original/default look
 * and only variant before Background was added. Surface/Neutral flip
 * to dark text on a light background instead of the light-on-dark
 * treatment Primary/Secondary need.
 */
.cy-footer--primary {
  background-color: var(--cymru-color-accent);
  color: var(--cymru-color-accent-text);
}

.cy-footer--secondary {
  background-color: var(--cymru-color-secondary);
  color: var(--cymru-color-text-inverse);
}

.cy-footer--surface {
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  border-top: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

.cy-footer--neutral {
  background-color: var(--cymru-grey-100);
  color: var(--cymru-color-text);
}

.cy-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cymru-space-6);
  margin-block-end: var(--cymru-space-6);
}

.cy-footer a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cy-footer a:hover {
  text-decoration-thickness: 2px;
}

.cy-footer a:focus-visible {
  outline: var(--cymru-border-width-focus) solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

.cy-footer__copyright {
  margin: 0;
  opacity: 0.75;
}

.cy-footer__version {
  margin: var(--cymru-space-2) 0 0;
  opacity: 0.6;
  font-size: var(--cymru-font-size-xs);
}
}

/* ---- components/icons.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Content - CyIcon
 *
 * Icons inherit colour from their surrounding text via stroke="currentColor"
 * (set directly on the <svg> element in CyIcon.razor, matching Lucide's
 * own default) - or via the optional Color parameter.
 */

.cy-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
  line-height: 1;
}

/* ==========================================================================
   SVG Outline Enforcement
   ========================================================================== */

svg.cy-icon,
.cy-icon svg,
.cy-icon {
  fill: none !important;
  stroke: currentColor !important;
}

svg.cy-icon *,
.cy-icon svg *,
.cy-icon path,
.cy-icon circle,
.cy-icon rect,
.cy-icon line,
.cy-icon polyline,
.cy-icon polygon,
.cy-icon ellipse {
  fill: none !important;
  stroke: currentColor !important;
}
}

/* ---- components/branding.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Branding - CyBrandLogo, CyLanguageToggle
 *
 * CyBrandLogo supports two rendering modes:
 *
 * 1. Built-in SVG lockup
 *    - Rendered when LogoPath is not supplied.
 *    - Mark and wordmark colours are driven by CymruBlazor colour tokens.
 *
 * 2. External logo assets
 *    - Rendered when LogoPath is supplied.
 *    - LogoPath is the light-theme/default asset.
 *    - DarkLogoPath is the optional dark-theme asset.
 *    - Theme selection is controlled by the ambient [data-theme] attribute.
 *
 * Both components remain theme aware without IThemeService injection or
 * JavaScript interop. Theme-specific colours continue to use the
 * --cymru-color-* custom properties, while external logo asset selection
 * is controlled by CSS.
 *
 * Class names generated by each component - keep in sync (see
 * CONTRIBUTING.md).
 */

/* ==========================================================================
   CyBrandLogo
   ========================================================================== */

.cy-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-2);

  width: fit-content;
  max-width: 100%;

  color: inherit;
  text-decoration: none;

  line-height: 1;
}

a.cy-brand-logo:hover .cy-brand-logo__wordmark {
  text-decoration: underline;
}

a.cy-brand-logo:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: var(--cymru-space-1);
  border-radius: var(--cymru-radius-sm);
}

/* --------------------------------------------------------------------------
   External logo assets
   -------------------------------------------------------------------------- */

/*
 * LogoPath is the light-theme/default asset.
 *
 * The light asset remains visible by default so that:
 *
 * - LogoPath only:
 *     light theme -> LogoPath
 *     dark theme  -> LogoPath
 *
 * - LogoPath + DarkLogoPath:
 *     light theme -> LogoPath
 *     dark theme  -> DarkLogoPath
 *
 * This also provides graceful behaviour if the component is rendered before
 * the theme provider has established an explicit data-theme attribute.
 */
.cy-brand-logo__asset {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;

  /* If the container is narrower than the logo at its Size height, the box
     narrows (max-width) but keeps that height; contain scales the image
     down inside it without distortion. */
  object-fit: contain;
  object-position: left center;

  text-decoration: none;
}

/*
 * DarkLogoPath is opt-in. It must never be displayed in the default/light
 * state because LogoPath is the canonical default asset.
 */
.cy-brand-logo__asset--dark {
  display: none;
}

/*
 * Explicit light theme.
 *
 * The selectors intentionally use the same data-theme contract as the
 * CymruBlazor theme provider rather than prefers-color-scheme. The
 * application's explicit theme state is the source of truth.
 */
[data-theme="light"] .cy-brand-logo__asset--light {
  display: block;
}

[data-theme="light"] .cy-brand-logo__asset--dark {
  display: none;
}

/*
 * Explicit dark theme.
 *
 * If DarkLogoPath was supplied, the dark asset is shown.
 * If it was not supplied, there is no dark asset in the DOM, so the
 * light/default asset remains visible automatically.
 */
[data-theme="dark"] .cy-brand-logo__asset--light {
  display: none;
}

[data-theme="dark"] .cy-brand-logo__asset--dark {
  display: block;
}

/*
 * Keep image-based logos aligned with the component's line-height and avoid
 * introducing unexpected inline whitespace behaviour.
 */
.cy-brand-logo__asset--light,
.cy-brand-logo__asset--dark {
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Built-in SVG lockup
   -------------------------------------------------------------------------- */

.cy-brand-logo--stacked {
  flex-direction: column;
  gap: var(--cymru-space-1);
  text-align: center;
}

.cy-brand-logo__mark {
  flex-shrink: 0;
  display: block;
}

/*
 * Built-in SVG mark fill is the brand primary by default; the theme files
 * override --cymru-color-primary as appropriate, so no additional
 * per-theme override is required here.
 */
.cy-brand-logo__mark-bg {
  fill: var(--cymru-color-primary);
}

.cy-brand-logo__mark-fg {
  fill: var(--cymru-color-text-inverse);
}

.cy-brand-logo__wordmark {
  font-family: var(--cymru-font-family-base);
  font-weight: var(--cymru-font-weight-bold);
  color: inherit;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Size scale
   -------------------------------------------------------------------------- */

/*
 * Matches ComponentSize. Heights, in px:
 *   ExtraSmall 18 | Small 32 | Medium 48 | Large 64 | ExtraLarge 72
 * The built-in SVG mark (below) and external image assets (further down)
 * use the same scale, so a logo keeps its size whichever kind is rendered.
 * Keep both blocks in sync - BrandLogoSizeScaleTests enforces it.
 * Image-based logos inherit the component's intrinsic aspect ratio and are
 * constrained by max-width; consumers can therefore provide appropriately
 * sized logo assets without the component distorting them.
 */

.cy-brand-logo--extrasmall .cy-brand-logo__mark {
  width: 18px;
  height: 18px;
}

.cy-brand-logo--extrasmall .cy-brand-logo__wordmark {
  font-size: var(--cymru-font-size-xs);
}

.cy-brand-logo--small .cy-brand-logo__mark {
  width: 32px;
  height: 32px;
}

.cy-brand-logo--small .cy-brand-logo__wordmark {
  font-size: var(--cymru-font-size-sm);
}

.cy-brand-logo--medium .cy-brand-logo__mark {
  width: 48px;
  height: 48px;
}

.cy-brand-logo--medium .cy-brand-logo__wordmark {
  font-size: var(--cymru-font-size-md);
}

.cy-brand-logo--large .cy-brand-logo__mark {
  width: 64px;
  height: 64px;
}

.cy-brand-logo--large .cy-brand-logo__wordmark {
  font-size: var(--cymru-font-size-lg);
}

.cy-brand-logo--extralarge .cy-brand-logo__mark {
  width: 72px;
  height: 72px;
}

.cy-brand-logo--extralarge .cy-brand-logo__wordmark {
  font-size: var(--cymru-font-size-xl);
}

/* --------------------------------------------------------------------------
   Inverse/dark surfaces
   -------------------------------------------------------------------------- */

/*
 * On a dark/inverse surface (for example inside a Primary/Accent
 * CyHeroBanner or the navy CyNavigation bar), consumers opt into readable
 * colours using the same convention as CyHeroBanner's own ChildContent.
 *
 * These rules apply to the built-in SVG lockup only. External logo assets
 * are intentionally not recoloured: their light/dark variants are supplied
 * by the consumer through LogoPath and DarkLogoPath.
 */
.cy-hero-banner--inverse .cy-brand-logo,
.cy-hero-banner--inverse .cy-brand-logo__wordmark,
.cy-navigation .cy-brand-logo,
.cy-navigation .cy-brand-logo__wordmark,
.cy-header--primary .cy-brand-logo,
.cy-header--primary .cy-brand-logo__wordmark,
.cy-header--secondary .cy-brand-logo,
.cy-header--secondary .cy-brand-logo__wordmark {
  color: var(--cymru-color-accent-text, #ffffff);
}

.cy-navigation .cy-brand-logo__mark-bg,
.cy-header--primary .cy-brand-logo__mark-bg,
.cy-header--secondary .cy-brand-logo__mark-bg {
  fill: var(--cymru-color-accent-text, #ffffff);
}

.cy-navigation .cy-brand-logo__mark-fg,
.cy-header--primary .cy-brand-logo__mark-fg,
.cy-header--secondary .cy-brand-logo__mark-fg {
  fill: var(--cymru-color-primary);
}

/* ==========================================================================
   CyLanguageToggle
   ========================================================================== */

.cy-language-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-1);

  padding: var(--cymru-space-1) var(--cymru-space-3);

  background: transparent;
  color: var(--cymru-color-link);

  border: var(--cymru-border-width-thin) solid transparent;
  border-radius: var(--cymru-radius-sm);

  font-family: var(--cymru-font-family-base);
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-semibold);

  text-decoration: underline;
  cursor: pointer;
}

.cy-language-toggle:hover {
  color: var(--cymru-color-link-hover);
}

.cy-language-toggle:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: var(--cymru-space-1);
  text-decoration: none;
}

.cy-language-toggle:disabled {
  color: var(--cymru-color-text-muted);
  text-decoration: none;
  cursor: not-allowed;
}

/*
 * On a dark/inverse surface, follow the same convention as CyBrandLogo
 * above.
 */
.cy-hero-banner--inverse .cy-language-toggle,
.cy-navigation .cy-language-toggle {
  color: var(--cymru-color-text-inverse);
  text-decoration-color: currentColor;
}

.cy-language-toggle__icon {
  flex-shrink: 0;
}

.cy-brand-logo__asset {
  display: block;

  width: auto;
  max-width: 100%;
  height: auto;

  flex-shrink: 0;

  text-decoration: none;
}

/*
 * External logo sizing.
 *
 * Height is set (not merely capped) by the same ComponentSize scale used
 * by the built-in SVG mark, so a logo is exactly its Size regardless of the
 * asset's intrinsic dimensions - a max-height would never scale a 48px SVG
 * up to Large (64px). SVG assets scale crisply; supply raster assets at
 * least as tall as the largest Size you use. Width remains auto so the
 * asset keeps its aspect ratio.
 */
.cy-brand-logo--extrasmall .cy-brand-logo__asset {
  height: 18px;
}

.cy-brand-logo--small .cy-brand-logo__asset {
  height: 32px;
}

.cy-brand-logo--medium .cy-brand-logo__asset {
  height: 48px;
}

.cy-brand-logo--large .cy-brand-logo__asset {
  height: 64px;
}

.cy-brand-logo--extralarge .cy-brand-logo__asset {
  height: 72px;
}
}

/* ---- components/tooltip.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Content - CyTooltip
 *
 * Class names here are generated by CyTooltip.razor.cs's BuildCssClass() -
 * keep the two in sync (see CONTRIBUTING.md).
 *
 * Visibility is pure CSS (:hover / :focus-within) so it works before the page
 * is interactive. cymru-overlay.js only adds Escape-to-dismiss, by setting
 * data-dismissed on the root. WCAG 1.4.13: the content is a child of the root,
 * so the pointer can move onto it (hoverable), and a small ::before bridge
 * covers the gap between trigger and content.
 */

.cy-tooltip {
  position: relative;

  display: inline-flex;
}

.cy-tooltip__trigger {
  display: inline-flex;

  align-items: center;

  border-radius: var(--cymru-radius-sm);
}

.cy-tooltip__content {
  position: absolute;
  z-index: var(--cymru-z-tooltip);

  inline-size: max-content;
  max-inline-size: min(20rem, 80vw);

  padding: var(--cymru-space-2) var(--cymru-space-3);

  border: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-sm);

  background-color: var(--cymru-color-text);
  color: var(--cymru-color-text-inverse);

  box-shadow: var(--cymru-shadow-md);

  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.4;
  text-align: start;
  white-space: normal;

  visibility: hidden;
  opacity: 0;

  pointer-events: none;
}

/* Bridge the gap so the pointer can travel from trigger to tooltip. */
.cy-tooltip__content::before {
  content: "";

  position: absolute;
}

.cy-tooltip:is(:hover, :focus-within):not([data-dismissed]) > .cy-tooltip__content {
  visibility: visible;
  opacity: 1;

  pointer-events: auto;
}

.cy-tooltip--top > .cy-tooltip__content {
  inset-block-end: calc(100% + var(--cymru-space-2));
  inset-inline-start: 50%;

  translate: -50% 0;
}

.cy-tooltip--top > .cy-tooltip__content::before {
  inset-inline: 0;
  inset-block-start: 100%;

  block-size: var(--cymru-space-2);
}

.cy-tooltip--bottom > .cy-tooltip__content {
  inset-block-start: calc(100% + var(--cymru-space-2));
  inset-inline-start: 50%;

  translate: -50% 0;
}

.cy-tooltip--bottom > .cy-tooltip__content::before {
  inset-inline: 0;
  inset-block-end: 100%;

  block-size: var(--cymru-space-2);
}

.cy-tooltip--start > .cy-tooltip__content {
  inset-inline-end: calc(100% + var(--cymru-space-2));
  inset-block-start: 50%;

  translate: 0 -50%;
}

.cy-tooltip--start > .cy-tooltip__content::before {
  inset-block: 0;
  inset-inline-start: 100%;

  inline-size: var(--cymru-space-2);
}

.cy-tooltip--end > .cy-tooltip__content {
  inset-inline-start: calc(100% + var(--cymru-space-2));
  inset-block-start: 50%;

  translate: 0 -50%;
}

.cy-tooltip--end > .cy-tooltip__content::before {
  inset-block: 0;
  inset-inline-end: 100%;

  inline-size: var(--cymru-space-2);
}

@media (prefers-reduced-motion: no-preference) {
  .cy-tooltip__content {
    transition: opacity 120ms ease;
  }
}

/*
 * Viewport-edge flip. cymru-overlay.js measures the (already-laid-out, if
 * hidden) .cy-tooltip__content on hover/focus and sets [data-tooltip-flip]
 * when the chosen Placement would render off-screen; these rules swap the
 * content (and its ::before pointer bridge) to the opposite side. Requires
 * JS - without it the tooltip still shows in its declared Placement (see
 * CyTooltip's remarks).
 */
.cy-tooltip--top[data-tooltip-flip] > .cy-tooltip__content {
  inset-block-end: auto;
  inset-block-start: calc(100% + var(--cymru-space-2));
}

.cy-tooltip--top[data-tooltip-flip] > .cy-tooltip__content::before {
  inset-block-start: auto;
  inset-block-end: 100%;
}

.cy-tooltip--bottom[data-tooltip-flip] > .cy-tooltip__content {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--cymru-space-2));
}

.cy-tooltip--bottom[data-tooltip-flip] > .cy-tooltip__content::before {
  inset-block-end: auto;
  inset-block-start: 100%;
}

.cy-tooltip--start[data-tooltip-flip] > .cy-tooltip__content {
  inset-inline-end: auto;
  inset-inline-start: calc(100% + var(--cymru-space-2));
}

.cy-tooltip--start[data-tooltip-flip] > .cy-tooltip__content::before {
  inset-inline-start: auto;
  inset-inline-end: 100%;
}

.cy-tooltip--end[data-tooltip-flip] > .cy-tooltip__content {
  inset-inline-start: auto;
  inset-inline-end: calc(100% + var(--cymru-space-2));
}

.cy-tooltip--end[data-tooltip-flip] > .cy-tooltip__content::before {
  inset-inline-end: auto;
  inset-inline-start: 100%;
}
}

/* ---- components/dialog.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Overlays - CyDialog
 *
 * Class names here are generated by CyDialog.razor.cs's BuildCssClass() -
 * keep the two in sync (see CONTRIBUTING.md).
 *
 * The <dialog> is drawn by the browser in the top layer, so no z-index is
 * needed. Do not set `display` on .cy-dialog itself: that would override the
 * user-agent rule that hides a closed dialog. Layout lives on the inner panel.
 */

.cy-dialog {
  --cy-dialog-max-width: 32rem;

  inline-size: calc(100% - 2 * var(--cymru-space-4));
  max-inline-size: var(--cy-dialog-max-width);

  padding: 0;

  border: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-dialog);

  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);

  box-shadow: var(--cymru-elevation-dialog);
}

.cy-dialog--sm {
  --cy-dialog-max-width: 24rem;
}

.cy-dialog--md {
  --cy-dialog-max-width: 32rem;
}

.cy-dialog--lg {
  --cy-dialog-max-width: 48rem;
}

/* ::backdrop does not reliably inherit custom properties, so use a literal. */
.cy-dialog::backdrop {
  background: rgb(11 12 12 / 0.6);
}

/* Stop the page behind a modal dialog scrolling. */
html:has(dialog.cy-dialog[open]) {
  overflow: hidden;
}

.cy-dialog__panel {
  display: flex;
  flex-direction: column;

  max-block-size: calc(100dvh - 2 * var(--cymru-space-4));
}

.cy-dialog__header {
  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: var(--cymru-space-4);

  padding: var(--cymru-space-4) var(--cymru-space-6);

  border-block-end: var(--cymru-border-width-divider) solid var(--cymru-color-border);
}

.cy-dialog__title {
  margin: 0;

  font-size: var(--cymru-font-size-scale-22);
  line-height: 1.3;
}

.cy-dialog__close {
  flex: none;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;

  margin-block: calc(-1 * var(--cymru-space-2));
  margin-inline-end: calc(-1 * var(--cymru-space-2));

  border: 0;
  border-radius: var(--cymru-radius-sm);

  background: transparent;
  color: inherit;

  font-size: 1.75rem;
  line-height: 1;

  cursor: pointer;
}

.cy-dialog__close:hover {
  background-color: var(--cymru-color-surface-alt);
}

.cy-dialog__body {
  flex: 1 1 auto;

  padding: var(--cymru-space-4) var(--cymru-space-6);

  overflow-y: auto;
}

.cy-dialog__description {
  margin-block: 0 var(--cymru-space-4);

  color: var(--cymru-color-text-muted);
}

.cy-dialog__footer {
  display: flex;

  flex-wrap: wrap;
  justify-content: flex-end;

  gap: var(--cymru-space-3);

  padding: var(--cymru-space-4) var(--cymru-space-6);

  border-block-start: var(--cymru-border-width-divider) solid var(--cymru-color-border);
}
}

/* ---- components/table.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Data - CyTable
 *
 * Class names here are generated by CyTable.razor.cs's BuildCssClass() -
 * keep the two in sync (see CONTRIBUTING.md).
 */

.cy-table__scroll {
  overflow-x: auto;
  border-radius: var(--cymru-radius-md);
}

/* The scroll region is a keyboard tab stop (see CyTable.razor.cs) - give
   it the same focus ring as every other focusable element rather than
   letting the browser default (or none) show through. */
.cy-table__scroll:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-table {
  --cy-table-truncate-width: 20rem;

  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--cymru-font-size-sm);
  color: var(--cymru-color-text);
}

.cy-table__caption {
  text-align: start;
  padding-block-end: var(--cymru-spacing-component-sm);
  font-weight: var(--cymru-font-weight-medium);
  color: var(--cymru-color-text);
}

.cy-table th,
.cy-table td {
  padding: var(--cymru-spacing-component-sm) var(--cymru-spacing-component-md);
  text-align: start;
  border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  white-space: nowrap;
}

/* Wrapping (opt-in) - see CyTable.Wrap. Table-wide, then per-cell overrides.
   The per-cell selectors are one class more specific than the nowrap default
   above, so they win regardless of source order. */
.cy-table--wrap th,
.cy-table--wrap td {
  white-space: normal;
  overflow-wrap: anywhere;
}

.cy-table .cy-table__cell--wrap {
  white-space: normal;
  overflow-wrap: anywhere;
}

.cy-table .cy-table__cell--nowrap {
  white-space: nowrap;
  overflow-wrap: normal;
}

/* Single line with an ellipsis. Needs a width cap to have anything to truncate
   against; override --cy-table-truncate-width per table or cell. */
.cy-table .cy-table__cell--truncate {
  max-inline-size: var(--cy-table-truncate-width);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cy-table thead th {
  font-weight: var(--cymru-font-weight-semibold);
  color: var(--cymru-color-text-muted);
  border-block-end: var(--cymru-border-width-medium) solid var(--cymru-color-border-strong);
}

.cy-table tbody tr:hover {
  background-color: var(--cymru-color-surface-alt);
}

.cy-table tbody tr:last-child td,
.cy-table tbody tr:last-child th {
  border-block-end: none;
}
}

/* ---- components/pagination.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Data - CyPagination
 *
 * Class names here are generated by CyPagination.razor.cs's BuildCssClass() -
 * keep the two in sync (see CONTRIBUTING.md).
 */

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

.cy-pagination__control,
.cy-pagination__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--cymru-spacing-component-xs);

  /* WCAG 2.2 SC 2.5.8 - 44x44px minimum touch target. */
  min-inline-size: var(--cymru-touch-target-min);
  min-block-size: var(--cymru-touch-target-min);

  padding: var(--cymru-spacing-component-xs) var(--cymru-spacing-component-sm);

  background: transparent;
  border: var(--cymru-border-width-thin) solid transparent;
  border-radius: var(--cymru-radius-sm);

  color: var(--cymru-color-text);
  font-family: var(--cymru-font-family);
  font-size: var(--cymru-font-size-sm);

  cursor: pointer;
}

.cy-pagination__control:hover,
.cy-pagination__page:hover {
  background-color: var(--cymru-color-surface-alt);
}

.cy-pagination__control:focus-visible,
.cy-pagination__page:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-pagination__control:disabled {
  color: var(--cymru-color-disabled-text);
  cursor: not-allowed;
}

.cy-pagination__control:disabled:hover {
  background-color: transparent;
}

.cy-pagination__page--current {
  background-color: var(--cymru-color-primary);
  border-color: var(--cymru-color-primary);
  color: var(--cymru-color-text-inverse);
  font-weight: var(--cymru-font-weight-semibold);
  cursor: default;
}

.cy-pagination__ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--cymru-touch-target-min);
  min-block-size: var(--cymru-touch-target-min);
  color: var(--cymru-color-text-muted);
}
}

/* ---- components/progress.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Feedback - CyProgress
 *
 * Built on the native <progress> element (see CyProgress.razor.cs for the
 * rationale). accent-color drives the filled portion in browsers that
 * support it (Baseline 2023); the ::-webkit-progress-value /
 * ::-moz-progress-bar rules give the same colour explicitly for engines
 * that only expose the vendor-prefixed pseudo-elements.
 *
 * Class names here are generated by CyProgress.razor.cs's BuildCssClass() -
 * keep the two in sync (see CONTRIBUTING.md).
 */

.cy-progress {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-spacing-component-xs);
  inline-size: 100%;
}

.cy-progress__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--cymru-space-2);
  font-size: var(--cymru-font-size-sm);
}

.cy-progress__label {
  color: var(--cymru-color-text);
  font-weight: var(--cymru-font-weight-medium);
}

.cy-progress__value-text {
  color: var(--cymru-color-text-muted);
  white-space: nowrap;
}

.cy-progress__bar {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  display: block;
  inline-size: 100%;
  border: none;
  border-radius: var(--cymru-radius-pill);
  background-color: var(--cymru-color-background);
  overflow: hidden;
}

.cy-progress__bar::-webkit-progress-bar {
  background-color: var(--cymru-color-background);
  border-radius: var(--cymru-radius-pill);
}

.cy-progress__bar::-webkit-progress-value {
  border-radius: var(--cymru-radius-pill);
  transition: inline-size 200ms ease;
}

.cy-progress__bar::-moz-progress-bar {
  border-radius: var(--cymru-radius-pill);
  transition: inline-size 200ms ease;
}

/* Sizes control the bar's block-size (thickness). */
.cy-progress--extrasmall .cy-progress__bar { block-size: 0.25rem; }
.cy-progress--small .cy-progress__bar { block-size: 0.375rem; }
.cy-progress--medium .cy-progress__bar { block-size: 0.5rem; }
.cy-progress--large .cy-progress__bar { block-size: 0.75rem; }
.cy-progress--extralarge .cy-progress__bar { block-size: 1rem; }

/* Colours */
.cy-progress--primary .cy-progress__bar { accent-color: var(--cymru-color-primary); }
.cy-progress--primary .cy-progress__bar::-webkit-progress-value { background-color: var(--cymru-color-primary); }
.cy-progress--primary .cy-progress__bar::-moz-progress-bar { background-color: var(--cymru-color-primary); }

.cy-progress--secondary .cy-progress__bar { accent-color: var(--cymru-color-secondary); }
.cy-progress--secondary .cy-progress__bar::-webkit-progress-value { background-color: var(--cymru-color-secondary); }
.cy-progress--secondary .cy-progress__bar::-moz-progress-bar { background-color: var(--cymru-color-secondary); }

.cy-progress--tertiary .cy-progress__bar { accent-color: var(--cymru-color-brand-accent); }
.cy-progress--tertiary .cy-progress__bar::-webkit-progress-value { background-color: var(--cymru-color-brand-accent); }
.cy-progress--tertiary .cy-progress__bar::-moz-progress-bar { background-color: var(--cymru-color-brand-accent); }

.cy-progress--success .cy-progress__bar { accent-color: var(--cymru-color-success); }
.cy-progress--success .cy-progress__bar::-webkit-progress-value { background-color: var(--cymru-color-success); }
.cy-progress--success .cy-progress__bar::-moz-progress-bar { background-color: var(--cymru-color-success); }

.cy-progress--warning .cy-progress__bar { accent-color: var(--cymru-color-warning); }
.cy-progress--warning .cy-progress__bar::-webkit-progress-value { background-color: var(--cymru-color-warning); }
.cy-progress--warning .cy-progress__bar::-moz-progress-bar { background-color: var(--cymru-color-warning); }

.cy-progress--danger .cy-progress__bar { accent-color: var(--cymru-color-danger); }
.cy-progress--danger .cy-progress__bar::-webkit-progress-value { background-color: var(--cymru-color-danger); }
.cy-progress--danger .cy-progress__bar::-moz-progress-bar { background-color: var(--cymru-color-danger); }

.cy-progress--info .cy-progress__bar { accent-color: var(--cymru-color-info); }
.cy-progress--info .cy-progress__bar::-webkit-progress-value { background-color: var(--cymru-color-info); }
.cy-progress--info .cy-progress__bar::-moz-progress-bar { background-color: var(--cymru-color-info); }

.cy-progress--surface .cy-progress__bar { accent-color: var(--cymru-color-text); }
.cy-progress--surface .cy-progress__bar::-webkit-progress-value { background-color: var(--cymru-color-text); }
.cy-progress--surface .cy-progress__bar::-moz-progress-bar { background-color: var(--cymru-color-text); }

.cy-progress--neutral .cy-progress__bar { accent-color: var(--cymru-color-text-muted); }
.cy-progress--neutral .cy-progress__bar::-webkit-progress-value { background-color: var(--cymru-color-text-muted); }
.cy-progress--neutral .cy-progress__bar::-moz-progress-bar { background-color: var(--cymru-color-text-muted); }

/* Indeterminate - browsers animate the native indeterminate state
   automatically (via ::-webkit-progress-bar / :indeterminate), but the
   animation differs a lot in appearance per engine. A single explicit
   stripe animation keeps that consistent across engines that respect
   ::-webkit-progress-bar background-image. */
.cy-progress--indeterminate .cy-progress__bar::-webkit-progress-bar {
  background-image: linear-gradient(
    90deg,
    transparent 0%,
    var(--cymru-color-primary) 50%,
    transparent 100%
  );
  background-size: 50% 100%;
  animation: cy-progress-indeterminate 1.2s ease-in-out infinite;
}

@keyframes cy-progress-indeterminate {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cy-progress--indeterminate .cy-progress__bar::-webkit-progress-bar {
    animation-duration: 3s;
  }
}
}

/* ---- components/spinner.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Feedback - CySpinner
 *
 * Class names here are generated by CySpinner.razor.cs's BuildCssClass() -
 * keep the two in sync (see CONTRIBUTING.md).
 */

.cy-spinner {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-spacing-component-sm);
}

.cy-spinner__ring {
  display: inline-block;
  border-radius: var(--cymru-radius-circle);
  border: var(--cymru-border-width-medium) solid currentColor;
  border-right-color: transparent;
  animation: cy-spinner-spin 0.6s linear infinite;
}

.cy-spinner__label {
  font-size: var(--cymru-font-size-sm);
  color: var(--cymru-color-text-muted);
}

/* Sizes */
.cy-spinner--extrasmall .cy-spinner__ring {
  inline-size: 0.75rem;
  block-size: 0.75rem;
}

.cy-spinner--small .cy-spinner__ring {
  inline-size: 1rem;
  block-size: 1rem;
}

.cy-spinner--medium .cy-spinner__ring {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.cy-spinner--large .cy-spinner__ring {
  inline-size: 2rem;
  block-size: 2rem;
  border-width: var(--cymru-border-width-thick);
}

.cy-spinner--extralarge .cy-spinner__ring {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-width: var(--cymru-border-width-thick);
}

/* Colours */
.cy-spinner--primary { color: var(--cymru-color-primary-on-surface); }
.cy-spinner--secondary { color: var(--cymru-color-secondary); }
.cy-spinner--tertiary { color: var(--cymru-color-brand-accent); }
.cy-spinner--success { color: var(--cymru-color-success); }

/* Deliberately var(--cymru-color-text), not var(--cymru-color-warning) -
   the warning accent colour (--cymru-yellow-500) is too light to read
   against most surfaces. CyBadge and CyAlert make the same choice for
   the same reason. */
.cy-spinner--warning { color: var(--cymru-color-text); }

.cy-spinner--danger { color: var(--cymru-color-danger); }
.cy-spinner--info { color: var(--cymru-color-info); }
.cy-spinner--surface { color: var(--cymru-color-text); }
.cy-spinner--neutral { color: var(--cymru-color-text-muted); }

@keyframes cy-spinner-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .cy-spinner__ring {
    animation-duration: 1.5s;
  }
}
}

/* ---- components/switch.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Forms - CySwitch
 *
 * Class names come from CySwitch.razor. Colours use semantic tokens only, which
 * flip in the dark and high-contrast themes, so nothing here is theme-specific
 * except forced-colors mode, handled at the end.
 */

.cy-field--switch {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-spacing-form-hint-gap);
}

.cy-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-3);
}

.cy-switch__control {
  /* The button is the hit target; the track is only its picture. */
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.cy-switch__track {
  position: relative;
  display: inline-block;
  inline-size: 2.75rem;
  block-size: 1.5rem;
  border: var(--cymru-border-width-thick) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-pill);
  background-color: var(--cymru-color-surface);
  box-sizing: border-box;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.cy-switch__thumb {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0.1875rem;
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: var(--cymru-radius-circle);
  background-color: var(--cymru-color-border-strong);
  transform: translateY(-50%);
  transition: transform 120ms ease, background-color 120ms ease;
}

.cy-switch__control[aria-checked="true"] .cy-switch__track {
  border-color: var(--cymru-color-primary);
  background-color: var(--cymru-color-primary);
}

.cy-switch__control[aria-checked="true"] .cy-switch__thumb {
  background-color: var(--cymru-color-text-inverse);
  transform: translate(1.25rem, -50%);
}

[dir="rtl"] .cy-switch__control[aria-checked="true"] .cy-switch__thumb {
  transform: translate(-1.25rem, -50%);
}

.cy-switch__control:hover:not(:disabled) .cy-switch__track {
  border-color: var(--cymru-color-primary-hover);
}

.cy-switch__control:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: var(--cymru-focus-ring-offset);
  border-radius: var(--cymru-radius-pill);
}

.cy-switch__control:disabled {
  cursor: not-allowed;
}

.cy-switch__control:disabled .cy-switch__track {
  border-color: var(--cymru-color-disabled);
  background-color: var(--cymru-color-disabled-background);
}

.cy-switch__control:disabled .cy-switch__thumb {
  background-color: var(--cymru-color-disabled);
}

.cy-switch__label {
  cursor: pointer;
  color: var(--cymru-color-text);
}

.cy-switch__control:disabled + .cy-switch__label {
  color: var(--cymru-color-disabled-text);
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .cy-switch__track,
  .cy-switch__thumb {
    transition: none;
  }
}

/* Forced colours drop background colours: keep state visible through the thumb position and a system-colour fill. */
@media (forced-colors: active) {
  .cy-switch__track {
    border-color: ButtonText;
  }

  .cy-switch__thumb {
    background-color: ButtonText;
  }

  .cy-switch__control[aria-checked="true"] .cy-switch__track {
    background-color: Highlight;
    border-color: Highlight;
  }

  .cy-switch__control[aria-checked="true"] .cy-switch__thumb {
    background-color: HighlightText;
  }

  .cy-switch__control:disabled .cy-switch__track {
    border-color: GrayText;
  }
}
}

/* ---- components/sortable-list.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Content - CySortableList / CyDragHandle
 *
 * Hooks written by CySortableList.razor and sortable-list.js:
 *   data-cy-dragging        on the list being dragged from
 *   data-cy-drag-source     on the item in the air (dimmed in place)
 *   data-cy-drop="before|after" on the item next to the insertion point
 *   data-cy-drop-target     on the list a drop would land in
 *   data-cy-ghost           on the floating clone (appended to <body>)
 *   data-cy-sorting         on <html> for the whole gesture
 * The keyboard pick-up previews a move through inline `order`, so the list
 * must be a flex/grid container.
 */

.cy-sortable {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-sortable__item {
  position: relative;
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-card);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
}

.cy-sortable__row {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-3);
  padding: var(--cymru-space-2) var(--cymru-space-3);
}

.cy-sortable__content {
  flex: 1 1 auto;
  min-inline-size: 0;
}

.cy-sortable__actions {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-1);
  flex-shrink: 0;
}

.cy-sortable__empty {
  padding: var(--cymru-space-4);
  border: var(--cymru-border-width-thin) dashed var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-card);
  color: var(--cymru-color-text-muted);
}

/* Handle and move buttons share one control size, never below the 24x24 minimum (WCAG 2.5.8). */
.cy-drag-handle,
.cy-sortable__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--cymru-radius-control);
  background: transparent;
  color: var(--cymru-color-text-secondary);
  cursor: pointer;
}

.cy-drag-handle {
  cursor: grab;
  touch-action: none; /* the script owns the gesture; the page must not scroll under it */
}

.cy-drag-handle:hover:not(:disabled),
.cy-sortable__action:hover:not(:disabled) {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-drag-handle:focus-visible,
.cy-sortable__action:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: var(--cymru-focus-ring-offset);
}

.cy-drag-handle:disabled,
.cy-sortable__action:disabled {
  color: var(--cymru-color-disabled-text);
  cursor: not-allowed;
}

.cy-drag-handle--picked,
.cy-drag-handle[data-cy-picked="true"] {
  background-color: var(--cymru-color-primary);
  color: var(--cymru-color-text-inverse);
  cursor: grabbing;
}

.cy-sortable--handle-only .cy-sortable__content {
  /* Text stays selectable; only the handle starts a drag. */
  user-select: text;
}

.cy-sortable--disabled .cy-sortable__item {
  opacity: 0.6;
}

/* Keyboard pick-up */
.cy-sortable__item--picked {
  border-color: var(--cymru-color-primary);
  box-shadow: 0 0 0 var(--cymru-border-width-thick) var(--cymru-color-primary);
}

/* Pointer drag */
[data-cy-sorting] {
  cursor: grabbing;
  user-select: none;
}

[data-cy-drag-source] {
  opacity: 0.4;
  border-style: dashed;
}

[data-cy-drop-target] {
  outline: var(--cymru-border-width-medium) dashed var(--cymru-color-primary);
  outline-offset: var(--cymru-space-1);
}

[data-cy-drop="before"]::before,
[data-cy-drop="after"]::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  block-size: 0.1875rem;
  border-radius: var(--cymru-radius-pill);
  background-color: var(--cymru-color-primary);
  pointer-events: none;
}

[data-cy-drop="before"]::before {
  inset-block-start: calc(-1 * var(--cymru-space-1) - 0.125rem);
}

[data-cy-drop="after"]::after {
  inset-block-end: calc(-1 * var(--cymru-space-1) - 0.125rem);
}

/* The clone lives on <body>, outside the list, so it restyles itself. */
[data-cy-ghost] {
  list-style: none;
  border: var(--cymru-border-width-thin) solid var(--cymru-color-primary);
  border-radius: var(--cymru-radius-card);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  box-shadow: var(--cymru-shadow-xl);
  opacity: 0.95;
}

@media (prefers-reduced-motion: no-preference) {
  .cy-sortable__item {
    transition: box-shadow 120ms ease, border-color 120ms ease;
  }
}

@media (forced-colors: active) {
  .cy-sortable__item--picked,
  [data-cy-ghost] {
    border-color: Highlight;
    box-shadow: none;
    outline: 2px solid Highlight;
  }

  .cy-drag-handle[data-cy-picked="true"] {
    background-color: Highlight;
    color: HighlightText;
  }

  [data-cy-drop="before"]::before,
  [data-cy-drop="after"]::after {
    background-color: Highlight;
  }
}
}

/* ---- components/editing.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Editing - CyMenu, CyToolbar, CyWorkspace, CyDrawer, CyEmptyState
 *
 * Class names come from the matching .razor/.razor.cs files; keep them in sync
 * (see CONTRIBUTING.md). Semantic tokens only, so dark and high-contrast follow
 * automatically.
 */

/* ==========================================================================
   CyEmptyState
   ========================================================================== */

.cy-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cymru-space-3);
  padding: var(--cymru-space-8) var(--cymru-space-4);
  text-align: center;
  color: var(--cymru-color-text);
}

.cy-empty-state__icon {
  color: var(--cymru-color-text-secondary);
}

.cy-empty-state__title {
  margin: 0;
}

.cy-empty-state__description {
  max-inline-size: var(--cymru-max-width-body-text);
  margin: 0;
  color: var(--cymru-color-text-secondary);
}

.cy-empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--cymru-space-3);
  margin-block-start: var(--cymru-space-2);
}

/* ==========================================================================
   CyMenu
   ========================================================================== */

.cy-menu {
  position: relative;
  display: inline-block;
}

.cy-menu__trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-2);
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0 var(--cymru-space-3);
  border: var(--cymru-border-width-thin) solid transparent;
  border-radius: var(--cymru-radius-control);
  background: transparent;
  color: var(--cymru-color-text);
  font: inherit;
  cursor: pointer;
}

.cy-menu__trigger--icon-only {
  justify-content: center;
  padding: 0;
  color: var(--cymru-color-text-secondary);
}

.cy-menu__trigger:hover:not(:disabled),
.cy-menu__trigger[aria-expanded="true"] {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-menu__trigger:disabled {
  color: var(--cymru-color-disabled-text);
  cursor: not-allowed;
}

.cy-menu__list {
  position: absolute;
  inset-block-start: 100%;
  z-index: var(--cymru-z-dropdown);
  min-inline-size: 12rem;
  margin: var(--cymru-space-1) 0 0;
  padding: var(--cymru-space-1);
  list-style: none;
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-card);
  background-color: var(--cymru-color-surface);
  box-shadow: var(--cymru-elevation-dropdown);
}

.cy-menu__list--start {
  inset-inline-start: 0;
}

.cy-menu__list--end {
  inset-inline-end: 0;
}

.cy-menu__item-wrapper {
  margin: 0;
  padding: 0;
}

.cy-menu__item {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-2);
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: 0 var(--cymru-space-3);
  border: 0;
  border-radius: var(--cymru-radius-control);
  background: transparent;
  color: var(--cymru-color-text);
  font: inherit;
  text-align: start;
  cursor: pointer;
}

.cy-menu__item:hover:not([aria-disabled="true"]),
.cy-menu__item:focus-visible {
  background-color: var(--cymru-color-surface-hover);
}

.cy-menu__item[aria-disabled="true"] {
  color: var(--cymru-color-disabled-text);
  cursor: not-allowed;
}

.cy-menu__item--destructive {
  color: var(--cymru-color-danger-text);
}

.cy-menu__item-text {
  flex: 1 1 auto;
}

.cy-menu__trigger:focus-visible,
.cy-menu__item:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: calc(-1 * var(--cymru-focus-ring-width));
}

/* ==========================================================================
   CyToolbar
   ========================================================================== */

.cy-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cymru-space-2);
  padding: var(--cymru-space-2) var(--cymru-space-3);
  border-block: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
}

.cy-toolbar--vertical {
  flex-direction: column;
  align-items: stretch;
}

.cy-toolbar--sticky-top,
.cy-toolbar--sticky-bottom {
  position: sticky;
  z-index: var(--cymru-z-sticky);
}

.cy-toolbar--sticky-top {
  inset-block-start: 0;
}

.cy-toolbar--sticky-bottom {
  inset-block-end: 0;
}

/* ==========================================================================
   CyWorkspace / CyWorkspacePane
   ========================================================================== */

.cy-workspace {
  --cy-workspace-gap: var(--cymru-space-4);
  --cy-workspace-height: auto;

  display: flex;
  align-items: stretch;
  gap: var(--cy-workspace-gap);
  inline-size: 100%;
  block-size: var(--cy-workspace-height, auto);
}

.cy-workspace-pane {
  --cy-pane-width: 18rem;
  --cy-pane-min-width: 12rem;

  display: flex;
  flex-direction: column;
  flex: 0 0 var(--cy-pane-width);
  min-inline-size: var(--cy-pane-min-width);
  min-block-size: 0;
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-card);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
}

.cy-workspace-pane--fill {
  flex: 1 1 0;
}

.cy-workspace-pane__header {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-2);
  padding: var(--cymru-space-2) var(--cymru-space-3);
  border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

.cy-workspace-pane__title {
  flex: 1 1 auto;
  margin: 0;
  min-inline-size: 0;
}

.cy-workspace-pane__actions {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-1);
}

.cy-workspace-pane__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--cymru-radius-control);
  background: transparent;
  color: var(--cymru-color-text-secondary);
  cursor: pointer;
}

.cy-workspace-pane__toggle:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-workspace-pane__toggle:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: calc(-1 * var(--cymru-focus-ring-width));
}

.cy-workspace-pane__body {
  flex: 1 1 auto;
  min-block-size: 0;
  padding: var(--cymru-space-3);
  overflow: auto;
}

.cy-workspace-pane__body[hidden] {
  display: none;
}

/* Collapsed: a narrow rail that keeps the toggle. */
.cy-workspace-pane--collapsed {
  flex: 0 0 auto;
  min-inline-size: 0;
}

.cy-workspace-pane--collapsed .cy-workspace-pane__header {
  border-block-end: 0;
}

.cy-workspace-pane--collapsed .cy-workspace-pane__title {
  /* Hidden visually, still the section's accessible name. */
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

@media (max-width: 48rem) {
  .cy-workspace {
    flex-direction: column;
    block-size: auto;
  }

  .cy-workspace-pane,
  .cy-workspace-pane--fill {
    flex: 0 0 auto;
    min-inline-size: 0;
  }
}

/* ==========================================================================
   CyDrawer
   ========================================================================== */

.cy-drawer {
  --cy-drawer-width: 24rem;

  color: var(--cymru-color-text);
  background-color: var(--cymru-color-surface);
}

.cy-drawer--sm {
  --cy-drawer-width: 18rem;
}

.cy-drawer--md {
  --cy-drawer-width: 24rem;
}

.cy-drawer--lg {
  --cy-drawer-width: 36rem;
}

/* Modal: a <dialog> in the top layer, pinned to one edge. */
dialog.cy-drawer {
  inline-size: min(var(--cy-drawer-width), 100vw);
  max-inline-size: 100vw;
  block-size: 100dvh;
  max-block-size: 100dvh;
  margin-block: 0;
  padding: 0;
  border: 0;
  box-shadow: var(--cymru-elevation-dialog);
}

dialog.cy-drawer--right {
  margin-inline: auto 0;
  border-inline-start: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
}

dialog.cy-drawer--left {
  margin-inline: 0 auto;
  border-inline-end: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
}

dialog.cy-drawer::backdrop {
  background: rgb(11 12 12 / 0.6);
}

html:has(dialog.cy-drawer[open]) {
  overflow: hidden;
}

/* Inline (non-modal): an ordinary aside in the page flow. */
aside.cy-drawer--inline {
  inline-size: var(--cy-drawer-width);
  max-inline-size: 100%;
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-card);
}

aside.cy-drawer--inline:focus {
  outline: none;
}

aside.cy-drawer--inline:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: var(--cymru-focus-ring-offset);
}

.cy-drawer__panel {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  max-block-size: inherit;
}

.cy-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cymru-space-3);
  padding: var(--cymru-space-3) var(--cymru-space-4);
  border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

.cy-drawer__title {
  margin: 0;
}

.cy-drawer__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--cymru-radius-control);
  background: transparent;
  color: var(--cymru-color-text);
  font-size: var(--cymru-font-size-xl);
  line-height: 1;
  cursor: pointer;
}

.cy-drawer__close:hover {
  background-color: var(--cymru-color-surface-hover);
}

.cy-drawer__close:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: calc(-1 * var(--cymru-focus-ring-width));
}

.cy-drawer__body {
  flex: 1 1 auto;
  min-block-size: 0;
  padding: var(--cymru-space-4);
  overflow: auto;
}

.cy-drawer__footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--cymru-space-3);
  padding: var(--cymru-space-3) var(--cymru-space-4);
  border-block-start: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

@media (prefers-reduced-motion: no-preference) {
  dialog.cy-drawer[open] {
    animation: cy-drawer-in 160ms ease-out;
  }

  dialog.cy-drawer--left[open] {
    animation-name: cy-drawer-in-left;
  }
}

@keyframes cy-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes cy-drawer-in-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

@media (forced-colors: active) {
  .cy-workspace-pane,
  .cy-sortable__item,
  .cy-menu__list,
  dialog.cy-drawer {
    border: var(--cymru-border-width-thin) solid CanvasText;
  }

  .cy-menu__item:focus-visible,
  .cy-menu__item:hover:not([aria-disabled="true"]) {
    background-color: Highlight;
    color: HighlightText;
  }
}
}

/* ---- components/flow.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Flow and review - CyStepper, CySummaryList, CyStatCard, CySkeleton, CyUnsavedChanges
 *
 * Class names come from the matching .razor/.razor.cs files; keep them in sync
 * (see CONTRIBUTING.md). Semantic tokens only, so dark and high-contrast follow
 * automatically; forced-colors and reduced-motion are handled per component.
 */

/* ==========================================================================
   CyStepper
   ========================================================================== */

.cy-stepper {
  color: var(--cymru-color-text);
}

.cy-stepper__summary {
  display: none;
  margin: 0;
  font-weight: var(--cymru-font-weight-semibold);
}

.cy-stepper__list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-stepper__item {
  position: relative;
  flex: 1 1 0;
  min-inline-size: 0;
}

.cy-stepper__step {
  display: flex;
  align-items: flex-start;
  gap: var(--cymru-space-3);
  inline-size: 100%;
  min-block-size: 2.75rem;
  padding: var(--cymru-space-2);
  border: 0;
  border-radius: var(--cymru-radius-control);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: start;
  text-decoration: none;
  box-sizing: border-box;
}

button.cy-stepper__step,
a.cy-stepper__step {
  cursor: pointer;
}

button.cy-stepper__step:hover,
a.cy-stepper__step:hover {
  background-color: var(--cymru-color-surface-hover);
}

button.cy-stepper__step:focus-visible,
a.cy-stepper__step:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: var(--cymru-focus-ring-offset);
}

.cy-stepper__marker {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: var(--cymru-border-width-thick) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-circle);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-bold);
  box-sizing: border-box;
}

.cy-stepper__text {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding-block-start: var(--cymru-space-1);
}

.cy-stepper__title {
  font-weight: var(--cymru-font-weight-semibold);
  overflow-wrap: anywhere;
}

.cy-stepper__description {
  color: var(--cymru-color-text-secondary);
  font-size: var(--cymru-font-size-sm);
}

/* Connector between markers (decorative). */
.cy-stepper__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-start: calc(var(--cymru-space-2) + 2.5rem);
  inset-inline-end: calc(-1 * var(--cymru-space-2));
  block-size: var(--cymru-border-width-thick);
  background-color: var(--cymru-color-border);
  pointer-events: none;
}

.cy-stepper__item--complete:not(:last-child)::after {
  background-color: var(--cymru-color-primary);
}

/* States: each has a second cue besides colour (the marker content or weight). */
.cy-stepper__item--complete .cy-stepper__marker {
  border-color: var(--cymru-color-primary);
  background-color: var(--cymru-color-primary);
  color: var(--cymru-color-primary-text);
}

.cy-stepper__item--current .cy-stepper__marker {
  border-color: var(--cymru-color-primary);
  box-shadow: 0 0 0 var(--cymru-border-width-thick) var(--cymru-color-primary-subtle);
  color: var(--cymru-color-primary-on-surface);
}

.cy-stepper__item--current .cy-stepper__title {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.cy-stepper__item--upcoming .cy-stepper__title,
.cy-stepper__item--upcoming .cy-stepper__marker {
  color: var(--cymru-color-text-secondary);
}

.cy-stepper__item--error .cy-stepper__marker {
  border-color: var(--cymru-color-danger);
  background-color: var(--cymru-color-danger-background);
  color: var(--cymru-color-danger-text);
}

.cy-stepper__item--error .cy-stepper__title {
  color: var(--cymru-color-danger-text);
}

/* Vertical */
.cy-stepper--vertical .cy-stepper__list {
  flex-direction: column;
}

.cy-stepper--vertical .cy-stepper__item {
  flex: 0 0 auto;
}

.cy-stepper--vertical .cy-stepper__item:not(:last-child)::after {
  inset-block-start: 2.75rem;
  inset-block-end: calc(-1 * var(--cymru-space-2));
  inset-inline-start: calc(var(--cymru-space-2) + 1rem - (var(--cymru-border-width-thick) / 2));
  inset-inline-end: auto;
  inline-size: var(--cymru-border-width-thick);
  block-size: auto;
}

.cy-stepper--vertical .cy-stepper__step {
  padding-block-end: var(--cymru-space-5);
}

/* Compact horizontal layout on narrow screens: a one-line summary replaces the list. */
@media (max-width: 40rem) {
  .cy-stepper--horizontal .cy-stepper__summary {
    display: block;
  }

  .cy-stepper--horizontal .cy-stepper__list {
    display: none;
  }
}

@media (forced-colors: active) {
  .cy-stepper__marker {
    border-color: ButtonText;
  }

  .cy-stepper__item--complete .cy-stepper__marker,
  .cy-stepper__item--current .cy-stepper__marker {
    border-color: Highlight;
    forced-color-adjust: none;
    background-color: Canvas;
    color: CanvasText;
  }

  .cy-stepper__item:not(:last-child)::after {
    background-color: ButtonText;
  }
}

/* ==========================================================================
   CySummaryList
   ========================================================================== */

.cy-summary-list {
  margin: 0;
  color: var(--cymru-color-text);
}

.cy-summary-list__row {
  display: grid;
  grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr) minmax(5rem, auto);
  column-gap: var(--cymru-space-4);
  padding-block: var(--cymru-space-3);
  border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
}

.cy-summary-list--no-borders .cy-summary-list__row {
  border-block-end: 0;
}

.cy-summary-list__key {
  grid-column: 1;
  margin: 0;
  font-weight: var(--cymru-font-weight-semibold);
  overflow-wrap: anywhere;
}

.cy-summary-list__value {
  grid-column: 2;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.cy-summary-list__actions {
  grid-column: 3;
  margin: 0;
  text-align: end;
}

.cy-summary-list__empty {
  color: var(--cymru-color-text-secondary);
}

.cy-summary-list__link {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  padding: 0 var(--cymru-space-1);
  border: 0;
  background: transparent;
  color: var(--cymru-color-link);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.cy-summary-list__link:hover {
  color: var(--cymru-color-link-hover);
}

.cy-summary-list__link:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: var(--cymru-focus-ring-offset);
}

.cy-summary-list--card {
  padding-inline: var(--cymru-space-4);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-card);
  background-color: var(--cymru-color-surface);
}

.cy-summary-list--card .cy-summary-list__row:last-child {
  border-block-end: 0;
}

@media (max-width: 40rem) {
  .cy-summary-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .cy-summary-list__key {
    grid-column: 1 / -1;
  }

  .cy-summary-list__value {
    grid-column: 1;
  }

  .cy-summary-list__actions {
    grid-column: 2;
  }
}

/* ==========================================================================
   CyStatCard
   ========================================================================== */

.cy-stat-card {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-2);
  padding: var(--cymru-card-padding);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-card);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  text-decoration: none;
  box-sizing: border-box;
}

a.cy-stat-card:hover {
  background-color: var(--cymru-color-surface-hover);
}

a.cy-stat-card:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: var(--cymru-focus-ring-offset);
}

.cy-stat-card--primary { border-block-start: var(--cymru-border-width-thick) solid var(--cymru-color-primary); }
.cy-stat-card--success { border-block-start: var(--cymru-border-width-thick) solid var(--cymru-color-success); }
.cy-stat-card--warning { border-block-start: var(--cymru-border-width-thick) solid var(--cymru-color-warning); }
.cy-stat-card--danger { border-block-start: var(--cymru-border-width-thick) solid var(--cymru-color-danger); }
.cy-stat-card--info { border-block-start: var(--cymru-border-width-thick) solid var(--cymru-color-info); }

.cy-stat-card__header {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-2);
  color: var(--cymru-color-text-secondary);
}

.cy-stat-card__label {
  margin: 0;
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-semibold);
}

.cy-stat-card__value {
  display: flex;
  align-items: baseline;
  gap: var(--cymru-space-2);
  margin: 0;
}

.cy-stat-card__number {
  font-size: var(--cymru-font-size-3xl);
  font-weight: var(--cymru-font-weight-bold);
  line-height: 1.1;
}

.cy-stat-card__unit {
  color: var(--cymru-color-text-secondary);
}

.cy-stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-1);
  margin: 0;
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-semibold);
  color: var(--cymru-color-text-secondary);
}

.cy-stat-card__trend--good { color: var(--cymru-color-success-text); }
.cy-stat-card__trend--bad { color: var(--cymru-color-danger-text); }

.cy-stat-card__description {
  margin: 0;
  color: var(--cymru-color-text-secondary);
  font-size: var(--cymru-font-size-sm);
}

/* ==========================================================================
   CySkeleton
   ========================================================================== */

.cy-skeleton {
  --cy-skeleton-base: var(--cymru-color-surface-hover);
  --cy-skeleton-shine: var(--cymru-color-surface-subtle);

  display: block;
  inline-size: var(--cy-skeleton-width, 100%);
}

.cy-skeleton__shapes {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-2);
}

.cy-skeleton__line,
.cy-skeleton__block {
  display: block;
  border-radius: var(--cymru-radius-sm);
  background-color: var(--cy-skeleton-base);
}

.cy-skeleton__line {
  block-size: 1em;
}

.cy-skeleton__line--last {
  inline-size: 60%;
}

.cy-skeleton--rectangle .cy-skeleton__block {
  inline-size: 100%;
  block-size: var(--cy-skeleton-height, 8rem);
  border-radius: var(--cymru-radius-md);
}

.cy-skeleton--circle {
  inline-size: var(--cy-skeleton-width, 3rem);
}

.cy-skeleton--circle .cy-skeleton__block {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  border-radius: var(--cymru-radius-circle);
}

.cy-skeleton--animated .cy-skeleton__line,
.cy-skeleton--animated .cy-skeleton__block {
  background-image: linear-gradient(
    90deg,
    var(--cy-skeleton-base) 0%,
    var(--cy-skeleton-shine) 50%,
    var(--cy-skeleton-base) 100%);
  background-size: 200% 100%;
  animation: cy-skeleton-shimmer 1.4s ease-in-out infinite;
}

@keyframes cy-skeleton-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cy-skeleton--animated .cy-skeleton__line,
  .cy-skeleton--animated .cy-skeleton__block {
    animation: none;
    background-image: none;
  }
}

@media (forced-colors: active) {
  .cy-skeleton__line,
  .cy-skeleton__block {
    border: var(--cymru-border-width-thin) solid GrayText;
    background-image: none;
  }
}

/* ==========================================================================
   CyUnsavedChanges
   ========================================================================== */

.cy-unsaved {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-2);
  min-block-size: 1.5rem;
  color: var(--cymru-color-text-secondary);
  font-size: var(--cymru-font-size-sm);
}

.cy-unsaved__icon {
  display: inline-flex;
}

.cy-unsaved--dirty {
  color: var(--cymru-color-warning-text);
}

.cy-unsaved--error {
  color: var(--cymru-color-danger-text);
  font-weight: var(--cymru-font-weight-semibold);
}

.cy-unsaved--saving .cy-unsaved__icon {
  animation: cy-unsaved-spin 1s linear infinite;
}

@keyframes cy-unsaved-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .cy-unsaved--saving .cy-unsaved__icon {
    animation: none;
  }
}
}

/* ---- components/controls.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Controls - CySegmentedControl, CyAvatar, CyAvatarGroup, CyNotificationBell
 *
 * Class names come from the matching .razor/.razor.cs files. Semantic tokens
 * only; forced-colors is handled per component.
 */

/* ==========================================================================
   CySegmentedControl
   ========================================================================== */

.cy-segmented {
  display: inline-flex;
  border: var(--cymru-border-width-thick) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-control);
  background-color: var(--cymru-color-surface);
  overflow: hidden;
}

.cy-segmented--full {
  display: flex;
}

.cy-segmented--full .cy-segmented__option {
  flex: 1 1 0;
}

.cy-segmented__option {
  position: relative;
  display: flex;
}

.cy-segmented__option + .cy-segmented__option {
  border-inline-start: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
}

/* The input fills the label so the whole segment is the target; it is invisible, its sibling is the picture. */
.cy-segmented__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cy-segmented__label {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  min-block-size: 2.75rem;
  padding: 0 var(--cymru-space-4);
  color: var(--cymru-color-text);
  font-weight: var(--cymru-font-weight-semibold);
  white-space: nowrap;
}

.cy-segmented--sm .cy-segmented__label {
  min-block-size: 2rem;
  padding: 0 var(--cymru-space-3);
  font-size: var(--cymru-font-size-sm);
}

.cy-segmented__input:hover:not(:disabled) + .cy-segmented__label {
  background-color: var(--cymru-color-surface-hover);
}

.cy-segmented__input:checked + .cy-segmented__label {
  background-color: var(--cymru-color-primary);
  color: var(--cymru-color-primary-text);
}

.cy-segmented__input:focus-visible + .cy-segmented__label {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: calc(-1 * var(--cymru-focus-ring-width));
}

.cy-segmented__input:disabled {
  cursor: not-allowed;
}

.cy-segmented__input:disabled + .cy-segmented__label {
  color: var(--cymru-color-disabled-text);
  background-color: var(--cymru-color-disabled-background);
}

@media (forced-colors: active) {
  .cy-segmented__input:checked + .cy-segmented__label {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }
}

/* ==========================================================================
   CyAvatar / CyAvatarGroup
   ========================================================================== */

.cy-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border-radius: var(--cymru-radius-circle);
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-bold);
  line-height: 1;
  overflow: hidden;
  box-sizing: border-box;
  user-select: none;
}

.cy-avatar--xs { inline-size: 1.5rem; block-size: 1.5rem; font-size: var(--cymru-font-size-xs); }
.cy-avatar--sm { inline-size: 2rem; block-size: 2rem; font-size: var(--cymru-font-size-xs); }
.cy-avatar--md { inline-size: 2.5rem; block-size: 2.5rem; }
.cy-avatar--lg { inline-size: 3.5rem; block-size: 3.5rem; font-size: var(--cymru-font-size-lg); }
.cy-avatar--xl { inline-size: 5rem; block-size: 5rem; font-size: var(--cymru-font-size-2xl); }

.cy-avatar__image {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Six colour pairs; each pairs a background with its own text token so contrast follows the theme. */
.cy-avatar--tone-0 { background-color: var(--cymru-color-primary-subtle); color: var(--cymru-color-primary-on-surface); }
.cy-avatar--tone-1 { background-color: var(--cymru-color-success-background); color: var(--cymru-color-success-text); }
.cy-avatar--tone-2 { background-color: var(--cymru-color-info-background); color: var(--cymru-color-info-text); }
.cy-avatar--tone-3 { background-color: var(--cymru-color-warning-background); color: var(--cymru-color-warning-text); }
.cy-avatar--tone-4 { background-color: var(--cymru-color-danger-background); color: var(--cymru-color-danger-text); }
.cy-avatar--tone-5 { background-color: var(--cymru-color-surface-alt); color: var(--cymru-color-text); }

.cy-avatar-group {
  display: inline-flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-avatar-group__item {
  display: inline-flex;
}

.cy-avatar-group__item + .cy-avatar-group__item {
  margin-inline-start: calc(-1 * var(--cymru-space-2));
}

.cy-avatar-group .cy-avatar {
  border: var(--cymru-border-width-thick) solid var(--cymru-color-surface);
}

.cy-avatar--overflow {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

@media (forced-colors: active) {
  .cy-avatar {
    border: var(--cymru-border-width-thin) solid CanvasText;
  }
}

/* ==========================================================================
   CyNotificationBell
   ========================================================================== */

.cy-bell {
  position: relative;
  display: inline-flex;
}

.cy-bell__control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  border: var(--cymru-border-width-thin) solid transparent;
  border-radius: var(--cymru-radius-control);
  background: transparent;
  color: var(--cymru-color-text);
  cursor: pointer;
  text-decoration: none;
}

.cy-bell__control:hover {
  background-color: var(--cymru-color-surface-hover);
}

.cy-bell__control:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: var(--cymru-focus-ring-offset);
}

.cy-bell__badge {
  position: absolute;
  inset-block-start: 0.125rem;
  inset-inline-end: 0.125rem;
  min-inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: 0 var(--cymru-space-1);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-surface);
  border-radius: var(--cymru-radius-pill);
  background-color: var(--cymru-color-danger);
  color: var(--cymru-color-text-inverse);
  font-size: var(--cymru-font-size-xs);
  font-weight: var(--cymru-font-weight-bold);
  line-height: 1.125rem;
  text-align: center;
  box-sizing: border-box;
}

@media (forced-colors: active) {
  .cy-bell__badge {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }
}
}

/* ---- components/combobox.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Forms - CyCombobox, CyMultiCombobox
 *
 * Class names come from the matching .razor/.razor.cs files. Semantic tokens
 * only; text colour is always declared with the background it sits on.
 * The field label, hint and error reuse the .cy-field__* rules in forms.css.
 */

.cy-combobox__control {
  position: relative;
}

.cy-combobox__input {
  /* Room for the clear button and the chevron. */
  padding-inline-end: calc(var(--cymru-touch-target-min) + var(--cymru-space-6));
}

.cy-combobox__chevron {
  position: absolute;
  inset-block: 0;
  inset-inline-end: var(--cymru-space-3);
  display: inline-flex;
  align-items: center;
  color: var(--cymru-color-text-muted);
  pointer-events: none;
}

.cy-combobox__clear {
  position: absolute;
  inset-block: 0;
  inset-inline-end: calc(var(--cymru-space-3) + 1.5rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.5rem;
  min-block-size: 1.5rem;
  margin-block: auto;
  padding: var(--cymru-space-1);
  border: none;
  border-radius: var(--cymru-radius-sm);
  background-color: transparent;
  color: var(--cymru-color-text);
  cursor: pointer;
}

.cy-combobox__clear:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-combobox__clear:focus-visible,
.cy-combobox__chip-remove:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 1px;
}

/* ---- popup */

.cy-combobox__popup {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  z-index: var(--cymru-z-dropdown);
  margin-block-start: var(--cymru-space-1);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-sm);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  box-shadow: var(--cymru-shadow-md);
}

.cy-combobox__popup[hidden],
.cy-combobox__list[hidden] {
  display: none;
}

.cy-combobox__message {
  margin: 0;
  padding: var(--cymru-space-3) var(--cymru-space-4);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text-muted);
  font-size: var(--cymru-font-size-sm);
}

.cy-combobox__list {
  max-block-size: var(--cy-combobox-max-height, 16rem);
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.cy-combobox__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cymru-space-2);
  min-block-size: var(--cymru-touch-target-min);
  padding: var(--cymru-space-2) var(--cymru-space-4);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  cursor: pointer;
}

.cy-combobox__option:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

/* Selection is a tick and weight as well as a colour; the active option is an outline, not just a fill. */
.cy-combobox__option--selected {
  font-weight: var(--cymru-font-weight-semibold);
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text);
}

.cy-combobox__option--active {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: calc(-1 * var(--cymru-border-width-focus));
}

.cy-combobox__option--disabled {
  /* surface-alt + text, not disabled-*: the disabled tokens stay light in dark and high-contrast themes.
     The state is shown by italics and the cursor, not by colour (selected options use weight instead). */
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text);
  font-style: italic;
  cursor: not-allowed;
}

/* ---- chips (multiple) */

.cy-combobox__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cymru-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-combobox__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-1);
  min-block-size: 2rem;
  padding-inline: var(--cymru-space-3) var(--cymru-space-1);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-pill);
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text);
  font-size: var(--cymru-font-size-sm);
}

.cy-combobox__chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 1.5rem;
  min-block-size: 1.5rem;
  padding: 0;
  border: none;
  border-radius: var(--cymru-radius-circle);
  background-color: transparent;
  color: var(--cymru-color-text);
  cursor: pointer;
}

.cy-combobox__chip-remove:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-combobox--multiple .cy-combobox__chips {
  margin-block-end: var(--cymru-space-2);
}

@media (forced-colors: active) {
  .cy-combobox__option--selected,
  .cy-combobox__option--active {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }

  .cy-combobox__popup {
    border-color: CanvasText;
  }
}
}

/* ---- components/rule-builder.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Forms - CyRuleBuilder
 *
 * Class names come from CyRuleBuilder.razor. Semantic tokens only (they flip in the dark and
 * high-contrast themes). Nesting is shown with an edge bar and indentation, never colour alone;
 * disabled and read-only states never use opacity.
 */

.cy-rule {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-4);
  color: var(--cymru-color-text);
}

.cy-rule__group {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-3);
  min-inline-size: 0;
  margin: 0;
  padding: var(--cymru-space-3) var(--cymru-space-4);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-inline-start: var(--cymru-border-width-thick) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-card);
  background-color: var(--cymru-color-surface);
}

.cy-rule__group .cy-rule__group {
  background-color: var(--cymru-color-surface-alt);
}

.cy-rule__legend {
  padding-inline: var(--cymru-space-2);
  font-weight: 600;
  color: var(--cymru-color-text);
}

.cy-rule__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cymru-space-4);
}

.cy-rule__list {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cy-rule__item {
  min-inline-size: 0;
}

.cy-rule__empty {
  margin: 0;
  padding: var(--cymru-space-3);
  border: var(--cymru-border-width-thin) dashed var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-card);
  color: var(--cymru-color-text-muted);
}

.cy-rule__condition {
  padding: var(--cymru-space-3);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-card);
  background-color: var(--cymru-color-surface);
}

.cy-rule__group .cy-rule__group .cy-rule__condition {
  background-color: var(--cymru-color-surface);
}

.cy-rule__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--cymru-space-3);
}

.cy-rule__controls {
  display: flex;
  flex: 1 1 24rem;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--cymru-space-3);
  min-inline-size: 0;
}

.cy-rule__control {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.cy-rule__actions {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-1);
  flex-shrink: 0;
}

.cy-rule__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--cymru-radius-control);
  background: transparent;
  color: var(--cymru-color-text-secondary);
  cursor: pointer;
}

.cy-rule__action:hover:not(:disabled) {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-rule__action--remove:hover:not(:disabled) {
  color: var(--cymru-color-danger);
}

.cy-rule__action:focus-visible {
  outline: var(--cymru-focus-ring-width) solid var(--cymru-focus-ring-color);
  outline-offset: var(--cymru-focus-ring-offset);
}

.cy-rule__action:disabled {
  color: var(--cymru-color-text-muted);
  cursor: not-allowed;
  text-decoration: line-through;
}

.cy-rule__footer {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-2);
}

.cy-rule__add {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cymru-space-2);
}

.cy-rule__hint {
  margin: 0;
  color: var(--cymru-color-text-secondary);
}

.cy-rule__issue {
  display: flex;
  flex: 1 1 100%;
  align-items: flex-start;
  gap: var(--cymru-space-2);
  margin: 0;
  color: var(--cymru-color-danger);
  font-weight: 600;
}

.cy-rule__readonly {
  margin: 0;
}

.cy-rule__summary {
  padding: var(--cymru-space-3) var(--cymru-space-4);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-inline-start: var(--cymru-border-width-thick) solid var(--cymru-color-primary);
  border-radius: var(--cymru-radius-card);
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text);
}

.cy-rule__summary-title {
  margin: 0 0 var(--cymru-space-1);
  font-weight: 600;
}

.cy-rule__summary-text {
  margin: 0;
}

/*
 * Dragging (AllowDragReorder). The hooks come from sortable-list.js (data-cy-drag-source, data-cy-drop,
 * data-cy-drop-target). The grip is pointer-only: not focusable, hidden from assistive technology.
 */
.cy-rule__item[data-cy-item] {
  position: relative;
}

.cy-rule__grip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  flex-shrink: 0;
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  border-radius: var(--cymru-radius-control);
  color: var(--cymru-color-text-secondary);
  cursor: grab;
  touch-action: none; /* the script owns the gesture; the page must not scroll under it */
  user-select: none;
}

.cy-rule__grip:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-rule__grip--disabled {
  color: var(--cymru-color-text-muted);
  cursor: not-allowed;
}

/* The shared drag styles fade the item in the air; a dashed outline marks it here instead. */
.cy-rule__item[data-cy-drag-source] {
  opacity: 1;
  outline: var(--cymru-border-width-medium) dashed var(--cymru-color-border-strong);
  outline-offset: var(--cymru-space-1);
}

/* An empty group is a drop zone; its list is only the target the script finds, so it takes no space. */
.cy-rule__list--empty {
  display: none;
}

.cy-rule__drop-zone:has([data-cy-drop-target]) {
  outline: var(--cymru-border-width-medium) dashed var(--cymru-color-primary);
  outline-offset: var(--cymru-space-1);
}

@media (forced-colors: active) {
  .cy-rule__grip {
    color: ButtonText;
  }

  .cy-rule__grip--disabled {
    color: GrayText;
  }

  .cy-rule__drop-zone:has([data-cy-drop-target]) {
    outline-color: Highlight;
  }

  .cy-rule__group,
  .cy-rule__condition,
  .cy-rule__summary {
    border-color: CanvasText;
  }

  .cy-rule__action {
    border: 1px solid ButtonText;
  }

  .cy-rule__action:disabled {
    border-color: GrayText;
    color: GrayText;
  }

  .cy-rule__action:focus-visible {
    outline-color: Highlight;
  }
}
}

/* ---- components/file-upload.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Forms - CyFileUpload
 *
 * Class names come from CyFileUpload.razor. The drop zone is the file input itself,
 * stretched invisibly over the visible prompt, so picking, dropping and keyboard
 * activation are native. Semantic tokens only.
 */

.cy-file-upload__zone {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-block-size: 5rem;
  padding: var(--cymru-space-4);
  border: var(--cymru-border-width-medium) dashed var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-sm);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
}

.cy-file-upload__zone:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-file-upload__zone:has(.cy-file-upload__input:focus-visible) {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-file-upload__zone:has(.cy-file-upload__input:disabled) {
  /* The prompt is text, not a disabled control, so it keeps AA contrast: the fill and cursor show it is off. */
  /* surface-alt, not disabled-background: that token is light in every theme but the text here is white in dark. */
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text);
  cursor: not-allowed;
}

.cy-field--invalid .cy-file-upload__zone,
.cy-file-upload__input[aria-invalid="true"] + .cy-file-upload__prompt {
  border-color: var(--cymru-color-danger);
}

/* Invisible, but covers the whole zone so a click or drop anywhere reaches it. */
.cy-file-upload__input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cy-file-upload__input:disabled {
  cursor: not-allowed;
}

.cy-file-upload__prompt {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--cymru-space-2);
  pointer-events: none;
}

.cy-file-upload__choose {
  font-weight: var(--cymru-font-weight-semibold);
  color: var(--cymru-color-primary-on-surface);
  text-decoration: underline;
}

.cy-file-upload__zone:has(.cy-file-upload__input:disabled) .cy-file-upload__choose {
  color: var(--cymru-color-text);
}

.cy-file-upload__drop {
  color: var(--cymru-color-text-muted);
  font-size: var(--cymru-font-size-sm);
}

.cy-file-upload__zone:has(.cy-file-upload__input:disabled) .cy-file-upload__drop {
  color: var(--cymru-color-text);
}

/* ---- rejections */

.cy-file-upload__rejections {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-1);
  margin: var(--cymru-space-2) 0 0;
  padding: 0;
  list-style: none;
}

/* ---- file list */

.cy-file-upload__list {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-2);
  margin: var(--cymru-space-3) 0 0;
  padding: 0;
  list-style: none;
}

.cy-file-upload__item {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-2);
  padding: var(--cymru-space-3) var(--cymru-space-4);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-sm);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
}

/* A failed file is marked by a thick edge and the word "Failed", not by colour alone. */
.cy-file-upload__item--failed {
  border-inline-start: var(--cymru-border-width-thick) solid var(--cymru-color-danger);
}

.cy-file-upload__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cymru-space-1) var(--cymru-space-3);
}

.cy-file-upload__name {
  font-weight: var(--cymru-font-weight-semibold);
  overflow-wrap: anywhere;
}

.cy-file-upload__size,
.cy-file-upload__status {
  color: var(--cymru-color-text-muted);
  font-size: var(--cymru-font-size-sm);
}

.cy-file-upload__status {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-1);
  margin-inline-start: auto;
}

.cy-file-upload__item-error {
  margin: 0;
}

.cy-file-upload__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cymru-space-2);
}

.cy-file-upload__button,
.cy-file-upload__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-1);
  min-block-size: var(--cymru-touch-target-min);
  padding: var(--cymru-space-1) var(--cymru-space-3);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-sm);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  font: inherit;
  cursor: pointer;
}

.cy-file-upload__button:hover:not(:disabled),
.cy-file-upload__submit:hover:not(:disabled) {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-file-upload__button:focus-visible,
.cy-file-upload__submit:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-file-upload__button:disabled,
.cy-file-upload__submit:disabled {
  /* The prompt is text, not a disabled control, so it keeps AA contrast: the fill and cursor show it is off. */
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text);
  cursor: not-allowed;
}

.cy-file-upload__submit {
  margin-block-start: var(--cymru-space-3);
  background-color: var(--cymru-color-primary);
  color: var(--cymru-color-primary-text);
  border-color: var(--cymru-color-primary);
}

.cy-file-upload__submit:hover:not(:disabled) {
  background-color: var(--cymru-color-primary-hover);
  color: var(--cymru-color-primary-text);
}

@media (forced-colors: active) {
  .cy-file-upload__zone {
    border-color: CanvasText;
  }

  .cy-file-upload__item--failed {
    border-inline-start-color: CanvasText;
  }
}
}

/* ---- components/data-table.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Data - CyDataTable
 *
 * Class names come from CyDataTable.razor / CyDataTable.razor.cs. The table itself is CyTable
 * (table.css); this file only adds sorting, selection, paging and state styles. Semantic tokens
 * only; text colour is declared with the background it sits on.
 */

.cy-data-table__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cymru-space-3);
  margin-block-end: var(--cymru-space-3);
}

.cy-data-table__selection {
  margin: 0 0 var(--cymru-space-2);
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-semibold);
  color: var(--cymru-color-text);
}

/* ---- alignment */

.cy-data-table .cy-data-table__cell--end {
  text-align: end;
}

.cy-data-table .cy-data-table__cell--center {
  text-align: center;
}

.cy-data-table .cy-data-table__cell--end .cy-data-table__sort {
  margin-inline-start: auto;
}

/* ---- sortable header */

.cy-data-table__sort {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-1);
  min-block-size: 1.5rem;
  margin: 0;
  padding: var(--cymru-space-1) var(--cymru-space-2);
  margin-inline-start: calc(-1 * var(--cymru-space-2));
  border: none;
  border-radius: var(--cymru-radius-sm);
  background-color: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.cy-data-table__sort:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-data-table__sort:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 1px;
}

/* The sorted column is marked by its icon and by weight, not by colour. */
.cy-data-table th[aria-sort] {
  color: var(--cymru-color-text);
}

.cy-data-table th[aria-sort] .cy-data-table__sort {
  font-weight: var(--cymru-font-weight-bold);
}

/* ---- selection */

.cy-data-table .cy-data-table__select-cell {
  inline-size: 1%;
  white-space: nowrap;
}

.cy-data-table__checkbox {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  margin: 0;
  accent-color: var(--cymru-color-primary);
  cursor: pointer;
  vertical-align: middle;
}

.cy-data-table__checkbox:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-data-table__checkbox:disabled {
  cursor: not-allowed;
}

/* A selected row has a thick start edge as well as a tint. */
.cy-data-table .cy-data-table__row--selected {
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text);
  box-shadow: inset var(--cymru-border-width-thick) 0 0 var(--cymru-color-primary-on-surface);
}

.cy-data-table .cy-data-table__row--selected:hover {
  background-color: var(--cymru-color-surface-alt);
  color: var(--cymru-color-text);
}

/* ---- states */

.cy-data-table .cy-data-table__message {
  padding: var(--cymru-space-6) var(--cymru-space-4);
  text-align: center;
  white-space: normal;
}

.cy-data-table__empty,
.cy-data-table__error {
  margin: 0 0 var(--cymru-space-2);
  color: var(--cymru-color-text);
}

.cy-data-table__error {
  font-weight: var(--cymru-font-weight-semibold);
}

.cy-data-table__retry {
  min-block-size: var(--cymru-touch-target-min);
  padding: var(--cymru-space-1) var(--cymru-space-4);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-sm);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  font: inherit;
  cursor: pointer;
}

.cy-data-table__retry:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-data-table__retry:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

/* Busy is shown by skeleton rows and aria-busy. The table is not dimmed: opacity lowers text contrast below AA. */
.cy-data-table--busy .cy-table__scroll {
  cursor: progress;
}

/* ---- sticky header (MaxHeight) */

.cy-data-table--sticky .cy-table__scroll {
  max-block-size: var(--cy-data-table-max-height, none);
  overflow-y: auto;
}

.cy-data-table--sticky thead th {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--cymru-z-base);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
}

/* ---- footer */

.cy-data-table__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cymru-space-3);
  margin-block-start: var(--cymru-space-3);
}

.cy-data-table__page-size {
  display: flex;
  align-items: center;
  gap: var(--cymru-space-2);
}

.cy-data-table__range {
  margin: 0;
  font-size: var(--cymru-font-size-sm);
  color: var(--cymru-color-text-muted);
}


/* ---- expandable rows */

.cy-data-table .cy-data-table__expand-cell {
  inline-size: 1%;
  white-space: nowrap;
  text-align: center;
}

.cy-data-table__expand-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: var(--cymru-radius-sm);
  background-color: transparent;
  color: var(--cymru-color-text-muted);
  cursor: pointer;
  transition: transform 150ms ease, background-color 150ms ease, color 150ms ease;
}

.cy-data-table__expand-button:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-data-table__expand-button:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 2px;
}

.cy-data-table__expand-icon {
  display: inline-block;
  transition: transform 150ms ease;
}

.cy-data-table__expand-icon--expanded {
  transform: rotate(90deg);
}

.cy-data-table .cy-data-table__row--expanded {
  background-color: var(--cymru-color-surface-hover);
}

.cy-data-table .cy-data-table__detail-row {
  background-color: var(--cymru-color-surface-alt);
}

.cy-data-table .cy-data-table__detail-cell {
  padding: var(--cymru-space-4) var(--cymru-space-6);
  border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  color: var(--cymru-color-text);
}

.cy-data-table__detail-content {
  display: flex;
  flex-direction: column;
  gap: var(--cymru-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .cy-data-table__expand-button,
  .cy-data-table__expand-icon {
    transition: none;
  }
}

@media (forced-colors: active) {
  .cy-data-table .cy-data-table__expand-button:focus-visible {
    outline: 2px solid Highlight;
  }

  .cy-data-table .cy-data-table__detail-row {
    background-color: Canvas;
    color: CanvasText;
  }

  .cy-data-table .cy-data-table__row--selected {
    forced-color-adjust: none;
    background-color: Highlight;
    color: HighlightText;
  }
}

/* ---- filter and search bar */

.cy-data-table__filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cymru-space-3);
  margin-block-end: var(--cymru-space-3);
}

.cy-data-table__search {
  position: relative;
  display: inline-flex;
  align-items: center;
  inline-size: 100%;
  max-inline-size: 24rem;
}

.cy-data-table__search-icon {
  position: absolute;
  inset-inline-start: var(--cymru-space-3);
  color: var(--cymru-color-text-muted);
  pointer-events: none;
}

.cy-data-table__search-input {
  inline-size: 100%;
  min-block-size: 2.25rem;
  padding: var(--cymru-space-1) var(--cymru-space-3);
  padding-inline-start: calc(var(--cymru-space-3) + 1.25rem);
  padding-inline-end: calc(var(--cymru-space-3) + 1.25rem);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border-strong);
  border-radius: var(--cymru-radius-md);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  font: inherit;
  font-size: var(--cymru-font-size-sm);
}

.cy-data-table__search-input:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 1px;
}

.cy-data-table__search-clear {
  position: absolute;
  inset-inline-end: var(--cymru-space-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  padding: 0;
  border: none;
  border-radius: var(--cymru-radius-full);
  background-color: transparent;
  color: var(--cymru-color-text-muted);
  cursor: pointer;
}

.cy-data-table__search-clear:hover {
  background-color: var(--cymru-color-surface-hover);
  color: var(--cymru-color-text);
}

.cy-data-table__clear-filters-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cymru-space-1);
  padding: var(--cymru-space-1) var(--cymru-space-3);
  min-block-size: 2rem;
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-md);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  font: inherit;
  font-size: var(--cymru-font-size-sm);
  cursor: pointer;
}

.cy-data-table__clear-filters-btn:hover {
  background-color: var(--cymru-color-surface-hover);
}

.cy-data-table__clear-filters-btn:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 1px;
}

/* ---- column filter row */

.cy-data-table__filter-row th {
  padding: var(--cymru-space-1) var(--cymru-space-2);
  background-color: var(--cymru-color-surface-alt);
  border-block-end: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  font-weight: normal;
}

.cy-data-table__column-filter-input {
  inline-size: 100%;
  min-block-size: 1.875rem;
  padding: var(--cymru-space-1) var(--cymru-space-2);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-sm);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  font: inherit;
  font-size: var(--cymru-font-size-xs);
  box-sizing: border-box;
}

.cy-data-table__column-filter-input:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 1px;
}

/* ---- sticky bulk action toolbar */

.cy-data-table__bulk-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--cymru-space-3);
  padding: var(--cymru-space-2) var(--cymru-space-3);
  margin-block-end: var(--cymru-space-3);
  border: var(--cymru-border-width-thin) solid var(--cymru-color-primary-on-surface);
  border-radius: var(--cymru-radius-md);
  background-color: var(--cymru-color-surface-alt);
  box-shadow: var(--cymru-shadow-sm);
}

.cy-data-table__bulk-info {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cymru-space-3);
}

.cy-data-table__bulk-count {
  font-size: var(--cymru-font-size-sm);
  font-weight: var(--cymru-font-weight-semibold);
  color: var(--cymru-color-text);
}

.cy-data-table__bulk-link {
  padding: 0;
  border: none;
  background: transparent;
  color: var(--cymru-color-primary);
  font: inherit;
  font-size: var(--cymru-font-size-sm);
  text-decoration: underline;
  cursor: pointer;
}

.cy-data-table__bulk-link:hover {
  color: var(--cymru-color-text);
}

.cy-data-table__bulk-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--cymru-space-2);
}

.cy-data-table__bulk-clear {
  padding: var(--cymru-space-1) var(--cymru-space-2);
  min-block-size: 1.75rem;
  border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
  border-radius: var(--cymru-radius-sm);
  background-color: var(--cymru-color-surface);
  color: var(--cymru-color-text);
  font: inherit;
  font-size: var(--cymru-font-size-xs);
  cursor: pointer;
}

.cy-data-table__bulk-clear:hover {
  background-color: var(--cymru-color-surface-hover);
}

.cy-data-table__bulk-clear:focus-visible,
.cy-data-table__bulk-link:focus-visible {
  outline: var(--cymru-border-width-focus) solid var(--cymru-color-focus-outline);
  outline-offset: 1px;
}

/* ---- responsive stacked-row mode */

@media (max-width: 768px) {
  .cy-data-table--responsive table,
  .cy-data-table--responsive thead,
  .cy-data-table--responsive tbody,
  .cy-data-table--responsive th,
  .cy-data-table--responsive td,
  .cy-data-table--responsive tr {
    display: block;
  }

  .cy-data-table--responsive thead tr:not(.cy-data-table__filter-row) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  .cy-data-table--responsive thead tr.cy-data-table__filter-row {
    padding: var(--cymru-space-3);
    margin-block-end: var(--cymru-space-3);
    border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
    border-radius: var(--cymru-radius-md);
    background-color: var(--cymru-color-surface);
  }

  .cy-data-table--responsive thead tr.cy-data-table__filter-row th:empty {
    display: none;
  }

  .cy-data-table--responsive tbody tr.cy-data-table__row {
    margin-block-end: var(--cymru-space-3);
    padding: var(--cymru-space-3);
    border: var(--cymru-border-width-thin) solid var(--cymru-color-border);
    border-radius: var(--cymru-radius-md);
    background-color: var(--cymru-color-surface);
    box-shadow: var(--cymru-shadow-sm);
  }

  .cy-data-table--responsive tbody td,
  .cy-data-table--responsive tbody th[scope="row"] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cymru-space-2) 0;
    border: none;
    border-block-end: 1px dashed var(--cymru-color-border);
    white-space: normal;
    text-align: end;
  }

  .cy-data-table--responsive tbody td:last-child,
  .cy-data-table--responsive tbody th[scope="row"]:last-child {
    border-block-end: none;
  }

  .cy-data-table--responsive tbody td::before,
  .cy-data-table--responsive tbody th[scope="row"]::before {
    content: attr(data-label);
    font-weight: var(--cymru-font-weight-semibold);
    color: var(--cymru-color-text-muted);
    text-align: start;
    padding-inline-end: var(--cymru-space-3);
  }

  .cy-data-table--responsive tbody td.cy-data-table__select-cell,
  .cy-data-table--responsive tbody td.cy-data-table__expand-cell {
    inline-size: 100%;
  }

  .cy-data-table--responsive .cy-data-table__detail-row {
    margin-block-start: calc(-1 * var(--cymru-space-2));
    margin-block-end: var(--cymru-space-3);
    border-radius: 0 0 var(--cymru-radius-md) var(--cymru-radius-md);
  }
}
}

/* ---- components/timeline.css ---- */
@layer components {
@layer components;

/*
 * CymruBlazor Timeline - CyTimeline, CyTimelineItem
 *
 * Sourced from the NHS Wales Design System (progress-timeline spec).
 * Provides accessible, chronological milestone tracking for clinical workflows,
 * audit trails, and patient histories.
 * Semantic tokens only: dark and high-contrast modes follow automatically.
 */

/* ==========================================================================
   CyTimeline Root
   ========================================================================== */

.cy-timeline {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  color: var(--cymru-color-text);
}

/* ==========================================================================
   CyTimeline Item
   ========================================================================== */

.cy-timeline__item {
  position: relative;
  display: flex;
  gap: var(--cymru-space-4);
  margin: 0;
  padding: 0;
}

/* Node containing the marker and vertical stem */
.cy-timeline__node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 2rem;
}

/* The circular marker node */
.cy-timeline__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--cymru-radius-circle);
  border-width: var(--cymru-border-width-medium);
  border-style: solid;
  box-sizing: border-box;
  z-index: 1;
  flex-shrink: 0;
  background-color: var(--cymru-color-surface);
  border-color: var(--cymru-color-border-strong);
  color: var(--cymru-color-text-muted);
}

/* Default dot inside an iconless marker */
.cy-timeline__dot {
  display: block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--cymru-radius-circle);
  background-color: currentColor;
}

/* Semantic colour variants for markers */
.cy-timeline__marker--primary {
  background-color: var(--cymru-color-primary-subtle);
  border-color: var(--cymru-color-primary);
  color: var(--cymru-color-primary);
}

.cy-timeline__marker--secondary {
  background-color: var(--cymru-color-surface-alt);
  border-color: var(--cymru-color-secondary);
  color: var(--cymru-color-secondary);
}

.cy-timeline__marker--success {
  background-color: var(--cymru-color-success-background);
  border-color: var(--cymru-color-success);
  color: var(--cymru-color-success);
}

.cy-timeline__marker--warning {
  background-color: var(--cymru-color-warning-background);
  border-color: var(--cymru-color-warning);
  color: var(--cymru-color-warning);
}

.cy-timeline__marker--danger {
  background-color: var(--cymru-color-danger-background);
  border-color: var(--cymru-color-danger);
  color: var(--cymru-color-danger);
}

.cy-timeline__marker--info {
  background-color: var(--cymru-color-info-background);
  border-color: var(--cymru-color-info);
  color: var(--cymru-color-info);
}

/* The vertical connecting stem line */
.cy-timeline__stem {
  position: absolute;
  top: 2rem;
  bottom: 0;
  left: 50%;
  width: var(--cymru-border-width-medium);
  transform: translateX(-50%);
  background-color: var(--cymru-color-border);
}

/* Suppress stem line on final milestone */
.cy-timeline__item:last-child .cy-timeline__stem,
.cy-timeline__item--last .cy-timeline__stem {
  display: none;
}

/* Stem line style variants */
.cy-timeline--dashed .cy-timeline__stem {
  background-color: transparent;
  border-left: var(--cymru-border-width-medium) dashed var(--cymru-color-border);
  width: 0;
}

.cy-timeline--dotted .cy-timeline__stem {
  background-color: transparent;
  border-left: var(--cymru-border-width-medium) dotted var(--cymru-color-border);
  width: 0;
}

/* Content block */
.cy-timeline__content {
  flex: 1 1 auto;
  min-width: 0;
  padding-bottom: var(--cymru-space-6);
}

.cy-timeline__item:last-child .cy-timeline__content,
.cy-timeline__item--last .cy-timeline__content {
  padding-bottom: 0;
}

/* Header row (title, time, badge) */
.cy-timeline__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--cymru-space-2) var(--cymru-space-3);
  margin-bottom: var(--cymru-space-1);
}

.cy-timeline__title {
  margin: 0;
  font-size: var(--cymru-font-size-md);
  font-weight: var(--cymru-font-weight-semibold);
  color: var(--cymru-color-text);
  line-height: var(--cymru-line-height-heading);
}

.cy-timeline__time {
  font-size: var(--cymru-font-size-sm);
  color: var(--cymru-color-text-muted);
}

.cy-timeline__actor {
  font-size: var(--cymru-font-size-sm);
  color: var(--cymru-color-text-muted);
  margin-bottom: var(--cymru-space-1);
}

.cy-timeline__body {
  color: var(--cymru-color-text);
  font-size: var(--cymru-font-size-md);
  line-height: var(--cymru-line-height-body);
}

.cy-timeline__body p:first-child {
  margin-top: 0;
}

.cy-timeline__body p:last-child {
  margin-bottom: 0;
}

.cy-timeline__actions {
  margin-top: var(--cymru-space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--cymru-space-2);
}

/* ==========================================================================
   Density: Compact
   ========================================================================== */

.cy-timeline--compact .cy-timeline__node {
  width: 1.5rem;
}

.cy-timeline--compact .cy-timeline__marker {
  width: 1.5rem;
  height: 1.5rem;
}

.cy-timeline--compact .cy-timeline__dot {
  width: 0.5rem;
  height: 0.5rem;
}

.cy-timeline--compact .cy-timeline__stem {
  top: 1.5rem;
}

.cy-timeline--compact .cy-timeline__content {
  padding-bottom: var(--cymru-space-4);
}

/* ==========================================================================
   High Contrast / Forced-Colors Mode
   ========================================================================== */

@media (forced-colors: active) {
  .cy-timeline__marker {
    border-color: ButtonText;
  }

  .cy-timeline__dot {
    background-color: ButtonText;
  }

  .cy-timeline__stem {
    background-color: ButtonText;
  }

  .cy-timeline--dashed .cy-timeline__stem,
  .cy-timeline--dotted .cy-timeline__stem {
    border-left-color: ButtonText;
  }
}
}

/* ---- utilities/display.css ---- */
@layer utilities {
@layer utilities;

/*
 * CymruBlazor Utilities - Display
 */

.u-block {
  display: block;
}

.u-inline {
  display: inline;
}

.u-inline-block {
  display: inline-block;
}

.u-flex {
  display: flex;
}

.u-inline-flex {
  display: inline-flex;
}

.u-grid {
  display: grid;
}

.u-inline-grid {
  display: inline-grid;
}

.u-hidden {
  display: none !important;
}

/* Flex */

.u-flex-row {
  flex-direction: row;
}

.u-flex-column {
  flex-direction: column;
}

.u-flex-wrap {
  flex-wrap: wrap;
}

.u-flex-nowrap {
  flex-wrap: nowrap;
}

.u-items-start {
  align-items: flex-start;
}

.u-items-center {
  align-items: center;
}

.u-items-end {
  align-items: flex-end;
}

.u-justify-start {
  justify-content: flex-start;
}

.u-justify-center {
  justify-content: center;
}

.u-justify-between {
  justify-content: space-between;
}

.u-justify-end {
  justify-content: flex-end;
}

.u-grow {
  flex-grow: 1;
}
}

/* ---- utilities/spacing.css ---- */
@layer utilities {
@layer utilities;

/*
 * CymruBlazor Utilities - Spacing
 *
 * Intentionally limited.
 * Components should normally define their own spacing.
 */

/* Margin */

.u-m-0 {
  margin: 0;
}

.u-m-xs {
  margin: var(--cymru-space-1);
}
.u-m-sm {
  margin: var(--cymru-space-2);
}
.u-m-md {
  margin: var(--cymru-space-4);
}
.u-m-lg {
  margin: var(--cymru-space-6);
}
.u-m-xl {
  margin: var(--cymru-space-8);
}

/* Margin Block */

.u-my-sm {
  margin-block: var(--cymru-space-2);
}

.u-my-md {
  margin-block: var(--cymru-space-4);
}

.u-my-lg {
  margin-block: var(--cymru-space-6);
}

/* Margin Inline */

.u-mx-auto {
  margin-inline: auto;
}

/* Padding */

.u-p-0 {
  padding: 0;
}

.u-p-sm {
  padding: var(--cymru-space-2);
}

.u-p-md {
  padding: var(--cymru-space-4);
}

.u-p-lg {
  padding: var(--cymru-space-6);
}

.u-p-xl {
  padding: var(--cymru-space-8);
}

/* Gap */

.u-gap-sm {
  gap: var(--cymru-space-2);
}

.u-gap-md {
  gap: var(--cymru-space-4);
}

.u-gap-lg {
  gap: var(--cymru-space-6);
}
}

/* ---- utilities/visibility.css ---- */
@layer utilities {
@layer utilities;

/*
 * CymruBlazor Utilities - Visibility
 */

.u-visible {
  visibility: visible;
}

.u-invisible {
  visibility: hidden;
}

.u-overflow-hidden {
  overflow: hidden;
}

.u-overflow-auto {
  overflow: auto;
}

.u-overflow-scroll {
  overflow: scroll;
}

.u-text-center {
  text-align: center;
}

.u-text-start {
  text-align: start;
}

.u-text-end {
  text-align: end;
}
}

/* ---- utilities/screen-reader.css ---- */
@layer utilities {
@layer utilities;

/*
 * CymruBlazor Utilities - Screen Readers
 */

.u-sr-only {
  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  clip-path: inset(50%);

  white-space: nowrap;

  border: 0;
}

.u-sr-only-focusable:not(:focus):not(:focus-visible) {
  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  clip-path: inset(50%);

  white-space: nowrap;

  border: 0;
}
}

/* ---- themes/default.css ---- */
@layer base {
@layer base;

/*
 * CymruBlazor Theme
 *
 * Default (NHS Wales / Light)
 *
 * This is the default theme and intentionally mirrors the semantic
 * values defined in colours.css.
 *
 * Keeping this file explicit makes it easy to diff themes and allows
 * additional semantic tokens to be introduced later without changing
 * component CSS.
 */

:root,
[data-theme="light"] {
  /* ==========================================================================
       Brand
       ========================================================================== */

  --cymru-color-primary: var(--cymru-blue-800);
  --cymru-color-primary-hover: var(--cymru-blue-900);
  --cymru-color-primary-subtle: var(--cymru-blue-100);
  --cymru-color-primary-on-surface: var(--cymru-color-primary);

  --cymru-color-secondary: var(--cymru-navy-900);
  --cymru-color-brand-accent: var(--cymru-cyan-700);

  --cymru-color-accent: var(--cymru-navy-900);
  --cymru-color-accent-text: var(--cymru-white);

  /* ==========================================================================
       Surfaces
       ========================================================================== */

  --cymru-color-background: var(--cymru-grey-100);
  --cymru-color-surface: var(--cymru-white);
  --cymru-color-surface-alt: var(--cymru-blue-50);
  --cymru-color-surface-accent: var(--cymru-cyan-100);

  /* ==========================================================================
       Borders
       ========================================================================== */

  --cymru-color-border: var(--cymru-grey-200);
  --cymru-color-border-strong: var(--cymru-grey-600);

  /* ==========================================================================
       Typography
       ========================================================================== */

  --cymru-color-text: var(--cymru-grey-900);
  --cymru-color-text-muted: var(--cymru-grey-600);
  --cymru-color-text-inverse: var(--cymru-white);

  /* ==========================================================================
       Links
       ========================================================================== */

  --cymru-color-link: var(--cymru-info-blue-700);
  --cymru-color-link-hover: var(--cymru-navy-900);
  --cymru-color-link-visited: var(--cymru-blue-600);

  /* ==========================================================================
       Status
       ========================================================================== */

  --cymru-color-success: var(--cymru-green-600);
  --cymru-color-success-text: var(--cymru-green-700);
  --cymru-color-success-background: var(--cymru-green-100);

  --cymru-color-warning: var(--cymru-yellow-500);
  --cymru-color-warning-background: var(--cymru-yellow-100);

  --cymru-color-danger: var(--cymru-red-600);
  --cymru-color-danger-text: var(--cymru-red-700);
  --cymru-color-danger-background: var(--cymru-red-100);

  --cymru-color-info: var(--cymru-info-blue-700);
  --cymru-color-info-background: var(--cymru-info-blue-100);

  /* ==========================================================================
       Focus
       ========================================================================== */

  --cymru-color-focus: var(--cymru-focus-yellow);
  --cymru-color-focus-outline: var(--cymru-focus-yellow);
}
}

/* ---- themes/dark.css ---- */
@layer base {
@layer base;

/*
 * CymruBlazor Theme
 *
 * Dark Theme
 *
 * Sourced from the DHCW "Single Record Design System" Figma file's own
 * documented Dark mode token values (Tier 2 - Semantic > Dark Mode),
 * designed for clinical environments with reduced ambient light. All
 * pairs are documented as meeting WCAG 2.2 AA, most AAA. This replaces
 * an earlier hand-picked dark palette that predated access to those
 * values.
 *
 * Only tokens that actually differ from the light theme are overridden
 * here - anything not listed inherits the :root/light value, which is
 * correct where the source explicitly says a token is "unchanged"
 * between modes (e.g. warning, border.focus, brand.accent).
 *
 * Two source ambiguities, resolved as noted:
 *  - sr.color.surface.small-cards (dark) is labelled "navy-900" but its
 *    swatch hex (#0A6A84) actually matches the cyan-900 primitive
 *    defined elsewhere in the same source. Treated as a labelling typo -
 *    the hex/primitive value is used, not the label.
 *  - sr.color.status.info (dark)'s usage note says "matches light mode"
 *    but its swatch is cyan-300 (#D6EAF2), not light mode's info-blue-700.
 *    The swatch value is treated as authoritative.
 *  - No dark-mode value is documented for link-hover or the solid
 *    "accent" chrome background (header/footer) used by
 *    --cymru-color-accent - both are inferred (marked below) rather than
 *    guessed from an authoritative source.
 */

/*
 * The `body:has(...)` alternate selector below is not redundant with
 * `[data-theme="dark"]` - it's the fix for a real bug (see CyThemeProvider
 * doc comments and components/theming.css). CyThemeProvider renders a
 * `display: contents` wrapper *inside* <body> so it never adds an extra
 * layout box, which means the [data-theme="dark"] attribute itself only
 * ever lands on a descendant of <body>, never on <body> (or <html>)
 * directly. CSS custom properties still inherit fine *into* that
 * subtree (headings/typography correctly used the dark palette), but
 * two things silently kept using the light value because they're
 * resolved at the <body> box itself, which sits outside the attribute's
 * reach:
 *   1. `body { background-color / color: var(--cymru-color-*) }` in
 *      base/typography.css - the page background/default text colour
 *      never actually switched, even though components deeper in the
 *      tree looked themed.
 *   2. Any `color: inherit` / `currentColor` usage (e.g. CyCard's
 *      `color: inherit`) - these copy the ancestor's *computed* colour
 *      rather than re-resolving var(--cymru-color-text), so they froze
 *      at <body>'s light-mode black and rendered as near-invisible dark
 *      text on dark surfaces.
 * `body:has(.cy-theme-provider[data-theme="dark"])` lets <body> itself
 * react to a data-theme attribute set on a descendant, fixing both
 * issues at the source with no JavaScript required.
 */
[data-theme="dark"],
body:has(.cy-theme-provider[data-theme="dark"]) {
  color-scheme: dark;

  /* ==========================================================================
       Brand
       ========================================================================== */

     --cymru-color-primary: var(--cymru-cyan-900);
     --cymru-color-primary-hover: var(--cymru-cyan-800);
     --cymru-color-primary-text: var(--cymru-white);

  /* cyan-900 is a surface fill: as text on a dark surface it is ~2.1:1.
     Match the link colour, which is tuned for text on dark surfaces. */
  --cymru-color-primary-on-surface: var(--cymru-cyan-400);

  --cymru-color-secondary: var(--cymru-blue-300);

  /* Inferred: no explicit dark-mode value is documented for the solid
     chrome background (header/footer). Kept as navy-900 rather than
     following interactive.secondary's dark value (blue-300, a light
     muted blue) literally - that value reads fine for small interactive
     elements but would break the white accent-text contrast this token
     pairs with for full chrome bands. */
  --cymru-color-accent: var(--cymru-navy-900);

  /* ==========================================================================
       Surfaces
       ========================================================================== */

  --cymru-color-background: var(--cymru-grey-900);
  --cymru-color-surface: var(--cymru-blue-900);
  --cymru-color-surface-alt: var(--cymru-navy-700);
  --cymru-color-surface-accent: var(--cymru-blue-900);

  /* ==========================================================================
       Borders
       ========================================================================== */

  --cymru-color-border: var(--cymru-navy-500);
  --cymru-color-border-strong: var(--cymru-navy-300);

  /* ==========================================================================
       Typography
       ========================================================================== */

  --cymru-color-text: var(--cymru-white);
  --cymru-color-text-muted: var(--cymru-grey-200);
     --cymru-color-text-inverse: var(--cymru-white);

  /* ==========================================================================
       Links
       ========================================================================== */

     --cymru-color-link: var(--cymru-cyan-400);
  /* Inferred - no dark-mode hover value is documented. */
  --cymru-color-link-hover: var(--cymru-cyan-300);

  /* ==========================================================================
       Status
       ========================================================================== */

  --cymru-color-success: var(--cymru-green-100);
  --cymru-color-success-text: var(--cymru-green-100);
  --cymru-color-success-background: var(--cymru-navy-900);

  --cymru-color-warning-background: var(--cymru-navy-700);

  --cymru-color-danger: var(--cymru-red-100);
  --cymru-color-danger-text: var(--cymru-red-100);
  --cymru-color-danger-background: var(--cymru-blue-900);

  --cymru-color-info: var(--cymru-cyan-300);
  --cymru-color-info-background: var(--cymru-navy-900);

  /* ==========================================================================
       Focus
       ========================================================================== */

  /* Unchanged - the design system notes NHS/GDS focus yellow is highly
     visible on both light and dark. */
}
}

/* ---- themes/high-contrast.css ---- */
@layer base {
@layer base;

/*
 * CymruBlazor Theme
 *
 * High Contrast
 *
 * Optimised for maximum readability.
 */

/* See the matching comment in themes/dark.css - CyThemeProvider's wrapper
   is `display: contents` inside <body>, so <body> itself needs its own
   selector to react to the attribute; see also components/theming.css. */
[data-theme="high-contrast"],
body:has(.cy-theme-provider[data-theme="high-contrast"]) {
  color-scheme: dark;

  --cymru-color-background: #000000;

  --cymru-color-surface: #000000;

  --cymru-color-surface-alt: #000000;

  --cymru-color-text: #ffffff;

  --cymru-color-text-muted: #ffffff;

  --cymru-color-text-inverse: #000000;

  --cymru-color-border: #ffffff;

  --cymru-color-border-strong: #ffffff;

  --cymru-color-primary: #00ffff;

  --cymru-color-primary-on-surface: #00ffff;

  --cymru-color-primary-hover: #ffffff;

  --cymru-color-primary-text: #000000;

  --cymru-color-primary-subtle: #000000;

  --cymru-color-secondary: #ffff00;

  --cymru-color-link: #00ffff;

  --cymru-color-link-hover: #ffffff;

  --cymru-color-link-visited: #ffff00;

  --cymru-color-success: #00ff00;
  --cymru-color-success-text: #00ff00;

  --cymru-color-success-background: #000000;

  --cymru-color-warning: #ffff00;

  --cymru-color-warning-background: #000000;

  --cymru-color-danger: #ff4040;
  --cymru-color-danger-text: #ff4040;

  --cymru-color-danger-background: #000000;

  --cymru-color-info: #00ffff;

  --cymru-color-info-background: #000000;

  --cymru-color-focus: #ffff00;

  --cymru-color-focus-outline: #ffffff;
}
}