@lilydesignsystem/themes 0.1.0

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

@@ -0,0 +1,4387 @@
+/* ============================================================================
+ * Theme: united-kingdom-national-health-service-wales-practitioners
+ * Brand: NHS Wales / GIG Cymru (Gwasanaeth Iechyd Gwladol Cymru) — practitioners
+ * 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.
+ * --------------------------------------------------------------------------
+ * Practitioners variant
+ * --------------------------------------------------------------------------
+ * This is the *practitioners* / high-density variant of the NHS Wales
+ * theme. It shares the NHS Wales colour palette, brand intent, and
+ * component grammar with the patient-facing
+ * `united-kingdom-national-health-service-wales-patients.css`, and
+ * deliberately diverges on geometry and rhythm to serve a different
+ * audience: healthcare practitioners (doctors, nurses, midwives,
+ * pharmacists, AHPs, paramedics, dentists, ward clerks, MDT
+ * coordinators) using electronic patient records, observation charts,
+ * order entry, results review, scheduling boards, and ward whiteboards.
+ *
+ * What changes vs. the patient-facing Wales theme:
+ *
+ *   - Information density. Practitioners scan large datasets quickly
+ *     (vital signs panels, medication lists, allergy summaries, results
+ *     trends). Padding, line-height, gap, and margin tokens are roughly
+ *     halved so more rows fit per screen without horizontal scrolling.
+ *
+ *   - Smaller control targets. Patient-facing NHS digital surfaces
+ *     target ~44px (WCAG 2.5.5 target-size guidance) because they are
+ *     touched on phones by members of the public, often one-handed.
+ *     Practitioner workstations are predominantly mouse + keyboard +
+ *     barcode/RFID, so this variant shrinks min-heights to ~28px
+ *     (1.75rem) on inputs and buttons. Touch-first practitioner devices
+ *     (ward iPads, COWs) should stay on the patient-facing Wales theme
+ *     or override these tokens.
+ *
+ *   - Tighter borders / sharper radii. 0.125rem (2px) radius and 1px
+ *     borders give a crisper, more "data-grid" feel that matches the
+ *     visual language practitioners already know from PACS, LIMS, ePMA,
+ *     and the EPR workstation shells (Cerner, Epic, System C, TPP SystmOne,
+ *     Welsh Clinical Portal).
+ *
+ *   - Smaller base type. 0.875rem (14px) body copy — the same baseline
+ *     as most practitioner workstation shells. Still passes WCAG 1.4.4
+ *     (resize text up to 200%) because tokens are rem-based.
+ *
+ *   - Reduced shadows. Depth is for affordance, not decoration —
+ *     practitioner environments are often glare-prone (bedside, theatre).
+ *
+ * What stays the same:
+ *
+ *   - The NHS Identity colour palette (NHS Blue, NHS Wales aqua-green
+ *     accent, NHS Black, NHS Pale Grey, Emergency Services Red).
+ *   - WCAG 2.2 AAA targets on body text and primary CTA contrast.
+ *   - All Lily class hooks (492 components) — practitioner applications
+ *     drop into the same headless components as patient-facing ones.
+ *   - The bilingual NHS / GIG identity. Welsh-language practitioner UIs
+ *     use the same diacritic-supporting font stack.
+ *
+ * When to use this theme:
+ *
+ *   - Electronic patient records (EPR), practitioner portals, results viewers
+ *   - Observation charts, NEWS2 / PEWS / MEWS scoring screens
+ *   - Medication administration records (eMAR), e-prescribing (ePMA)
+ *   - Order communications (lab/radiology/pharmacy)
+ *   - Theatre lists, ward boards, bed management dashboards
+ *   - Discharge summaries, MDT (multi-disciplinary team) review screens
+ *   - Any practitioner-staff-only workstation interface
+ *
+ * When NOT to use this theme:
+ *
+ *   - Patient-facing NHS Wales websites (use the patients Wales theme)
+ *   - Patient portals, appointment booking by patients (use the patients
+ *     Wales theme — patient touch targets must meet WCAG 2.5.5)
+ *   - Anywhere a member of the public reads or interacts with the screen
+ *
+ * --------------------------------------------------------------------------
+ * 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.
+ *     On a practitioner workstation this matters more, not less: keyboard
+ *     is the primary input device for clinical data entry, so the focus
+ *     indicator is load-bearing rather than an accessibility afterthought.
+ *
+ * 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 tag tones matter more in the practitioner variant than the patient
+ * one: a worklist row that encodes triage, specialty, or result status in a
+ * chip is exactly the "colour-only meaning" trap WCAG 1.4.1 warns about.
+ * Every tone below carries a distinct border as well as a distinct fill,
+ * and none of them is legible-by-hue alone — pair each with a text label.
+ *
+ * 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
+ *
+ * Practitioner surfaces routinely run body copy at the `body-small` step
+ * (1rem) to fit a worklist on one screen. That is acceptable here because
+ * the text-size-picker helper is expected to be present on the page shell;
+ * it is not acceptable as a fixed floor. Never ship below 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
+ * --------------------------------------------------------------------------
+ * Practitioner geometry is crisper than the patients Wales theme:
+ *   - 0.125rem (2px) selector/field/box radius — almost-square corners
+ *     match the data-grid aesthetic of practitioner workstation shells,
+ *     and halve DHCW's own 4px
+ *   - 1px borders, no blur shadows (depth: 0), no grain (noise: 0)
+ *   - Density tokens collapse the spacing scale to roughly half:
+ *     xs 2px, sm 4px, md 8px, lg 12px, xl 16px
+ *   - Depth is expressed as a *hard ledge* under buttons and 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. DHCW's ledges are 2px (button) and 4px (card); this variant
+ *     halves both to 1px and 2px, in line with the shadow scale.
+ *
+ * Four things deliberately do NOT get the density treatment, because
+ * shrinking them would cost correctness rather than space:
+ *   - the focus ring (3px, zero offset — full DHCW width)
+ *   - the inset-text rail (0.5rem — it must out-weigh the table rules it
+ *     sits among, so it is the one measurement here that grows)
+ *   - the warning-callout band (full type size — its job is to interrupt)
+ *   - Welsh-language wrapping (see the bilingual section) — a truncated
+ *     Welsh column header is a clinician reading the wrong column
+ * ========================================================================== */
+
+/* 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-practitioners">`,
+ * 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-practitioners"]) {
+    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. * * These greys carry more weight on a
+       practitioner surface than a * patient one, because they are
+       what separates a zebra-striped worklist * row from its
+       neighbour. #F0F4F5 against #FFFFFF is a deliberately *
+       quiet 1.05:1 — enough to track a row across a wide table,
+       not enough * to read as a state change. Do not darken it to
+       "make rows clearer"; * that is what --lily-surface-sunken
+       and a real selected-row treatment * are for. * ------------
+       ------------------------------------------------------ */
+       /* #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. * * On a
+       practitioner shell the navy also does real work as chrome:
+       a * dark header band separates the application frame from
+       the clinical * content beneath it, which an NHS Blue band
+       does less convincingly. * ---------------------------------
+       --------------------------------- */
+    --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`). * * Used for: links, 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, table rules. 6.4:1 on white * — AA
+       body, AAA large. Do not use it for body copy at small
+       sizes, * which on this variant means: do not use it for
+       worklist cell text. * -------------------------------------
+       ----------------------------- */
+    --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, saved-record states, in-range *
+       result flags. * -------------------------------------------
+       ----------------------- */
+    --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, out-of-range result flags. * ---------------
+       --------------------------------------------------- */
+    --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. *
+       * Note these are colour tokens only — none of them carries
+       spacing. * The practitioner density scale set further down
+       is untouched by this * block, and the component rules that
+       consume these colours below use * the tight scale, not the
+       patient one. * --------------------------------------------
+       ---------------------- */ /* #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 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`. Declared for parity with the
+       patient variant and with DHCW, but a practitioner shell is
+       expected to override it: a worklist or results grid wants
+       the full viewport, not a 60rem reading column. Set --lily-
+       page-width: none on those routes. It is a token here
+       precisely so you can. */
+    --lily-page-width: 60rem;
+    /* -----------------------------------------------------------
+       --------- * Geometry — practitioner variant * *
+       Practitioner workstations favour sharp, "data-grid"
+       geometry over * the rounder, friendlier corners on patient-
+       facing surfaces. We * tighten every radius to 0.125rem
+       (2px) so cells, chips, and rows * align in dense tables
+       without the rounded-corner halo that softens * the grid.
+       Borders stay at 1px (the NHS norm), shadows remain at 0 *
+       (practitioner environments are often glare-prone — bedside,
+       * theatre, A&E). * ----------------------------------------
+       -------------------------- */
+    --radius-selector: 0.125rem;
+    --radius-field: 0.125rem;
+    --radius-box: 0.125rem;
+    --size-selector: 0.125rem;
+    --size-field: 0.125rem;
+    --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.
+
+           This variant keeps the ring at full DHCW width even though every
+           other measurement here is halved. Focus is the one thing that
+           must not get denser: a 1px ring on a 2px-radius control in a
+           28-row grid is a ring nobody finds. Density is a layout budget,
+           not an accessibility budget.
+
+           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.
+           Practitioner variant: roughly half the patients theme's values
+           so the same layouts fit twice as many rows of clinical data
+           per screen. */
+        --lily-space-xs: 0.125rem;
+        --lily-space-sm: 0.25rem;
+        --lily-space-md: 0.5rem;
+        --lily-space-lg: 0.75rem;
+        --lily-space-xl: 1rem;
+
+        /* --- 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. Practitioner variant reduces blur and offset
+           because clinical screens are often glare-prone (bedside lights,
+           theatre overheads, A&E task lighting); large soft shadows wash
+           out under those conditions and read as "smudgy" rather than as
+           depth. */
+        --lily-shadow-sm: 0 1px 1px
+            color-mix(in oklch, var(--color-base-content) 6%, transparent);
+        --lily-shadow-md: 0 2px 6px
+            color-mix(in oklch, var(--color-base-content) 8%, transparent);
+        --lily-shadow-lg: 0 6px 16px
+            color-mix(in oklch, var(--color-base-content) 10%, transparent);
+    }
+
+    /* Practitioner base type — 14px body matches the baseline of most
+       practitioner workstation shells (Cerner Millennium, Epic Hyperspace,
+       System C CareFlow, TPP SystmOne, Welsh Clinical Portal). Set on
+       the root so the rem cascade scales every component down in step,
+       while the user's browser font-size remains the source of truth for
+       WCAG 1.4.4 "resize text 200%" conformance. */
+    :where(:root) {
+        font-size: 0.875rem;
+        line-height: 1.4;
+    }
+
+    /* 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. Kept at full
+           width on this variant — see the note on --lily-focus-ring above.
+           The zero offset also earns its keep here for a density reason:
+           an offset ring on a 2px-gap grid overlaps the neighbouring cell,
+           so a flush ring is the only one that stays inside its own row. */
+        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 — which on a
+       dense grid would mean the whole table jumping a pixel per Tab press. */
+    :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. Practitioner
+       workstations are disproportionately Windows and disproportionately
+       likely to have a high-contrast theme forced by trust IT policy, so
+       this branch is load-bearing here rather than defensive. */
+    @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. Practitioner density:
+       min-height drops from the patients theme's 2.5rem (~44px, WCAG 2.5.5
+       target-size guidance for touch) to 1.75rem (~28px), in line with
+       mouse + keyboard workstation conventions. Padding shrinks to ~4px
+       vertical / 6px horizontal so multiple inputs fit comfortably on
+       one observation chart row. */
+    :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: 1.75rem; /* practitioner: mouse + keyboard, not touch */
+        padding: 0.25rem 0.375rem;
+        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: 1.75rem;
+        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: 1.75rem;
+        padding: 0.125rem;
+        width: 2rem;
+        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: 1rem;
+        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.125rem 0.25rem;
+        cursor: pointer;
+    }
+
+    /* Checkbox / radio — small square/round controls with the brand accent.
+       Practitioner density: 14px tick targets — mouse-only, no touch. */
+    :where(.checkbox-input, .radio-input) {
+        width: 0.875rem;
+        height: 0.875rem;
+        min-height: 0; /* override the 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. Practitioner
+       density: 4rem starting height suits a short progress note; consumers
+       can grow it by setting `rows` or overriding min-height. */
+    :where(.text-area-input, .text-area-input-with-character-counter) {
+        min-height: 4rem;
+        line-height: 1.4;
+        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.25rem;
+        padding: 0;
+        background: transparent;
+        border: 0;
+        width: auto;
+        min-height: 0;
+    }
+    :where(.pin-input-div > input) {
+        width: 1.75rem;
+        height: 2rem;
+        padding: 0;
+        text-align: center;
+        font-size: 1rem;
+        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: 1.75rem;
+        padding: 0.25rem 0.375rem;
+        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.375rem;
+        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: 1.5rem;
+    }
+
+    /* ==========================================================================
+     * 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 0.25rem;
+        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.3;
+    }
+
+    /* 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.25rem;
+        padding: 0.125rem 0.25rem;
+        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 rectangle. Variants override colour
+       or shape below. Practitioner density: 28px (1.75rem) min-height vs. the
+       patients theme's 44px, because practitioners use mouse + keyboard at
+       workstations rather than touch screens. */
+    :where(.button, [class$="-button"]:not(.hamburger-menu-button)) {
+        appearance: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem; /* leave room for an icon + label */
+        min-height: 1.75rem;
+        padding: 0.25rem 0.5rem;
+        font: inherit;
+        font-family: var(--lily-font-body);
+        /* DHCW `nhsw-button-base` sets 700. The weight is adopted; the
+           44px min-height and 12px/16px padding around it are NOT, because
+           this is a mouse-and-keyboard workstation surface. Density stays
+           at 28px / 4px / 8px. */
+        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 "ledge", halved to 1px to match this variant's shadow
+           scale. At 28px tall a 2px ledge is 7% of the control and reads as
+           a misaligned border; 1px reads as depth. */
+        box-shadow: 0 1px 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. The 1px shadow means the transform is
+       the whole ledge here, so the control flattens completely on press.
+       That is the intended read at this size. */
+    :where(.button, [class$="-button"]):active:not(:disabled):not(
+            [aria-disabled="true"]
+        ) {
+        transform: translateY(1px);
+        box-shadow: none;
+    }
+
+    /* 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. All ledges are 1px
+     * here rather than DHCW's 2px, matching this variant's shadow scale.
+     * ---------------------------------------------------------------------- */
+
+    /* 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 — worth more on a
+       toolbar of eight controls than on a page with two. */
+    :where([class$="-button"], .button)[data-variant="secondary"] {
+        background-color: var(--lily-surface);
+        color: var(--lily-text);
+        border-color: var(--color-neutral);
+        box-shadow: 0 1px 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.
+
+       On a clinical surface, reserve this for actions that destroy or
+       retract a record. A red button in a worklist toolbar that merely
+       filters is how people learn to click red buttons without reading. */
+    :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 1px 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": escalate, override, request a second opinion. 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 1px 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 — opt-in only. DHCW makes buttons full-width below 40rem;
+       this variant deliberately does NOT reproduce that automatically,
+       because a practitioner form is a two-column layout on a 1080p
+       workstation and a stretched submit button there is wasted space. Set
+       it explicitly where you want it. */
+    :where([class$="-button"], .button)[data-variant="full"] {
+        width: 100%;
+    }
+
+    /* --- Button variants ---------------------------------------------------- */
+
+    /* Icon button — square; aspect-ratio keeps it from squashing when the
+       icon font changes size. */
+    :where(.icon-button) {
+        padding: 0.25rem;
+        min-width: 1.75rem;
+        aspect-ratio: 1;
+    }
+
+    /* Floating action button — pinned to the bottom-right of the viewport.
+       Uses logical inset properties so it flips correctly under RTL.
+       Practitioner density: smaller FAB so it doesn't obstruct dense charts. */
+    :where(.float-button) {
+        position: fixed;
+        inset-block-end: 0.75rem;
+        inset-inline-end: 0.75rem;
+        box-shadow: var(--lily-shadow-lg);
+        border-radius: 999px;
+        width: 2.5rem;
+        height: 2.5rem;
+        padding: 0;
+    }
+
+    /* Split button — extra padding-end for the dropdown caret. */
+    :where(.split-button) {
+        padding-inline-end: 0.25rem;
+    }
+
+    /* 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). Practitioner density: ~32px × 16px. */
+    :where(.switch-button) {
+        position: relative;
+        width: 2rem;
+        min-width: 2rem;
+        height: 1rem;
+        min-height: 1rem;
+        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.25rem;
+        padding: 0.25rem 0.5rem;
+        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.25rem;
+    }
+
+    /* Button group — horizontal cluster of related actions. */
+    :where(.button-group) {
+        display: inline-flex;
+        gap: 0.125rem;
+    }
+
+    /* --- 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.125rem;
+        padding: 0.25rem;
+        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: 0.5rem;
+        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`).
+       Deliberately NOT applied inside a data grid: on a worklist, "visited"
+       marks which patient records this user happened to open, which is
+       both clinically meaningless and a small privacy leak to anyone
+       shoulder-surfing a shared workstation. Rows stay link-coloured. */
+    :where([class$="-link"]):visited {
+        color: var(--lily-link-visited);
+    }
+    :where(
+        .data-table,
+        .table,
+        .kanban-table,
+        .gantt-table
+    ) :where([class$="-link"]):visited {
+        color: var(--color-secondary);
+    }
+
+    /* ----------------------------------------------------------------------
+     * Action link — DHCW's green-chevron call to action
+     *
+     * The one link on a page that is really a call to action. 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.
+     *
+     * Density: 24px chevron and body-size text against DHCW's 36px and
+     * h4. This component is deliberately still the largest interactive
+     * thing in this file — it is the one that must be found — but on a
+     * practitioner shell it sits in a sidebar or a task panel rather than
+     * mid-article, and a 36px chevron there is a button pretending to be a
+     * link.
+     * -------------------------------------------------------------------- */
+    :where(.action-link) {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        margin-bottom: 0.5rem;
+        color: var(--lily-text);
+        font-size: 1rem;
+        font-weight: 700;
+        line-height: 1.5;
+        text-decoration: none;
+    }
+    :where(.action-link):visited {
+        color: var(--lily-text);
+    }
+    :where(.action-link > svg) {
+        flex-shrink: 0;
+        width: 1.5rem;
+        height: 1.5rem;
+        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. Expect to need
+       this one: the practitioner header band is navy. */
+    :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.
+       Practitioner density: 0.25rem (4px) vertical padding for tight 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.25rem 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.25rem;
+        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.25rem;
+        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.125rem;
+        align-items: center;
+    }
+    :where(.pagination-list-item) {
+        border: 0;
+        padding: 0;
+    }
+    /* Pagination link — square-ish chip; practitioner density uses a mouse-sized
+       target, not the patients theme's WCAG 2.5.5 touch target. */
+    :where(.pagination-link) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 1.75rem;
+        padding: 0.25rem 0.375rem;
+        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. Practitioner: tighter indent. */
+    :where(.tree-list .tree-list) {
+        padding-inline-start: 0.75rem;
+    }
+    :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.375rem;
+    }
+    :where(.step-list-item)::before {
+        content: counter(lily-step);
+        flex: 0 0 auto;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 1.25rem;
+        height: 1.25rem;
+        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.25rem;
+    }
+
+    /* --- Timeline ----------------------------------------------------------- */
+    /* Vertical rule down the left, with a dot per event. */
+    :where(.timeline-list-item) {
+        position: relative;
+        padding-inline-start: 0.75rem;
+        border-left: var(--border) solid var(--lily-border-strong);
+        margin-inline-start: 0.25rem;
+    }
+    :where(.timeline-list-item)::before {
+        content: "";
+        position: absolute;
+        inset-inline-start: -0.3rem;
+        inset-block-start: 0.4rem;
+        width: 0.5rem;
+        height: 0.5rem;
+        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: 0.5rem;
+        row-gap: 0.125rem;
+    }
+    /* `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: 0.5rem;
+        row-gap: 0.125rem;
+    }
+    :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.375rem;
+    }
+
+    /* --- 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, tight padding, with a 2px under-rule.
+       Practitioner density: 4px / 6px padding for compact column headers. */
+    :where(
+        .table-th,
+        .data-table-th,
+        .calendar-table-th,
+        .kanban-table-th,
+        .gantt-table-th
+    ) {
+        padding: 0.25rem 0.375rem;
+        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). Practitioner density allows
+       ~25 table rows of patient data on a 1080p workstation. */
+    :where(
+        .table-td,
+        .data-table-td,
+        .calendar-table-td,
+        .kanban-table-td,
+        .gantt-table-td
+    ) {
+        padding: 0.25rem 0.375rem;
+        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.375rem;
+        padding: 0.5rem;
+        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: 10rem;
+    }
+
+    /* --- 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: 0.5rem;
+        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 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.
+
+       Halved to 2px here. A grid of cards at this density is a card every
+       ~120px vertically; a 4px ledge on each one adds up to a page that
+       looks ruled. */
+    :where(.card, .feature-card, .product-card, .care-card) {
+        box-shadow: 0 2px 0 var(--lily-border);
+    }
+    :where(.card, .feature-card, .product-card):has(a:hover) {
+        border-color: var(--lily-text);
+        box-shadow: 0 2px 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. Full 3px —
+       focus does not get the density treatment. */
+    :where(.card, .feature-card, .product-card):focus-within {
+        outline: 3px solid var(--lily-focus-ring);
+        outline-offset: 0;
+    }
+
+    /* Feature card — slightly more padding because it leads the page. */
+    :where(.feature-card) {
+        padding: 0.75rem;
+    }
+    /* 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.25rem;
+    }
+    :where(.care-card[data-urgency="non-urgent"]) {
+        border-color: var(--color-info);
+        border-left-width: 0.25rem;
+    }
+    :where(.care-card[data-urgency="primary"]) {
+        border-color: var(--color-primary);
+        border-left-width: 0.25rem;
+    }
+
+    /* ==========================================================================
+     * 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.
+       Practitioner density: 4px / 6px padding so a chart can show several alert
+       messages (allergy, fall risk, infection control) without the panel
+       eating half the column. */
+    :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.375rem;
+        padding: 0.375rem 0.5rem;
+        background-color: var(--lily-surface-alt);
+        color: var(--lily-text);
+        border: var(--border) solid var(--lily-border);
+        border-inline-start-width: 0.25rem; /* 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, and it matters more here than on the patient
+     * variant. A practitioner screen is already dense with bordered panels;
+     * a left rail is one more vertical line among a dozen. The band is the
+     * only treatment in this file that changes the *shape* of a container
+     * rather than its colour, which is what makes an allergy or interaction
+     * warning survive a screen the user has stopped really looking at.
+     *
+     * 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>Rhybudd / Warning</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.
+     *
+     * Density: 12px band padding and 12px panel padding, against DHCW's
+     * 8px/24px and 24px/48px. The band keeps its full type size — this is
+     * a warning, and shrinking the one component whose job is to interrupt
+     * would defeat the point of having it.
+     * -------------------------------------------------------------------- */
+    :where(.warning-callout) {
+        display: block; /* undo the alert family's flex row */
+        position: relative;
+        margin: 0 0 0.75rem;
+        padding: 0;
+        padding-top: 1rem;
+        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.25rem 0.75rem;
+        background-color: var(--color-warning);
+        color: var(--color-warning-content);
+        font-size: 1rem;
+        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: 1rem 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: 0.75rem;
+    }
+    :where(.warning-callout > :not(:is(h1, h2, h3, h4, h5, h6)):last-child) {
+        padding-bottom: 0.75rem;
+        margin-bottom: 0;
+    }
+    :where(
+        .warning-callout > :is(h1, h2, h3, h4, h5, h6) + *
+    ) {
+        padding-top: 0.75rem;
+    }
+    :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.25rem;
+    }
+
+    /* Banner boxes — chrome strip variants used inside header areas. */
+    :where(.banner-box, .medical-banner-box) {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.25rem 0.5rem;
+    }
+
+    /* 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 border (GOV.UK pattern) so users scrolling
+       back to the top of a form see it immediately. Practitioner density
+       keeps a 2px rule and tighter padding. */
+    :where(.error-summary) {
+        padding: 0.5rem;
+        border: 0.125rem 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: 0.5rem;
+    }
+    /* Field — wraps a single label + input + hint/error trio. */
+    :where(.field) {
+        display: flex;
+        flex-direction: column;
+        gap: 0.125rem;
+    }
+    /* Fieldset — semantic <fieldset>; border + padded inset, legend bold. */
+    :where(.fieldset) {
+        border: var(--border) solid var(--lily-border);
+        border-radius: var(--lily-radius-md);
+        padding: 0.5rem;
+    }
+    :where(.fieldset > legend) {
+        padding-inline: 0.25rem;
+        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.8125rem;
+    }
+    /* Character counter — same colour/size as hint but right-aligned. */
+    :where(.character-counter) {
+        color: var(--lily-text-muted);
+        font-size: 0.8125rem;
+        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: 0.5rem;
+        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: 0.5rem;
+    }
+    :where(.grid) {
+        display: grid;
+        gap: 0.5rem;
+    }
+    :where(.masonry) {
+        column-count: 3;
+        column-gap: 0.5rem;
+    }
+    /* Horizontal-rule replacement that respects theme borders. */
+    :where(.separator) {
+        border: 0;
+        border-top: var(--border) solid var(--lily-border);
+        margin: 0.5rem 0;
+    }
+    /* Generic content tile. */
+    :where(.tile) {
+        display: block;
+        padding: 0.5rem;
+        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: 0.5rem;
+        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: 0.5rem;
+        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: 0.5rem;
+        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: 0.375rem 0.5rem;
+    }
+    /* Asides — secondary surface, padded. */
+    :where(.grail-layout-left-aside, .grail-layout-right-aside) {
+        padding: 0.5rem;
+        background-color: var(--lily-surface-alt);
+    }
+    /* Main content area — primary surface, slightly more generous padding. */
+    :where(.grail-layout-center-main) {
+        padding: 0.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: 0.375rem 0.5rem;
+        background-color: var(--lily-surface);
+        border-bottom: var(--border) solid var(--lily-border);
+    }
+    :where(.footer) {
+        display: block;
+        padding: 0.375rem 0.5rem;
+        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: 0.75rem;
+        box-shadow: var(--lily-shadow-lg);
+        max-width: min(36rem, 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.25rem;
+    }
+
+    /* Popover / tooltip family — small floating labels. */
+    :where(.popover, .popup, .tooltip, .coachmark, .contextual-help) {
+        display: block;
+        padding: 0.25rem 0.375rem;
+        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.8125rem;
+        max-width: 18rem;
+    }
+    /* 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(24rem, 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: 0.5rem;
+        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.125rem;
+        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.25rem;
+        padding: 0.125rem 0.375rem;
+        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.125rem 0;
+    }
+    :where(.menu-group::before) {
+        content: attr(aria-label);
+        display: block;
+        padding: 0.125rem 0.375rem;
+        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.125rem;
+    }
+    /* Hamburger — bordered icon-button. */
+    :where(.hamburger-menu) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0.25rem;
+        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.125rem;
+        flex-wrap: wrap;
+    }
+    /* Segment group / toggle group get an inset background (iOS-segmented
+       control aesthetic). */
+    :where(.segment-group, .toggle-group) {
+        padding: 0.125rem;
+        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.25rem, with a
+       contrast ring for separation. */
+    :where(.avatar-group > *) {
+        margin-inline-start: -0.25rem;
+        border: 2px solid var(--lily-surface);
+    }
+
+    /* ==========================================================================
+     * Progress, loading
+     * ====================================================================== */
+
+    /* Native <progress> / <meter> / bar variant — short, pill-shaped track.
+       Practitioner density: 4px high so the bar fits within a single observation
+       row without dominating the cell. */
+    :where(.progress, .progress-bar, .meter) {
+        display: block;
+        width: 100%;
+        height: 0.25rem;
+        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: 1.25rem;
+        height: 1.25rem;
+        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: 1rem;
+        height: 1rem;
+        border: 2px 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 (1.75rem) with sunken background as the
+       fallback colour when no image is provided. Practitioner density: ~28px
+       so avatars in patient lists align with input/button heights. */
+    :where(.avatar) {
+        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);
+        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.125rem;
+        padding: 0 0.25rem;
+        font-size: 0.75rem;
+        font-weight: 600;
+        line-height: 1.4;
+        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.
+     *
+     * This is the highest-value component on a practitioner surface,
+     * because eleven mutually distinguishable, all-AAA chips is exactly
+     * what a worklist needs to encode specialty, triage, and result state
+     * in one column. It is also the easiest to misuse: see the note on
+     * colour-only meaning below.
+     *
+     * 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, what separates two
+     *      adjacent chips in a dense cell, and what makes every tone
+     *      survive forced-colours mode.
+     *   3. Bold. Small text needs the weight back — more so here, where
+     *      the chip runs at 0.75rem rather than DHCW's 0.875rem.
+     *
+     * 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="red">Brys / Urgent</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. On a clinical worklist this is not a
+     * checklist item — a red chip that a colour-blind registrar reads as
+     * grey, on a row that says nothing else about urgency, is a patient
+     * safety defect and not an accessibility one.
+     * -------------------------------------------------------------------- */
+    :where(.tag) {
+        border-radius: 0;
+        /* Tight: 2px/4px against DHCW's 4px/8px. */
+        padding: 0.125rem 0.25rem;
+        font-size: 0.75rem;
+        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 — all
+       are size-independent, so the smaller type above costs nothing. */
+
+    /* #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 cell of specialty chips reflows instead of forcing the column
+       wider. 2px gap keeps two chips distinguishable without spending a
+       row's worth of height. */
+    :where(.tag-group) {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.125rem;
+    }
+    /* 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.
+
+       On a clinical surface this label is a provenance claim about a piece
+       of decision support, which makes it one of the few things on the
+       page that must never be quietly dropped for density. */
+    :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.25rem;
+    }
+    :where(.status-light)::before {
+        content: "";
+        display: inline-block;
+        width: 0.5rem;
+        height: 0.5rem;
+        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.125rem;
+        padding: 0.125rem;
+        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: 1.5rem;
+        min-height: 1.5rem;
+        padding: 0.125rem 0.25rem;
+    }
+    /* Color picker — circular swatch. */
+    :where(.color-picker-button) {
+        width: 1.25rem;
+        height: 1.25rem;
+        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. Practitioner density: 28px tall to
+       match the input baseline. */
+    :where(select.theme-select, .select, .select-with-extras, .tree-select) {
+        width: 100%;
+        min-height: 1.75rem;
+        padding: 0.25rem 1.5rem 0.25rem 0.375rem; /* 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% - 0.8rem) 0.7rem,
+            calc(100% - 0.5rem) 0.7rem;
+        background-size: 0.3rem 0.3rem;
+        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.
+     * ====================================================================== */
+
+    /* Practitioner headlines are tighter than the patients theme —
+       practitioner screens are dense and screen real-estate goes to data,
+       not to display type. */
+    :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.25rem 0;
+    }
+    :where(.headline) {
+        font-size: clamp(1.125rem, 2vw, 1.5rem);
+    }
+    :where(.hero-headline) {
+        font-size: clamp(1.5rem, 3vw, 2rem);
+    }
+    :where(.section-heading) {
+        font-size: clamp(1rem, 1.5vw, 1.25rem);
+    }
+    /* Body text — 1.4 line-height for compact reading on dense screens. */
+    :where(.body-text) {
+        line-height: 1.4;
+        color: var(--lily-text);
+    }
+    /* Byline — author / date line under a headline. */
+    :where(.byline) {
+        color: var(--lily-text-muted);
+        font-size: 0.8125rem;
+    }
+    /* Blockquote — primary-coloured rail + italic body. */
+    :where(.blockquote) {
+        margin: 0.5rem 0;
+        padding: 0.25rem 0.5rem;
+        border-inline-start: 0.125rem 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: 1rem;
+        padding-top: 0.5rem;
+        border-top: var(--border) solid var(--lily-border);
+    }
+    /* Caption / footnote / citation — small muted text. */
+    :where(.caption, .footnote, .citation) {
+        font-size: 0.8125rem;
+        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: 0.5rem;
+        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
+     * gold rail with NO background fill. 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. Dropping
+     * the fill is also what lets several of these stack inside a clinical
+     * note without the note turning 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.
+     *
+     * Practitioner geometry: padding stays at this variant's 4px/8px, but
+     * the rail widens from 2px to DHCW's 8px. That is the one measurement
+     * in this file that gets *larger* than the density scale would suggest,
+     * and it is deliberate — a 2px rail in the same slate family as every
+     * table rule on the page is not a rail, it is a border. The rail has to
+     * out-weigh the surrounding grid lines to mean anything.
+     *
+     * 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 0.5rem;
+        padding: 0.25rem 0.5rem;
+        border-inline-start: 0.5rem solid var(--color-accent);
+        background-color: transparent;
+    }
+    :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. Practitioner: shorter hero
+       (rarely needed on practitioner screens, but kept for landing
+       dashboards). */
+    :where(.hero) {
+        display: block;
+        padding: clamp(1rem, 3vw, 2rem) 0.5rem;
+        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: 0.5rem 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(6rem, 1fr));
+        gap: 0.25rem;
+    }
+    /* 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.25rem;
+    }
+    /* Signature pad — drawable surface; crosshair cursor signals input. */
+    :where(.signature-pad) {
+        min-height: 5rem;
+        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: 0.5rem;
+    }
+    /* 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.25rem;
+        padding: 0.5rem;
+        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: 0.5rem;
+        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: 1rem;
+        width: 4rem;
+        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 16rem, auto-overflow. */
+    :where(.scroll-area) {
+        overflow: auto;
+        max-height: 16rem;
+    }
+    /* Horizontal scroller — flex row that overflows on x. */
+    :where(.horizontal-scroller) {
+        overflow-x: auto;
+        display: flex;
+        gap: 0.25rem;
+    }
+    /* 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.25rem;
+    }
+    /* 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.25rem;
+        background-color: var(--lily-border);
+        cursor: col-resize;
+    }
+
+    /* ==========================================================================
+     * Misc unique components
+     * ====================================================================== */
+
+    /* Statistic — stacked label + value; value is large and primary-coloured.
+       Practitioner: vital-signs panels are everywhere — keep the value strongly
+       weighted but reduce the size so a 6-tile NEWS2 row fits cleanly. */
+    :where(.statistic) {
+        display: inline-flex;
+        flex-direction: column;
+        gap: 0;
+    }
+    :where(.statistic > [data-part="value"]) {
+        font-size: 1.125rem;
+        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: 1.25rem;
+        height: 1.25rem;
+        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.25rem;
+    }
+    /* Addressograph box — paper-form ID label (NHS / hospital pattern).
+       Stays slightly more generous than the rest of the practitioner theme
+       because the addressograph is the *anchor* identifier on every paper
+       and screen artefact and must remain unambiguous. */
+    :where(.addressograph-box) {
+        display: block;
+        padding: 0.375rem 0.5rem;
+        background-color: var(--lily-surface-alt);
+        border: 2px solid var(--lily-text);
+        font-family: var(--lily-font-mono);
+        line-height: 1.3;
+    }
+    /* Government identifier — dark chrome bar containing an ID number. */
+    :where(.government-identifier) {
+        display: flex;
+        align-items: center;
+        gap: 0.375rem;
+        padding: 0.25rem 0.5rem;
+        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: 0.5rem;
+        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.25rem 0.5rem;
+    }
+    :where(.expander > summary, .collapsible > summary) {
+        cursor: pointer;
+        font-weight: 600;
+        padding: 0.125rem 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.
+     *
+     * The unboxed shape pays for itself here more than anywhere. A
+     * practitioner record is largely made of collapsed sections — past
+     * encounters, previous results, medication history — and a bordered box
+     * per section produces a page of nested rectangles where the nesting
+     * carries no meaning. An underlined line with a rail reads as an
+     * outline, which is what a record actually is.
+     *
+     * The marker is rotated with clip-path geometry 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.
+     *
+     * Density: 4px reveal gap and 4px/8px rail padding, against DHCW's 8px
+     * and 16px/20px. The rail itself stays 4px — thinner and it merges with
+     * the table rules running past it.
+     * -------------------------------------------------------------------- */
+    :where(.details) {
+        display: block;
+        margin-bottom: 0.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: 1rem;
+        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.
+       Scaled down with the type, unlike the focus ring and the rails. */
+    :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: 5px 0 5px 8px;
+        border-inline-start-color: currentColor;
+    }
+    /* Open — the same triangle rotated to point down. */
+    :where(.details[open] > summary)::before {
+        border-width: 8px 5px 0 5px;
+        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.25rem;
+    }
+    :where(.details > summary) ~ *:not(summary) {
+        border-inline-start: 0.25rem solid var(--lily-border);
+        padding: 0.25rem 0.5rem 0.25rem 0.5rem;
+        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.25rem;
+    }
+    :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.25rem 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: 0.5rem;
+        border-radius: var(--lily-radius-md);
+    }
+    :where(.draft[data-status="draft"])::before {
+        content: "Draft";
+        display: inline-block;
+        margin-inline-end: 0.25rem;
+        padding: 0 0.25rem;
+        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).
+       Practitioner density: ~40px wide so a row of dials (e.g. vital-signs
+       trend gauges) fits comfortably. */
+    :where(.dial) {
+        display: inline-block;
+        width: 2.5rem;
+        height: 2.5rem;
+        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: 0.75rem;
+        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.25rem;
+    }
+    /* Transfer list — two columns + central button stack. */
+    :where(.transfer-list) {
+        display: grid;
+        grid-template-columns: 1fr auto 1fr;
+        gap: 0.25rem;
+        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: 0.5rem;
+        box-shadow: var(--lily-shadow-md);
+    }
+
+    /* Editable text — dashed underline indicates click-to-edit. */
+    :where(.editable) {
+        display: inline-block;
+        padding: 0 0.125rem;
+        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.25rem 0.375rem;
+    }
+    :where(.accordion-checkbox-input) {
+        margin-inline-end: 0.25rem;
+    }
+    :where(.accordion-checkbox-panel) {
+        display: none;
+        padding-block-start: 0.25rem;
+    }
+    /* 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: 1rem;
+        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.375rem 0.5rem;
+        border-radius: var(--lily-radius-md);
+        margin: 0.125rem 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"; "Discharge summary" is "Crynodeb rhyddhau". A column
+     * header, 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.
+     *
+     * This variant is where that collides hardest with density. Every other
+     * rule in this file is trying to fit more on screen; these rules are
+     * the standing exception, and they win. A truncated Welsh column header
+     * on a results grid is not a cosmetic defect — it is a clinician
+     * reading the wrong column.
+     *
+     * 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. It is also the
+     * normal shape of a *clinical* one, where a Welsh-language patient
+     * name or free-text note sits inside an English application shell.
+     *
+     * 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 or a column header is a navigation failure,
+       not a cosmetic one. Wrapping is always the better failure mode than
+       an ellipsis — a taller row is recoverable, a wrong word is not. */
+    :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,
+            [class$="-table-th"],
+            [class$="-table-td"]
+        ),
+    :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,
+            [class$="-table-th"],
+            [class$="-table-td"]
+        ):lang(cy) {
+        white-space: normal;
+        overflow: visible;
+        text-overflow: clip;
+        /* Allow a long compound to break rather than force the column
+           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 a dense 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;
+}