@lilydesignsystem/themes 0.1.0

package/dist/united-kingdom-national-health-service-wales-for-patients.css

@@ -0,0 +1,4211 @@
+/* ============================================================================
+ * Theme: united-kingdom-national-health-service-wales-patients
+ * Brand: NHS Wales / GIG Cymru (Gwasanaeth Iechyd Gwladol Cymru) — patients
+ * Format: Lily standalone theme
+ *
+ *
+ * Upstream tracked: DHCW / NHS Wales design system (2026 — navy primary,
+ * gold rail accent, yellow focus). Independent implementation against Lily
+ * class hooks; not affiliated with or endorsed by NHS Wales / DHCW.
+ * --------------------------------------------------------------------------
+ * Patients variant
+ * --------------------------------------------------------------------------
+ * This is the *patients* / public-facing variant of the NHS Wales theme,
+ * and the one to reach for whenever a member of the public will read or
+ * interact with the screen: nhs.wales information pages, patient portals,
+ * appointment booking, repeat-prescription requests, symptom checkers,
+ * health-content articles, vaccination invitations, and any other surface
+ * where the user is the patient (or a carer, parent, or relative acting
+ * on the patient's behalf).
+ *
+ * What the patients variant optimises for:
+ *
+ *   - Touch-first reachability. Every control meets the WCAG 2.5.5
+ *     target-size guidance (~44px / 2.5rem) so the same UI works on a
+ *     phone held one-handed at a bus stop, a shared family tablet, and
+ *     a desktop browser.
+ *
+ *   - Generous rhythm. Padding, line-height, and gap tokens leave room
+ *     for short readability sessions on small screens. Patients are
+ *     not scanning dense data — they are reading a page or two and
+ *     making one decision.
+ *
+ *   - Familiar, friendly geometry. 0.25rem (4px) radii are slightly
+ *     softer than the practitioners variant; the page feels closer to
+ *     the public nhs.wales site than to a clinical workstation.
+ *
+ *   - Bilingual, NHS-Identity-strict colour. The NHS / GIG mark, NHS
+ *     Blue, and the canonical NHS palette dominate. Welsh-language
+ *     content uses the same palette and the same Frutiger fallback
+ *     stack (Frutiger supports the full Welsh diacritic set).
+ *
+ *   - WCAG 2.2 AAA on body text and primary CTA contrast — the legal
+ *     accessibility baseline for UK public-sector digital surfaces under
+ *     the Public Sector Bodies (Websites and Mobile Applications)
+ *     Accessibility Regulations 2018.
+ *
+ * When to use this theme:
+ *
+ *   - nhs.wales public information pages
+ *   - Patient portals (My Wales, My Health Online and successors)
+ *   - Patient-facing appointment booking and management
+ *   - Patient-facing repeat-prescription / pharmacy requests
+ *   - Patient-facing test-results and letters
+ *   - Symptom checkers, self-referral, online consultation
+ *   - Vaccination invitations and bookings
+ *   - Public-facing campaign sites under any NHS Wales body
+ *
+ * When NOT to use this theme:
+ *
+ *   - Clinician-only workstations, EPR / eMAR / ePMA, results review
+ *     (use `united-kingdom-national-health-service-wales-practitioners.css`)
+ *   - Any surface where staff need to scan many rows of clinical data —
+ *     this theme's rhythm makes that slow, not fast
+ *
+ * --------------------------------------------------------------------------
+ * Provenance
+ * --------------------------------------------------------------------------
+ * NHS Wales is one of four national NHS bodies in the United Kingdom (alongside
+ * NHS England, NHS Scotland, and Health and Social Care Northern Ireland). It
+ * is administered by the Welsh Government on behalf of seven local health
+ * boards and three national NHS trusts (Public Health Wales, Velindre
+ * University NHS Trust, and the Welsh Ambulance Services NHS Trust), plus
+ * Health Education and Improvement Wales (HEIW) and Digital Health and Care
+ * Wales (DHCW).
+ *
+ * The NHS Wales visual identity is the standard NHS Identity (the same
+ * lozenge mark, the same Frutiger typeface, the same official colour palette)
+ * presented bilingually as "NHS / GIG" — Gwasanaeth Iechyd Gwladol being the
+ * Welsh translation of National Health Service. Every NHS Wales organisation
+ * (HEIW, PHW, DHCW, Welsh Ambulance, Velindre, Aneurin Bevan UHB, Betsi
+ * Cadwaladr UHB, Cardiff and Vale UHB, Cwm Taf Morgannwg UHB, Hywel Dda UHB,
+ * Powys THB, Swansea Bay UHB) operates under this shared mark.
+ *
+ * NHS Wales now *does* publish a digital design system. Digital Health and
+ * Care Wales maintains the DHCW / NHSW design system and its accompanying
+ * SCSS component library, which extends the NHS service manual with
+ * Wales-specific tokens and components:
+ *   https://dhcw-digital-health-and-care-wales.github.io/nhsw-component-library/
+ *   https://github.com/dhcw-digital-health-and-care-wales/nhsw-component-library
+ *
+ * This theme is derived from, in order of precedence:
+ *   1. The DHCW / NHSW component library tokens (`src/tokens/_colours.scss`,
+ *      `_typography.scss`, `_spacing.scss`) — the authoritative Wales source
+ *   2. The NHS Identity Guidelines colour palette, which DHCW still sits
+ *      inside for the lozenge, NHS Blue, and the support families
+ *      https://www.england.nhs.uk/nhsidentity/identity-guidelines/colours/
+ *   3. The NHS Wales branding guidelines (HEIW, 2022)
+ *      https://heiw.nhs.wales/files/nhs-wales-branding-guidelines-eng/
+ *   4. The NHS digital service manual, which DHCW explicitly builds on and
+ *      diverges from only where it documents a reason
+ *      https://service-manual.nhs.uk/design-system/styles/colour
+ *   5. The NHS Wales Website Style Guide v4.0 (October 2022)
+ *      https://cmssupport.nhs.wales/files/cms-documents/cms-style-guide/
+ *
+ * What distinguishes the Wales theme from the England theme
+ * ---------------------------------------------------------
+ * Earlier revisions of this file leaned on the NHS *Aqua Green* support
+ * colour as the Wales accent. That was an inference drawn before DHCW
+ * published anything; the published system makes a different choice, and
+ * evidence beats inference. The three concrete DHCW divergences are:
+ *
+ *   - **Navy, not NHS Blue, carries action.** DHCW's primary button is
+ *     `#1B365D` (`$nhsw-colour-button-primary`), and its "text blue" is the
+ *     same navy. NHS Blue `#005EB8` is retained for links and the site
+ *     header band, so the page still reads as NHS at a glance, but the
+ *     thing you click is navy. NHS England, by contrast, uses green
+ *     `#007F3B` for its primary button.
+ *
+ *   - **Gold is the accent.** `$nhsw-colour-border-gold` `#AA8630` rails
+ *     the DHCW inset-text component and tops the mobile bottom-nav bar. It
+ *     is the only hue DHCW introduces that is not in the NHS Identity
+ *     palette, so it — not aqua — is the Wales signature here. Gold is a
+ *     *rail* colour only; see the accessibility note below.
+ *
+ *   - **Yellow focus, black underline.** DHCW mandates the GDS-lineage
+ *     focus indicator (`#FFEB3B` block with a `#0B0C0C` bar) rather than a
+ *     brand-coloured outline, and applies it to every interactive element.
+ *
+ * NHS Aqua Green is not discarded — it survives as `--lily-support-aqua`
+ * and as the `aqua-green` tag tone, both of which DHCW itself ships. And
+ * Cymru's cultural palette still shows through: the error red below is
+ * Pantone 485, the red of Y Ddraig Goch, and the gold reads as the
+ * daffodil rather than as a decorative flourish.
+ *
+ * --------------------------------------------------------------------------
+ * Colour-space notes
+ * --------------------------------------------------------------------------
+ * Values are expressed in OKLCH (lightness % / chroma / hue°) to match the
+ * sibling NHS themes (England, Scotland) in this directory. OKLCH was chosen
+ * across the Lily theme suite because it gives perceptually uniform lightness
+ * steps, which helps maintain WCAG 2.2 AAA contrast ratios when the theme is
+ * recoloured for high-contrast or dark variants.
+ *
+ * Each colour comment below gives the canonical sRGB hex, its source
+ * (a DHCW SCSS variable name, or an NHS Identity Pantone reference where
+ * the colour comes from the identity palette rather than from DHCW), and
+ * the rounded OKLCH translation that this file uses. Where a value is
+ * DHCW's, the SCSS variable name is quoted so the derivation can be
+ * checked against the published library rather than taken on trust.
+ *
+ * --------------------------------------------------------------------------
+ * Accessibility
+ * --------------------------------------------------------------------------
+ * Target: WCAG 2.2 AAA (per Lily's accessibility design principle).
+ * Measured against --color-base-100 (#FFFFFF) unless stated:
+ *   - Body text (--color-base-content, #212B32): 14.4:1 — AAA
+ *   - --color-primary (DHCW navy #1B365D): 12.1:1 — AAA at any size
+ *   - --color-secondary (NHS Blue #005EB8): 6.4:1 — AAA large, AA body
+ *   - --color-error (Pantone 485 #DA291C): 4.6:1 — AA large only
+ *   - --lily-focus-text on --lily-focus-ring (#0B0C0C on #FFEB3B): 16.0:1
+ *   - Every DHCW tag tone below: ≥ 7.2:1 — all AAA
+ *
+ * The gold caveat, stated plainly
+ * -------------------------------
+ * DHCW gold #AA8630 is **3.4:1 on white**. That is below AA for body text
+ * and below the 3:1 floor for adjacent-colour meaning only by a hair. It is
+ * therefore declared as --color-accent but used *exclusively* as a rail,
+ * border, and underline colour, never as a text colour and never as a fill
+ * behind text. Where a Lily component fills with the accent and puts a
+ * label on it (`.ai-label`), this theme substitutes --lily-accent-deep
+ * (#554318, 9.5:1 with white) instead. Do not "fix" that by putting text
+ * back on the bright gold.
+ *
+ * Components whose colour cannot reach AAA behind body copy (warning
+ * yellow, gold) carry inverted or substituted content colours so the paired
+ * text stays legible.
+ *
+ * --------------------------------------------------------------------------
+ * Typography (informational — Lily does not bake font choices into the theme)
+ * --------------------------------------------------------------------------
+ * DHCW departs from the NHS Identity here. The NHSW component library sets
+ * `$nhsw-font-family-base: Roboto, Arial, sans-serif` — Roboto, not
+ * Frutiger. The likely reason is licensing: Frutiger is a paid typeface and
+ * Roboto is not, which matters for a system meant to be adopted across
+ * seven health boards and three trusts without a per-seat font bill.
+ *
+ * Both typefaces carry the full Welsh diacritic set (â, ê, î, ô, û, ŵ, ŷ
+ * and their uppercase forms), so either is safe for bilingual pages — but
+ * check any *substituted* fallback: ŵ and ŷ are the two characters most
+ * often missing from an otherwise complete font, and they are common in
+ * Welsh (e.g. "gŵr", "gwŷr", "Cymraeg gyfŵn").
+ *
+ * DHCW type scale, for consumers matching it exactly (desktop / mobile):
+ *   h1 3rem/2rem · h2 2.25rem/1.6875rem · h3 1.625rem/1.375rem
+ *   h4 1.375rem/1.1875rem · h5 1.1875rem/1rem
+ *   body 1.1875rem/1rem · body-small 1rem
+ *
+ * Consumers wiring this theme should declare:
+ *   font-family: Roboto, "Frutiger W01", "Frutiger", Arial, sans-serif;
+ *
+ * The Frutiger entries are kept in the middle of the stack deliberately: an
+ * NHS Wales organisation that already licenses Frutiger for print will fall
+ * through to it if Roboto is unavailable, rather than dropping to Arial.
+ *
+ * --------------------------------------------------------------------------
+ * Geometry
+ * --------------------------------------------------------------------------
+ * Radii and borders follow DHCW's restrained, public-sector geometry:
+ *   - 0.25rem (4px) field/box radius — DHCW's `nhsw-button-base` sets
+ *     exactly this, so the value is now sourced rather than inferred
+ *   - 0.25rem selector radius to match, a shade softer than NHS England's
+ *     square selectors
+ *   - 1px borders, no blur shadows (depth: 0), no grain (noise: 0)
+ *   - Depth is expressed as a *hard 2px ledge* under buttons and a 4px one
+ *     under cards, per DHCW, rather than as a blur. A hard offset is the
+ *     one form of elevation that survives both forced-colours mode and a
+ *     monochrome print, which is why every UK public-sector system that
+ *     has thought about it has landed there.
+ * ========================================================================== */
+
+/* Theme tokens — the colour, radius, border, and depth variables consumed
+ * by every Lily component rule below. The theme applies by default (`:root`)
+ * and also when explicitly opted into via
+ * `<html data-theme="united-kingdom-national-health-service-wales-for-patients">`,
+ * so multiple themes can coexist in one document and be switched at runtime
+ * by updating the `data-theme` attribute. */
+
+:where(:root, :root[data-theme="united-kingdom-national-health-service-wales-for-patients"]) {
+    color-scheme: light;
+
+    /* -----------------------------------------------------------
+       --------- * Base surfaces * * Taken from the DHCW greys
+       rather than the NHS Identity greys. DHCW * ships `$nhsw-
+       colour-background-grey: #F0F4F5` and * `$nhsw-colour-
+       border-grey: #D8DDE0`, both a shade cooler and lighter *
+       than NHS Pale Grey #E8EDEE. The difference is small in
+       isolation but * visible when a DHCW-styled panel sits next
+       to an England-styled one, * and matching the published
+       value is what makes a Wales service look * like a Wales
+       service. * ------------------------------------------------
+       ------------------ */ /* #FFFFFF — pure white, NHS Identity
+       primary surface (`$nhsw-colour-background-white`) */
+    --color-base-100: oklch(100% 0 0);
+    /* #F0F4F5 — DHCW background grey (`$nhsw-colour-background-
+       grey`) — card backs, panel fills, alternating table rows */
+    --color-base-200: oklch(96% 0.004 214);
+    /* #D8DDE0 — DHCW border grey (`$nhsw-colour-border-grey`) —
+       borders, dividers, table rules, hover surfaces */
+    --color-base-300: oklch(89% 0.007 234);
+    /* #212B32 — DHCW text primary (`$nhsw-colour-text-primary`).
+       Note this is the NHS service-manual near-black, not NHS
+       Black #231F20: it has a slight blue cast that sits better
+       against the cool greys above. 14.4:1 on white — AAA. */
+    --color-base-content: oklch(28% 0.019 239);
+    /* -----------------------------------------------------------
+       --------- * Primary — DHCW Navy (#1B365D) * * `$nhsw-
+       colour-button-primary` and `$nhsw-colour-text-blue` in the
+       * NHSW component library. This is the colour of the thing
+       you click on * a DHCW page, and it is *not* NHS Blue. * *
+       The choice is defensible on contrast grounds alone. NHS
+       Blue on white * is 6.4:1 — fine for large text, short of
+       AAA for a button label at * body size. Navy is 12.1:1,
+       which clears AAA at any size. NHS England * solved the same
+       problem by going green; DHCW went dark. * * Used for:
+       primary buttons, action surfaces, headings that need *
+       emphasis, the practitioner header band. * -----------------
+       ------------------------------------------------- */
+    --color-primary: oklch(33% 0.077 258);
+    --color-primary-content: oklch(100% 0 0);
+    /* -----------------------------------------------------------
+       --------- * Secondary — NHS Blue (#005EB8 / Pantone 300) *
+       * Demoted from primary, but not diminished. Research cited
+       in the NHS * Identity Guidelines reports that 87% of UK
+       adults spontaneously * associate "blue and white" with the
+       NHS, and the GIG Cymru lozenge is * the same NHS Blue as
+       the NHS England lozenge. DHCW keeps it for the * site
+       header band (`$nhsw-colour-site-header-background`) and for
+       * links (`$nhsw-colour-link`) — the two places a citizen
+       reads * "this is the NHS" without being asked to act. * *
+       Used for: links, the site header band, brand chrome,
+       hovered * primary surfaces. * -----------------------------
+       ------------------------------------- */
+    --color-secondary: oklch(49% 0.161 255);
+    --color-secondary-content: oklch(100% 0 0);
+    /* -----------------------------------------------------------
+       --------- * Accent — DHCW Gold (#AA8630) * * `$nhsw-colour-
+       border-gold`. The only hue DHCW introduces that is not * in
+       the NHS Identity palette, which makes it the genuine Wales
+       * signature. In the published library it rails the inset-
+       text component * and tops the mobile bottom-nav bar — both
+       times as a *border*, never * as a fill or a text colour. *
+       * This theme honours that constraint rather than
+       generalising the * colour. Gold is 3.4:1 on white: legal as
+       a non-text graphical * boundary, illegal as body copy.
+       --color-accent-content is set to NHS * Black so that any
+       component which does fill with the accent at least * pairs
+       it with the darkest available text (4.2:1 — AA large only),
+       and * the components that would otherwise put small text on
+       gold are * redirected to --lily-accent-deep below. * ------
+       -----------------------------------------------------------
+       - */
+    --color-accent: oklch(64% 0.111 85);
+    --color-accent-content: oklch(23% 0.005 30);
+    /* -----------------------------------------------------------
+       --------- * Neutral — DHCW text secondary (#4C6272) * *
+       `$nhsw-colour-text-secondary` and `$nhsw-colour-border-
+       secondary` — * DHCW uses one slate for both muted text and
+       strong borders, which is * why the secondary button in the
+       published library is a white fill * with a #4C6272 border
+       and a #4C6272 shadow. * * Used for: muted UI chrome,
+       secondary nav, breadcrumb separators, * secondary-button
+       borders, input borders. 6.4:1 on white — AA body, * AAA
+       large. Do not use it for body copy at small sizes. * ------
+       -----------------------------------------------------------
+       - */
+    --color-neutral: oklch(48% 0.037 240);
+    --color-neutral-content: oklch(100% 0 0);
+    /* -----------------------------------------------------------
+       --------- * Info — NHS Bright Blue (#0072CE / Pantone 285)
+       * * Retained from the NHS Identity rather than taken from
+       DHCW, because * DHCW has no distinct info colour: its
+       notification banner reuses the * link blue #005EB8, which
+       this theme has already spent on * --color-secondary. Giving
+       info its own brighter blue keeps an info * banner
+       distinguishable from a link-coloured header band on the
+       same * page — a distinction DHCW's own preview pages
+       struggle to make. * ---------------------------------------
+       --------------------------- */
+    --color-info: oklch(54% 0.17 248);
+    --color-info-content: oklch(100% 0 0);
+    /* -----------------------------------------------------------
+       --------- * Success — DHCW notification success (#00703C) *
+       * `$nhsw-colour-notification-success`. Darker than NHS
+       Green #009639 * (which this theme previously used), and
+       that is the point: NHS Green * with white text is roughly
+       3.3:1, which fails AA for the banner * labels it was being
+       asked to carry. #00703C is 6.2:1 with white. * * Used for:
+       confirmation banners, form-success ticks, "appointment *
+       confirmed" states. * --------------------------------------
+       ---------------------------- */
+    --color-success: oklch(48% 0.121 154);
+    --color-success-content: oklch(100% 0 0);
+    /* -----------------------------------------------------------
+       --------- * Warning — DHCW warning yellow (#FACC15) * *
+       `$nhsw-colour-warning-callout-heading`. A cooler, more
+       lemon yellow * than NHS Warm Yellow #FFB81C, and noticeably
+       brighter. DHCW pairs it * with a very pale #FEF9C3 panel
+       fill rather than tinting the panel * with the heading
+       colour, which is why --lily-warning-surface is * declared
+       separately below instead of being mixed from this token. *
+       * Content colour is DHCW text-primary, never white: yellow
+       this bright * cannot carry white text at any size. * ------
+       -----------------------------------------------------------
+       - */
+    --color-warning: oklch(86% 0.173 92);
+    --color-warning-content: oklch(28% 0.019 239);
+    /* -----------------------------------------------------------
+       --------- * Error — DHCW delete red (#D5281B) * * `$nhsw-
+       colour-button-delete`, also the DHCW invalid-input colour.
+       It * sits a half-step darker than NHS Emergency Services
+       Red #DA291C * (Pantone 485), which this theme previously
+       used, and buys a real * accessibility improvement: 5.1:1
+       with white rather than 4.6:1. * * The Welsh resonance
+       survives the swap. Pantone 485 is the red of Y * Ddraig
+       Goch on the national flag, and #D5281B is within a couple
+       of * ΔE of it — close enough that no one reads the
+       destructive button as * a different red, far enough that
+       the label is legible. * * Used for: error summaries,
+       destructive-action buttons, validation * messages, invalid
+       input borders. * ------------------------------------------
+       ------------------------ */
+    --color-error: oklch(56% 0.209 30);
+    --color-error-content: oklch(100% 0 0);
+    /* -----------------------------------------------------------
+       --------- * DHCW supporting colours * * Values the
+       published NHSW library needs that have no slot in the *
+       upstream `--color-*` contract. They are declared here
+       rather than * inline in the component rules so a consumer
+       can retheme a DHCW * service by overriding tokens alone. * 
+       -----------------------------------------------------------
+       ------- */ /* #FFEB3B — `$nhsw-colour-focus`. The GDS-
+       lineage focus block. */
+    --lily-focus-ring: oklch(93% 0.18 102);
+    /* #0B0C0C — `$nhsw-colour-focus-text`. The bar under a
+       focused link, and the text colour inside a focus block.
+       16.0:1 on the yellow. */
+    --lily-focus-text: oklch(15% 0.002 197);
+    /* #554318 — `$nhsw-colour-shadow-exceptional-button`. The
+       dark gold. Stands in for --color-accent anywhere small text
+       must sit on the accent, because bright gold cannot carry
+       text. 9.5:1 with white. */
+    --lily-accent-deep: oklch(39% 0.064 86);
+    /* #F5BB66 — `$nhsw-colour-button-exceptional-light`. DHCW's
+       "exceptional" button: a warm gold fill with dark text, used
+       for the one action on a page that is neither primary nor
+       destructive but still must be found. 8.4:1 with text-
+       primary. */
+    --lily-accent-soft: oklch(83% 0.122 75);
+    /* #FEF9C3 — `$nhsw-colour-warning-callout-background`. The
+       pale panel behind a warning callout. Kept separate from
+       --color-warning because DHCW does not derive one from the
+       other. */
+    --lily-warning-surface: oklch(97% 0.069 103);
+    /* #007F3B — the DHCW action-link green. Not NHS Green: it is
+       a shade darker so the 36px chevron reads at 5.1:1 on white. */
+    --lily-action-green: oklch(52% 0.141 151);
+    /* #7C2855 — `$nhsw-colour-link-visited`. NHS Purple. 9.2:1. */
+    --lily-link-visited: oklch(42% 0.126 351);
+    /* #003087 — `$nhsw-colour-link-hover`, NHS Dark Blue /
+       Pantone 287. No longer the secondary token, but still the
+       hovered link. 11.9:1. */
+    --lily-link-hover: oklch(35% 0.153 261);
+    /* #00A499 — NHS Aqua Green / Pantone 3272. Demoted from the
+       accent slot but retained: DHCW ships an `aqua-green` tag
+       tone, and Public Health Wales and the Welsh Ambulance
+       Service both use aqua in print. 3.1:1 on white — decorative
+       fills and chart series only. */
+    --lily-support-aqua: oklch(65% 0.113 186);
+    /* 960px — `$nhsw-page-width`. The DHCW measure. Narrower than
+       the 1200px this theme's chart-escape width assumes, because
+       DHCW targets a single reading column rather than a
+       dashboard. */
+    --lily-page-width: 60rem;
+    /* -----------------------------------------------------------
+       --------- * Geometry * * NHS digital surfaces are
+       restrained: small radii, single-pixel * borders, no drop
+       shadows, no surface noise. This matches the NHS * digital
+       service manual examples and keeps the theme professional /
+       * institutional rather than consumer-product. * * Selector
+       radius is 0.25rem here (the England theme uses 0rem). The *
+       slightly softer corner on checkbox / radio surfaces nudges
+       the NHS * Wales theme toward a marginally warmer feel —
+       consistent with the * aqua-green accent shift above —
+       without departing from NHS norms. * -----------------------
+       ------------------------------------------- */
+    --radius-selector: 0.25rem;
+    --radius-field: 0.25rem;
+    --radius-box: 0.25rem;
+    --size-selector: 0.25rem;
+    --size-field: 0.25rem;
+    --border: 1px;
+    --depth: 0;
+    --noise: 0;
+}
+
+/* ----------------------------------------------------------------------------
+ * Lily component styling — applied automatically once this theme stylesheet
+ * is loaded. Every Lily class hook (492 components) consumes the theme tokens
+ * declared above, so no other stylesheet is required for the theme to render.
+ *
+ * Rules live in @layer lily with :where() selectors so the specificity stays
+ * at 0 — application CSS always wins. To replace a Lily component's default
+ * look, declare a higher-specificity rule (or a later @layer) in your own
+ * stylesheet.
+ * -------------------------------------------------------------------------- */
+
+@layer lily {
+    /* ==========================================================================
+     * Tokens & primitives
+     * --------------------------------------------------------------------------
+     * Lily exposes a small, stable set of derived tokens (the `--lily-*`
+     * family) layered on top of the upstream theme primitives (the
+     * `--color-*`, `--radius-*`, `--border`, `--depth`, `--noise` family).
+     *
+     * Component rules consume only the `--lily-*` tokens. That indirection
+     * means a consumer can swap upstream themes (or invent a new one) without
+     * touching component CSS — the component rules below remain stable
+     * because their inputs do.
+     * ====================================================================== */
+
+    :where(:root) {
+        /* --- Surfaces ------------------------------------------------------ */
+        /* Default page surface — the canvas behind body copy. */
+        --lily-surface: var(--color-base-100);
+        /* Secondary surface — section panels, sidebars, table headers,
+           muted callouts. One step away from the page background. */
+        --lily-surface-alt: var(--color-base-200);
+        /* Sunken surface — used behind progress tracks, skeletons, and
+           inset wells. Suggests depth without requiring a shadow. */
+        --lily-surface-sunken: var(--color-base-300);
+
+        /* --- Text ---------------------------------------------------------- */
+        /* Primary body-copy colour. Maps to the theme's high-contrast
+           reading colour. */
+        --lily-text: var(--color-base-content);
+        /* Muted / secondary text — mixed 70% with transparent to keep the
+           hue but lower contrast for captions, helptext, placeholders. */
+        --lily-text-muted: color-mix(
+            in oklch,
+            var(--color-base-content) 70%,
+            transparent
+        );
+
+        /* --- Borders ------------------------------------------------------- */
+        /* Default border — 20% blend with body content colour, low-contrast,
+           used for subtle dividers between content blocks. */
+        --lily-border: color-mix(
+            in oklch,
+            var(--color-base-content) 20%,
+            transparent
+        );
+        /* Higher-contrast border — 40% blend, used on inputs, buttons, and
+           anywhere a clear edge is required (WCAG non-text contrast). */
+        --lily-border-strong: color-mix(
+            in oklch,
+            var(--color-base-content) 40%,
+            transparent
+        );
+
+        /* --- Focus ring ---------------------------------------------------- */
+        /* Deliberately NOT redeclared here. --lily-focus-ring and
+           --lily-focus-text are set in the unlayered token block at the top
+           of this file to DHCW's #FFEB3B / #0B0C0C.
+
+           The sibling Lily themes bind the focus ring to --color-primary so
+           focus reads as "interactive intent". DHCW rejects that, and is
+           right to: a brand-coloured ring is invisible the moment focus
+           lands on a control that is already brand-coloured — which, on a
+           page whose primary buttons are navy, is every primary button. A
+           fixed high-chroma yellow is the one colour guaranteed to contrast
+           with the rest of the palette, which is why GDS, the NHS service
+           manual, and DHCW all landed on it independently.
+
+           Override --lily-focus-ring to retheme; do not reintroduce a
+           var(--color-primary) binding here. */
+
+        /* --- Radii --------------------------------------------------------- */
+        /* Three tiers of corner rounding. `sm` for chips/badges,
+           `md` for inputs/buttons/cards, `lg` for dialogs/heroes. */
+        --lily-radius-sm: var(--radius-selector);
+        --lily-radius-md: var(--radius-field);
+        --lily-radius-lg: var(--radius-box);
+
+        /* --- Spacing scale ------------------------------------------------- */
+        /* Five-step spacing scale used by every gap, padding, and margin.
+           Linear progression keeps rhythm consistent at any zoom level. */
+        --lily-space-xs: 0.25rem;
+        --lily-space-sm: 0.5rem;
+        --lily-space-md: 1rem;
+        --lily-space-lg: 1.5rem;
+        --lily-space-xl: 2rem;
+
+        /* --- Typography ---------------------------------------------------- */
+        /* Body font stack — system fonts first so consumers get a
+           native-feeling baseline without shipping a web font. */
+        --lily-font-body:
+            system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
+            Arial, sans-serif;
+        /* Monospaced font stack — used by code, kbd, identifiers, and
+           anywhere alignment matters more than reading speed. */
+        --lily-font-mono:
+            ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
+            "Liberation Mono", monospace;
+
+        /* --- Shadows ------------------------------------------------------- */
+        /* Three depth tiers. The shadow colour is derived from the body
+           content token so it adapts to light/dark themes automatically. */
+        --lily-shadow-sm: 0 1px 2px
+            color-mix(in oklch, var(--color-base-content) 8%, transparent);
+        --lily-shadow-md: 0 4px 12px
+            color-mix(in oklch, var(--color-base-content) 12%, transparent);
+        --lily-shadow-lg: 0 12px 32px
+            color-mix(in oklch, var(--color-base-content) 16%, transparent);
+    }
+
+    /* Focus ring — every interactive Lily class hook gets the same visible
+       focus indicator. Centralising the selector means a consumer can
+       restyle every focus state at once by overriding `--lily-focus-ring`
+       (or this rule) rather than chasing 100+ component selectors. */
+    :where(
+        [class$="-input"],
+        [class$="-button"],
+        [class$="-link"],
+        [class$="-list-item"],
+        [class$="-option"],
+        [class$="-picker-button"],
+        .button,
+        .input,
+        .select,
+        .option,
+        .menu-item,
+        .tab-bar-button,
+        .switch-button,
+        .toggle-button,
+        .checkbox-input,
+        .radio-input,
+        .file-upload,
+        .signature-pad,
+        .editable
+    ):focus-visible {
+        /* DHCW's `nhsw-focus-ring` mixin: 3px, no offset. The zero offset
+           is not a detail — an offset ring floats away from the control and
+           reads as a halo, where a flush ring reads as the control itself
+           being lit. */
+        outline: 3px solid var(--lily-focus-ring);
+        outline-offset: 0;
+    }
+
+    /* Focused *buttons* additionally invert to the yellow block with a dark
+       underline bar, per `nhsw-button-base`. A ring alone is not enough on
+       a navy fill: the yellow-on-navy edge is high contrast, but the button
+       still looks unfocused from a metre away. Flipping the fill makes the
+       focused control the brightest thing on the page.
+
+       Scoped to :not(:active) so the button does not flash yellow during
+       the press — DHCW does the same, and it matters because a pointer user
+       who click-and-holds should see the pressed state, not the focus one. */
+    :where(.button, [class$="-button"]:not(.hamburger-menu-button)):focus-visible:not(
+            :active
+        ) {
+        background-color: var(--lily-focus-ring);
+        color: var(--lily-focus-text);
+        border-color: transparent;
+        box-shadow: 0 2px 0 var(--lily-focus-text);
+    }
+
+    /* Focused links get the same treatment in text form: yellow block,
+       dark text, and a 4px bar sitting on the baseline where the underline
+       was. The bar is drawn with box-shadow rather than a border so it
+       does not shift the line box and reflow the paragraph. */
+    :where(a, [class$="-link"]):focus-visible {
+        outline: none;
+        background-color: var(--lily-focus-ring);
+        color: var(--lily-focus-text);
+        text-decoration: none;
+        box-shadow:
+            0 -2px 0 var(--lily-focus-ring),
+            0 4px 0 var(--lily-focus-text);
+    }
+
+    /* Forced-colours mode discards the yellow entirely — the OS palette
+       wins — so restore a system-coloured ring that mode can actually
+       render. Without this, a high-contrast Windows user gets a focus
+       indicator that is whatever `Canvas` happens to be. */
+    @media (forced-colors: active) {
+        :where(
+            .button,
+            [class$="-button"],
+            a,
+            [class$="-link"]
+        ):focus-visible {
+            outline: 3px solid Highlight;
+            outline-offset: 0;
+            box-shadow: none;
+        }
+    }
+
+    /* ==========================================================================
+     * Inputs
+     * --------------------------------------------------------------------------
+     * Every Lily class ending in `-input` (textual, date, picker, range, file,
+     * national-identifier, etc.) shares the same baseline styling. The
+     * `[class$="-input"]` attribute selector catches single-class usage
+     * (`class="email-input"`); consumers needing multi-class composition can
+     * override with higher-specificity rules in their own stylesheet.
+     *
+     * The `:not([class$="-with-mask-input"])` exclusion exists because the
+     * masked-input variant carries its own typography (monospaced + letter
+     * spacing) and we don't want the generic baseline overriding it.
+     * Hidden inputs (`type="hidden"`) are also excluded — they must not be
+     * laid out as visible inputs.
+     * ====================================================================== */
+
+    /* Baseline visual treatment for every textual input. */
+    :where(
+        [class$="-input"]:not([class$="-with-mask-input"]):not([type="hidden"]),
+        .input
+    ) {
+        appearance: none; /* drop UA native chrome (Safari especially) */
+        display: inline-block;
+        width: 100%; /* fill parent by default; consumer caps via container */
+        max-width: 100%;
+        min-height: 2.5rem; /* WCAG 2.5.5 target-size guidance (~44px) */
+        padding: 0.5rem 0.75rem;
+        font: inherit;
+        font-family: var(--lily-font-body);
+        color: var(--lily-text);
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-md);
+        box-sizing: border-box;
+        /* Smooth focus/hover edge transitions — short enough to feel
+           responsive, long enough to read as intentional. */
+        transition:
+            border-color 120ms ease,
+            box-shadow 120ms ease;
+    }
+
+    /* Hover affordance — switches the border to the primary brand colour so
+       users get a visual cue that the field is interactive. The `:not(:disabled)`
+       guard prevents the cue from appearing on locked-out controls. */
+    :where([class$="-input"], .input):hover:not(:disabled) {
+        border-color: var(--color-primary);
+    }
+
+    /* Disabled / aria-disabled — desaturate and shift to the muted surface so
+       the control reads as inactive without losing its layout footprint. */
+    :where([class$="-input"], .input):disabled,
+    :where([class$="-input"], .input)[aria-disabled="true"] {
+        color: var(--lily-text-muted);
+        background-color: var(--lily-surface-alt);
+        cursor: not-allowed;
+    }
+
+    /* Invalid input — red border. The `aria-invalid="true"` attribute is the
+       ARIA contract; pairing it with a colour change keeps WCAG 1.4.1
+       (no colour-only meaning) honest because the ARIA state is also there. */
+    :where([class$="-input"], .input)[aria-invalid="true"] {
+        border-color: var(--color-error);
+    }
+
+    /* Placeholder — match the muted text token. `opacity: 1` overrides Firefox's
+       legacy default placeholder opacity, which would otherwise compound on
+       our already-muted colour. */
+    :where([class$="-input"], .input)::placeholder {
+        color: var(--lily-text-muted);
+        opacity: 1;
+    }
+
+    /* --- Input type-specific tweaks ----------------------------------------- */
+
+    /* Hidden inputs must never render. */
+    :where(.hidden-input) {
+        display: none;
+    }
+
+    /* Submit / reset / image / generic button inputs render as buttons. */
+    :where(.button-input, .submit-input, .reset-input, .image-input) {
+        width: auto;
+        min-width: 2.5rem;
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+        border-color: transparent;
+        cursor: pointer;
+        font-weight: 600;
+    }
+
+    /* Reset input is the secondary-action variant — muted surface, not the
+       primary brand colour, because "reset" is a destructive op. */
+    :where(.reset-input) {
+        background-color: var(--lily-surface-alt);
+        color: var(--lily-text);
+        border-color: var(--lily-border-strong);
+    }
+
+    /* Color input — narrow swatch with internal padding so the colour chip
+       reads cleanly inside the input frame. */
+    :where(.color-input) {
+        min-height: 2.5rem;
+        padding: 0.25rem;
+        width: 3rem;
+        cursor: pointer;
+    }
+
+    /* Range / angle slider — strip the input chrome so the consumer can
+       restyle the track. `accent-color` provides a minimal styled fallback. */
+    :where(.range-input, .angle-slider-range-input) {
+        appearance: none;
+        background: transparent;
+        border: 0;
+        padding: 0;
+        height: 1.5rem;
+        accent-color: var(--color-primary);
+    }
+
+    /* File inputs — slightly tighter padding because the UA-rendered
+       "Choose file" button consumes most of the visual space. */
+    :where(.file-input, .image-file-input) {
+        padding: 0.375rem 0.5rem;
+        cursor: pointer;
+    }
+
+    /* Checkbox / radio — small square/round controls with the brand accent. */
+    :where(.checkbox-input, .radio-input) {
+        width: 1.125rem;
+        height: 1.125rem;
+        min-height: 0; /* override the 2.5rem input baseline */
+        padding: 0;
+        accent-color: var(--color-primary);
+        cursor: pointer;
+    }
+    :where(.radio-input) {
+        border-radius: 50%;
+    }
+    :where(.checkbox-input) {
+        border-radius: var(--lily-radius-sm);
+    }
+
+    /* Textarea variants — taller minimum, line-height tuned for reading,
+       vertical-only resize so layout columns aren't disturbed. */
+    :where(.text-area-input, .text-area-input-with-character-counter) {
+        min-height: 6rem;
+        line-height: 1.5;
+        resize: vertical;
+    }
+    /* Character-counter variant stacks the textarea and the counter span. */
+    :where(.text-area-input-with-character-counter) {
+        display: flex;
+        flex-direction: column;
+    }
+
+    /* --- Composite inputs with built-in DOM structure ----------------------- */
+
+    /* PIN input — N small slots side-by-side. The wrapper is invisible;
+       the children carry the styling. */
+    :where(.pin-input-div) {
+        display: inline-flex;
+        gap: 0.5rem;
+        padding: 0;
+        background: transparent;
+        border: 0;
+        width: auto;
+        min-height: 0;
+    }
+    :where(.pin-input-div > input) {
+        width: 2.5rem;
+        height: 3rem;
+        padding: 0;
+        text-align: center;
+        font-size: 1.125rem;
+        font-weight: 600;
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-md);
+        color: var(--lily-text);
+    }
+
+    /* Password-toggle composite — text input + reveal button, sharing
+       a single visual frame via flush radii. */
+    :where(.password-input-or-text-input-div) {
+        display: inline-flex;
+        align-items: stretch;
+        width: 100%;
+        background: transparent;
+        border: 0;
+        padding: 0;
+        min-height: 0;
+    }
+    :where(.password-input-or-text-input-div > input) {
+        flex: 1;
+        min-height: 2.5rem;
+        padding: 0.5rem 0.75rem;
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border-strong);
+        border-right: 0; /* drop the seam where input meets button */
+        border-radius: var(--lily-radius-md) 0 0 var(--lily-radius-md);
+    }
+    :where(.password-input-or-text-input-div > button) {
+        padding: 0 0.75rem;
+        background-color: var(--lily-surface-alt);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: 0 var(--lily-radius-md) var(--lily-radius-md) 0;
+        cursor: pointer;
+    }
+
+    /* --- Input compositions ------------------------------------------------- */
+
+    /* Input group — flush-joined controls (input + button, etc.). The negative
+       margin collapses overlapping borders into a single shared edge. */
+    :where(.input-group) {
+        display: inline-flex;
+        align-items: stretch;
+        width: 100%;
+    }
+    :where(.input-group > *) {
+        border-radius: 0;
+        margin-left: calc(-1 * var(--border));
+    }
+    :where(.input-group > *:first-child) {
+        border-top-left-radius: var(--lily-radius-md);
+        border-bottom-left-radius: var(--lily-radius-md);
+        margin-left: 0;
+    }
+    :where(.input-group > *:last-child) {
+        border-top-right-radius: var(--lily-radius-md);
+        border-bottom-right-radius: var(--lily-radius-md);
+    }
+
+    /* Masked input — monospaced font + slight letter-spacing so the mask
+       template (phone, SSN, etc.) aligns over the typed characters. */
+    :where(.input-with-mask) {
+        font-family: var(--lily-font-mono);
+        letter-spacing: 0.05em;
+    }
+
+    /* Search input — reserve space on the inline-start for the magnifier
+       glyph. The `linear-gradient(transparent, transparent)` is a no-op
+       background-image; it ensures the property exists so consumers can
+       layer an SVG icon over it by overriding `background-image`. */
+    :where(.text-input-with-search, .search-input) {
+        background-image: linear-gradient(transparent, transparent);
+        padding-inline-start: 2.25rem;
+    }
+
+    /* ==========================================================================
+     * Views
+     * --------------------------------------------------------------------------
+     * Read-only display chips for identifiers, dates, ratings, and other
+     * pre-formatted data. Every Lily class ending in `-view` is a span/div
+     * that renders a value the user shouldn't edit.
+     *
+     * The exclusions (`theme-view`, `split-view`)
+     * are larger containers that don't fit the chip pattern — they're
+     * styled separately further down.
+     * ====================================================================== */
+
+    :where(
+        [class$="-view"]:not(.theme-view):not(
+                .split-view
+            )
+    ) {
+        display: inline-block;
+        padding: 0.125rem 0.5rem;
+        font-family: var(--lily-font-mono); /* fixed-width for alignment */
+        color: var(--lily-text);
+        background-color: var(--lily-surface-alt);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+        line-height: 1.4;
+    }
+
+    /* Dates / ranges are human-readable, not codes — switch back to body font. */
+    :where(.date-time-view, .date-range, .review-date) {
+        font-family: var(--lily-font-body);
+    }
+
+    /* Theme-view — small label + colour swatch composition. */
+    :where(.theme-view) {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.25rem 0.5rem;
+        color: var(--lily-text);
+    }
+
+    /* ==========================================================================
+     * Buttons
+     * --------------------------------------------------------------------------
+     * Every class ending in `-button` and the bare `.button` share one
+     * baseline. Hamburger-menu is excluded because it's an icon-only square
+     * with its own minimal frame styling (further down).
+     * ====================================================================== */
+
+    /* Baseline button — primary-coloured pill. Variants override colour or
+       shape below. */
+    :where(.button, [class$="-button"]:not(.hamburger-menu-button)) {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem; /* leave room for an icon + label */
+        /* DHCW `nhsw-button-base`: 44px min-height, 12px/16px padding,
+           700 weight. The 44px is WCAG 2.5.5 AAA target size, and on a
+           patient-facing surface it is the binding constraint — this is a
+           control someone taps one-handed on a phone at a bus stop. */
+        min-height: 2.75rem;
+        padding: 0.75rem 1rem;
+        font: inherit;
+        font-family: var(--lily-font-body);
+        font-weight: 700;
+        line-height: 1.25;
+        color: var(--color-primary-content);
+        background-color: var(--color-primary);
+        border: var(--border) solid transparent;
+        border-radius: var(--lily-radius-md);
+        /* The DHCW 2px "ledge". Not decoration: it is what makes a
+           rectangle read as pressable without a gradient or a drop shadow,
+           and it survives forced-colours mode where a shadow would not. */
+        box-shadow: 0 2px 0
+            color-mix(in oklch, var(--color-primary) 70%, black);
+        cursor: pointer;
+        user-select: none; /* prevent text drag-select on double-click */
+        text-decoration: none;
+        transition:
+            background-color 120ms ease,
+            color 120ms ease,
+            border-color 120ms ease;
+    }
+
+    /* Hover — DARKEN the primary rather than swapping to the secondary
+       token. The sibling Lily themes swap primary→secondary on hover, which
+       under the DHCW palette would take a navy button to NHS Blue: hovering
+       would make the control *lighter* and lower-contrast, exactly backwards.
+       DHCW's own hover is #1B2A49 against a #1B365D rest state, i.e. a
+       darkening, and that is what this mix reproduces. */
+    :where(.button, [class$="-button"]):hover:not(:disabled):not(
+            [aria-disabled="true"]
+        ) {
+        background-color: color-mix(
+            in oklch,
+            var(--color-primary) 85%,
+            black
+        );
+        color: var(--color-primary-content);
+    }
+
+    /* Press — sink into the ledge. translateY(1px) against a 2px shadow
+       leaves 1px showing, so the button visibly compresses rather than
+       jumping. DHCW does exactly this. */
+    :where(.button, [class$="-button"]):active:not(:disabled):not(
+            [aria-disabled="true"]
+        ) {
+        transform: translateY(1px);
+    }
+
+    /* Honour a reduced-motion preference by dropping the press transform
+       and the colour transitions. The state changes remain; only the
+       movement between them goes. */
+    @media (prefers-reduced-motion: reduce) {
+        :where(.button, [class$="-button"]) {
+            transition: none;
+        }
+        :where(.button, [class$="-button"]):active {
+            transform: none;
+        }
+    }
+
+    /* Disabled — half opacity, not-allowed cursor. */
+    :where(.button, [class$="-button"]):disabled,
+    :where(.button, [class$="-button"])[aria-disabled="true"] {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    /* Pressed (toggle/switch active state) — re-use the secondary colour. */
+    :where(.button, [class$="-button"])[aria-pressed="true"] {
+        background-color: var(--color-secondary);
+        color: var(--color-secondary-content);
+    }
+
+    /* --- DHCW button variants ------------------------------------------------
+     * The published library ships five button styles as BEM modifiers
+     * (`nhsw-button--primary/secondary/outline/warning/exceptional`). Lily
+     * is headless and does not mint modifier classes, so they are exposed
+     * here as `data-variant` on any `-button` hook — the same mechanism the
+     * care-card and alert families already use in this file.
+     *
+     *   <button class="button" data-variant="warning">Delete record</button>
+     *
+     * `primary` is the default and needs no attribute.
+     * ---------------------------------------------------------------------- */
+
+    /* Secondary — white fill, slate border, slate ledge. DHCW's is a true
+       outline button rather than a grey fill, which keeps two buttons side
+       by side clearly ranked without a size difference. */
+    :where([class$="-button"], .button)[data-variant="secondary"] {
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        border-color: var(--color-neutral);
+        box-shadow: 0 2px 0 var(--color-neutral);
+    }
+    :where([class$="-button"], .button)[data-variant="secondary"]:hover:not(
+            :disabled
+        ) {
+        background-color: var(--lily-surface-alt);
+        color: var(--lily-text);
+    }
+
+    /* Warning / destructive — DHCW calls this `--warning`, but it is the
+       delete button: red fill, white label. Named `warning` here to match
+       the published library rather than inventing a third vocabulary, at
+       the cost of it not meaning "caution". If you need caution, that is
+       the warning-callout below, not a button. */
+    :where([class$="-button"], .button)[data-variant="warning"] {
+        background-color: var(--color-error);
+        color: var(--color-error-content);
+        border-color: var(--color-error);
+        box-shadow: 0 2px 0 color-mix(in oklch, var(--color-error) 60%, black);
+    }
+    :where([class$="-button"], .button)[data-variant="warning"]:hover:not(
+            :disabled
+        ) {
+        background-color: color-mix(in oklch, var(--color-error) 75%, black);
+        color: var(--color-error-content);
+    }
+
+    /* Exceptional — the warm gold fill. DHCW's name for "the one action on
+       this page that is neither the primary path nor destructive, but must
+       still be found": re-book, request an interpreter, escalate. Dark text
+       on #F5BB66 is 8.4:1, so unlike the bright gold rail this one can
+       safely carry a label. */
+    :where([class$="-button"], .button)[data-variant="exceptional"] {
+        background-color: var(--lily-accent-soft);
+        color: var(--color-base-content);
+        border-color: var(--lily-accent-soft);
+        box-shadow: 0 2px 0 var(--lily-accent-deep);
+    }
+    :where([class$="-button"], .button)[data-variant="exceptional"]:hover:not(
+            :disabled
+        ) {
+        background-color: color-mix(
+            in oklch,
+            var(--lily-accent-soft) 88%,
+            black
+        );
+        color: var(--color-base-content);
+    }
+
+    /* Full-width — DHCW buttons are full-width below 40rem and auto above
+       it, which is the right default for a form on a phone. Lily's baseline
+       is inline at every width, so this variant opts into the DHCW rule
+       rather than imposing it on every button in the catalogue. */
+    :where([class$="-button"], .button)[data-variant="full"] {
+        width: 100%;
+    }
+    @media (max-width: 40rem) {
+        /* Below the DHCW tablet breakpoint, a *primary* button in a form
+           goes full-width automatically — one-handed reach beats tidiness
+           on a 375px screen. Scoped to form context so a toolbar of icon
+           buttons is untouched. */
+        :where(form) :where(.button, .submit-input):not([data-variant]) {
+            width: 100%;
+        }
+    }
+
+    /* --- Button variants ---------------------------------------------------- */
+
+    /* Icon button — square; aspect-ratio keeps it from squashing when the
+       icon font changes size. */
+    :where(.icon-button) {
+        padding: 0.5rem;
+        min-width: 2.5rem;
+        aspect-ratio: 1;
+    }
+
+    /* Floating action button — pinned to the bottom-right of the viewport.
+       Uses logical inset properties so it flips correctly under RTL. */
+    :where(.float-button) {
+        position: fixed;
+        inset-block-end: 1rem;
+        inset-inline-end: 1rem;
+        box-shadow: var(--lily-shadow-lg);
+        border-radius: 999px;
+        width: 3.5rem;
+        height: 3.5rem;
+        padding: 0;
+    }
+
+    /* Split button — extra padding-end for the dropdown caret. */
+    :where(.split-button) {
+        padding-inline-end: 0.5rem;
+    }
+
+    /* Download button — stacks the action label over a hint (filesize, etc.). */
+    :where(.download-button) {
+        flex-direction: column;
+        align-items: flex-start;
+        text-align: start;
+    }
+
+    /* Clipboard-copy — muted style because it's auxiliary, not primary. */
+    :where(.clipboard-copy-button) {
+        background-color: var(--lily-surface-alt);
+        color: var(--lily-text);
+        border-color: var(--lily-border-strong);
+    }
+
+    /* Switch button — iOS-style toggle pill. The track is the sunken
+       surface; the thumb is drawn by the consumer (or via ::before in
+       higher-specificity overrides). */
+    :where(.switch-button) {
+        position: relative;
+        width: 2.75rem;
+        min-width: 2.75rem;
+        height: 1.5rem;
+        min-height: 1.5rem;
+        padding: 0;
+        background-color: var(--lily-surface-sunken);
+        border-radius: 999px;
+    }
+    :where(
+        .switch-button[aria-pressed="true"],
+        .switch-button[aria-checked="true"]
+    ) {
+        background-color: var(--color-primary);
+    }
+
+    /* Toggle button — when un-pressed, render as a muted secondary chip. */
+    :where(.toggle-button[aria-pressed="false"]) {
+        background-color: var(--lily-surface-alt);
+        color: var(--lily-text);
+        border-color: var(--lily-border-strong);
+    }
+
+    /* Link-style "button" — for back/skip/go-to controls that look like
+       text links but use the button machinery for keyboard semantics. */
+    :where(
+        .back-link,
+        .skip-link,
+        .go-to-top,
+        .go-to-next-section,
+        .go-to-previous-section
+    ) {
+        background-color: transparent;
+        color: var(--color-primary);
+        border-color: transparent;
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+    }
+
+    /* Skip-link — visually hidden off-screen until focused, then snaps to the
+       top-left of the page. Required pattern for keyboard accessibility
+       (WCAG 2.4.1 bypass blocks). */
+    :where(.skip-link) {
+        position: absolute;
+        top: -3rem;
+        left: 0.5rem;
+        padding: 0.5rem 1rem;
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+        text-decoration: none;
+        border-radius: var(--lily-radius-md);
+        z-index: 9999;
+    }
+    :where(.skip-link:focus) {
+        top: 0.5rem;
+    }
+
+    /* Button group — horizontal cluster of related actions. */
+    :where(.button-group) {
+        display: inline-flex;
+        gap: 0.25rem;
+    }
+
+    /* --- Bars of buttons (action / menu / tab / task / tool) ---------------- */
+
+    :where(.action-bar, .menu-bar, .tab-bar, .task-bar, .tool-bar) {
+        display: flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.5rem;
+        background-color: var(--lily-surface-alt);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+    }
+    /* Children of bars render flush with the bar — transparent background,
+       no border, so the bar's surface acts as the visual frame. */
+    :where(
+        .action-bar-button,
+        .menu-bar-button,
+        .tab-bar-button,
+        .task-bar-button,
+        .tool-bar-button
+    ) {
+        background-color: transparent;
+        color: var(--lily-text);
+        border-color: transparent;
+    }
+    /* Selected tab — explicit primary colour. */
+    :where(.tab-bar-button[aria-selected="true"]) {
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+    }
+    /* Panel revealed by the active tab. */
+    :where(.tab-panel) {
+        padding: 1rem;
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+    }
+
+    /* ==========================================================================
+     * Links, anchors, link-like
+     * --------------------------------------------------------------------------
+     * Generic `-link` styling — primary-coloured underlined text. The
+     * exclusions (`skip-link`, `back-link`) are styled as buttons above.
+     * ====================================================================== */
+
+    /* Links are NHS Blue (`$nhsw-colour-link`), i.e. --color-secondary
+       under this palette — not the navy primary. Keeping links blue and
+       buttons navy is what lets a reader tell "this navigates" from "this
+       acts" without reading either one. */
+    :where([class$="-link"]:not(.skip-link):not(.back-link)) {
+        color: var(--color-secondary);
+        text-decoration: underline;
+        text-underline-offset: 0.12em;
+    }
+    /* Hover — DHCW drops to NHS Dark Blue #003087 and thickens the rule.
+       Both, not either: colour alone is not a state change (WCAG 1.4.1). */
+    :where([class$="-link"]):hover {
+        color: var(--lily-link-hover);
+        text-decoration-thickness: max(3px, 0.1875rem);
+    }
+    /* Visited — NHS Purple #7C2855 (`$nhsw-colour-link-visited`). Worth
+       keeping on a patient surface specifically: someone working through
+       a list of conditions or services needs to see where they have
+       already been, and that is the whole job of a visited colour. */
+    :where([class$="-link"]):visited {
+        color: var(--lily-link-visited);
+    }
+
+    /* ----------------------------------------------------------------------
+     * Action link — DHCW's green-chevron call to action
+     *
+     * The one link on a page that is really a call to action: "Book an
+     * appointment", "Find a GP". DHCW gives it a 36px green chevron, h4-size
+     * bold text, and — unusually — text in text-primary rather than link
+     * blue, with the green carried entirely by the icon.
+     *
+     * That inversion is the interesting decision. A large bold blue link
+     * competes with the page's real headings; a large bold *black* link
+     * with a green arrow reads as an action without pretending to be a
+     * heading. The colour is in the glyph, where it has no contrast
+     * obligation, so the green can be as saturated as it likes.
+     *
+     * Lily's action-link is a bare <a> with a children slot — the consumer
+     * supplies the SVG, per the headless rule that no icon assets ship. The
+     * rule below colours and sizes whatever <svg> it finds, and degrades to
+     * plain bold text if there is none.
+     * -------------------------------------------------------------------- */
+    :where(.action-link) {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        margin-bottom: 1.5rem;
+        color: var(--lily-text);
+        font-size: 1.375rem;
+        font-weight: 700;
+        line-height: 1.875rem;
+        text-decoration: none;
+    }
+    :where(.action-link):visited {
+        color: var(--lily-text);
+    }
+    :where(.action-link > svg) {
+        flex-shrink: 0;
+        width: 2.25rem;
+        height: 2.25rem;
+        fill: var(--lily-action-green);
+    }
+    :where(.action-link):hover {
+        color: var(--lily-text);
+        text-decoration: underline;
+        text-decoration-thickness: max(3px, 0.1875rem);
+        text-underline-offset: 0.12em;
+    }
+    :where(.action-link):hover > svg {
+        fill: color-mix(in oklch, var(--lily-action-green) 80%, black);
+    }
+    /* On a dark surface the chevron goes white and the text inverts —
+       DHCW's `--on-dark` modifier, exposed as data-tone. */
+    :where(.action-link[data-tone="on-dark"]),
+    :where(.action-link[data-tone="on-dark"]):visited {
+        color: var(--color-primary-content);
+    }
+    :where(.action-link[data-tone="on-dark"]) > svg {
+        fill: var(--color-primary-content);
+    }
+
+    /* ==========================================================================
+     * Lists & list items
+     * --------------------------------------------------------------------------
+     * Lily wraps `<ol>` / `<ul>` in role-specific classes (CheckList, DoList,
+     * etc.). The baseline kills the default browser bullet styling and zeroes
+     * margins so consumers can compose lists inside other components.
+     * ====================================================================== */
+
+    /* Baseline — kill bullets and the indent gutter on every list class. */
+    :where(
+        .accordion-list,
+        .breadcrumb-list,
+        .chat-list,
+        .check-list,
+        .collection-list,
+        .contents-list,
+        .description-list,
+        .document-list,
+        .do-list,
+        .dont-list,
+        .icon-list,
+        .pagination-list,
+        .section-list,
+        .step-list,
+        .summary-list,
+        .task-list,
+        .timeline-list,
+        .tour-list,
+        .tree-list,
+        .validation-list
+    ) {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+    }
+
+    /* Baseline — every list-item gets a thin hairline rule between rows. */
+    :where(
+        .accordion-list-item,
+        .breadcrumb-list-item,
+        .chat-list-item,
+        .check-list-item,
+        .collection-list-item,
+        .contents-list-item,
+        .description-list-item,
+        .document-list-item,
+        .do-list-item,
+        .dont-list-item,
+        .icon-list-item,
+        .pagination-list-item,
+        .section-list-item,
+        .step-list-item,
+        .summary-list-item,
+        .task-list-item,
+        .timeline-list-item,
+        .tour-list-item,
+        .tree-list-item,
+        .validation-list-item
+    ) {
+        padding: 0.5rem 0;
+        border-bottom: var(--border) solid var(--lily-border);
+    }
+
+    /* --- Breadcrumb --------------------------------------------------------- */
+    /* Horizontal list separated by a "/" pseudo-element between items. */
+    :where(.breadcrumb-list) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        align-items: center;
+    }
+    :where(.breadcrumb-list-item) {
+        border: 0; /* override the generic list-item bottom-border */
+        padding: 0;
+        display: inline-flex;
+        align-items: center;
+    }
+    /* Slash separator generated between adjacent items, not before the first. */
+    :where(.breadcrumb-list-item + .breadcrumb-list-item)::before {
+        content: "/";
+        margin-inline-end: 0.5rem;
+        color: var(--lily-text-muted);
+    }
+    /* Final crumb (the current page) — muted because it isn't a link. */
+    :where(.breadcrumb-list-item[aria-current="page"]) {
+        color: var(--lily-text-muted);
+    }
+
+    /* --- Pagination --------------------------------------------------------- */
+    :where(.pagination-list) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+        align-items: center;
+    }
+    :where(.pagination-list-item) {
+        border: 0;
+        padding: 0;
+    }
+    /* Pagination link — square-ish chip with a generous tap target. */
+    :where(.pagination-link) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2.5rem;
+        padding: 0.5rem 0.75rem;
+        border-radius: var(--lily-radius-md);
+        text-decoration: none;
+    }
+    /* Current page — filled with the primary brand colour. */
+    :where(.pagination-link[aria-current="page"]) {
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+    }
+
+    /* --- Marker glyphs ------------------------------------------------------ */
+    /* Check / do — green ✓; dont — red ✗. The `::marker` pseudo-element
+       only works on list-items with the default list-style display, so the
+       generic baseline above intentionally kept that. */
+    :where(.check-list-item)::marker {
+        content: "✓ ";
+        color: var(--color-success);
+    }
+    :where(.do-list-item)::marker {
+        content: "✓ ";
+        color: var(--color-success);
+    }
+    :where(.dont-list-item)::marker {
+        content: "✗ ";
+        color: var(--color-error);
+    }
+
+    /* --- Tree --------------------------------------------------------------- */
+    /* Nested tree lists indent their children. */
+    :where(.tree-list .tree-list) {
+        padding-inline-start: 1.25rem;
+    }
+    :where(.tree-list-item) {
+        border: 0;
+    }
+
+    /* --- Step list ---------------------------------------------------------- */
+    /* CSS counter draws the step number in a circular badge. */
+    :where(.step-list) {
+        counter-reset: lily-step;
+    }
+    :where(.step-list-item) {
+        counter-increment: lily-step;
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+    }
+    :where(.step-list-item)::before {
+        content: counter(lily-step);
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.75rem;
+        height: 1.75rem;
+        border-radius: 50%;
+        background-color: var(--lily-surface-sunken);
+        color: var(--lily-text);
+        font-weight: 600;
+    }
+    /* Step status variants — colour-coded badge fill. */
+    :where(.step-list-item[data-status="finished"])::before {
+        background-color: var(--color-success);
+        color: var(--color-success-content);
+    }
+    :where(.step-list-item[data-status="in-progress"])::before {
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+    }
+    :where(.step-list-item[data-status="error"])::before {
+        background-color: var(--color-error);
+        color: var(--color-error-content);
+    }
+
+    /* --- Task list ---------------------------------------------------------- */
+    /* Flex row so the checkbox aligns with its label. */
+    :where(.task-list-item) {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+
+    /* --- Timeline ----------------------------------------------------------- */
+    /* Vertical rule down the left, with a dot per event. */
+    :where(.timeline-list-item) {
+        position: relative;
+        padding-inline-start: 1.5rem;
+        border-left: var(--border) solid var(--lily-border-strong);
+        margin-inline-start: 0.5rem;
+    }
+    :where(.timeline-list-item)::before {
+        content: "";
+        position: absolute;
+        inset-inline-start: -0.4rem;
+        inset-block-start: 0.65rem;
+        width: 0.7rem;
+        height: 0.7rem;
+        border-radius: 50%;
+        background-color: var(--color-primary);
+    }
+
+    /* --- Validation list — pass / fail / pending status colours ------------ */
+    :where(.validation-list-item[data-status="passed"]) {
+        color: var(--color-success);
+    }
+    :where(.validation-list-item[data-status="failed"]) {
+        color: var(--color-error);
+    }
+    :where(.validation-list-item[data-status="pending"]) {
+        color: var(--lily-text-muted);
+    }
+
+    /* --- Description list (semantic <dl>) ----------------------------------- */
+    /* Two-column grid: term in the left column, description in the right. */
+    :where(.description-list) {
+        display: grid;
+        grid-template-columns: minmax(min-content, max-content) 1fr;
+        column-gap: 1rem;
+        row-gap: 0.5rem;
+    }
+    /* `display: contents` lets the dt/dd children participate directly in
+       the parent grid without an intermediate row wrapper. */
+    :where(.description-list-item) {
+        display: contents;
+        border: 0;
+    }
+    :where(.description-list dt) {
+        font-weight: 600;
+    }
+
+    /* --- Summary list (three-column key/value/action grid) ------------------ */
+    :where(.summary-list) {
+        display: grid;
+        grid-template-columns: minmax(0, max-content) 1fr auto;
+        column-gap: 1rem;
+        row-gap: 0.5rem;
+    }
+    :where(.summary-list-item) {
+        display: contents;
+        border: 0;
+    }
+
+    /* --- Icon / collection / document lists — flex rows with leading icon -- */
+    :where(.icon-list-item, .collection-list-item, .document-list-item) {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+    }
+
+    /* --- Navs --------------------------------------------------------------- */
+    /* Nav wrappers are layout-neutral by default — the inner list handles
+       layout, the nav just provides the landmark semantics. */
+    :where(
+        .accordion-nav,
+        .breadcrumb-nav,
+        .chat-nav,
+        .contents-nav,
+        .pagination-nav,
+        .section-nav,
+        .tree-nav,
+        .navigation-menu
+    ) {
+        display: block;
+        padding: 0;
+    }
+
+    /* ==========================================================================
+     * Tables (plain, data, calendar, kanban, gantt)
+     * --------------------------------------------------------------------------
+     * Every Lily table variant shares the same baseline: full-width, collapsed
+     * borders, body font. Variants override below for specialised behaviour
+     * (kanban columns, gantt bars, calendar selection).
+     * ====================================================================== */
+
+    :where(.table, .data-table, .calendar-table, .kanban-table, .gantt-table) {
+        width: 100%;
+        border-collapse: collapse; /* shared edges between cells */
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        font-family: var(--lily-font-body);
+    }
+
+    /* Thead gets the alt surface so it visually anchors above the body. */
+    :where(
+        .table-head,
+        .data-table-head,
+        .calendar-table-head,
+        .kanban-table-head,
+        .gantt-table-thead
+    ) {
+        background-color: var(--lily-surface-alt);
+    }
+
+    /* Header cells — bold, slightly tighter padding, with a 2px under-rule. */
+    :where(
+        .table-th,
+        .data-table-th,
+        .calendar-table-th,
+        .kanban-table-th,
+        .gantt-table-th
+    ) {
+        padding: 0.625rem 0.75rem;
+        text-align: start;
+        font-weight: 600;
+        border-bottom: 2px solid var(--lily-border-strong);
+    }
+
+    /* Body cells — top-aligned (multi-line content reads better when the
+       baseline is at the top, not centred). */
+    :where(
+        .table-td,
+        .data-table-td,
+        .calendar-table-td,
+        .kanban-table-td,
+        .gantt-table-td
+    ) {
+        padding: 0.625rem 0.75rem;
+        border-bottom: var(--border) solid var(--lily-border);
+        vertical-align: top;
+    }
+
+    /* Row hover — subtle highlight for scanning long tables. */
+    :where(
+        .table-row,
+        .data-table-row,
+        .calendar-table-row,
+        .kanban-table-row,
+        .gantt-table-tr
+    ):hover {
+        background-color: var(--lily-surface-alt);
+    }
+
+    /* Data-table filter form — chips that sit above the table. */
+    :where(.data-filter-form) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.75rem;
+        padding: 1rem;
+        background-color: var(--lily-surface-alt);
+        border-radius: var(--lily-radius-md);
+    }
+
+    /* --- Calendar specifics ------------------------------------------------- */
+    /* Selected date — filled with the primary brand colour. */
+    :where(.calendar-table-td[aria-selected="true"]) {
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+    }
+    /* Today — outlined rather than filled, so a selected non-today date
+       still reads as the "selected" one. */
+    :where(.calendar-table-td[aria-current="date"]) {
+        outline: 2px solid var(--color-primary);
+        outline-offset: -2px;
+    }
+
+    /* --- Kanban specifics --------------------------------------------------- */
+    /* Each column renders as a `<td>`; widen the cells so cards have room. */
+    :where(.kanban-table) {
+        display: table;
+    }
+    :where(.kanban-table-td) {
+        vertical-align: top;
+        background-color: var(--lily-surface);
+        min-width: 14rem;
+    }
+
+    /* --- Gantt specifics ---------------------------------------------------- */
+    /* Cells marked as bars are filled with the primary colour to render the
+       schedule bar inline within the grid. */
+    :where(.gantt-table-td[data-state="bar"]) {
+        background-color: var(--color-primary);
+    }
+
+    /* ==========================================================================
+     * Cards, panels, surfaces
+     * --------------------------------------------------------------------------
+     * Family of generic content containers. Differ mostly in elevation
+     * (shadow depth) and accent colour.
+     * ====================================================================== */
+
+    :where(
+        .card,
+        .feature-card,
+        .product-card,
+        .care-card,
+        .hover-card,
+        .panel,
+        .floating-panel,
+        .success-panel
+    ) {
+        display: block;
+        padding: 1rem;
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-lg);
+        box-shadow: var(--lily-shadow-sm);
+    }
+    /* DHCW's card is a bordered white box with a 4px solid ledge under it
+       rather than a blur — `box-shadow: 0 4px 0 #D8DDE0`. Same reasoning as
+       the button ledge: a hard offset survives forced-colours mode and
+       prints, where a soft shadow becomes either invisible or a grey smear.
+       On hover the whole frame darkens to text-primary, which is a much
+       stronger affordance than the usual lift-and-blur. */
+    :where(.card, .feature-card, .product-card, .care-card) {
+        box-shadow: 0 4px 0 var(--lily-border);
+    }
+    :where(.card, .feature-card, .product-card):has(a:hover) {
+        border-color: var(--lily-text);
+        box-shadow: 0 4px 0 var(--lily-text);
+    }
+    /* Whole-card focus. DHCW rings the card, not the link inside it, so a
+       keyboard user sees the same target a mouse user clicks. */
+    :where(.card, .feature-card, .product-card):focus-within {
+        outline: 3px solid var(--lily-focus-ring);
+        outline-offset: 0;
+    }
+
+    /* Feature card — generous padding because it leads the page. */
+    :where(.feature-card) {
+        padding: 1.5rem;
+    }
+    /* Hover card — popover-like; lift it with the medium shadow. */
+    :where(.hover-card) {
+        box-shadow: var(--lily-shadow-md);
+    }
+    /* Floating panel — pinned overlay; largest shadow. */
+    :where(.floating-panel) {
+        box-shadow: var(--lily-shadow-lg);
+    }
+    /* Success panel — green border + faint green tint. */
+    :where(.success-panel) {
+        border-color: var(--color-success);
+        background-color: color-mix(
+            in oklch,
+            var(--color-success) 8%,
+            var(--lily-surface)
+        );
+    }
+    /* Care card urgency variants — coloured left rail (urgent/non-urgent/
+       primary). Pattern adapted from the NHS care-card guidance. */
+    :where(.care-card[data-urgency="urgent"]) {
+        border-color: var(--color-error);
+        border-left-width: 0.375rem;
+    }
+    :where(.care-card[data-urgency="non-urgent"]) {
+        border-color: var(--color-info);
+        border-left-width: 0.375rem;
+    }
+    :where(.care-card[data-urgency="primary"]) {
+        border-color: var(--color-primary);
+        border-left-width: 0.375rem;
+    }
+
+    /* ==========================================================================
+     * Banners, alerts, callouts, notifications
+     * --------------------------------------------------------------------------
+     * Family of messages with a coloured left rail. The rail colour is set
+     * per severity so the message reads at a glance.
+     * ====================================================================== */
+
+    /* Baseline — alert/banner/callout/notification all share the same frame. */
+    :where(
+        .alert,
+        .banner,
+        .announcement-banner,
+        .phase-banner,
+        .government-banner,
+        .medical-banner,
+        .super-banner,
+        .information-callout,
+        .warning-callout,
+        .summary-box,
+        .notification,
+        .toast,
+        .sonner
+    ) {
+        display: flex;
+        align-items: flex-start;
+        gap: 0.75rem;
+        padding: 1rem;
+        background-color: var(--lily-surface-alt);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border);
+        border-inline-start-width: 0.375rem; /* the coloured rail */
+        border-radius: var(--lily-radius-md);
+    }
+
+    /* Severity variants — rail + faint background tint. */
+    :where(
+        .alert[data-severity="info"],
+        .information-callout,
+        .announcement-banner
+    ) {
+        border-inline-start-color: var(--color-info);
+        background-color: color-mix(
+            in oklch,
+            var(--color-info) 8%,
+            var(--lily-surface)
+        );
+    }
+    :where(.alert[data-severity="success"]) {
+        border-inline-start-color: var(--color-success);
+        background-color: color-mix(
+            in oklch,
+            var(--color-success) 8%,
+            var(--lily-surface)
+        );
+    }
+    :where(.alert[data-severity="warning"], .phase-banner) {
+        border-inline-start-color: var(--color-warning);
+        background-color: color-mix(
+            in oklch,
+            var(--color-warning) 12%,
+            var(--lily-surface)
+        );
+    }
+
+    /* ----------------------------------------------------------------------
+     * Warning callout — DHCW's tabbed band
+     *
+     * Deliberately pulled OUT of the left-rail alert family above, because
+     * DHCW's warning callout is not a rail component. It is a bordered pale
+     * panel (#FEF9C3) with a solid yellow heading band (#FACC15) that
+     * overlaps the panel's top edge — the NHS "Important" pattern, which
+     * DHCW inherits and recolours.
+     *
+     * The band matters. A left rail is a whisper: fine for "here is a
+     * related fact", wrong for "do not take this medicine with alcohol".
+     * The band gives the callout a header that reads as a label at a
+     * glance, and — because it is a real heading element — gives a screen
+     * reader user the same landmark that a sighted user gets from the
+     * yellow.
+     *
+     * Lily's warning-callout is a single <div> with a children slot and no
+     * `__heading` sub-class, so the band is applied to whatever heading
+     * element the consumer puts first. Markup that gets the full pattern:
+     *
+     *   <div class="warning-callout" role="alert">
+     *     <h3>Pwysig / Important</h3>
+     *     <p>…</p>
+     *   </div>
+     *
+     * Without a heading child it degrades to a plain bordered yellow panel,
+     * which is still correct — just quieter.
+     *
+     * Yellow #FACC15 is 1.5:1 against the #FEF9C3 fill, so the band is
+     * distinguishable by *position and text*, never by hue alone; the
+     * border carries the boundary. Text on both is DHCW text-primary, at
+     * 13.4:1 on the fill and 8.6:1 on the band.
+     * -------------------------------------------------------------------- */
+    :where(.warning-callout) {
+        display: block; /* undo the alert family's flex row */
+        position: relative;
+        max-width: 42rem;
+        margin: 0 0 2rem;
+        padding: 0;
+        padding-top: 1.25rem;
+        border: none;
+        background-color: transparent;
+        color: var(--lily-text);
+    }
+    /* The band — inline-block so it hugs its own text rather than spanning
+       the panel, which is what makes it read as a tab rather than a
+       header row. */
+    :where(.warning-callout > :is(h1, h2, h3, h4, h5, h6)) {
+        position: relative;
+        z-index: 2;
+        display: inline-block;
+        margin: 0;
+        padding: 0.5rem 1.5rem;
+        background-color: var(--color-warning);
+        color: var(--color-warning-content);
+        font-size: 1.1875rem;
+        line-height: 1.5;
+    }
+    /* The panel — pulled up under the band by the band's own height, so
+       the two overlap instead of stacking. */
+    :where(.warning-callout > :is(h1, h2, h3, h4, h5, h6)) ~ * {
+        position: relative;
+        z-index: 1;
+    }
+    :where(.warning-callout)::after {
+        content: "";
+        position: absolute;
+        inset: 1.25rem 0 0;
+        z-index: 0;
+        border: var(--border) solid var(--color-warning);
+        background-color: var(--lily-warning-surface);
+    }
+    :where(.warning-callout > :is(h1, h2, h3, h4, h5, h6)) ~ :first-of-type,
+    :where(.warning-callout > :not(:is(h1, h2, h3, h4, h5, h6)):first-child) {
+        margin-top: 0;
+    }
+    /* Content inset. Applied to the children rather than the container so
+       the band can still break out of the panel's left edge. */
+    :where(.warning-callout > :not(:is(h1, h2, h3, h4, h5, h6))) {
+        position: relative;
+        z-index: 1;
+        margin-inline: 0;
+        padding-inline: 1.5rem;
+    }
+    :where(.warning-callout > :not(:is(h1, h2, h3, h4, h5, h6)):last-child) {
+        padding-bottom: 1.5rem;
+        margin-bottom: 0;
+    }
+    :where(
+        .warning-callout > :is(h1, h2, h3, h4, h5, h6) + *
+    ) {
+        padding-top: 1.5rem;
+    }
+    :where(
+        .alert[data-severity="error"],
+        .error-message,
+        .error-summary,
+        .super-banner
+    ) {
+        border-inline-start-color: var(--color-error);
+        background-color: color-mix(
+            in oklch,
+            var(--color-error) 8%,
+            var(--lily-surface)
+        );
+    }
+    /* Medical banner — primary brand colour. */
+    :where(.medical-banner) {
+        border-inline-start-color: var(--color-primary);
+    }
+    /* Medical banner inner boxes — danger / advice variants. */
+    :where(.medical-banner-box-for-danger) {
+        border-color: var(--color-error);
+        background-color: color-mix(
+            in oklch,
+            var(--color-error) 8%,
+            var(--lily-surface)
+        );
+    }
+    :where(.medical-banner-box-for-advice) {
+        border-color: var(--color-info);
+        background-color: color-mix(
+            in oklch,
+            var(--color-info) 8%,
+            var(--lily-surface)
+        );
+    }
+    /* Government banner — solid neutral surface (US-government / GOV.UK
+       style: a chrome bar at the top of the page identifying the site
+       as an official property). No coloured rail. */
+    :where(.government-banner) {
+        background-color: var(--color-neutral);
+        color: var(--color-neutral-content);
+        border-color: transparent;
+        border-inline-start-color: transparent;
+    }
+    /* Summary box — primary-coloured rail; used for "answer at a glance"
+       callouts on long forms (e.g. cost summary). */
+    :where(.summary-box) {
+        border-color: var(--color-primary);
+        border-inline-start-width: 0.375rem;
+    }
+
+    /* Banner boxes — chrome strip variants used inside header areas. */
+    :where(.banner-box, .medical-banner-box) {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.75rem 1rem;
+    }
+
+    /* Sticky promo — sits at the very top of the viewport on scroll. */
+    :where(.sticky-promo-banner) {
+        position: sticky;
+        inset-block-start: 0;
+        z-index: 10;
+    }
+
+    /* Error message — inline form-validation message. */
+    :where(.error-message) {
+        color: var(--color-error);
+        font-weight: 600;
+    }
+    /* Error summary — heavyweight 4px border (GOV.UK pattern) so users
+       scrolling back to the top of a form see it immediately. */
+    :where(.error-summary) {
+        padding: 1rem;
+        border: 0.25rem solid var(--color-error);
+    }
+
+    /* Toast / Sonner — floating notifications; medium elevation. */
+    :where(.toast, .sonner) {
+        box-shadow: var(--lily-shadow-md);
+    }
+    /* In-page notification — small elevation. */
+    :where(.notification) {
+        box-shadow: var(--lily-shadow-sm);
+    }
+
+    /* ==========================================================================
+     * Forms
+     * --------------------------------------------------------------------------
+     * Form / field / fieldset layout primitives. Stack vertically with a
+     * consistent gap so consumer markup stays brief.
+     * ====================================================================== */
+
+    :where(.form, .editable-form) {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    /* Field — wraps a single label + input + hint/error trio. */
+    :where(.field) {
+        display: flex;
+        flex-direction: column;
+        gap: 0.375rem;
+    }
+    /* Fieldset — semantic <fieldset>; border + padded inset, legend bold. */
+    :where(.fieldset) {
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+        padding: 1rem;
+    }
+    :where(.fieldset > legend) {
+        padding-inline: 0.5rem;
+        font-weight: 600;
+    }
+    /* Label — bold and dark; consumers can override per-form. */
+    :where(.label) {
+        font-weight: 600;
+        color: var(--lily-text);
+    }
+    /* Hint — small muted helptext under the input. */
+    :where(.hint) {
+        color: var(--lily-text-muted);
+        font-size: 0.875rem;
+    }
+    /* Character counter — same colour/size as hint but right-aligned. */
+    :where(.character-counter) {
+        color: var(--lily-text-muted);
+        font-size: 0.875rem;
+        text-align: end;
+    }
+
+    /* ==========================================================================
+     * Layout & containers
+     * ====================================================================== */
+
+    /* Page-width containers. */
+    :where(
+        .container,
+        .container-with-fixed-width,
+        .container-with-fluid-width
+    ) {
+        display: block;
+        width: 100%;
+        margin-inline: auto;
+        padding-inline: 1rem;
+        box-sizing: border-box;
+    }
+    /* Fixed-width — caps at a comfortable reading width (~1152px). */
+    :where(.container-with-fixed-width) {
+        max-width: 72rem;
+    }
+    /* Fluid-width — fills the viewport edge-to-edge. */
+    :where(.container-with-fluid-width) {
+        max-width: none;
+    }
+    /* Reset the inline padding when a container should butt against the edge. */
+    :where(.padding-reset) {
+        padding-inline: 0;
+    }
+
+    /* Flex / grid / masonry primitives. */
+    :where(.flex-stack) {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+    }
+    :where(.grid) {
+        display: grid;
+        gap: 1rem;
+    }
+    :where(.masonry) {
+        column-count: 3;
+        column-gap: 1rem;
+    }
+    /* Horizontal-rule replacement that respects theme borders. */
+    :where(.separator) {
+        border: 0;
+        border-top: var(--border) solid var(--lily-border);
+        margin: 1rem 0;
+    }
+    /* Generic content tile. */
+    :where(.tile) {
+        display: block;
+        padding: 1rem;
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+    }
+    /* Sidebar — secondary-surface panel; sits beside main content. */
+    :where(.sidebar) {
+        display: block;
+        background-color: var(--lily-surface-alt);
+        padding: 1rem;
+        border-radius: var(--lily-radius-md);
+    }
+    /* Aspect-ratio box — 16:9 default; consumers override `aspect-ratio`. */
+    :where(.aspect-ratio-container) {
+        position: relative;
+        display: block;
+        aspect-ratio: 16 / 9;
+        overflow: hidden;
+        border-radius: var(--lily-radius-md);
+    }
+    /* Framer — bordered box for embeds / illustrations. */
+    :where(.framer) {
+        padding: 1rem;
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+    }
+    /* Article-layout — declares column-width tokens that content-block reads.
+       Pattern lifted from the Reuters Graphics components system. */
+    :where(.article-layout) {
+        --content-width-narrower: 20.625rem; /* 330px */
+        --content-width-narrow: 31.875rem;   /* 510px */
+        --content-width-normal: 41.25rem;    /* 660px (default reading width) */
+        --content-width-wide: 58.125rem;     /* 930px (chart escape) */
+        --content-width-wider: 75rem;        /* 1200px (full-bleed escape) */
+        display: block;
+    }
+    /* Content-block — reads the column-width tokens; switch via data-width. */
+    :where(.content-block) {
+        max-width: var(--content-width-normal);
+        margin-inline: auto;
+        padding-inline: 1rem;
+        box-sizing: border-box;
+    }
+    :where(.content-block[data-width="narrower"]) {
+        max-width: var(--content-width-narrower);
+    }
+    :where(.content-block[data-width="narrow"]) {
+        max-width: var(--content-width-narrow);
+    }
+    :where(.content-block[data-width="wide"]) {
+        max-width: var(--content-width-wide);
+    }
+    :where(.content-block[data-width="wider"]) {
+        max-width: var(--content-width-wider);
+    }
+
+    /* --- Grail layout (5-region responsive page shell) --------------------- */
+    /* Header spans the top; left-aside / main / right-aside fill the middle;
+       footer spans the bottom. At ≤768px the asides drop below the main. */
+    :where(.grail-layout) {
+        display: grid;
+        min-height: 100vh;
+        grid-template-areas:
+            "header header header"
+            "left   main   right"
+            "footer footer footer";
+        grid-template-rows: auto 1fr auto;
+        grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+    }
+    :where(.grail-layout-top-header) {
+        grid-area: header;
+    }
+    :where(.grail-layout-left-aside) {
+        grid-area: left;
+    }
+    :where(.grail-layout-center-main) {
+        grid-area: main;
+    }
+    :where(.grail-layout-right-aside) {
+        grid-area: right;
+    }
+    :where(.grail-layout-bottom-footer) {
+        grid-area: footer;
+    }
+    /* Header / footer chrome — secondary surface, padded. */
+    :where(.grail-layout-top-header, .grail-layout-bottom-footer) {
+        background-color: var(--lily-surface-alt);
+        padding: 1rem;
+    }
+    /* Asides — secondary surface, padded. */
+    :where(.grail-layout-left-aside, .grail-layout-right-aside) {
+        padding: 1rem;
+        background-color: var(--lily-surface-alt);
+    }
+    /* Main content area — primary surface, more generous padding. */
+    :where(.grail-layout-center-main) {
+        padding: 1.5rem;
+    }
+    /* Mobile breakpoint — collapse to a single column, stacking the regions. */
+    @media (max-width: 48rem) {
+        :where(.grail-layout) {
+            grid-template-areas: "header" "main" "left" "right" "footer";
+            grid-template-columns: 1fr;
+            grid-template-rows: auto auto auto auto auto;
+        }
+    }
+
+    /* Standalone semantic header / footer landmarks. */
+    :where(.header) {
+        display: block;
+        padding: 1rem;
+        background-color: var(--lily-surface);
+        border-bottom: var(--border) solid var(--lily-border);
+    }
+    :where(.footer) {
+        display: block;
+        padding: 1rem;
+        background-color: var(--lily-surface-alt);
+        border-top: var(--border) solid var(--lily-border);
+    }
+
+    /* ==========================================================================
+     * Dialogs, popovers, overlays
+     * --------------------------------------------------------------------------
+     * Modal and floating UI. Backdrop is a blur + 50% black overlay; dialog
+     * frames are rounded with the largest shadow.
+     * ====================================================================== */
+
+    /* Native <dialog> + variant types. */
+    :where(
+        .dialog,
+        .alert-dialog,
+        .timeout-dialog,
+        .popconfirm-dialog,
+        .file-dialog
+    ) {
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-lg);
+        padding: 1.5rem;
+        box-shadow: var(--lily-shadow-lg);
+        max-width: min(40rem, 90vw); /* cap on big screens, fit on small */
+    }
+    /* Backdrop — dim the page and blur slightly so focus stays on the dialog. */
+    :where(
+        .dialog::backdrop,
+        .alert-dialog::backdrop,
+        .timeout-dialog::backdrop,
+        .popconfirm-dialog::backdrop,
+        .file-dialog::backdrop
+    ) {
+        background-color: color-mix(in oklch, black 50%, transparent);
+        backdrop-filter: blur(2px);
+    }
+    /* Alert dialog — red rail so the user knows it's destructive. */
+    :where(.alert-dialog) {
+        border-color: var(--color-error);
+        border-inline-start-width: 0.375rem;
+    }
+
+    /* Popover / tooltip family — small floating labels. */
+    :where(.popover, .popup, .tooltip, .coachmark, .contextual-help) {
+        display: block;
+        padding: 0.5rem 0.75rem;
+        background-color: var(--color-neutral);
+        color: var(--color-neutral-content);
+        border-radius: var(--lily-radius-md);
+        box-shadow: var(--lily-shadow-md);
+        font-size: 0.875rem;
+        max-width: 20rem;
+    }
+    /* Popover / popup — surface-coloured (more substantial than a tooltip). */
+    :where(.popover, .popup) {
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border);
+        max-width: 24rem;
+    }
+    /* Coachmark — primary-coloured border so it reads as a tutorial hint. */
+    :where(.coachmark) {
+        border: 2px solid var(--color-primary);
+    }
+
+    /* Full-page overlay container — dims everything beneath a high-z child. */
+    :where(.overlay-container) {
+        position: fixed;
+        inset: 0;
+        background-color: color-mix(in oklch, black 50%, transparent);
+        z-index: 100;
+    }
+
+    /* Drawers — side panels (right edge by default; RTL-aware via logical
+       properties). Sit above the overlay container (z-index 101). */
+    :where(.drawer, .slide-out-drawer, .sheet) {
+        position: fixed;
+        inset-block: 0;
+        inset-inline-end: 0;
+        width: min(28rem, 90vw);
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        border-inline-start: var(--border) solid var(--lily-border);
+        box-shadow: var(--lily-shadow-lg);
+        padding: 1rem;
+        z-index: 101;
+    }
+
+    /* ==========================================================================
+     * Menus
+     * ====================================================================== */
+
+    /* Menu containers — surface-coloured popover with thin border + sm shadow. */
+    :where(.menu, .context-menu, .dropdown-menu, .tree-menu, .command) {
+        display: block;
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+        padding: 0.25rem;
+        box-shadow: var(--lily-shadow-sm);
+        list-style: none;
+        margin: 0;
+    }
+    /* Menu items — flex row with icon + label slot. */
+    :where(.menu-item, .context-menu-item) {
+        display: flex;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 0.5rem 0.75rem;
+        border-radius: var(--lily-radius-md);
+        cursor: pointer;
+    }
+    /* Highlight on hover / aria-selected — alt surface. */
+    :where(
+        .menu-item:hover,
+        .context-menu-item:hover,
+        .menu-item[aria-selected="true"]
+    ) {
+        background-color: var(--lily-surface-alt);
+    }
+    /* Menu group — section within a menu. The aria-label becomes a header. */
+    :where(.menu-group) {
+        padding: 0.25rem 0;
+    }
+    :where(.menu-group::before) {
+        content: attr(aria-label);
+        display: block;
+        padding: 0.25rem 0.75rem;
+        color: var(--lily-text-muted);
+        font-size: 0.75rem;
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+    }
+    /* Cascader / navigation-menu — horizontal flex row of menu columns. */
+    :where(.cascader, .navigation-menu) {
+        display: flex;
+        gap: 0.25rem;
+    }
+    /* Hamburger — bordered icon-button. */
+    :where(.hamburger-menu) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.5rem;
+        background: transparent;
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-md);
+        color: var(--lily-text);
+        cursor: pointer;
+    }
+
+    /* ==========================================================================
+     * Segments, toggles, groups
+     * ====================================================================== */
+
+    /* Generic group containers — inline-flex, wrap, small gap. */
+    :where(
+        .segment-group,
+        .toggle-group,
+        .checkbox-group,
+        .radio-group,
+        .dial-group,
+        .tag-group,
+        .avatar-group,
+        .mutually-exclusive
+    ) {
+        display: inline-flex;
+        gap: 0.25rem;
+        flex-wrap: wrap;
+    }
+    /* Segment group / toggle group get an inset background (iOS-segmented
+       control aesthetic). */
+    :where(.segment-group, .toggle-group) {
+        padding: 0.25rem;
+        background-color: var(--lily-surface-alt);
+        border-radius: var(--lily-radius-md);
+    }
+    /* Segment items — transparent until pressed; then primary fill. */
+    :where(.segment-group-item) {
+        padding: 0.375rem 0.75rem;
+        background: transparent;
+        border: 0;
+        border-radius: var(--lily-radius-md);
+        color: var(--lily-text);
+        cursor: pointer;
+    }
+    :where(
+        .segment-group-item[aria-pressed="true"],
+        .segment-group-item[aria-selected="true"]
+    ) {
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+    }
+    /* Avatar group — overlap each subsequent avatar by 0.5rem, with a
+       contrast ring for separation. */
+    :where(.avatar-group > *) {
+        margin-inline-start: -0.5rem;
+        border: 2px solid var(--lily-surface);
+    }
+
+    /* ==========================================================================
+     * Progress, loading
+     * ====================================================================== */
+
+    /* Native <progress> / <meter> / bar variant — short, pill-shaped track. */
+    :where(.progress, .progress-bar, .meter) {
+        display: block;
+        width: 100%;
+        height: 0.5rem;
+        appearance: none;
+        background-color: var(--lily-surface-sunken);
+        border: 0;
+        border-radius: 999px;
+        overflow: hidden;
+    }
+    /* Vendor pseudo-elements: track + value. */
+    :where(.progress::-webkit-progress-bar, .meter::-webkit-meter-bar) {
+        background-color: var(--lily-surface-sunken);
+    }
+    :where(
+        .progress::-webkit-progress-value,
+        .meter::-webkit-meter-optimum-value
+    ) {
+        background-color: var(--color-primary);
+    }
+    :where(.progress::-moz-progress-bar) {
+        background-color: var(--color-primary);
+    }
+
+    /* Progress circle — conic-gradient renders the sweep based on the
+       --progress custom property (0–100). */
+    :where(.progress-circle) {
+        display: inline-block;
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        background: conic-gradient(
+            var(--color-primary) calc(var(--progress, 0) * 1%),
+            var(--lily-surface-sunken) 0
+        );
+    }
+    /* Spinner / loading — classic CSS rotating partial-ring. */
+    :where(.progress-spinner, .loading) {
+        display: inline-block;
+        width: 1.5rem;
+        height: 1.5rem;
+        border: 3px solid var(--lily-surface-sunken);
+        border-top-color: var(--color-primary);
+        border-radius: 50%;
+        animation: lily-spin 0.8s linear infinite;
+    }
+    @keyframes lily-spin {
+        to {
+            transform: rotate(360deg);
+        }
+    }
+    /* Skeleton — shimmering placeholder while content is loading. */
+    :where(.skeleton) {
+        display: block;
+        background: linear-gradient(
+            90deg,
+            var(--lily-surface-alt) 0%,
+            var(--lily-surface-sunken) 50%,
+            var(--lily-surface-alt) 100%
+        );
+        background-size: 200% 100%;
+        animation: lily-skeleton 1.4s ease-in-out infinite;
+        border-radius: var(--lily-radius-md);
+        min-height: 1rem;
+    }
+    @keyframes lily-skeleton {
+        0% {
+            background-position: 200% 0;
+        }
+        100% {
+            background-position: -200% 0;
+        }
+    }
+    /* Respect prefers-reduced-motion — kill the perpetual animations.
+       (WCAG 2.3.3 Animation from interactions.) */
+    @media (prefers-reduced-motion: reduce) {
+        :where(.progress-spinner, .loading, .skeleton, .beach-ball) {
+            animation: none;
+        }
+    }
+
+    /* ==========================================================================
+     * Avatars, badges, tags, status
+     * ====================================================================== */
+
+    /* Avatar — circular tile (2.5rem) with sunken background as the
+       fallback colour when no image is provided. */
+    :where(.avatar) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        border-radius: 50%;
+        background-color: var(--lily-surface-sunken);
+        color: var(--lily-text);
+        overflow: hidden;
+        font-weight: 600;
+    }
+    :where(.avatar-image) {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        display: block;
+    }
+    /* Avatar fallback text — uppercase initials. */
+    :where(.avatar-text) {
+        text-transform: uppercase;
+    }
+
+    /* Badge / flair / tag family — small pill-shaped labels. */
+    :where(.badge, .flair, .status-tag, .tag, .ai-label) {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.125rem 0.5rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        line-height: 1.5;
+        background-color: var(--color-neutral);
+        color: var(--color-neutral-content);
+        border-radius: 999px;
+    }
+    /* ----------------------------------------------------------------------
+     * Tag — the DHCW tag palette
+     *
+     * DHCW's tag is the component where it diverges furthest from NHS
+     * England, and the divergence is worth adopting wholesale. England
+     * ships a handful of tag colours; DHCW ships eleven, each as a
+     * hand-tuned {fill, border, text} triplet rather than a tint computed
+     * from one hue. Every one of the eleven clears 7:1 — the loosest is
+     * aqua-green at 7.3:1 — which a computed tint would not have managed.
+     *
+     * Three structural choices, all DHCW's, all deliberate:
+     *
+     *   1. Rectangular, not pill. A pill reads as decoration; a rectangle
+     *      reads as a label. `border-radius: 0` overrides the badge family
+     *      baseline above.
+     *   2. Bordered, always. The border is what keeps the pale tones
+     *      (yellow, orange) visible on a white surface, and what makes
+     *      every tone survive forced-colours mode.
+     *   3. Bold at 0.875rem. Small text needs the weight back.
+     *
+     * Exposed as `data-tone` rather than modifier classes, per Lily's
+     * headless rule that `data-*` carries state for consumer CSS:
+     *
+     *   <span class="tag" data-tone="purple">Dermatoleg</span>
+     *
+     * The default (no attribute) is DHCW navy #183154 with white text.
+     *
+     * A tone is never the message. WCAG 1.4.1 means the tag's text has to
+     * say what the tag means — "Urgent", not a red chip the reader is
+     * expected to decode.
+     * -------------------------------------------------------------------- */
+    :where(.tag) {
+        border-radius: 0;
+        padding: 0.25rem 0.5rem;
+        font-size: 0.875rem;
+        font-weight: 700;
+        line-height: 1;
+        /* #183154 — DHCW's tag navy. A touch deeper than --color-primary;
+           kept literal because it is a palette entry, not a derived value. */
+        background-color: oklch(31% 0.07 257);
+        color: oklch(100% 0 0);
+        border: var(--border) solid oklch(31% 0.07 257);
+    }
+
+    /* The ten named tones. Each line is DHCW's exact {fill, border, text}
+       triplet; border and text share a value throughout, which is what
+       gives the family its consistent read. Contrast noted per tone. */
+
+    /* #FFFFFF / #212B32 — 14.4:1 */
+    :where(.tag[data-tone="white"]) {
+        background-color: oklch(100% 0 0);
+        border-color: oklch(28% 0.019 239);
+        color: oklch(28% 0.019 239);
+    }
+    /* #DBE0E3 / #354550 — 7.5:1 */
+    :where(.tag[data-tone="grey"]) {
+        background-color: oklch(90% 0.007 234);
+        border-color: oklch(38% 0.028 238);
+        color: oklch(38% 0.028 238);
+    }
+    /* #CCE5D8 / #004C23 — 7.7:1 */
+    :where(.tag[data-tone="green"]) {
+        background-color: oklch(90% 0.032 163);
+        border-color: oklch(36% 0.096 152);
+        color: oklch(36% 0.096 152);
+    }
+    /* #CCEDEB / #00524D — 7.3:1. The surviving trace of the NHS Aqua Green
+       this theme used to build its whole accent story on. */
+    :where(.tag[data-tone="aqua-green"]) {
+        background-color: oklch(92% 0.035 192);
+        border-color: oklch(40% 0.069 188);
+        color: oklch(40% 0.069 188);
+    }
+    /* #D1D7DF / #132641 — 10.5:1 */
+    :where(.tag[data-tone="blue"]) {
+        background-color: oklch(88% 0.013 256);
+        border-color: oklch(27% 0.057 257);
+        color: oklch(27% 0.057 257);
+    }
+    /* #D6CCE3 / #240050 — 11.4:1 */
+    :where(.tag[data-tone="purple"]) {
+        background-color: oklch(86% 0.033 305);
+        border-color: oklch(23% 0.126 294);
+        color: oklch(23% 0.126 294);
+    }
+    /* #EFD3E3 / #57133A — 9.7:1 */
+    :where(.tag[data-tone="pink"]) {
+        background-color: oklch(89% 0.037 343);
+        border-color: oklch(32% 0.107 350);
+        color: oklch(32% 0.107 350);
+    }
+    /* #F7D4D1 / #6B140E — 8.8:1 */
+    :where(.tag[data-tone="red"]) {
+        background-color: oklch(90% 0.04 24);
+        border-color: oklch(35% 0.122 29);
+        color: oklch(35% 0.122 29);
+    }
+    /* #FFDC8E / #4D3708 — 8.5:1 */
+    :where(.tag[data-tone="orange"]) {
+        background-color: oklch(91% 0.104 86);
+        border-color: oklch(35% 0.067 81);
+        color: oklch(35% 0.067 81);
+    }
+    /* #FFF59D / #4D4712 — 8.5:1 */
+    :where(.tag[data-tone="yellow"]) {
+        background-color: oklch(96% 0.109 103);
+        border-color: oklch(39% 0.071 103);
+        color: oklch(39% 0.071 103);
+    }
+
+    /* Tag group — DHCW does not ship one, but a catalogue that has .tag
+       and .tag-group should not leave the second unstyled. Wrap and gap
+       so a row of specialties reflows instead of overflowing. */
+    :where(.tag-group) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.25rem;
+    }
+    /* AI label — marks AI-generated content. Uses --lily-accent-deep
+       (#554318, 9.5:1 with white) rather than the bright --color-accent
+       gold, which at 3.4:1 cannot legally carry a label this small. This is
+       the substitution the gold caveat in the file header describes.
+
+       A patient reading a symptom-checker answer needs to know it came from
+       a machine, so this label must be legible, not tasteful. */
+    :where(.ai-label) {
+        background-color: var(--lily-accent-deep);
+        color: oklch(100% 0 0);
+    }
+    /* Status tags — pre-baked colour for each status. */
+    :where(.status-tag[data-status="success"]) {
+        background-color: var(--color-success);
+        color: var(--color-success-content);
+    }
+    :where(.status-tag[data-status="warning"]) {
+        background-color: var(--color-warning);
+        color: var(--color-warning-content);
+    }
+    :where(.status-tag[data-status="error"]) {
+        background-color: var(--color-error);
+        color: var(--color-error-content);
+    }
+    :where(.status-tag[data-status="info"]) {
+        background-color: var(--color-info);
+        color: var(--color-info-content);
+    }
+
+    /* Status light — a coloured dot followed by a label. */
+    :where(.status-light) {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.375rem;
+    }
+    :where(.status-light)::before {
+        content: "";
+        display: inline-block;
+        width: 0.625rem;
+        height: 0.625rem;
+        border-radius: 50%;
+        background-color: var(--color-neutral);
+    }
+    :where(.status-light[data-status="success"])::before {
+        background-color: var(--color-success);
+    }
+    :where(.status-light[data-status="warning"])::before {
+        background-color: var(--color-warning);
+    }
+    :where(.status-light[data-status="error"])::before {
+        background-color: var(--color-error);
+    }
+    :where(.status-light[data-status="info"])::before {
+        background-color: var(--color-info);
+    }
+
+    /* ==========================================================================
+     * Pickers, ratings, theme
+     * ====================================================================== */
+
+    /* Picker baseline — inline row of selectable chips/buttons. */
+    :where(
+        .color-picker,
+        .five-face-rating-picker,
+        .five-star-rating-picker,
+        .net-promoter-score-picker,
+        .red-amber-green-picker,
+        .red-orange-yellow-green-blue-picker,
+        .emoji-character-picker,
+        .calendar-range-picker
+    ) {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.25rem;
+        padding: 0.25rem;
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+    }
+    /* Picker buttons — small alt-surface chips. */
+    :where(
+        .color-picker-button,
+        .five-face-rating-picker-button,
+        .five-star-rating-picker-button,
+        .net-promoter-score-picker-button,
+        .red-amber-green-picker-button,
+        .red-orange-yellow-green-blue-picker-button
+    ) {
+        background-color: var(--lily-surface-alt);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border);
+        min-width: 2rem;
+        min-height: 2rem;
+        padding: 0.25rem 0.5rem;
+    }
+    /* Color picker — circular swatch. */
+    :where(.color-picker-button) {
+        width: 1.75rem;
+        height: 1.75rem;
+        padding: 0;
+        border-radius: 50%;
+    }
+    /* Filled stars — warning (gold) colour for both viewer and pressed state. */
+    :where(
+        .five-star-rating-view,
+        .five-star-rating-picker-button[aria-pressed="true"]
+    ) {
+        color: var(--color-warning);
+    }
+    /* RAG (red/amber/green) — semantic colour per status. */
+    :where(
+        .red-amber-green-view[data-status="red"],
+        .red-amber-green-picker-button[data-status="red"]
+    ) {
+        background-color: var(--color-error);
+        color: var(--color-error-content);
+    }
+    :where(
+        .red-amber-green-view[data-status="amber"],
+        .red-amber-green-picker-button[data-status="amber"]
+    ) {
+        background-color: var(--color-warning);
+        color: var(--color-warning-content);
+    }
+    :where(
+        .red-amber-green-view[data-status="green"],
+        .red-amber-green-picker-button[data-status="green"]
+    ) {
+        background-color: var(--color-success);
+        color: var(--color-success-content);
+    }
+
+    /* Native <select> styling — drop the UA chrome and draw our own caret
+       via two stacked linear-gradients. */
+    :where(select.theme-select, .select, .select-with-extras, .tree-select) {
+        width: 100%;
+        min-height: 2.5rem;
+        padding: 0.5rem 2rem 0.5rem 0.75rem; /* extra right padding for caret */
+        font: inherit;
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-md);
+        appearance: none;
+        background-image:
+            linear-gradient(45deg, transparent 50%, var(--lily-text) 50%),
+            linear-gradient(135deg, var(--lily-text) 50%, transparent 50%);
+        background-position:
+            calc(100% - 1.1rem) 1.1rem,
+            calc(100% - 0.7rem) 1.1rem;
+        background-size: 0.4rem 0.4rem;
+        background-repeat: no-repeat;
+    }
+    /* Options inherit the select colours so the dropdown matches the input. */
+    :where(.option, .theme-select-option) {
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+    }
+
+    /* The four *-picker helpers are an icon button that opens a popup,
+       so they are styled as a popup rather than a form field. No :has()
+       guard is needed any more: before the July 2026 rename these shared
+       the `.theme-select` hook with the catalog theme-select component
+       and had to be told apart. Distinct names, no collision. */
+    :where(
+        .theme-picker,
+        .locale-picker,
+        .text-size-picker,
+        .share-picker,
+        .date-time-picker
+    ) {
+        position: relative;
+        display: inline-block;
+    }
+
+    :where(
+        .theme-picker-button,
+        .locale-picker-button,
+        .text-size-picker-button,
+        .share-picker-button,
+        .date-time-picker-button
+    ) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 2.5rem;
+        min-height: 2.5rem;
+        padding: var(--lily-space-xs);
+        font: inherit;
+        line-height: 1;
+        color: var(--lily-text);
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-md);
+        cursor: pointer;
+    }
+
+    /* The icon is decorative (aria-hidden); the button's aria-label
+       carries the accessible name. Reversed 2026-09-16: five of the
+       six picker icons (theme, locale, text-size, motion, share) are
+       now bundled SVGs, not Unicode glyphs. Each ships its own
+       explicit width="1.05rem" height="1.05rem" on the <svg> element,
+       so unlike a font-dependent character glyph -- where different
+       glyphs ink different fractions of their em box, needing a
+       per-glyph optical correction -- every icon in this family
+       already inks the same visual size by construction (the icon's
+       own author controls its viewBox). This rule only supplies flex
+       centering; override the icon's own width/height if you need a
+       different size. */
+    :where(
+        .theme-picker-icon,
+        .locale-picker-icon,
+        .text-size-picker-icon,
+        .motion-picker-icon,
+        .share-picker-icon
+    ) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    /* date-time-picker's calendar icon is still a Unicode glyph
+       (U+1F4C5 + U+FE0E) -- out of scope for the 2026-09-16 SVG-icon
+       reversal, since date-time-picker was not part of that change
+       (see AGENTS/helpers.md) -- so it keeps the font-size-based
+       sizing the other five used to share.
+
+       U+1F4C5 calendar inks 1.000 of its em box (max extent) against
+       U+25D1 half-circle's reference 0.850 (the pre-reversal
+       baseline, still valid here since this is the same glyph
+       measurement, unchanged): 0.850/1.000 ≈ 0.85, shipped as 0.845.
+       A colour-emoji font paints every one of its glyphs into one
+       identical em square, so globe, calendar, rocket and heart all
+       measure the same ink box -- any future emoji helper icon can
+       reuse this factor without re-measuring.
+
+       (Measuring also confirms the U+FE0E text-presentation selector is
+       ignored here: the bare and VS-15 forms are metrically identical. It
+       stays in the source as a hint to the platforms that do honour it.) */
+    :where(.date-time-picker-icon) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        font-size: calc(1.25em * var(--lily-picker-icon-scale, 1));
+        line-height: 1;
+        --lily-picker-icon-scale: 0.845;
+    }
+
+    /* The share list holds real links and a button rather than options,
+       so its items get the same padding without the option selectors. */
+    :where(.share-picker-list) > :where(.share-picker-list-item) {
+        list-style: none;
+    }
+
+    :where(.share-picker-target, .share-picker-copy) {
+        display: block;
+        width: 100%;
+        padding: var(--lily-space-xs) var(--lily-space-sm);
+        font: inherit;
+        text-align: start;
+        color: var(--lily-text);
+        background: none;
+        border: 0;
+        border-radius: var(--lily-radius-sm);
+        cursor: pointer;
+    }
+
+    :where(.share-picker-target:hover, .share-picker-copy:hover) {
+        background-color: var(--lily-surface-alt);
+    }
+
+    /* Copy feedback. Never display:none this — that silences the live
+       region for screen-reader users. */
+    :where(.share-picker-status) {
+        margin: var(--lily-space-xs) 0 0;
+        font-size: 0.875em;
+        color: var(--lily-text-muted);
+    }
+
+    /* The status paragraph is always rendered so the aria-live region
+       exists before the first announcement (see above); empty, it still
+       generates a line box and carries the margin-top set above, both of
+       which push the button row out of alignment in a flex layout like
+       picker-bar (found independently by two downstream consumers, each
+       patching around it locally). :empty here matches a Svelte-rendered
+       {status} of "" (a zero-length text node doesn't count as a child
+       per the CSS spec), so this only applies while there is nothing to
+       announce, and normal spacing returns the moment status has text. */
+    :where(.share-picker-status:empty) {
+        margin: 0;
+        line-height: 0;
+    }
+
+    :where(
+        .theme-picker-list,
+        .locale-picker-list,
+        .text-size-picker-list,
+        .share-picker-list
+    ) {
+        position: absolute;
+        z-index: 10;
+        inset-inline-start: 0;
+        min-width: max-content;
+        max-height: 60vh;
+        margin-block-start: var(--lily-space-xs);
+        padding: var(--lily-space-xs);
+        overflow-y: auto;
+        list-style: none;
+        color: var(--lily-text);
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-md);
+        box-shadow: var(--lily-shadow-md);
+    }
+
+    /* Explicit, because the rules above would otherwise beat the UA
+       stylesheet's [hidden] { display: none }. */
+    :where(
+        .theme-picker-list,
+        .locale-picker-list,
+        .text-size-picker-list,
+        .share-picker-list
+    )[hidden] {
+        display: none;
+    }
+
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+        > :where(
+            .theme-picker-option,
+            .locale-picker-option,
+            .text-size-picker-option
+        ) {
+        padding: var(--lily-space-xs) var(--lily-space-sm);
+        border-radius: var(--lily-radius-sm);
+        cursor: pointer;
+    }
+
+    /* data-active is the keyboard cursor (aria-activedescendant); focus
+       stays on the listbox, so this is the only visible cue for it. */
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+        > :where([data-active]) {
+        background-color: var(--lily-surface-alt);
+        outline: var(--lily-focus-ring);
+        outline-offset: -2px;
+    }
+
+    /* aria-selected marks the applied theme/locale, which is not the
+       same thing as the keyboard cursor. Both can be visible at once. */
+    :where(.theme-picker-list, .locale-picker-list, .text-size-picker-list)
+        > :where([aria-selected="true"]) {
+        font-weight: 600;
+        background-color: var(--lily-surface-sunken);
+    }
+
+    /* Locale options inherit the select colours, same as theme options. */
+    :where(.locale-picker-option) {
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+    }
+
+    /* ----------------------------------------------------------------------
+     * date-time-picker
+     *
+     * The one helper that is a form control rather than a page-header
+     * control, so it is the only one with a text field beside its trigger
+     * and a dialog rather than a listbox. The field itself needs no rules
+     * here: `.date-time-picker-input` already matches the generic
+     * [class$="-input"] baseline further up.
+     * -------------------------------------------------------------------- */
+
+    :where(.date-time-picker-field) {
+        display: flex;
+        align-items: center;
+        gap: var(--lily-space-xs);
+    }
+
+    :where(.date-time-picker-dialog) {
+        position: absolute;
+        z-index: 10;
+        inset-inline-start: 0;
+        margin-block-start: var(--lily-space-xs);
+        padding: var(--lily-space-sm);
+        color: var(--lily-text);
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-md);
+        box-shadow: var(--lily-shadow-md);
+    }
+
+    /* Explicit, because the rule above would otherwise beat the UA
+       stylesheet's [hidden] { display: none } — the same trap the
+       listbox popups have to step around. */
+    :where(.date-time-picker-dialog)[hidden] {
+        display: none;
+    }
+
+    :where(.date-time-picker-header) {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--lily-space-xs);
+        margin-block-end: var(--lily-space-xs);
+    }
+
+    /* The month/year heading is a live region, so it must keep its box
+       even while empty — never display:none it. */
+    :where(.date-time-picker-period) {
+        flex: 1;
+        font-weight: 600;
+        text-align: center;
+    }
+
+    /* The four navigation buttons and the footer/shortcut buttons do not
+       end in `-button`, so the generic button family never reaches them. */
+    :where(
+        .date-time-picker-previous-year,
+        .date-time-picker-previous-month,
+        .date-time-picker-previous-week,
+        .date-time-picker-previous-day,
+        .date-time-picker-next-day,
+        .date-time-picker-next-week,
+        .date-time-picker-next-month,
+        .date-time-picker-next-year,
+        .date-time-picker-shortcut,
+        .date-time-picker-clear,
+        .date-time-picker-cancel,
+        .date-time-picker-confirm
+    ) {
+        padding: var(--lily-space-xs) var(--lily-space-sm);
+        font: inherit;
+        color: var(--lily-text);
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-sm);
+        cursor: pointer;
+    }
+
+    :where(
+        .date-time-picker-previous-year:hover,
+        .date-time-picker-previous-month:hover,
+        .date-time-picker-previous-week:hover,
+        .date-time-picker-previous-day:hover,
+        .date-time-picker-next-day:hover,
+        .date-time-picker-next-week:hover,
+        .date-time-picker-next-month:hover,
+        .date-time-picker-next-year:hover,
+        .date-time-picker-shortcut:hover,
+        .date-time-picker-clear:hover,
+        .date-time-picker-cancel:hover,
+        .date-time-picker-confirm:hover
+    ) {
+        background-color: var(--lily-surface-alt);
+    }
+
+    /* The commit action is the primary one on the dialog. */
+    :where(.date-time-picker-confirm) {
+        color: var(--color-primary-content);
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+
+    :where(.date-time-picker-calendar) {
+        border-collapse: collapse;
+        table-layout: fixed;
+    }
+
+    :where(.date-time-picker-weekday, .date-time-picker-week-heading) {
+        padding: var(--lily-space-xs);
+        font-size: 0.8125em;
+        font-weight: 600;
+        color: var(--lily-text-muted);
+    }
+
+    /* Week numbers are reference data, not navigation: muted, and set in
+       tabular figures so the column does not shimmer as months change. */
+    :where(.date-time-picker-week) {
+        padding-inline-end: var(--lily-space-xs);
+        font-size: 0.8125em;
+        font-weight: 400;
+        font-variant-numeric: tabular-nums;
+        color: var(--lily-text-muted);
+        text-align: end;
+    }
+
+    :where(.date-time-picker-day) {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* 2rem is a compromise: WCAG 2.5.8 (AA) wants 24px, 2.5.5 (AAA)
+           wants 44px, and seven 44px columns do not fit a 320px viewport
+           alongside dialog chrome. Consumers targeting AAA should enlarge
+           these and let the dialog go full-width on small screens. */
+        min-width: 2rem;
+        min-height: 2rem;
+        padding: 0;
+        font: inherit;
+        font-variant-numeric: tabular-nums;
+        color: var(--lily-text);
+        background: none;
+        border: var(--border) solid transparent;
+        border-radius: var(--lily-radius-sm);
+        cursor: pointer;
+    }
+
+    :where(.date-time-picker-day:hover:not([data-disabled])) {
+        background-color: var(--lily-surface-alt);
+    }
+
+    /* Adjacent-month days stay legible rather than being hidden: they are
+       real, selectable dates, and blanking them makes the grid harder to
+       scan across a month boundary. */
+    :where(.date-time-picker-day[data-outside]) {
+        color: var(--lily-text-muted);
+    }
+
+    /* Today is marked with a border, the selection with a fill. Two
+       different channels, so a day that is both still reads as both. */
+    :where(.date-time-picker-day[data-today]) {
+        border-color: var(--lily-border-strong);
+        font-weight: 600;
+    }
+
+    :where(.date-time-picker-day[data-selected]) {
+        color: var(--color-primary-content);
+        background-color: var(--color-primary);
+        border-color: var(--color-primary);
+    }
+
+    :where(.date-time-picker-day[data-disabled]) {
+        color: var(--lily-text-muted);
+        cursor: not-allowed;
+        /* Struck through as well as dimmed: "unavailable" must not rest on
+           contrast alone (WCAG 1.4.1). */
+        text-decoration: line-through;
+    }
+
+    :where(.date-time-picker-time) {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--lily-space-xs);
+        margin-block-start: var(--lily-space-sm);
+    }
+
+    :where(.date-time-picker-time-label) {
+        font-size: 0.8125em;
+        color: var(--lily-text-muted);
+    }
+
+    :where(.date-time-picker-time-zone) {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--lily-space-xs);
+        margin-block-end: var(--lily-space-sm);
+    }
+
+    :where(.date-time-picker-time-zone-label) {
+        font-size: 0.8125em;
+        color: var(--lily-text-muted);
+    }
+
+    :where(
+        .date-time-picker-hour,
+        .date-time-picker-minute,
+        .date-time-picker-meridiem,
+        .date-time-picker-time-zone-select
+    ) {
+        padding: var(--lily-space-xs);
+        font: inherit;
+        color: var(--lily-text);
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-sm);
+    }
+
+    :where(.date-time-picker-shortcuts) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--lily-space-xs);
+        margin-block-start: var(--lily-space-sm);
+    }
+
+    :where(.date-time-picker-footer) {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--lily-space-xs);
+        margin-block-start: var(--lily-space-sm);
+    }
+
+    /* Combobox / listbox / autosuggest — non-native variant of <select>. */
+    :where(.combobox, .listbox, .autosuggest) {
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border-strong);
+        border-radius: var(--lily-radius-md);
+    }
+
+    /* ==========================================================================
+     * Editorial typography
+     * --------------------------------------------------------------------------
+     * Headlines, body text, byline, blockquote, code — the long-form reading
+     * primitives. Headlines use clamp() so they shrink on narrow viewports
+     * without media queries.
+     * ====================================================================== */
+
+    :where(.headline, .hero-headline, .section-heading) {
+        color: var(--lily-text);
+        font-family: var(--lily-font-body);
+        font-weight: 700;
+        line-height: 1.15;
+        margin: 0 0 0.5rem 0;
+    }
+    :where(.headline) {
+        font-size: clamp(1.5rem, 3vw, 2.25rem);
+    }
+    :where(.hero-headline) {
+        font-size: clamp(2rem, 5vw, 3.5rem);
+    }
+    :where(.section-heading) {
+        font-size: clamp(1.25rem, 2vw, 1.75rem);
+    }
+    /* Body text — 1.6 line-height (sweet spot for reading). */
+    :where(.body-text) {
+        line-height: 1.6;
+        color: var(--lily-text);
+    }
+    /* Byline — author / date line under a headline. */
+    :where(.byline) {
+        color: var(--lily-text-muted);
+        font-size: 0.875rem;
+    }
+    /* Blockquote — primary-coloured rail + italic body. */
+    :where(.blockquote) {
+        margin: 1rem 0;
+        padding: 0.5rem 1rem;
+        border-inline-start: 0.25rem solid var(--color-primary);
+        color: var(--lily-text);
+        font-style: italic;
+    }
+    /* End-notes / related content — top-bordered section at the foot. */
+    :where(.end-notes, .related-content) {
+        margin-top: 2rem;
+        padding-top: 1rem;
+        border-top: var(--border) solid var(--lily-border);
+    }
+    /* Caption / footnote / citation — small muted text. */
+    :where(.caption, .footnote, .citation) {
+        font-size: 0.875rem;
+        color: var(--lily-text-muted);
+    }
+    /* KBD — keyboard key glyph; thicker bottom border simulates the keytop. */
+    :where(.kbd) {
+        display: inline-block;
+        padding: 0.125rem 0.4rem;
+        font-family: var(--lily-font-mono);
+        font-size: 0.85em;
+        background-color: var(--lily-surface-alt);
+        border: var(--border) solid var(--lily-border-strong);
+        border-bottom-width: 2px;
+        border-radius: var(--lily-radius-sm);
+    }
+    /* Inline code — slight background tint + monospaced font. */
+    :where(.code) {
+        font-family: var(--lily-font-mono);
+        padding: 0.1em 0.3em;
+        background-color: var(--lily-surface-alt);
+        border-radius: var(--lily-radius-sm);
+        font-size: 0.9em;
+    }
+    /* Code block — full-width block with horizontal scroll. */
+    :where(.code-block) {
+        display: block;
+        padding: 1rem;
+        background-color: var(--color-neutral);
+        color: var(--color-neutral-content);
+        font-family: var(--lily-font-mono);
+        border-radius: var(--lily-radius-md);
+        overflow-x: auto;
+        white-space: pre;
+    }
+    /* ----------------------------------------------------------------------
+     * Inset text — the DHCW gold rail
+     *
+     * This is where the Wales accent actually lives. DHCW's inset-text is a
+     * 0.5rem gold rail with NO background fill, on a 40rem measure. The
+     * absent fill is the interesting part: GOV.UK and NHS England both tint
+     * the panel, DHCW does not, and the result is that an inset paragraph
+     * still reads as body copy that has been marked rather than as a box
+     * that has been inserted. On a page with three of them — common in
+     * health content — the DHCW version stays readable where a tinted one
+     * turns the page into stripes.
+     *
+     * Gold is used here exactly as DHCW uses it: as a rail, never behind
+     * text. See the gold caveat in the file header.
+     *
+     * Colour variants follow DHCW's five (`--navy --blue --grey --red
+     * --yellow`), exposed as `data-tone` per Lily's data-* convention.
+     * -------------------------------------------------------------------- */
+    :where(.inset-text) {
+        margin: 0 0 2rem;
+        padding: 1.5rem 1.5rem 1.5rem 2rem;
+        border-inline-start: 0.5rem solid var(--color-accent);
+        background-color: transparent;
+        max-width: 40rem;
+    }
+    :where(.inset-text > :last-child) {
+        margin-bottom: 0;
+    }
+    :where(.inset-text[data-tone="navy"]) {
+        border-inline-start-color: var(--color-primary);
+    }
+    :where(.inset-text[data-tone="blue"]) {
+        border-inline-start-color: var(--color-secondary);
+    }
+    :where(.inset-text[data-tone="grey"]) {
+        border-inline-start-color: var(--color-neutral);
+    }
+    :where(.inset-text[data-tone="red"]) {
+        border-inline-start-color: var(--color-error);
+    }
+    :where(.inset-text[data-tone="yellow"]) {
+        border-inline-start-color: var(--color-warning);
+    }
+    /* Generic character — monospaced single-glyph display. */
+    :where(.character) {
+        font-family: var(--lily-font-mono);
+    }
+    /* Clamp-text — truncate to N lines (controlled by --lily-clamp-lines). */
+    :where(.clamp-text) {
+        display: -webkit-box;
+        -webkit-line-clamp: var(--lily-clamp-lines, 3);
+        line-clamp: var(--lily-clamp-lines, 3);
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+    }
+    /* Screen-reader-only — visually hidden but available to AT. The
+       classic clip-rect pattern (works in every screen reader). */
+    :where(.screen-reader-span) {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+
+    /* ==========================================================================
+     * Hero, figure, photo, media
+     * ====================================================================== */
+
+    /* Hero block — primary-filled banner with centred content. clamp() pad
+       scales vertically across viewport sizes. */
+    :where(.hero) {
+        display: block;
+        padding: clamp(2rem, 5vw, 4rem) 1rem;
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+        border-radius: var(--lily-radius-lg);
+        text-align: center;
+    }
+    /* Figure — centred block with vertical margin. */
+    :where(.figure) {
+        margin: 1rem 0;
+        text-align: center;
+    }
+    /* Feature photo — responsive lead image. */
+    :where(.feature-photo) {
+        display: block;
+        width: 100%;
+        height: auto;
+        border-radius: var(--lily-radius-md);
+    }
+    /* Photo pack — responsive grid of thumbnails. */
+    :where(.photo-pack) {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
+        gap: 0.5rem;
+    }
+    /* Generic image — responsive block image. */
+    :where(.image) {
+        max-width: 100%;
+        height: auto;
+        display: block;
+    }
+    /* QR / barcode / signature — frame them as a labelled tile. */
+    :where(.qr-code-image, .barcode-image, .signature-pad) {
+        display: inline-block;
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+        padding: 0.5rem;
+    }
+    /* Signature pad — drawable surface; crosshair cursor signals input. */
+    :where(.signature-pad) {
+        min-height: 8rem;
+        cursor: crosshair;
+    }
+    /* Video player — responsive black-letterboxed frame. */
+    :where(.video-player) {
+        display: block;
+        width: 100%;
+        max-width: 100%;
+        border-radius: var(--lily-radius-md);
+        /* Video chrome is black in every theme; pair the text colour with
+           it here rather than inheriting the theme's (possibly dark)
+           content colour onto a black surface. */
+        background-color: black;
+        color: white;
+    }
+
+    /* ==========================================================================
+     * Mockups & pictograms
+     * --------------------------------------------------------------------------
+     * Device frames for screenshots / illustrations — browser, phone, tablet,
+     * laptop, watch, shell window. All share the same rounded-outline frame
+     * baseline; specific frames override the radius / border-width.
+     * ====================================================================== */
+
+    :where(
+        .mockup-browser,
+        .mockup-window,
+        .mockup-shell,
+        .mockup-phone-portrait,
+        .mockup-phone-landscape,
+        .mockup-tablet-portrait,
+        .mockup-tablet-landscape,
+        .mockup-laptop,
+        .mockup-watch
+    ) {
+        display: block;
+        background-color: var(--lily-surface);
+        border: 2px solid var(--color-neutral);
+        border-radius: var(--lily-radius-lg);
+        overflow: hidden;
+        box-shadow: var(--lily-shadow-md);
+    }
+    /* Mockup shell — terminal window; dark neutral fill + mono font. */
+    :where(.mockup-shell) {
+        background-color: var(--color-neutral);
+        color: var(--color-neutral-content);
+        font-family: var(--lily-font-mono);
+        padding: 1rem;
+    }
+    /* Phones — heavier bezel (6px) and more rounded corners. */
+    :where(.mockup-phone-portrait, .mockup-phone-landscape) {
+        border-radius: 1.5rem;
+        border-width: 6px;
+    }
+    /* Smartwatch — chunky bezel (4px) and pill radius. */
+    :where(.mockup-watch) {
+        border-radius: 1rem;
+        border-width: 4px;
+    }
+    /* Pictogram — stacked icon + caption, centred. */
+    :where(.pictogram) {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 0.5rem;
+        padding: 1rem;
+        text-align: center;
+    }
+
+    /* ==========================================================================
+     * Charts (containers only — content supplied by consumer)
+     * --------------------------------------------------------------------------
+     * Headless: Lily provides the frame + a 6-colour palette as custom
+     * properties. The consumer's chart library (D3, Chart.js, ECharts, etc.)
+     * reads `var(--lily-chart-color-1..6)` for its series colours.
+     * ====================================================================== */
+
+    :where(
+        .area-chart,
+        .bar-chart,
+        .column-chart,
+        .line-chart,
+        .scatter-chart,
+        .sparkline,
+        .tile-map,
+        .graphic-block
+    ) {
+        display: block;
+        background-color: var(--lily-surface);
+        border-radius: var(--lily-radius-md);
+        padding: 1rem;
+        color: var(--lily-text);
+        /* Six-colour palette — the consumer's chart library picks these up. */
+        --lily-chart-color-1: var(--color-primary);
+        --lily-chart-color-2: var(--color-secondary);
+        --lily-chart-color-3: var(--color-accent);
+        --lily-chart-color-4: var(--color-info);
+        --lily-chart-color-5: var(--color-success);
+        --lily-chart-color-6: var(--color-warning);
+    }
+    /* Sparkline — small inline chart; no padding. */
+    :where(.sparkline) {
+        padding: 0;
+        height: 1.5rem;
+        width: 6rem;
+        display: inline-block;
+    }
+    /* Graphic block — bordered chart container. */
+    :where(.graphic-block) {
+        border: var(--border) solid var(--lily-border);
+    }
+
+    /* ==========================================================================
+     * Scrolling, splits, resize
+     * ====================================================================== */
+
+    /* Scroll area — capped at 20rem, auto-overflow. */
+    :where(.scroll-area) {
+        overflow: auto;
+        max-height: 20rem;
+    }
+    /* Horizontal scroller — flex row that overflows on x. */
+    :where(.horizontal-scroller) {
+        overflow-x: auto;
+        display: flex;
+        gap: 0.5rem;
+    }
+    /* Scroller (Reuters-pattern scrollytelling) — positioning anchor. */
+    :where(.scroller, .scroller-base, .scroller-video) {
+        position: relative;
+        display: block;
+    }
+    /* Custom scrollbar track. */
+    :where(.scroll-bar) {
+        background-color: var(--lily-surface-sunken);
+        border-radius: 999px;
+        height: 0.5rem;
+    }
+    /* Affix — stick to the top of the viewport on scroll. */
+    :where(.affix) {
+        position: sticky;
+        inset-block-start: 0;
+    }
+    /* Visible — IntersectionObserver target; baseline is a visible block. */
+    :where(.visible) {
+        display: block;
+    }
+    /* Resizable — native CSS resize handle (corner). */
+    :where(.resizable) {
+        resize: both;
+        overflow: auto;
+    }
+    /* Split-view + splitter — two-pane horizontal layout. */
+    :where(.split-view) {
+        display: flex;
+        align-items: stretch;
+        gap: 0;
+    }
+    :where(.splitter) {
+        flex: 0 0 0.375rem;
+        background-color: var(--lily-border);
+        cursor: col-resize;
+    }
+
+    /* ==========================================================================
+     * Misc unique components
+     * ====================================================================== */
+
+    /* Statistic — stacked label + value; value is large and primary-coloured. */
+    :where(.statistic) {
+        display: inline-flex;
+        flex-direction: column;
+        gap: 0.25rem;
+    }
+    :where(.statistic > [data-part="value"]) {
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--color-primary);
+    }
+    /* Watermark — diagonal repeating-line pattern at 8% opacity behind content. */
+    :where(.watermark) {
+        position: absolute;
+        inset: 0;
+        pointer-events: none;
+        opacity: 0.08;
+        background: repeating-linear-gradient(
+            -45deg,
+            var(--lily-text) 0 1px,
+            transparent 1px 8rem
+        );
+    }
+    /* Beach ball (macOS "waiting" indicator) — six-colour conic wheel. */
+    :where(.beach-ball) {
+        display: inline-block;
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        background: conic-gradient(
+            var(--color-error),
+            var(--color-warning),
+            var(--color-success),
+            var(--color-info),
+            var(--color-primary),
+            var(--color-error)
+        );
+        animation: lily-spin 2s linear infinite;
+    }
+    /* Diff — side-by-side two-column comparison. */
+    :where(.diff) {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 0.5rem;
+    }
+    /* Addressograph box — paper-form ID label (NHS / hospital pattern). */
+    :where(.addressograph-box) {
+        display: block;
+        padding: 0.75rem 1rem;
+        background-color: var(--lily-surface-alt);
+        border: 2px solid var(--lily-text);
+        font-family: var(--lily-font-mono);
+        line-height: 1.4;
+    }
+    /* Government identifier — dark chrome bar containing an ID number. */
+    :where(.government-identifier) {
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
+        padding: 0.75rem 1rem;
+        background-color: var(--color-neutral);
+        color: var(--color-neutral-content);
+    }
+    /* Share / signup / CTA panels — alt-surface promo blocks. */
+    :where(.share-page, .newsletter-signup, .call-to-action) {
+        padding: 1rem;
+        background-color: var(--lily-surface-alt);
+        border-radius: var(--lily-radius-md);
+    }
+    /* CTA — override with primary fill so it reads as the page action. */
+    :where(.call-to-action) {
+        background-color: var(--color-primary);
+        color: var(--color-primary-content);
+    }
+    /* Links inside the call-to-action inherit its content colour —
+       otherwise the UA default link blue lands on the primary fill. */
+    :where(.call-to-action) :where(a) {
+        color: inherit;
+    }
+    /* Expander / collapsible — boxed disclosure controls. */
+    :where(.expander, .collapsible) {
+        display: block;
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+        padding: 0.5rem 1rem;
+    }
+    :where(.expander > summary, .collapsible > summary) {
+        cursor: pointer;
+        font-weight: 600;
+        padding: 0.25rem 0;
+    }
+
+    /* ----------------------------------------------------------------------
+     * Details — DHCW's unboxed disclosure
+     *
+     * Split out from the expander/collapsible family because DHCW's details
+     * is not a box. There is no border and no padding around the closed
+     * state: it is a blue underlined summary line with a triangle, and the
+     * revealed content hangs off a grey left rail.
+     *
+     * That is the right shape for what details is used for on a health
+     * page — "What if I miss a dose?", "Who can I bring with me?" — where a
+     * bordered box would imply the answer is an aside rather than part of
+     * the prose. It also stacks: five bordered disclosures in a row look
+     * like a broken accordion; five underlined lines look like a list of
+     * questions, which is what they are.
+     *
+     * The marker is rotated with clip-path rather than swapped for a
+     * different glyph, so it inherits `currentColor` and stays in sync with
+     * the summary's hover and focus states for free.
+     * -------------------------------------------------------------------- */
+    :where(.details) {
+        display: block;
+        margin-bottom: 1.5rem;
+        border: none;
+        border-radius: 0;
+        padding: 0;
+        color: var(--lily-text);
+    }
+    :where(.details > summary) {
+        position: relative;
+        display: inline-block;
+        padding: 0;
+        padding-inline-start: 1.5rem;
+        color: var(--color-secondary);
+        font-weight: 400;
+        text-decoration: underline;
+        text-underline-offset: 0.12em;
+        cursor: pointer;
+        list-style: none;
+    }
+    /* Hide the native disclosure triangle in every engine. */
+    :where(.details > summary)::-webkit-details-marker {
+        display: none;
+    }
+    :where(.details > summary)::marker {
+        content: "";
+    }
+    :where(.details > summary):hover {
+        color: var(--lily-link-hover);
+    }
+    /* The closed marker — a right-pointing triangle in currentColor. */
+    :where(.details > summary)::before {
+        content: "";
+        position: absolute;
+        inset-inline-start: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        width: 0;
+        height: 0;
+        border-style: solid;
+        border-color: transparent;
+        border-width: 7px 0 7px 12px;
+        border-inline-start-color: currentColor;
+    }
+    /* Open — the same triangle rotated to point down. */
+    :where(.details[open] > summary)::before {
+        border-width: 12px 7px 0 7px;
+        border-inline-start-color: transparent;
+        border-top-color: currentColor;
+    }
+    /* Revealed content — grey rail, indented. Everything after the
+       summary, so it works whatever the consumer puts in the slot. */
+    :where(.details > summary) ~ * {
+        margin-inline-start: 0;
+    }
+    :where(.details[open] > summary) ~ :first-of-type {
+        margin-top: 0.5rem;
+    }
+    :where(.details > summary) ~ *:not(summary) {
+        border-inline-start: 0.25rem solid var(--lily-border);
+        padding: 1rem 1rem 1rem 1.25rem;
+        color: var(--lily-text);
+    }
+    /* Carousel — horizontal scroller with snap-points so each slide locks
+       into view as the user swipes. */
+    :where(.carousel) {
+        display: flex;
+        overflow-x: auto;
+        scroll-snap-type: x mandatory;
+        gap: 0.5rem;
+    }
+    :where(.carousel > *) {
+        scroll-snap-align: start;
+        flex: 0 0 auto;
+    }
+
+    /* --- Semantic entities — neutral display blocks. ----------------------- */
+    :where(
+        .person,
+        .organization,
+        .place,
+        .event,
+        .comment,
+        .question,
+        .answer
+    ) {
+        display: block;
+        padding: 0.75rem 0;
+    }
+    /* Draft wrapper — dashed border + optional "Draft" pill prefix. */
+    :where(.draft) {
+        border: 1px dashed var(--lily-border-strong);
+        background-color: var(--lily-surface-alt);
+        padding: 1rem;
+        border-radius: var(--lily-radius-md);
+    }
+    :where(.draft[data-status="draft"])::before {
+        content: "Draft";
+        display: inline-block;
+        margin-inline-end: 0.5rem;
+        padding: 0.125rem 0.5rem;
+        background-color: var(--color-warning);
+        color: var(--color-warning-content);
+        border-radius: 999px;
+        font-size: 0.75rem;
+        font-weight: 600;
+    }
+
+    /* Dial — circular gauge driven by --dial-value (0–100). */
+    :where(.dial) {
+        display: inline-block;
+        width: 4rem;
+        height: 4rem;
+        border-radius: 50%;
+        background: conic-gradient(
+            var(--color-primary) calc(var(--dial-value, 0) * 1%),
+            var(--lily-surface-sunken) 0
+        );
+    }
+
+    /* File upload — drop-zone aesthetic: dashed border, alt surface. */
+    :where(.file-upload) {
+        display: block;
+        padding: 1.5rem;
+        background-color: var(--lily-surface-alt);
+        border: 2px dashed var(--lily-border-strong);
+        border-radius: var(--lily-radius-md);
+        text-align: center;
+        cursor: pointer;
+    }
+    /* File manager — surface-coloured frame holding a file list. */
+    :where(.file-manager) {
+        display: block;
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+        padding: 0.5rem;
+    }
+    /* Transfer list — two columns + central button stack. */
+    :where(.transfer-list) {
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        gap: 0.5rem;
+        align-items: center;
+    }
+
+    /* Tour — onboarding card with medium elevation. */
+    :where(.tour) {
+        display: block;
+        background-color: var(--lily-surface);
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-lg);
+        padding: 1rem;
+        box-shadow: var(--lily-shadow-md);
+    }
+
+    /* Editable text — dashed underline indicates click-to-edit. */
+    :where(.editable) {
+        display: inline-block;
+        padding: 0.125rem 0.25rem;
+        border-bottom: 1px dashed var(--lily-border-strong);
+        cursor: text;
+    }
+    /* Editing state — alt surface + primary underline. */
+    :where(.editable[aria-expanded="true"]) {
+        background-color: var(--lily-surface-alt);
+        border-bottom-color: var(--color-primary);
+    }
+
+    /* Accordion-checkbox — a checkbox that toggles a panel via sibling
+       combinator (no JS needed). */
+    :where(.accordion-checkbox) {
+        display: block;
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+        padding: 0.5rem 0.75rem;
+    }
+    :where(.accordion-checkbox-input) {
+        margin-inline-end: 0.5rem;
+    }
+    :where(.accordion-checkbox-panel) {
+        display: none;
+        padding-block-start: 0.5rem;
+    }
+    /* Reveal the panel when the input is checked. */
+    :where(.accordion-checkbox-input:checked ~ .accordion-checkbox-panel) {
+        display: block;
+    }
+
+    /* Icon — 1em square container; sizes with surrounding text. */
+    :where(.icon) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1em;
+        height: 1em;
+        flex: 0 0 auto;
+    }
+
+    /* Emoji — inline glyph; not italicised. */
+    :where(.emoji) {
+        display: inline-block;
+        font-style: normal;
+    }
+
+    /* Slider — primary-filled track based on --slider-value (0–100). */
+    :where(.slider) {
+        display: block;
+        width: 100%;
+        height: 1.5rem;
+        background: linear-gradient(
+            to right,
+            var(--color-primary) calc(var(--slider-value, 50) * 1%),
+            var(--lily-surface-sunken) 0
+        );
+        border-radius: 999px;
+    }
+
+    /* Timer — fixed-width digits so the display doesn't jiggle as it ticks. */
+    :where(.timer) {
+        display: inline-block;
+        font-family: var(--lily-font-mono);
+        font-variant-numeric: tabular-nums;
+        font-weight: 600;
+    }
+
+    /* Medical banner inner boxes — spacing-only override. */
+    :where(.medical-banner-box-for-advice, .medical-banner-box-for-danger) {
+        padding: 0.75rem 1rem;
+        border-radius: var(--lily-radius-md);
+        margin: 0.25rem 0;
+    }
+
+    /* ==========================================================================
+     * Bilingual — Cymraeg / Welsh
+     * --------------------------------------------------------------------------
+     * Neither the NHS service manual nor the DHCW component library says
+     * anything about this, which is a real gap in a design system for a
+     * country with two official languages. The Welsh Language (Wales)
+     * Measure 2011 requires Welsh to be treated no less favourably than
+     * English by Welsh public bodies, and the Welsh Language Standards make
+     * that concrete for websites. A theme cannot deliver compliance — the
+     * content does that — but it can stop the layout from quietly
+     * penalising the Welsh half.
+     *
+     * The core fact these rules exist for: **Welsh runs roughly 20–30%
+     * longer than English** for the same content. "Appointments" is
+     * "Apwyntiadau"; "Sign in" is "Mewngofnodi"; "Repeat prescriptions" is
+     * "Presgripsiynau amlroddadwy". A nav bar, tab strip, or button row
+     * tuned on English copy is the single most common way a bilingual
+     * service ends up with a broken Welsh page, and it is invisible to
+     * anyone testing in English.
+     *
+     * These rules key off `:lang(cy)`, which matches on the `lang`
+     * attribute — so they activate for a fully Welsh page (`<html lang="cy">`,
+     * which the locale-picker helper sets) and for individual Welsh
+     * fragments inside an English page (`<span lang="cy">`), which is the
+     * normal shape of a bilingual UK public-sector site.
+     *
+     * Setting `lang` correctly is not optional decoration: it is what tells
+     * a screen reader to switch voice. Welsh read aloud by an English
+     * synthesiser is not merely accented, it is unintelligible.
+     * ====================================================================== */
+
+    /* Let Welsh labels wrap instead of truncating. Any component that
+       clamps to one line on English copy will clip a Welsh label, and a
+       clipped label in a nav is a navigation failure, not a cosmetic one.
+       Wrapping is always the better failure mode than an ellipsis. */
+    :where(:lang(cy)) :where(
+            .tab-bar-button,
+            .menu-item,
+            .breadcrumb-list-item,
+            .pagination-list-item,
+            .section-list-item,
+            .contents-list-item,
+            .button,
+            [class$="-button"],
+            .tag,
+            .status-tag,
+            .badge
+        ),
+    :where(
+            .tab-bar-button,
+            .menu-item,
+            .breadcrumb-list-item,
+            .pagination-list-item,
+            .section-list-item,
+            .contents-list-item,
+            .button,
+            [class$="-button"],
+            .tag,
+            .status-tag,
+            .badge
+        ):lang(cy) {
+        white-space: normal;
+        overflow: visible;
+        text-overflow: clip;
+        /* Allow a long compound to break rather than force the container
+           wider — "amlroddadwy" will not fit a 6rem chip otherwise. */
+        overflow-wrap: break-word;
+    }
+
+    /* Never auto-hyphenate Welsh. Welsh treats ch, dd, ff, ng, ll, ph, rh
+       and th as single letters, so a hyphenation engine without a Welsh
+       dictionary will happily split "bwyd-lyn" across a digraph and produce
+       a word that reads as a different word. Browser Welsh dictionaries are
+       inconsistent at best. Manual soft hyphens from the content team are
+       honoured; automatic ones are not attempted. */
+    :where(:lang(cy)) {
+        hyphens: manual;
+    }
+
+    /* Headings wrap more evenly. A Welsh h1 is likelier to run to two lines
+       than its English counterpart, and a two-line heading with one word on
+       the second line reads as a mistake. */
+    :where(:lang(cy)) :where(h1, h2, h3, .headline, .hero-title) {
+        text-wrap: balance;
+    }
+
+    /* Give the language switcher room. On a bilingual service this control
+       is not a preference — for a Welsh speaker landing on an English page
+       it is the primary navigation, and it must not be the thing that gets
+       squeezed when the header runs out of room. */
+    :where(.locale-picker) {
+        flex-shrink: 0;
+    }
+
+    /* The convention across Welsh public-sector sites is that the switcher
+       is labelled in the language it switches *to* ("Cymraeg" on an English
+       page, "English" on a Welsh one), never a flag. Flags are countries,
+       not languages, and the Welsh flag would be wrong for both. There is
+       no CSS to enforce that — it is a content decision — but it is
+       recorded here because this is the file people read when they are
+       building the header. */
+
+    /* ==========================================================================
+     * Print
+     * --------------------------------------------------------------------------
+     * On paper, transient/floating chrome (skip-link, FAB, toast, tooltip)
+     * is meaningless — hide it. Card-like surfaces drop their drop-shadow
+     * and shift to a high-contrast outline so they're readable in monochrome.
+     * ====================================================================== */
+    @media print {
+        :where(
+            .skip-link,
+            .float-button,
+            .toast,
+            .sonner,
+            .tooltip,
+            .coachmark
+        ) {
+            display: none !important;
+        }
+        :where(.card, .panel, .dialog, .alert) {
+            box-shadow: none;
+            border-color: var(--lily-text);
+        }
+    }
+}
+
+/* ============================================================================
+ * WCAG 2.2 target-size (minimum) floor — 2.5.8
+ *
+ * Every interactive Lily hook offers a >=24x24 CSS-pixel target. Links
+ * that render as short inline text (a pagination "1", a breadcrumb crumb)
+ * fail the 24px floor under typographic sizing alone, so the link-shaped
+ * hooks become inline-block with a minimum box. :where() keeps specificity
+ * at zero, so any consumer rule still wins. Shared verbatim by all themes.
+ * ========================================================================= */
+
+:where(.action-link,
+       .back-link,
+       .breadcrumb-list-item > a,
+       .pagination-list-item > a,
+       .contents-list-item > a,
+       .section-list-item > a) {
+    display: inline-block;
+    min-inline-size: 24px;
+    min-block-size: 24px;
+}
+
+:where(.pagination-list-item > a) {
+    text-align: center;
+}
+
+:where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
+    min-block-size: 24px;
+}
+
+/* ============================================================================
+ * Overflow guards — narrow-viewport safety, shared verbatim by all themes.
+ *
+ * Content that is intrinsically wider than the viewport scrolls or wraps
+ * within its own box instead of pushing the page wider. Deliberately NOT
+ * `display: block` on <table> — that strips implicit table semantics for
+ * assistive technology; capping width and letting cell content wrap keeps
+ * both the layout and the roles. Proven in the example apps' own
+ * stylesheets before the theme layer took over component styling.
+ * ========================================================================= */
+
+:where(pre) {
+    max-width: 100%;
+    overflow-x: auto;
+}
+
+:where(table) {
+    max-width: 100%;
+}
+
+:where(th, td) {
+    overflow-wrap: anywhere;
+}
+
+:where(a, code) {
+    overflow-wrap: anywhere;
+}