/*
  Lloyd Event Technology design system: stylesheet
  ===========================================================
  One stylesheet for the public site, checkout, organiser dashboard and platform admin. No
  framework: every class starts with "let-", every value comes from a token, and
  the cascade is ordered by layers, so the only !important is the [hidden] rule
  in the reset.

  Layers, lowest priority first:
    reset       browser normalisation
    tokens      design tokens (custom properties), light and dark themes
    base        element defaults: type, links, focus, lists, tables
    layout      page widths, page templates, stacks, grids
    components  every let-* component
    utilities   the few single-purpose helpers
*/

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

/* ------------------------------------------------------------------ */
/* Fonts: two weights only, Latin subsets, self-hosted                 */
/* ------------------------------------------------------------------ */
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans/regular-latin.woff2") format("woff2");
}
@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/ibm-plex-sans/semibold-latin.woff2") format("woff2");
}
/* Arial resized to IBM Plex Sans's widths and heights. It shows while Plex loads, so text and
   navigation do not move when Plex arrives. Measured: Plex is 100.08% of Arial's width at 400
   and 96.93% of Arial Bold's at 600, with an ascent of 102.5% and a descent of 27.5%. */
@font-face {
    font-family: "IBM Plex Sans Fallback";
    font-weight: 400;
    src: local("Arial"), local("ArialMT"), local("Arimo"), local("Liberation Sans");
    size-adjust: 100.08%;
    ascent-override: 102.42%;
    descent-override: 27.48%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "IBM Plex Sans Fallback";
    font-weight: 600;
    src: local("Arial Bold"), local("Arial-BoldMT"), local("Arimo Bold"), local("Liberation Sans Bold");
    size-adjust: 96.93%;
    ascent-override: 105.75%;
    descent-override: 28.37%;
    line-gap-override: 0%;
}

/* ------------------------------------------------------------------ */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
    body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset { margin: 0; }
    ul[class], ol[class] { padding: 0; list-style: none; }
    img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
    input, button, select, textarea { font: inherit; color: inherit; }
    address { font-style: normal; }
    button { cursor: pointer; }
    table { border-collapse: collapse; }
    fieldset { padding: 0; border: 0; min-width: 0; }
    legend { padding: 0; }
    [hidden] { display: none !important; }
}

/* ------------------------------------------------------------------ */
@layer tokens {
    :root {
        color-scheme: light;

        /* Colour: fixed values, the same in both themes. inc/classes/Palette.php mirrors them for
           code that cannot read tokens, and tests/palette.php keeps the two in step */
        --color-white: #ffffff;
        --color-black: #000000;
        --color-navy: #102a43;
        --color-slate: #435669;
        --color-mist: #f3f6f9;
        --color-teal: #037470;
        --color-teal-dark: #025c59;
        --color-teal-darker: #014845;
        --color-teal-light: #7fd1cb;
        --color-blue: #1d5fd1;
        --color-cream: #faf6f0;
        --color-frost: #e8eef4;

        /* Colour: text and lines on the navy footer and dashboard side navigation */
        --color-on-dark-soft: var(--color-frost);
        --color-on-dark-secondary: #dbe5ee;
        --color-on-dark-muted: #b8c7d6;    /* 7.8:1 on navy */
        --color-on-dark-accent: var(--color-teal-light); /* the current page's marker */
        --color-on-dark-rule: rgb(255 255 255 / 0.2);
        --color-on-dark-edge: rgb(255 255 255 / 0.6);
        --color-backdrop: rgb(16 42 67 / 0.6);
        --color-selection: #cfe8e6;

        /* Colour: text */
        --color-ink: var(--color-navy);    /* 14.6:1 on white */
        --color-ink-secondary: var(--color-slate);  /* 7.6:1 on white, 7.0:1 on canvas */
        --color-ink-inverse: var(--color-white);

        /* Colour: surfaces */
        --color-canvas: var(--color-mist); /* page background */
        --color-surface: var(--color-white);  /* cards, inputs, tables */
        --color-tint: var(--color-frost);  /* table headers, info backgrounds */
        --color-dark: var(--color-navy);   /* footer and app sidebar */
        --color-dark-raised: #1a3a57;

        /* Colour: lines */
        --color-border: #d3dce5;           /* decorative dividers only */
        --color-border-strong: #5d7186;    /* 5.0:1: anything that marks a control */

        /* Colour: actions and links */
        --color-link: var(--color-teal);   /* 5.6:1 on white, 4.8:1 or more on every tint */
        --color-link-hover: var(--color-teal-dark);
        --color-action: var(--color-teal); /* primary buttons: white text 5.6:1 */
        --color-action-hover: var(--color-teal-dark);
        --color-action-active: var(--color-teal-darker);
        --color-on-action: var(--color-white);
        --color-focus: var(--color-blue);  /* 5.8:1 on white; never used for anything but focus */
        --color-focus-on-dark: var(--color-white);

        /* Colour: status (text colour, then its background) */
        --color-success: #1d6b3a;  --color-success-bg: #e7f3eb;
        --color-error: #b3261e;    --color-error-bg: #fbeceb;  --color-on-error: var(--color-white);  --color-error-hover: #8f1d17;
        --color-warning: #7a5000;  --color-warning-bg: #fdf3e1;  --color-warning-edge: #c98a00;
        --color-info: var(--color-navy);  --color-info-bg: var(--color-tint);

        /* Colour: LET's own pages only (docs/design-system.md section 4.9) */
        --color-canvas-warm: var(--color-cream);   /* page background */
        --color-action-tint: #dcf1ee;      /* feature icon tiles: teal icons on it 4.8:1 */
        --color-feature: #0a5c58;          /* deep teal hero and closing bands: white text 7.8:1 */
        --color-feature-secondary: #d2ece8;  /* captions on --color-feature: 6.3:1 */

        /* Colour: the booking complete panel */
        --color-panel: var(--color-success);

        /* Organiser branding: set per organiser by BrandColor (docs/design-system.md, section 5),
           defaulting to LET. Every pair is checked at 4.5:1 or better whatever the organiser picks. */
        --brand: var(--color-navy);           /* header and event banner fill */
        --brand-on: var(--color-white);        /* text on --brand */
        --brand-accent: var(--color-teal);        /* main buttons on organiser pages */
        --brand-accent-on: var(--color-white);        /* text on --brand-accent */
        --brand-accent-hover: var(--color-teal-dark);     /* moves away from the text colour, so hover never loses contrast */
        --brand-accent-edge: var(--color-teal);      /* button edge: the fill, or its text colour when the fill is too close to the page */

        /* Charts: two series at most, checked for colour blindness, chroma and 3:1 against the surface */
        --chart-1: #00918a;
        --chart-2: #c0561a;

        /* Type */
        --font-sans: "IBM Plex Sans", "IBM Plex Sans Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
        --text-xs: 0.875rem;                                       /* 14px: the smallest text anywhere */
        --text-sm: 1rem;                                           /* 16px */
        --text-md: 1.125rem;                                       /* 18px: public body text */
        --text-lg: 1.375rem;                                       /* 22px */
        --text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);         /* 24 to 28px */
        --text-2xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.25rem);      /* 30 to 36px */
        --text-3xl: clamp(2.25rem, 1.5rem + 3vw, 3.5rem);          /* 36 to 56px: marketing hero only */
        --weight-regular: 400;
        --weight-semibold: 600;
        --leading-body: 1.6;
        --leading-tight: 1.25;
        --text-body: var(--text-md);      /* the app shell lowers this to 16px */

        /* Space: 4px base */
        --space-1: 0.25rem;  /* 4  */
        --space-2: 0.5rem;   /* 8  */
        --space-3: 0.75rem;  /* 12 */
        --space-4: 1rem;     /* 16 */
        --space-5: 1.5rem;   /* 24 */
        --space-6: 2rem;     /* 32 */
        --space-7: 3rem;     /* 48 */
        --space-8: 4rem;     /* 64 */
        --space-9: 6rem;     /* 96 */

        /* Size */
        --width-page: 75rem;       /* 1200px */
        --width-reading: 42rem;    /* about 68 characters of body text */
        --width-form: 36rem;
        --width-narrow: 28rem;
        --gutter: clamp(1rem, 4vw, 2rem);
        --control-height: 3rem;    /* 48px buttons and inputs */
        --control-height-compact: 2.5rem;
        --border-control: 2px;
        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-pill: 999px;
        --shadow-raised: 0 1px 2px rgb(16 42 67 / 0.08), 0 2px 8px rgb(16 42 67 / 0.06);
        --shadow-overlay: 0 12px 40px rgb(16 42 67 / 0.25);
        --focus-width: 3px;
        --duration: 150ms;
    }

    /* Dark theme: every pair re-checked at 4.5:1 or better */
    @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
            color-scheme: dark;
            --color-ink: var(--color-frost);
            --color-ink-secondary: #a9bacb;
            --color-ink-inverse: var(--color-canvas);
            --color-canvas: #0e1c2a;
            --color-surface: #152738;
            --color-tint: #1c3247;
            --color-dark: #08131e;
            --color-dark-raised: #12253a;
            --color-border: #2c4257;
            --color-border-strong: #7d93a8;
            --color-link: var(--color-teal-light);
            --color-link-hover: #b4e8e4;
            --color-action: var(--color-teal-light);
            --color-action-hover: #a6e2dd;
            --color-action-active: #c9eeeb;
            --color-on-action: var(--color-canvas);
            --color-focus: var(--color-white);
            --color-success: #7fd3a0;  --color-success-bg: #12301f;
            --color-error: #ff9b8f;    --color-error-bg: #3a1714;  --color-on-error: var(--color-canvas);  --color-error-hover: #ffbdb4;
            --color-warning: #f2c25c;  --color-warning-bg: #33260a;  --color-warning-edge: var(--color-warning);
            --color-info: var(--color-ink);  --color-info-bg: var(--color-tint);
            --color-canvas-warm: var(--color-canvas);
            --color-action-tint: var(--color-tint);  /* teal icons on it 7.4:1 */
            --color-panel: var(--color-success-bg);
            --chart-1: #1fa59c;
            --chart-2: #dc7536;
            --shadow-raised: none;
        }
    }
}

/* ------------------------------------------------------------------ */
@layer base {
    html { scroll-padding-top: var(--space-6); }
    @media (prefers-reduced-motion: no-preference) {
        html { scroll-behavior: smooth; }
    }
    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        font-family: var(--font-sans);
        font-size: var(--text-body);
        line-height: var(--leading-body);
        color: var(--color-ink);
        background: var(--color-canvas);
        text-rendering: optimizeLegibility;
    }
    main { flex: 1 0 auto; }

    h1, h2, h3, h4 {
        font-weight: var(--weight-semibold);
        line-height: var(--leading-tight);
        color: var(--color-ink);
        text-wrap: balance;
    }
    h1 { font-size: var(--text-2xl); letter-spacing: -0.015em; }
    h2 { font-size: var(--text-xl); letter-spacing: -0.01em; }
    h3 { font-size: var(--text-lg); }
    h4 { font-size: var(--text-md); }
    p, li, dd { max-width: none; }
    strong, b { font-weight: var(--weight-semibold); }
    small { font-size: var(--text-xs); }

    a {
        color: var(--color-link);
        text-decoration-line: underline;
        text-decoration-thickness: max(1px, 0.0625em);
        text-underline-offset: 0.18em;
    }
    a:hover { color: var(--color-link-hover); text-decoration-thickness: max(3px, 0.1875em); }

    :focus-visible {
        outline: var(--focus-width) solid var(--color-focus);
        outline-offset: 2px;
    }

    code, kbd, samp { font-family: var(--font-mono); font-size: 1em; overflow-wrap: anywhere; }
    hr { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-6); }
    abbr[title] { text-decoration: underline dotted; cursor: help; }
    ::selection { background: var(--color-selection); color: var(--color-navy); }

    @media (forced-colors: active) {
        :focus-visible { outline-color: Highlight; }
    }
}

/* ------------------------------------------------------------------ */
@layer layout {
    .let-container {
        width: 100%;
        max-width: calc(var(--width-page) + 2 * var(--gutter));
        margin-inline: auto;
        padding-inline: var(--gutter);
    }
    .let-main { padding-block: var(--space-6) var(--space-8); }
    .let-main--flush { padding-block: 0; }

    /* Reading, form and narrow columns constrain the column, never single elements */
    .let-reading { max-width: var(--width-reading); }
    .let-form-column { max-width: var(--width-form); }
    .let-narrow { max-width: var(--width-narrow); margin-inline: auto; }
    /* The Question template on LET's own pages: the heading and form in one white card, centred
       on the cream canvas. The card is wider than its column by its padding, so fields keep
       their width */
    .let-question {
        --question-pad: var(--space-6);
        margin-inline: auto;
        padding: var(--question-pad);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        box-shadow: var(--shadow-raised);
    }
    .let-question.let-narrow { max-width: calc(var(--width-narrow) + 2 * var(--question-pad)); }
    .let-question.let-form-column { max-width: calc(var(--width-form) + 2 * var(--question-pad)); }
    @media (max-width: 40em) { .let-question { --question-pad: var(--space-5); } }
    /* Beside a side column, the card keeps to the page's left edge */
    .let-with-sidebar > .let-question { margin-inline: 0; }

    /* Vertical rhythm: a stack spaces its children. Each size has its own rule rather than a
       custom property, because a child that is itself a stack would read its own value. */
    .let-stack > * + * { margin-block-start: var(--space-4); }
    .let-stack--sm > * + * { margin-block-start: var(--space-2); }
    .let-stack--lg > * + * { margin-block-start: var(--space-6); }
    .let-stack--xl > * + * { margin-block-start: var(--space-7); }

    /* Horizontal group that wraps */
    .let-cluster { --cluster: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster); }
    .let-cluster--between { justify-content: space-between; }
    .let-cluster--sm { --cluster: var(--space-2); }
    .let-cluster--lg { --cluster: var(--space-5); }

    /* Main column with a side column that drops below on narrow screens */
    .let-with-sidebar {
        display: grid;
        gap: var(--space-6);
        grid-template-columns: minmax(0, 1fr);
        align-items: start;
    }
    @media (min-width: 64em) {
        .let-with-sidebar { grid-template-columns: minmax(0, 1fr) 22rem; gap: var(--space-7); }
        .let-with-sidebar--left { grid-template-columns: 15rem minmax(0, 1fr); }
        .let-sticky { position: sticky; top: var(--space-5); }
    }

    /* Even columns that collapse to one: 2, 3 or 4 across */
    .let-grid { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 40em) {
        .let-grid--2, .let-grid--3, .let-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (min-width: 64em) {
        .let-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .let-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    /* Small figures sit two across even on phones */
    .let-grid--stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    @media (min-width: 64em) { .let-grid--stats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); } }

    /* Up and down buttons keep fixed slots, so rows line up */
    .let-reorder { display: grid; grid-template-columns: repeat(2, var(--control-height-compact)); gap: var(--space-2); }
    .let-reorder__down { grid-column: 2; }
    .let-reorder .let-button { inline-size: var(--control-height-compact); padding-inline: 0; }

    /* Full-width band for marketing sections */
    .let-band { padding-block: var(--space-8); }
    .let-band--tint { background: var(--color-surface); border-block: 1px solid var(--color-border); }
    @media (max-width: 40em) { .let-band { padding-block: var(--space-7); } }
    /* Deep teal band, for the hero and the closing band of LET's own pages. It redefines the
       tokens inside it, so every component reads well on it: white text and links, a cream main
       button with navy text, a white focus ring */
    .let-band--feature {
        --color-ink: var(--color-white);
        --color-ink-secondary: var(--color-feature-secondary);
        --color-link: var(--color-white);
        --color-link-hover: var(--color-white);
        --color-action: var(--color-cream);
        --color-action-hover: var(--color-white);
        --color-action-active: var(--color-white);
        --color-on-action: var(--color-navy);
        --color-focus: var(--color-white);
        --color-border: var(--color-on-dark-rule);
        --let-edge: var(--color-canvas);
        position: relative;
        background: var(--color-feature);
        color: var(--color-ink);
    }
    /* A ticket's perforated edge: a row of holes along the top, in the colour of the band before
       it. The hero's holes run along its bottom instead, in the colour of the band after it */
    .let-band--feature::before {
        content: "";
        position: absolute;
        inset-inline: 0;
        top: calc(var(--space-3) / -2);
        height: var(--space-3);
        background: radial-gradient(circle, var(--let-edge) calc(var(--space-3) / 2), transparent calc(var(--space-3) / 2 + 0.5px)) 0 0 / var(--space-5) var(--space-3) repeat-x;
        pointer-events: none;
    }
    .let-band--hero { padding-block: 0; }
    .let-band--hero::before { top: auto; bottom: calc(var(--space-3) / -2); }
    .let-band--tint + .let-band--feature, .let-band--hero:has(+ .let-band--tint) { --let-edge: var(--color-surface); }

    /* Back-office shell: dark side navigation and the working area */
    .let-app { --text-body: var(--text-sm); font-size: var(--text-body); display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
    .let-app__sidebar { background: var(--color-dark); color: var(--color-on-dark-secondary); }
    .let-app__main { min-width: 0; padding: var(--space-5) var(--gutter) var(--space-8); }
    .let-app__content { max-width: var(--width-page); }
    .let-app__content > * + * { margin-block-start: var(--space-5); }
    @media (min-width: 64em) {
        .let-app { grid-template-columns: 16rem minmax(0, 1fr); }
        .let-app__sidebar > .let-sidenav { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
        .let-app__main { padding-block-start: var(--space-6); }
    }
}

/* ------------------------------------------------------------------ */
@layer components {

    /* ---------- Skip link ---------- */
    .let-skip-link {
        position: absolute;
        left: var(--space-4);
        top: var(--space-2);
        z-index: 100;
        padding: var(--space-2) var(--space-4);
        background: var(--color-surface);
        color: var(--color-ink);
        font-weight: var(--weight-semibold);
        transform: translateY(-200%);
    }
    .let-skip-link:focus { transform: none; }

    /* ---------- Icons (inline SVG, always aria-hidden) ---------- */
    .let-icon {
        display: inline-block;
        width: 1.25em;
        height: 1.25em;
        flex: none;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        vertical-align: -0.25em;
    }
    .let-icon--lg { width: 1.75em; height: 1.75em; }
    .let-icon--up, .let-icon--down { transform: rotate(90deg); }

    /* ---------- Public header ---------- */
    .let-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
    .let-header__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3) var(--space-6);
        min-height: 4.5rem;
        padding-block: var(--space-3);
    }
    .let-header__logo { display: inline-flex; color: var(--color-ink); text-decoration: none; }
    .let-header__logo svg { width: 8.5rem; height: auto; }
    .let-header .let-header__menu-button { display: none; }
    .let-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-5); }
    .let-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
    .let-nav__link {
        position: relative;
        display: inline-block;
        padding-block: var(--space-2);
        color: var(--color-ink);
        font-weight: var(--weight-semibold);
        text-decoration: none;
    }
    /* The underline grows from the left on hover and stays under the current page. A border,
       not a background, so it still shows in forced colours. */
    .let-nav__link::after {
        content: "";
        position: absolute;
        inset-inline: 0;
        bottom: 0;
        border-bottom: 3px solid var(--color-border-strong);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform var(--duration) ease-out;
    }
    .let-nav__link:hover { color: var(--color-ink); }
    .let-nav__link:hover::after { transform: scaleX(1); }
    .let-nav__link[aria-current]::after { transform: scaleX(1); border-bottom-color: var(--color-action); }
    /* Three lines that turn into a cross while the menu is open */
    .let-menu-icon { flex: none; width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
    .let-menu-icon path { transform-origin: 12px 12px; transition: transform var(--duration) ease-out, opacity var(--duration) ease-out; }
    [aria-expanded="true"] > .let-menu-icon path:nth-child(1) { transform: rotate(45deg) translateY(5px); }
    [aria-expanded="true"] > .let-menu-icon path:nth-child(2) { opacity: 0; }
    [aria-expanded="true"] > .let-menu-icon path:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }
    /* With JavaScript the mobile menu collapses behind a button and slides open. Without it the links simply wrap. */
    @media (max-width: 64em) {
        .js .let-header .let-header__menu-button { display: inline-flex; gap: var(--space-2); }
        .js .let-nav { transition: opacity var(--duration) ease-out, transform var(--duration) ease-out, display var(--duration) allow-discrete; }
        .js .let-nav:not(.is-open) { display: none; opacity: 0; transform: translateY(calc(-1 * var(--space-2))); }
        .js .let-nav.is-open { flex-basis: 100%; flex-direction: column; align-items: stretch; padding-block: var(--space-3); border-top: 1px solid var(--color-border); }
        @starting-style {
            .js .let-nav.is-open { opacity: 0; transform: translateY(calc(-1 * var(--space-2))); }
        }
        .js .let-nav.is-open .let-nav__list { flex-direction: column; }
        .js .let-nav.is-open .let-nav__link { display: block; padding-block: var(--space-3); }
    }

    /* ---------- Organiser pages: the organiser's colours, LET's structure ---------- */
    /* Main buttons take the organiser's accent. Links, form controls and focus stay in LET's colours. */
    .let-org {
        --button: var(--brand-accent);
        --button-hover: var(--brand-accent-hover);
        --button-active: var(--brand-accent-hover);
        --button-text: var(--brand-accent-on);
        --button-edge: var(--brand-accent-edge);
    }
    .let-org-header { background: var(--brand); color: var(--brand-on); border-bottom: 4px solid var(--brand-accent); }
    .let-org-header .let-header__inner { min-height: 4.5rem; }
    /* The organiser's logo when they have uploaded one, otherwise their name */
    .let-org-header__name { display: inline-flex; align-items: center; min-height: 2.75rem; color: var(--brand-on); font-size: var(--text-lg); font-weight: var(--weight-semibold); text-decoration: none; }
    .let-org-header__logo { max-height: 3.5rem; width: auto; }
    .let-org-header .let-nav__link { color: var(--brand-on); }
    .let-org-header .let-nav__link::after { border-bottom-color: currentColor; }
    .let-org-header :focus-visible { outline-color: var(--brand-on); }

    /* ---------- Footer ---------- */
    .let-footer { background: var(--color-dark); color: var(--color-on-dark-secondary); padding-block: var(--space-7) var(--space-6); font-size: var(--text-sm); }
    .let-footer a { color: var(--color-white); }
    .let-footer a:hover { color: var(--color-white); }
    .let-footer :focus-visible { outline-color: var(--color-focus-on-dark); }
    .let-footer__columns { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
    @media (min-width: 40em) { .let-footer__columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (min-width: 64em) { .let-footer__columns { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); } }
    .let-footer__heading { color: var(--color-white); font-size: var(--text-sm); margin-bottom: var(--space-3); }
    .let-footer__list > li + li { margin-top: var(--space-2); }
    .let-footer__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-on-dark-rule); }
    .let-footer__logo { color: var(--color-white); }
    .let-footer__logo svg { width: 8.5rem; height: auto; }
    .let-footer--slim { padding-block: var(--space-6); }
    .let-footer--slim .let-footer__meta { margin-top: 0; padding-top: 0; border-top: 0; align-items: center; }

    /* ---------- Buttons ---------- */
    .let-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: var(--control-height);
        padding: var(--space-2) var(--space-5);
        border: var(--border-control) solid var(--button-edge, transparent);
        border-radius: var(--radius-sm);
        background: var(--button, var(--color-action));
        color: var(--button-text, var(--color-on-action));
        font-weight: var(--weight-semibold);
        font-size: var(--text-body);
        line-height: 1.2;
        text-align: center;
        text-decoration: none;
        transition: background-color var(--duration);
    }
    .let-button:hover { background: var(--button-hover, var(--color-action-hover)); color: var(--button-text, var(--color-on-action)); text-decoration: none; }
    .let-button:active { background: var(--button-active, var(--color-action-active)); transform: translateY(1px); }
    .let-button--secondary { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-border-strong); }
    .let-button--secondary:hover { background: var(--color-tint); color: var(--color-ink); }
    .let-button--secondary:active { background: var(--color-border); }
    .let-button--warning { background: var(--color-error); color: var(--color-on-error); border-color: var(--color-error); }
    .let-button--warning:hover { background: var(--color-error-hover); color: var(--color-on-error); }
    .let-button--compact { min-height: var(--control-height-compact); padding-inline: var(--space-4); font-size: var(--text-sm); }
    .let-button--wide { width: 100%; }
    /* Busy while a request is in progress: full colour, so the label stays readable, with a ring before it */
    .let-button[aria-disabled="true"] { cursor: progress; }
    .let-button[aria-disabled="true"]::before { content: ""; flex: none; width: 1em; height: 1em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: let-spin 900ms linear infinite; }
    .let-button .let-icon { width: 1.1em; height: 1.1em; }
    @media (max-width: 40em) {
        .let-button { width: 100%; }
        .let-button--inline { width: auto; }
    }
    .let-button-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-5); }
    @media (max-width: 40em) {
        .let-button-group { flex-direction: column; align-items: stretch; width: 100%; }
        .let-button-group > a:not(.let-button) { align-self: center; }
    }
    /* A button that looks like a link, for actions that sit in running text */
    .let-link-button { padding: 0; border: 0; background: none; color: var(--color-link); text-decoration: underline; text-underline-offset: 0.18em; font-weight: inherit; }
    .let-link-button:hover { color: var(--color-link-hover); }

    /* ---------- Back link and breadcrumbs ---------- */
    .let-back-link { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-ink); font-size: var(--text-sm); }
    .let-back-link:hover { color: var(--color-ink); }
    .let-breadcrumbs ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); color: var(--color-ink-secondary); }
    .let-breadcrumbs li:not(:last-child)::after { content: "\203A"; margin-left: var(--space-2); color: var(--color-ink-secondary); }
    .let-breadcrumbs a { color: var(--color-ink); }

    /* ---------- Caption above a heading (section name) ---------- */
    .let-caption { display: block; color: var(--color-ink-secondary); font-size: var(--text-md); font-weight: var(--weight-regular); margin-bottom: var(--space-1); }
    .let-lead { font-size: var(--text-lg); line-height: 1.5; color: var(--color-ink); }
    .let-secondary { color: var(--color-ink-secondary); }

    /* ---------- Page header (back office and public tasks) ---------- */
    .let-page-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); }
    .let-page-header h1 { margin: 0; }
    .let-app .let-page-header h1 { font-size: var(--text-xl); }

    /* ---------- Forms ---------- */
    .let-field { margin-bottom: var(--space-6); }
    .let-field:last-child { margin-bottom: 0; }
    /* Fields side by side in a row: the row sets the spacing */
    .let-cluster > .let-field { margin-bottom: 0; }
    .let-label { display: block; font-weight: var(--weight-semibold); margin-bottom: var(--space-1); }
    .let-label--page-heading { font-size: var(--text-2xl); line-height: var(--leading-tight); margin-bottom: var(--space-3); }
    .let-hint { display: block; color: var(--color-ink-secondary); margin-bottom: var(--space-2); }
    .let-error-message { display: flex; gap: var(--space-2); align-items: flex-start; color: var(--color-error); font-weight: var(--weight-semibold); margin-bottom: var(--space-2); }
    .let-field--error { padding-left: var(--space-4); border-left: 4px solid var(--color-error); }

    .let-input, .let-select, .let-textarea {
        display: block;
        width: 100%;
        min-height: var(--control-height);
        padding: var(--space-2) var(--space-3);
        border: var(--border-control) solid var(--color-border-strong);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        color: var(--color-ink);
        line-height: 1.4;
    }
    .let-input:focus, .let-select:focus, .let-textarea:focus {
        outline: var(--focus-width) solid var(--color-focus);
        outline-offset: 0;
        border-color: var(--color-ink);
        box-shadow: inset 0 0 0 1px var(--color-ink);
    }
    .let-input--error, .let-select--error, .let-textarea--error { border-color: var(--color-error); }
    .let-textarea { min-height: 8rem; resize: vertical; }
    .let-select {
        appearance: none;
        padding-right: var(--space-7);
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102a43' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right var(--space-3) center;
        background-size: 1.25rem;
    }
    /* Width follows the expected answer, not the column */
    .let-input--w2 { max-width: 5.5ch; }
    .let-input--w4 { max-width: 7.5ch; }
    .let-input--w6 { max-width: 10ch; }
    .let-input--w10 { max-width: 15ch; }
    .let-input--w20 { max-width: 27ch; }
    .let-input--w30 { max-width: 38ch; }
    /* Prefix and suffix, for £ and % */
    .let-input-wrap { display: flex; align-items: stretch; max-width: 100%; }
    .let-input-wrap .let-input { border-radius: 0; }
    .let-input-wrap .let-input:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
    .let-input-wrap .let-input:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
    .let-input-affix { display: flex; align-items: center; padding-inline: var(--space-3); border: var(--border-control) solid var(--color-border-strong); background: var(--color-tint); font-weight: var(--weight-semibold); }
    .let-input-affix:first-child { border-right: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
    .let-input-affix:last-child { border-left: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

    .let-legend { font-weight: var(--weight-semibold); font-size: var(--text-lg); line-height: var(--leading-tight); margin-bottom: var(--space-2); }
    .let-legend--md { font-size: var(--text-body); margin-bottom: var(--space-1); }
    .let-legend--page-heading { font-size: var(--text-2xl); margin-bottom: var(--space-4); }

    /* A date field and a time field side by side under one legend, never datetime-local */
    .let-date-time { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }
    .let-date-time > * { flex: 1 1 10rem; min-width: 0; max-width: 11rem; }
    .let-date-time > :last-child { flex-basis: 7rem; max-width: 9rem; }
    .let-date-time .let-label { font-weight: var(--weight-regular); }

    /* Radios and checkboxes: 32px controls, the whole label is the target */
    .let-choices > * + * { margin-top: var(--space-3); }
    .let-choices--inline { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }
    .let-choices--inline > * + * { margin-top: 0; }
    .let-choice { display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
    .let-choice input {
        appearance: none;
        width: 2rem;
        height: 2rem;
        margin: 0;
        border: var(--border-control) solid var(--color-ink);
        border-radius: var(--radius-sm);
        background: var(--color-surface) center / 1.25rem no-repeat;
        cursor: pointer;
    }
    .let-choice input[type="radio"] { border-radius: 50%; }
    .let-choice input:checked { border-color: var(--color-action); background-color: var(--color-action); }
    .let-choice input[type="checkbox"]:checked { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5 10 17.5 19 7'/%3E%3C/svg%3E"); }
    .let-choice input[type="radio"]:checked { box-shadow: inset 0 0 0 5px var(--color-surface); }
    .let-choice input:focus-visible { outline-offset: 2px; }
    .let-choice label { padding-top: 0.2rem; cursor: pointer; }
    .let-choice .let-hint { grid-column: 2; margin: var(--space-1) 0 0; }
    .let-choice__reveal { grid-column: 2; margin-top: var(--space-3); padding-left: var(--space-4); border-left: 4px solid var(--color-border); }
    @media (forced-colors: active) {
        .let-choice input { appearance: auto; width: 1.5rem; height: 1.5rem; }
    }

    /* Error summary: first thing on the page after a failed submit */
    .let-error-summary { padding: var(--space-5); margin-bottom: var(--space-6); border: 4px solid var(--color-error); background: var(--color-surface); }
    .let-error-summary:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
    .let-error-summary h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
    .let-error-summary ul { list-style: none; padding: 0; }
    .let-error-summary li + li { margin-top: var(--space-2); }
    .let-error-summary a { color: var(--color-error); font-weight: var(--weight-semibold); }

    /* Quantity stepper: a real input, enhanced with two buttons */
    .let-stepper { display: inline-flex; align-items: stretch; }
    .let-stepper .let-input { width: 4rem; text-align: center; border-radius: 0; border-inline: 0; font-weight: var(--weight-semibold); }
    .let-stepper__button {
        display: inline-flex; align-items: center; justify-content: center;
        width: var(--control-height); min-height: var(--control-height);
        border: var(--border-control) solid var(--color-border-strong);
        background: var(--color-surface); color: var(--color-ink);
    }
    .let-stepper__button:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
    .let-stepper__button:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
    .let-stepper__button:hover { background: var(--color-tint); }
    /* Without JavaScript the buttons do nothing, so only the input shows */
    .no-js .let-stepper__button { display: none; }
    .no-js .let-stepper .let-input { border-inline: var(--border-control) solid var(--color-border-strong); border-radius: var(--radius-sm); }

    /* ---------- Notification banners ---------- */
    .let-banner { padding: var(--space-4) var(--space-5); border: 2px solid var(--color-info); border-left-width: 6px; border-radius: var(--radius-sm); background: var(--color-info-bg); color: var(--color-ink); margin-bottom: var(--space-6); }
    .let-banner__title { font-size: var(--text-body); font-weight: var(--weight-semibold); margin-bottom: var(--space-1); display: flex; gap: var(--space-2); align-items: center; }
    .let-banner--success { border-color: var(--color-success); background: var(--color-success-bg); }
    .let-banner--success .let-banner__title { color: var(--color-success); }
    .let-banner--warning { border-color: var(--color-warning-edge); background: var(--color-warning-bg); }
    .let-banner--warning .let-banner__title { color: var(--color-warning); }
    .let-banner--error { border-color: var(--color-error); background: var(--color-error-bg); }
    .let-banner--error .let-banner__title { color: var(--color-error); }
    .let-banner > :last-child { margin-bottom: 0; }

    .let-inset { padding: var(--space-3) var(--space-5); border-left: 6px solid var(--color-border-strong); background: var(--color-surface); }
    .let-warning-text { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--space-3); align-items: start; font-weight: var(--weight-semibold); }
    .let-warning-text__icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--color-ink); color: var(--color-canvas); font-size: var(--text-lg); line-height: 1; }

    /* ---------- Details (show and hide) ---------- */
    .let-details > summary { display: inline-flex; gap: var(--space-2); align-items: center; color: var(--color-link); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; list-style: none; }
    .let-details > summary::-webkit-details-marker { display: none; }
    .let-details > summary::before { content: ""; width: 0; height: 0; border-style: solid; border-width: 0.4em 0 0.4em 0.6em; border-color: transparent transparent transparent currentColor; transition: transform var(--duration); }
    .let-details[open] > summary::before { transform: rotate(90deg); }
    .let-details__body { margin-top: var(--space-3); padding: var(--space-3) var(--space-5); border-left: 4px solid var(--color-border); }

    /* ---------- Tags: status at a glance, never the only signal ---------- */
    .let-tag { display: inline-block; padding: 0.125rem var(--space-2); border-radius: var(--radius-sm); background: var(--color-tint); color: var(--color-ink); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1.5; white-space: nowrap; }
    .let-tag--green { background: var(--color-success-bg); color: var(--color-success); }
    .let-tag--red { background: var(--color-error-bg); color: var(--color-error); }
    .let-tag--amber { background: var(--color-warning-bg); color: var(--color-warning); }
    .let-tag--grey { background: var(--color-canvas); color: var(--color-ink-secondary); box-shadow: inset 0 0 0 1px var(--color-border); }

    /* ---------- Cards ---------- */
    .let-card { position: relative; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-raised); }
    .let-card--flush { padding: 0; overflow: hidden; }
    .let-card__body { padding: var(--space-5); }
    .let-card__title { font-size: var(--text-lg); margin-bottom: var(--space-2); }
    .let-card__link::after { content: ""; position: absolute; inset: 0; }
    .let-card:has(.let-card__link:hover) { border-color: var(--color-border-strong); }
    .let-card:has(.let-card__link:focus-visible) { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
    .let-card__link:focus-visible { outline: none; }
    .let-section { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
    .let-section + .let-section { margin-top: var(--space-5); }
    /* Side by side, the grid spaces sections; stacked spacing would push the second one down */
    .let-grid > .let-section + .let-section { margin-top: 0; }
    .let-section__header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); }
    .let-section__header h2 { font-size: var(--text-lg); }

    /* ---------- Summary list (key and value) ---------- */
    .let-summary-list { display: grid; grid-template-columns: minmax(0, 1fr); }
    .let-summary-list__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1) var(--space-5); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); }
    .let-summary-list__row dt { font-weight: var(--weight-semibold); }
    .let-summary-list__row dd { overflow-wrap: anywhere; }
    @media (min-width: 40em) {
        .let-summary-list__row { grid-template-columns: 14rem minmax(0, 1fr) auto; }
        .let-summary-list--compact .let-summary-list__row { grid-template-columns: 10rem minmax(0, 1fr) auto; }
    }
    .let-summary-list__action { text-align: right; }

    /* ---------- Tables ---------- */
    /* Positioned, so hidden text inside a scrolled table cannot widen the page */
    .let-table-wrap { position: relative; overflow-x: auto; max-width: 100%; }
    /* A table that would squash its columns scrolls sideways instead, inside its focusable region */
    .let-table-wrap > .let-table { min-width: 34rem; }
    .let-table-wrap > .let-table--narrow { min-width: 0; }
    .let-table-wrap:focus-visible { outline-offset: 4px; }
    .let-table { width: 100%; font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
    .let-table caption { text-align: left; font-weight: var(--weight-semibold); font-size: var(--text-lg); padding-bottom: var(--space-3); }
    .let-table th, .let-table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; overflow-wrap: break-word; }
    .let-table th:last-child, .let-table td:last-child { padding-right: 0; }
    .let-table thead th { font-weight: var(--weight-semibold); border-bottom: 2px solid var(--color-border-strong); white-space: nowrap; }
    .let-table tbody th { font-weight: var(--weight-semibold); }
    .let-table .let-num { text-align: right; white-space: nowrap; }
    .let-table tfoot td, .let-table tfoot th { font-weight: var(--weight-semibold); border-bottom: 0; border-top: 2px solid var(--color-border-strong); }
    .let-table__sort { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; color: var(--color-link); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 0.18em; }
    .let-table__secondary { display: block; color: var(--color-ink-secondary); font-size: var(--text-xs); }
    /* A thumbnail in a table cell, such as an uploaded image an admin reviews */
    .let-table__image { display: block; width: 10rem; max-width: 100%; height: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-tint); }
    .let-table-tools { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: flex-end; justify-content: space-between; margin-bottom: var(--space-4); }
    .let-table-tools .let-field { margin-bottom: 0; }

    /* ---------- Pagination ---------- */
    .let-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-5); font-size: var(--text-sm); }
    .let-pagination__pages { display: flex; gap: var(--space-1); }
    .let-pagination__page { display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding-inline: var(--space-2); border-radius: var(--radius-sm); }
    .let-pagination__page[aria-current] { background: var(--color-ink); color: var(--color-ink-inverse); text-decoration: none; font-weight: var(--weight-semibold); }

    /* ---------- Sub-navigation shown as tabs (each tab is a page) ---------- */
    .let-subnav { position: relative; border-bottom: 1px solid var(--color-border-strong); margin-bottom: var(--space-6); overflow-x: auto; }
    .let-subnav__list { display: flex; gap: var(--space-5); }
    .let-subnav__link { display: inline-flex; gap: var(--space-2); align-items: center; padding-block: var(--space-3); color: var(--color-ink); font-weight: var(--weight-semibold); text-decoration: none; white-space: nowrap; border-bottom: 4px solid transparent; margin-bottom: -1px; }
    .let-subnav__link:hover { color: var(--color-ink); border-bottom-color: var(--color-border-strong); }
    .let-subnav__link[aria-current] { border-bottom-color: var(--color-action); }
    .let-count { display: inline-block; min-width: 1.5rem; padding: 0 var(--space-1); border-radius: var(--radius-pill); background: var(--color-tint); color: var(--color-ink); font-size: var(--text-xs); text-align: center; }

    /* ---------- Back-office side navigation ---------- */
    .let-sidenav { display: flex; flex-direction: column; min-height: 100%; padding: var(--space-5) var(--space-4); gap: var(--space-5); }
    .let-sidenav a { color: var(--color-on-dark-soft); }
    .let-sidenav :focus-visible { outline-color: var(--color-focus-on-dark); }
    .let-sidenav__logo { display: inline-flex; color: var(--color-white); padding-inline: var(--space-2); }
    .let-sidenav__logo svg { width: 7.5rem; height: auto; }
    .let-sidenav__org { padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-dark-raised); }
    .let-sidenav__org-label { display: block; font-size: var(--text-xs); color: var(--color-on-dark-muted); }
    .let-sidenav__org-name { display: block; color: var(--color-white); font-weight: var(--weight-semibold); }
    .let-sidenav__heading { padding-inline: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-on-dark-muted); }
    .let-sidenav__list > li + li { margin-top: 2px; }
    .let-sidenav__link { display: flex; align-items: center; gap: var(--space-3); min-height: 2.75rem; padding: var(--space-2); border-radius: var(--radius-sm); text-decoration: none; font-weight: var(--weight-regular); }
    .let-sidenav__link:hover { background: var(--color-dark-raised); color: var(--color-white); }
    .let-sidenav__link[aria-current] { background: var(--color-dark-raised); color: var(--color-white); font-weight: var(--weight-semibold); box-shadow: inset 4px 0 0 var(--color-on-dark-accent); }
    .let-sidenav__footer { padding:var(--space-3) var(--space-2) 0; border-top: 1px solid var(--color-on-dark-rule); font-size: var(--text-sm); color: var(--color-on-dark-secondary); }
    .let-sidenav__footer .let-link-button { color: var(--color-on-dark-soft); }
    .let-app__topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--gutter); background: var(--color-dark); color: var(--color-white); }
    .let-app__topbar-logo svg { width: 6.5rem; height: auto; }
    .let-app__topbar-logo { color: var(--color-white); }
    .let-app__topbar :focus-visible { outline-color: var(--color-focus-on-dark); }
    .let-app__menu-button { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding-inline: var(--space-3); border: 2px solid var(--color-on-dark-edge); border-radius: var(--radius-sm); background: transparent; color: var(--color-white); font-weight: var(--weight-semibold); }
    @media (min-width: 64em) { .let-app__topbar { display: none; } }
    @media (max-width: 64em) { .js .let-app__sidebar:not(.is-open) { display: none; } }

    /* ---------- Stats on dashboards ---------- */
    .let-stat { padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
    .let-stat__label { display: block; color: var(--color-ink-secondary); }
    /* A standalone figure keeps proportional digits; tabular digits are only for columns */
    .let-stat__value { display: block; font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.3; }
    .let-stat__note { display: block; font-size: var(--text-xs); color: var(--color-ink-secondary); }
    .let-meter { height: 0.5rem; margin-top: var(--space-2); border-radius: var(--radius-pill); background: var(--color-tint); overflow: hidden; }
    .let-meter__fill { height: 100%; width: 0; background: var(--color-action); }
    .let-meter__fill--5 { width: 5%; }   .let-meter__fill--10 { width: 10%; } .let-meter__fill--15 { width: 15%; }
    .let-meter__fill--20 { width: 20%; } .let-meter__fill--25 { width: 25%; } .let-meter__fill--30 { width: 30%; }
    .let-meter__fill--35 { width: 35%; } .let-meter__fill--40 { width: 40%; } .let-meter__fill--45 { width: 45%; }
    .let-meter__fill--50 { width: 50%; } .let-meter__fill--55 { width: 55%; } .let-meter__fill--60 { width: 60%; }
    .let-meter__fill--65 { width: 65%; } .let-meter__fill--70 { width: 70%; } .let-meter__fill--75 { width: 75%; }
    .let-meter__fill--80 { width: 80%; } .let-meter__fill--85 { width: 85%; } .let-meter__fill--90 { width: 90%; }
    .let-meter__fill--95 { width: 95%; } .let-meter__fill--100 { width: 100%; }

    /* Secondary navigation on a light surface, such as settings sections */
    .let-sidenav-light__link { display: block; padding: var(--space-2) var(--space-3); border-left: 4px solid transparent; color: var(--color-ink); text-decoration: none; }
    .let-sidenav-light__link:hover { background: var(--color-tint); color: var(--color-ink); }
    .let-sidenav-light__link[aria-current] { border-left-color: var(--color-action); background: var(--color-surface); font-weight: var(--weight-semibold); }

    /* Destructive actions live in their own section, marked at the edge */
    .let-section.let-danger { border-left: 4px solid var(--color-error); }

    /* ---------- Steps: where the buyer is in a short journey ---------- */
    .let-steps { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--text-sm); color: var(--color-ink-secondary); margin-bottom: var(--space-4); }
    .let-steps li { display: inline-flex; align-items: center; gap: var(--space-2); }
    .let-steps__number { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2px solid var(--color-border-strong); font-weight: var(--weight-semibold); font-size: var(--text-xs); }
    .let-steps [aria-current] { color: var(--color-ink); font-weight: var(--weight-semibold); }
    .let-steps [aria-current] .let-steps__number { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-ink-inverse); }
    .let-steps .is-done .let-steps__number { background: var(--color-success-bg); border-color: var(--color-success); color: var(--color-success); }

    /* ---------- Ticket hold timer ---------- */
    .let-timer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); border: 2px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); margin-bottom: var(--space-5); }
    .let-timer > .let-icon { width: 1.5rem; height: 1.5rem; }
    .let-timer > p { flex: 1 1 16rem; margin: 0; }
    .let-timer__clock { font-variant-numeric: tabular-nums; font-weight: var(--weight-semibold); }
    .let-timer--warning { border-color: var(--color-warning-edge); background: var(--color-warning-bg); }

    /* ---------- Event summary and ticket options ---------- */
    .let-event-hero { background: var(--brand); color: var(--brand-on); padding-block: var(--space-6) var(--space-7); }
    .let-event-hero h1 { color: var(--brand-on); font-size: var(--text-3xl); max-width: 22ch; }
    .let-event-hero a { color: var(--brand-on); }
    .let-event-hero :focus-visible { outline-color: var(--brand-on); }
    .let-event-hero .let-caption { color: var(--brand-on); }
    .let-event-facts { display: grid; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-md); }
    .let-event-facts li { display: flex; gap: var(--space-3); align-items: flex-start; }
    .let-event-image { aspect-ratio: 16 / 7; width: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); border-radius: var(--radius-md); background: var(--color-tint); }
    .let-card--flush > .let-event-image, .let-card--flush > .let-photo { border-radius: 0; }
    /* The organiser's event photo, cropped around the focal point they chose. Text never sits on it. */
    .let-event-photo { width: 100%; height: clamp(11rem, 30vw, 22rem); object-fit: cover; object-position: var(--focal, 50% 50%); background: var(--brand); }

    /* Ticket types grouped by day or kind: each group is a panel with its name in a header strip.
       The legend floats so it can fill the strip; the list after it clears it. */
    .let-ticket-group { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-raised); overflow: hidden; }
    .let-ticket-group + .let-ticket-group { margin-top: var(--space-5); }
    .let-ticket-group__legend { float: left; width: 100%; padding: var(--space-3) var(--space-5); background: var(--color-tint); border-bottom: 1px solid var(--color-border); }
    .let-ticket-group__legend h3 { font-size: var(--text-lg); }
    .let-ticket-group .let-ticket-list { clear: both; border-top: 0; }
    /* A panel of fields instead of tickets, such as the organiser's questions for one ticket */
    .let-ticket-group__body { clear: both; padding: var(--space-5); }
    .let-ticket-group__body > .let-field:last-child { margin-bottom: 0; }
    .let-ticket-group .let-ticket { padding-inline: var(--space-5); }
    .let-ticket-group .let-ticket:last-child { border-bottom: 0; }
    .let-ticket-list { border-top: 1px solid var(--color-border); }
    .let-ticket { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3) var(--space-5); align-items: center; padding-block: var(--space-4); border-bottom: 1px solid var(--color-border); }
    .let-ticket__name { font-size: var(--text-md); font-weight: var(--weight-semibold); }
    .let-ticket__price { font-size: var(--text-md); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
    .let-ticket__detail { color: var(--color-ink-secondary); font-size: var(--text-sm); }
    .let-ticket__choose { grid-column: 2; grid-row: 1 / span 2; }
    @media (max-width: 40em) {
        .let-ticket { grid-template-columns: minmax(0, 1fr); }
        .let-ticket__choose { grid-column: 1; grid-row: auto; }
    }

    .let-order-summary { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
    .let-order-summary h2 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
    .let-order-summary__row { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-2); font-variant-numeric: tabular-nums; }
    .let-order-summary__row--total { margin-top: var(--space-2); padding-top: var(--space-3); border-top: 2px solid var(--color-border-strong); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
    .let-order-summary__note { display: block; font-size: var(--text-xs); color: var(--color-ink-secondary); }
    /* On phones, the total at the top of each checkout step with the order inside (section 7.2) */
    .let-order-total { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
    .let-order-total > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2) var(--space-4); padding: var(--space-3) var(--space-4); cursor: pointer; }
    .let-order-total > summary > span:first-child { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; }
    .let-order-total > summary > span:last-child { font-variant-numeric: tabular-nums; }
    .let-order-total__body { padding: 0 var(--space-4) var(--space-3); }
    @media (min-width: 64em) { .let-order-total { display: none; } }

    /* ---------- Confirmation panel ---------- */
    .let-panel { padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-panel); color: var(--color-white); text-align: center; }
    .let-panel h1 { color: var(--color-white); }
    .let-panel__body { font-size: var(--text-lg); margin-top: var(--space-3); }
    .let-panel__ref { display: inline-block; margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-xl); font-weight: var(--weight-semibold); letter-spacing: 0.05em; }

    /* ---------- Phone ticket: shown at the entrance, the same faces as the PDF ---------- */
    .let-phone-ticket { width: 100%; max-width: 26rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-raised); overflow: hidden; }
    .let-phone-ticket__band { padding: var(--space-4) var(--space-5); background: var(--brand); color: var(--brand-on); border-bottom: 4px solid var(--brand-accent); }
    .let-phone-ticket__band > * { margin: 0; }
    .let-phone-ticket__event { color: var(--brand-on); font-size: var(--text-xl); margin-block: var(--space-1); }
    .let-phone-ticket__body { padding: var(--space-5); }
    .let-phone-ticket__day { display: inline-block; padding: var(--space-1) var(--space-3); border: 2px solid var(--color-ink); border-radius: var(--radius-sm); font-weight: var(--weight-semibold); }
    /* The code stays black on white in every theme, so it always scans */
    .let-phone-ticket__qr { padding-block: var(--space-4); border-block: 1px dashed var(--color-border-strong); text-align: center; }
    .let-phone-ticket__qr > img, .let-phone-ticket__qr > svg { display: block; width: min(100%, 16rem); height: auto; margin-inline: auto; background: var(--color-white); image-rendering: pixelated; }
    .let-phone-ticket__number { margin-top: var(--space-2); font-family: var(--font-mono); font-size: var(--text-lg); font-weight: var(--weight-semibold); letter-spacing: 0.05em; }
    .let-phone-ticket__image { width: 100%; height: auto; border-radius: var(--radius-sm); }
    .let-phone-ticket__terms { color: var(--color-ink-secondary); font-size: var(--text-xs); }

    /* ---------- Contents list and long-form text ---------- */
    .let-contents { padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-border-strong); background: var(--color-surface); font-size: var(--text-sm); }
    .let-contents h2 { font-size: var(--text-body); margin-bottom: var(--space-2); }
    .let-contents ol { padding-left: var(--space-5); }
    .let-contents li + li { margin-top: var(--space-1); }

    /* Long-form text styles apply to direct children only, so components placed in the text keep their own spacing */
    .let-prose > * + * { margin-top: var(--space-4); }
    .let-prose > h2 { margin-top: var(--space-7); scroll-margin-top: var(--space-5); }
    .let-prose > h3 { margin-top: var(--space-6); }
    .let-prose > h2 + *, .let-prose > h3 + * { margin-top: var(--space-3); }
    .let-prose > ul, .let-prose > ol { padding-left: var(--space-5); }
    .let-prose > ul > li + li, .let-prose > ol > li + li { margin-top: var(--space-2); }
    .let-prose li::marker { color: var(--color-ink-secondary); }
    .let-prose > table { width: 100%; font-size: var(--text-sm); }
    .let-prose > table th, .let-prose > table td { padding: var(--space-3) var(--space-4) var(--space-3) 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
    .let-prose > table thead th { border-bottom: 2px solid var(--color-border-strong); }
    .let-meta { color: var(--color-ink-secondary); font-size: var(--text-sm); }
    .let-numbered { list-style: decimal; padding-left: var(--space-5); }
    .let-bulleted { list-style: disc; padding-left: var(--space-5); }

    /* ---------- Marketing ---------- */
    /* LET's own pages: a warm canvas. Organiser pages, checkout and the dashboard stay cool */
    .let-marketing { --color-canvas: var(--color-canvas-warm); }
    .let-hero { display: grid; gap: var(--space-6); align-items: center; padding-block: var(--space-7) var(--space-8); }
    .let-hero h1 { font-size: var(--text-3xl); letter-spacing: -0.02em; max-width: 16ch; }
    .let-hero__image { border-radius: var(--radius-md); aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--color-tint); }
    /* A line for people who are not organisers, set apart from the hero's actions */
    .let-hero__note { padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
    @media (min-width: 64em) { .let-hero { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); } }
    /* A screen from LET itself in place of a photo, on a tinted panel: a phone rising from it, cut
       off at the bottom, or a desktop screen running off its right and bottom edges */
    .let-showcase { display: flex; justify-content: center; align-items: flex-start; aspect-ratio: 4 / 3; padding-top: var(--space-6); overflow: hidden; border-radius: var(--radius-md); background: var(--color-tint); }
    .let-showcase__phone { width: min(62%, 18rem); border: 0.5rem solid var(--color-dark); border-bottom: 0; border-radius: 1.75rem 1.75rem 0 0; background: var(--color-white); box-shadow: var(--shadow-overlay); }
    .let-showcase--wide { justify-content: flex-start; padding-left: var(--space-6); }
    .let-showcase__window { width: 100%; height: auto; border: 1px solid var(--color-border); border-width: 1px 0 0 1px; border-radius: var(--radius-md) 0 0 0; background: var(--color-white); box-shadow: var(--shadow-overlay); }
    @media (min-width: 40em) { .let-showcase--wide { aspect-ratio: 16 / 9; padding: var(--space-7) 0 0 var(--space-7); } }
    .let-feature { display: grid; align-content: start; gap: var(--space-2); }
    .let-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--color-action-tint); color: var(--color-action); }
    /* A content photo beside text: rounded, cropped to fill its box. Decorative ones have alt="" */
    .let-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); background: var(--color-tint); }
    /* A link to the next step on its own line, ending in an arrow that moves a little on hover */
    .let-link-arrow { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
    .let-link-arrow .let-icon { transition: transform var(--duration) ease-out; }
    .let-link-arrow:hover .let-icon { transform: translateX(var(--space-1)); }

    /* ---------- Empty state ---------- */
    .let-empty { padding: var(--space-7) var(--space-5); text-align: center; border: 2px dashed var(--color-border); border-radius: var(--radius-md); }
    .let-empty > * + * { margin-top: var(--space-3); }

    /* ---------- Dialog: confirmations only ---------- */
    .let-dialog { width: min(32rem, calc(100% - 2 * var(--space-4))); padding: 0; border: 0; border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-overlay); }
    .let-dialog::backdrop { background: var(--color-backdrop); }
    .let-dialog__body { padding: var(--space-6); }
    .let-dialog__body > * + * { margin-top: var(--space-4); }
    .let-dialog[open].is-static { position: static; margin: 0; display: block; }

    /* ---------- Switch: a setting that takes effect at once, with no Save button ---------- */
    /* A checkbox with role="switch". The words "On" and "Off" show its state as well as the knob. */
    .let-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
    .let-switch input {
        appearance: none;
        position: relative;
        flex: none;
        width: 3.25rem;
        height: 2rem;
        margin: 0;
        border: var(--border-control) solid var(--color-border-strong);
        border-radius: var(--radius-pill);
        background: var(--color-surface);
        cursor: pointer;
        transition: background-color var(--duration);
    }
    .let-switch input::before { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--color-border-strong); transition: transform var(--duration); }
    .let-switch input:checked { border-color: var(--color-action); background: var(--color-action); }
    .let-switch input:checked::before { background: var(--color-on-action); transform: translateX(1.25rem); }
    .let-switch label { font-weight: var(--weight-semibold); cursor: pointer; }
    .let-switch__state { color: var(--color-ink-secondary); }
    .let-switch input:checked ~ .let-switch__state--off, .let-switch input:not(:checked) ~ .let-switch__state--on { display: none; }
    .let-switch .let-hint { flex-basis: 100%; margin: 0; }
    @media (forced-colors: active) {
        .let-switch input::before { background: CanvasText; }
        .let-switch input:checked::before { background: Highlight; }
    }

    /* ---------- File upload: the browser's own control, styled to match ---------- */
    .let-file-input { display: block; max-width: 100%; }
    .let-file-input::file-selector-button {
        min-height: var(--control-height);
        margin-right: var(--space-4);
        padding: var(--space-2) var(--space-5);
        border: var(--border-control) solid var(--color-border-strong);
        border-radius: var(--radius-sm);
        background: var(--color-surface);
        color: var(--color-ink);
        font: inherit;
        font-weight: var(--weight-semibold);
        cursor: pointer;
    }
    .let-file-input::file-selector-button:hover { background: var(--color-tint); }
    .let-file-input:focus-visible { outline-offset: 2px; }
    .let-file-input--error::file-selector-button { border-color: var(--color-error); }
    /* The file already saved, shown above the control with a way to remove it */
    .let-file-current { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
    .let-file-current__image { width: 7rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-sm); background: var(--color-tint); }
    .let-file-current__logo { max-width: 7rem; height: 4.5rem; object-fit: contain; }

    /* ---------- Search: a labelled field and a button, sent with GET ---------- */
    .let-search__row { display: flex; gap: var(--space-2); max-width: var(--width-form); }
    .let-search__row .let-input { flex: 1 1 auto; min-width: 0; }

    /* An organiser colour (section 4.10): the browser's own colour field */
    .let-colour { display: block; inline-size: 6rem; block-size: var(--control-height); padding: var(--space-1); border: var(--border-control) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; }
    .let-colour::-webkit-color-swatch-wrapper { padding: 0; }
    .let-colour::-webkit-color-swatch { border: 0; border-radius: 2px; }
    .let-colour::-moz-color-swatch { border: 0; border-radius: 2px; }
    .let-search__row .let-button { flex: none; }

    /* ---------- Copy: a read-only value with a button that copies it ---------- */
    .let-copy { display: flex; flex-wrap: wrap; gap: var(--space-2); max-width: var(--width-form); }
    .let-copy .let-input { flex: 1 1 16rem; min-width: 0; font-family: var(--font-mono); font-size: var(--text-sm); }
    .let-copy .let-button { flex: none; }

    /* ---------- Character count under a textarea ---------- */
    .let-character-count { margin-top: var(--space-2); color: var(--color-ink-secondary); }
    .let-character-count--over { color: var(--color-error); font-weight: var(--weight-semibold); }

    /* ---------- Loading: the words say what is happening; the ring is only a hint ---------- */
    .let-loading { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink-secondary); }
    .let-loading::before { content: ""; flex: none; width: 1.25em; height: 1.25em; border: 2px solid var(--color-border); border-top-color: var(--color-ink); border-radius: 50%; animation: let-spin 900ms linear infinite; }
    @keyframes let-spin { to { transform: rotate(360deg); } }

    /* ---------- Check-in result: read at arm's length, outdoors, in a hurry ---------- */
    /* Colour, a shape and a word all say the same thing, so no one relies on colour alone. */
    .let-scan-result { display: grid; justify-items: center; gap: var(--space-2); padding: var(--space-7) var(--space-5); border-radius: var(--radius-md); background: var(--color-ink); color: var(--color-ink-inverse); text-align: center; }
    .let-scan-result__icon { width: 4.5rem; height: 4.5rem; stroke-width: 3; }
    .let-scan-result__title { color: inherit; font-size: var(--text-3xl); font-weight: var(--weight-semibold); line-height: 1.1; }
    .let-scan-result__detail { font-size: var(--text-lg); }
    .let-scan-result--pass { background: var(--color-success); }
    .let-scan-result--stop { background: var(--color-error); }
    .let-scan-result--check { background: var(--color-warning); }
    .let-scan-ticket { font-size: var(--text-lg); }
    .let-scan-result--ready { background: var(--color-tint); color: var(--color-ink); }

    /* Check-in template (section 7.9): the scanning device, always light */
    .let-checkin__header { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
    .let-checkin__logo { flex: none; width: 3rem; height: 3rem; object-fit: contain; padding: 2px; border-radius: var(--radius-sm); background: var(--color-surface); }
    .let-checkin__logo--on-dark { background: var(--color-ink); }
    .let-checkin__event { font-weight: var(--weight-semibold); line-height: var(--leading-tight); overflow-wrap: anywhere; }
    .let-checkin__camera { width: min(100%, 16rem); aspect-ratio: 1; margin-inline: auto; border-radius: var(--radius-md); overflow: hidden; background: var(--color-ink); }
    .let-checkin__camera video { display: block; width: 100%; height: 100%; object-fit: cover; }
    .let-checkin__footer { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-ink-secondary); font-size: var(--text-sm); }

    /* ---------- Charts: a picture of a table that is always on the page ---------- */
    /* Lines are SVG stretched over the plot; every word is HTML, so text never shrinks with the picture.
       Positions come from the server as --x and --y percentages. */
    .let-chart__title { display: block; font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
    .let-chart__summary { display: block; margin-top: var(--space-1); color: var(--color-ink-secondary); }
    .let-chart__legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); font-size: var(--text-sm); }
    .let-chart__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
    .let-chart__key { display: inline-block; width: 1.25rem; height: 0.25rem; border-radius: var(--radius-pill); }
    .let-chart__key--1 { background: var(--chart-1); }
    .let-chart__key--2 { background: var(--chart-2); }
    .let-chart__frame { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); margin-top: var(--space-4); color: var(--color-ink-secondary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
    .let-chart__y, .let-chart__plot { position: relative; height: 13rem; }
    .let-chart__y { min-width: 2.5rem; }
    .let-chart__y span { position: absolute; right: 0; transform: translateY(-50%); }
    .let-chart__at-0 { top: 100%; }
    .let-chart__at-25 { top: 75%; }
    .let-chart__at-50 { top: 50%; }
    .let-chart__at-75 { top: 25%; }
    .let-chart__at-100 { top: 0; }
    .let-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
    .let-chart__grid { stroke: var(--color-border); stroke-width: 1; }
    .let-chart__baseline { stroke: var(--color-border-strong); stroke-width: 1; }
    .let-chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .let-chart__line--1 { stroke: var(--chart-1); }
    .let-chart__line--2 { stroke: var(--chart-2); }
    .let-chart__dot { position: absolute; left: var(--x); top: var(--y); width: 0.875rem; height: 0.875rem; border: 2px solid var(--color-surface); border-radius: 50%; transform: translate(-50%, -50%); }
    .let-chart__dot--1 { background: var(--chart-1); }
    .let-chart__dot--2 { background: var(--chart-2); }
    .let-chart__value { position: absolute; left: var(--x); top: var(--y); padding-left: var(--space-3); transform: translateY(-50%); color: var(--color-ink); font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
    .let-chart__value--left { padding: 0 var(--space-3) 0 0; transform: translate(-100%, -50%); }
    .let-chart__x { grid-column: 2; display: grid; grid-template-columns: repeat(var(--columns), minmax(0, 1fr)); margin-top: var(--space-2); text-align: center; }
    .let-chart__axis-title { grid-column: 2; margin-top: var(--space-1); text-align: center; }

    /* Bars for one series across categories: the value sits at the end of each bar */
    .let-bars { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
    .let-bars__row { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: var(--space-1) var(--space-4); align-items: center; }
    .let-bars__label { font-size: var(--text-sm); }
    .let-bars__track { display: flex; align-items: center; gap: var(--space-2); }
    .let-bars__bar { flex: 0 1 var(--share); min-width: 2px; height: 1.25rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--chart-1); }
    .let-bars__value { font-size: var(--text-sm); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
    @media (max-width: 40em) { .let-bars__row { grid-template-columns: minmax(0, 1fr); } }

    @media (forced-colors: active) {
        .let-chart__line { stroke: CanvasText; }
        .let-chart__line--2 { stroke-dasharray: 6 4; }
        .let-chart__dot, .let-chart__key, .let-bars__bar { forced-color-adjust: none; background: CanvasText; }
    }

}

/* ------------------------------------------------------------------ */
@layer utilities {
    /* Utilities are the last layer, so they win without !important */
    .let-visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
        border: 0;
    }
    .let-nowrap { white-space: nowrap; }
    .let-mono { font-family: var(--font-mono); }
    .let-text-right { text-align: right; }
    .let-mt-0 { margin-top: 0; }
    .let-mb-0 { margin-bottom: 0; }

    /* Last layer, so it wins without !important: no movement for people who ask for none */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { transition: none; animation: none; scroll-behavior: auto; }
    }
}

@media print {
    .let-header, .let-footer, .let-app__sidebar, .let-app__topbar, .let-skip-link { display: none; }
    body { background: var(--color-white); color: var(--color-black); }
    a { color: var(--color-black); }
}

/* ------------------------------------------------------------------ */
/* The two third-party widgets the design system allows (section 7.8): Quill for organiser text
   and Leaflet for the dashboard map. Their own stylesheets have no layer, so these rules have
   none either, or the widgets' styles would win. Only colours, edges, type and focus change. */

/* Rich text editor: a textarea with data-rich-text, enhanced by assets/js/rich-text.js */
.ql-toolbar.ql-snow { border: var(--border-control) solid var(--color-border-strong); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-tint); font-family: var(--font-sans); }
.ql-container.ql-snow { border: var(--border-control) solid var(--color-border-strong); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font-family: var(--font-sans); font-size: var(--text-body); }
.ql-editor { min-height: 8rem; line-height: var(--leading-body); }
.ql-editor:focus-visible, .ql-snow .ql-toolbar button:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
.ql-snow .ql-stroke { stroke: var(--color-ink); }
.ql-snow .ql-fill { fill: var(--color-ink); }
.ql-snow .ql-picker { color: var(--color-ink); }
.let-field--error .ql-toolbar.ql-snow, .let-field--error .ql-container.ql-snow { border-color: var(--color-error); }

/* The dashboard map for an event's place, with the address search above it */
.let-map { height: 18rem; border: var(--border-control) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-tint); }
.let-map .leaflet-control-attribution { font-size: var(--text-xs); }
.let-map .leaflet-bar a, .let-map__toggle { min-width: 2.75rem; min-height: 2.75rem; line-height: 2.75rem; }
.let-map__toggle { padding-inline: var(--space-3); border: var(--border-control) solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); font: inherit; font-weight: var(--weight-semibold); }
.let-map :focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: 2px; }
.let-location__results { margin-top: var(--space-2); max-width: var(--width-form); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); }
.let-location__results:empty { display: none; }
.let-location__results li + li { border-top: 1px solid var(--color-border); }
.let-location__results button { display: block; width: 100%; padding: var(--space-3) var(--space-4); border: 0; background: none; color: var(--color-link); font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.let-location__results p { padding: var(--space-3) var(--space-4); color: var(--color-ink-secondary); }