/*
 * Whookup's design system for the admin, the console and the portal: the tokens and the wu- component styles.
 * This file is the source (ADR 0011, docs/brand/design-system.md); edit it directly. Keep the class names unchanged.
 */
/* ===== tokens: light theme on :root, dark theme below (docs/brand/design-system.md lists them) ===== */
@font-face {
    font-family: "Nunito";
    src: url("/fonts/Nunito-latin.woff2") format("woff2");
    font-weight: 700 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Sans";
    src: url("/fonts/IBMPlexSans-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("/fonts/IBMPlexMono-Medium-latin.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "IBM Plex Mono";
    src: url("/fonts/IBMPlexMono-SemiBold-latin.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
:root {
    --paper: #f4f5f8;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --sunken: #eaedf2;
    --line: #d8dce4;
    --line-strong: #7d8799;
    --ink: #1a2332;
    --ink-muted: #4a5466;
    --ink-subtle: #5c6678;
    --ink-disabled: #9aa3b2;
    --owl: #1f2b3e;
    /* The white ears of the owner's dark-mode drawings (the reversed mark and wordmark): none in the light theme. */
    --owl-ears: transparent;
    /* The navy head behind the mark alone: none in the dark theme, as the owner's reversed mark is drawn. */
    --owl-silhouette: var(--owl);
    /* Hoo's wings and props (components/hoo): navy like the head, white in the dark theme like the reversed ears. */
    --owl-wings: var(--owl);
    --owl-letters: var(--owl);
    --cream: #fdf4e7;
    --amber: #f3a535;
    --amber-hover: #e5921a;
    --on-amber: #1a2332;
    --amber-ink: #8a4c00;
    --amber-soft: #fdf0d8;
    --nav: #1f2b3e;
    --nav-ink: #c3ccda;
    --nav-ink-active: #ffffff;
    --nav-active: #2e3d56;
    --sky: #255f8f;
    --sky-soft: #e0ecf6;
    --focus: var(--sky);
    --focus-on-nav: var(--amber);
    --green: #1f6b45;
    --green-soft: #e1f1e7;
    --red: #a3261d;
    --red-soft: #fbe3df;
    --on-red: #ffffff;
    --neutral-soft: #e7eaf0;
    --scrim: #10151d7a;
    --occ-free: var(--green);
    --occ-low: #b86e00;
    --occ-full: #4a5466;
    --occ-over: var(--red);
    --shadow-sm: 0 1px 2px #1a23320f, 0 1px 1px #1a23320a;
    --shadow-md: 0 4px 12px #1a23321f, 0 1px 3px #1a232314;
    --shadow-lg: 0 16px 40px #1a232338, 0 2px 6px #1a23321a;
    --shadow-xl: 0 24px 96px 32px #1a232347, 0 16px 40px #1a232338, 0 2px 6px #1a23321a;
    --focus-ring: 0 0 0 2px #ffffff, 0 0 0 4px #255f8f;
    --focus-ring-nav: 0 0 0 2px #1f2b3e, 0 0 0 4px #f3a535;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-12: 48px;
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 999px;
    /* The inner radius of a rounded container with a 1px border, for the children at its edge (see Card). */
    --radius-md-inner: calc(var(--radius-md) - 1px);
    --radius-lg-inner: calc(var(--radius-lg) - 1px);
    --control-sm: 32px;
    --control-md: 40px;
    --control-lg: 48px;
    --touch-min: 44px;
    --appbar-height: 56px;
    --bottomnav-height: 64px;
    --sidenav-width: 232px;
    --sidenav-collapsed: 64px;
    --panel-width: 480px;
    --content-max: 1240px;
    --portal-max: 560px;
    --breakpoint-desktop: 1024px;
    --z-sticky: 10;
    --z-nav: 20;
    --z-popover: 30;
    --z-panel: 40;
    --z-dialog: 50;
    --z-toast: 60;
    --font-display: "Nunito", "Arial Rounded MT Bold", "Segoe UI", system-ui, sans-serif;
    --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #10151d;
        --surface: #161d28;
        --surface-raised: #1c2431;
        --sunken: #0c1118;
        --line: #263042;
        --line-strong: #68758a;
        --ink: #e5e9f0;
        --ink-muted: #a9b2c0;
        --ink-subtle: #8d97a8;
        --ink-disabled: #566174;
        --owl-ears: #ffffff;
        --owl-silhouette: transparent;
        --owl-wings: #ffffff;
        --owl-letters: #ffffff;
        --amber-hover: #f7b95c;
        --amber-ink: #f4c27a;
        --amber-soft: #33270f;
        --nav: #0b1017;
        --nav-ink: #a9b2c0;
        --nav-active: #1c2431;
        --sky: #8dc0e8;
        --sky-soft: #142a3c;
        --green: #8fd3ab;
        --green-soft: #15301f;
        --red: #f19a90;
        --red-soft: #3a1a17;
        --on-red: #1a0d0b;
        --neutral-soft: #232c3b;
        --scrim: #000000a3;
        --occ-low: var(--amber);
        --occ-full: #a9b2c0;
        --shadow-sm: 0 1px 2px #00000066;
        --shadow-md: 0 6px 16px #00000099;
        --shadow-lg: 0 16px 40px #000000b3;
    --shadow-xl: 0 24px 96px 32px #000000b3, 0 16px 40px #000000b3;
        --shadow-xl: 0 24px 96px 32px #000000b3, 0 16px 40px #000000b3;
        --focus-ring: 0 0 0 2px #161d28, 0 0 0 4px #8dc0e8;
        --focus-ring-nav: 0 0 0 2px #0b1017, 0 0 0 4px #f3a535;
    }
}
[data-theme="dark"] {
    --paper: #10151d;
    --surface: #161d28;
    --surface-raised: #1c2431;
    --sunken: #0c1118;
    --line: #263042;
    --line-strong: #68758a;
    --ink: #e5e9f0;
    --ink-muted: #a9b2c0;
    --ink-subtle: #8d97a8;
    --ink-disabled: #566174;
    --owl-ears: #ffffff;
    --owl-silhouette: transparent;
    --owl-wings: #ffffff;
    --owl-letters: #ffffff;
    --amber-hover: #f7b95c;
    --amber-ink: #f4c27a;
    --amber-soft: #33270f;
    --nav: #0b1017;
    --nav-ink: #a9b2c0;
    --nav-active: #1c2431;
    --sky: #8dc0e8;
    --sky-soft: #142a3c;
    --green: #8fd3ab;
    --green-soft: #15301f;
    --red: #f19a90;
    --red-soft: #3a1a17;
    --on-red: #1a0d0b;
    --neutral-soft: #232c3b;
    --scrim: #000000a3;
    --occ-low: var(--amber);
    --occ-full: #a9b2c0;
    --shadow-sm: 0 1px 2px #00000066;
    --shadow-md: 0 6px 16px #00000099;
    --shadow-lg: 0 16px 40px #000000b3;
    --focus-ring: 0 0 0 2px #161d28, 0 0 0 4px #8dc0e8;
    --focus-ring-nav: 0 0 0 2px #0b1017, 0 0 0 4px #f3a535;
}
/* type styles: one class per style of tokens.json */
.display-xl {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 44px;
    font-weight: 900;
    letter-spacing: -0.01em;
}
.display {
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 36px;
    font-weight: 800;
    letter-spacing: -0.005em;
}
.title {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
}
.title-sm {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
}
.heading {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 22px;
    font-weight: 400;
}
.body-strong {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}
.body-lg {
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}
.label {
    font-family: var(--font-sans);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}
.small {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
}
.caption {
    font-family: var(--font-sans);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.figure {
    font-family: var(--font-sans);
    font-size: 28px;
    line-height: 32px;
    font-weight: 600;
}
.code {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
}
.code-lg {
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ===== core: base, motion, focus, Icon, Logo, Button, IconButton, Chip, Counter, Kbd, Card, Spinner ===== */
:root {
    --wu-ease: cubic-bezier(.2, .7, .2, 1);
    --wu-fast: 120ms;
    --wu-base: 200ms;
    --wu-slow: 320ms;
}
@media (prefers-reduced-motion: reduce) {
    :root {
        --wu-fast: 0ms;
        --wu-base: 0ms;
        --wu-slow: 0ms;
    }
}
[data-theme="dark"] {
    color-scheme: dark;
}
[hidden] {
    display: none !important;
}
.wu-vh {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
*, *::before, *::after {
    box-sizing: border-box;
}
/* A legend starts at its fieldset's edge like every label; browsers indent it by 2 px. */
legend {
    padding: 0;
}
body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: 22px;
    -webkit-font-smoothing: antialiased;
    font-variant-numeric: tabular-nums;
}
a {
    color: var(--sky);
    text-underline-offset: 2px;
}
a:hover {
    text-decoration-thickness: 2px;
}
:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
button, input, select, textarea {
    font: inherit;
    color: inherit;
}

/* preview scaffolding (component cards only) */

/* Icon */
.wu-icon {
    flex: none;
    display: inline-block;
    vertical-align: middle;
}

/* Logo */
.wu-logo {
    display: inline-flex;
    flex: none;
}
.wu-logo__head {
    fill: var(--owl);
}
.wu-logo__ears {
    fill: var(--owl-ears);
}
.wu-logo__letters {
    fill: var(--owl-letters);
}
.wu-logo__eye {
    fill: #ffffff;
}
.wu-logo__iris {
    fill: var(--amber);
}
.wu-logo__pupil {
    fill: var(--owl);
}
.wu-logo__beak {
    fill: var(--amber);
}
/* The mark alone recolors its one drawing: in the dark theme it is the owner's reversed mark, ears and eyes without */
/* the head behind them (docs/brand/whookup-mark-reversed.svg). */
.wu-logo--mark .wu-logo__head {
    fill: var(--owl-silhouette);
}
.wu-logo--tile-cream .wu-logo__tile {
    fill: var(--cream);
}
.wu-logo--tile-cream .wu-logo__ears, .wu-logo--tile-amber .wu-logo__ears {
    fill: transparent;
}
.wu-logo--tile-navy .wu-logo__tile {
    fill: var(--owl);
}
.wu-logo--tile-navy .wu-logo__ears {
    fill: #ffffff;
}
.wu-logo--tile-amber .wu-logo__tile {
    fill: var(--amber);
}
.wu-logo--lockup {
    flex-direction: column;
    align-items: flex-start;
    gap: calc(var(--wu-logo-h, 32px) * .14);
}
.wu-logo__slogan {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--owl-letters);
    font-size: calc(var(--wu-logo-h, 32px) * .3);
    line-height: 1.2;
    padding-left: calc(var(--wu-logo-h, 32px) * .035);
}
.wu-logo__slogan em {
    font-style: normal;
    color: var(--amber-ink);
}
/* The wordmark holds both of the owner's drawings: the dark theme's has a larger head without a silhouette, so it is */
/* a drawing of its own (docs/brand/whookup-wordmark-reversed.svg), not the light one recolored. */
.wu-logo__word--dark {
    display: none;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .wu-logo__word--light {
        display: none;
    }
    :root:not([data-theme="light"]) .wu-logo__word--dark {
        display: block;
    }
}
[data-theme="dark"] .wu-logo__word--light {
    display: none;
}
[data-theme="dark"] .wu-logo__word--dark {
    display: block;
}
/* The blink (design system "Motion", ADR 0014): each open eye of the owl is a group (.wu-logo__blink) that closes */
/* around its own middle once while the pointer is over the logo or Hoo. Nothing moves on its own, and under */
/* prefers-reduced-motion not even that. Eyes a pose draws half or fully closed have no such group. */
.wu-logo__blink {
    transform-box: fill-box;
    transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
    .wu-logo:hover .wu-logo__blink, .wu-hoo:hover .wu-logo__blink {
        animation: wu-blink 320ms ease-in-out 1;
    }
}
@keyframes wu-blink {
    0%, 100% {
        transform: scaleY(1);
    }
    45%, 55% {
        transform: scaleY(.12);
    }
}

/* Hoo (UX concept 8.8, components/hoo): the owl of the logo as a character, with at most one line beside it. One owl */
/* moment per screen, never over rows, numbers or buttons. A pose is one of the owner's drawings with its motion */
/* (components/hoo/<pose>; E07, E09 and E17 are the mark), which plays once when its moment appears (below). */
/* --wu-hoo-head is the width of Hoo's head, the one size a place sets: a drawing keeps the mark's scale, so a pose */
/* with its wings out is wider than the head, not a smaller head. */
.wu-hoo {
    --wu-hoo-head: 56px;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.wu-hoo__figure {
    display: inline-flex;
    flex: none;
}
.wu-hoo__line {
    margin: 0;
    max-width: 34ch;
    font: 700 15px/20px var(--font-display);
    color: var(--ink-muted);
}
/* A drawing's width in the mark's units, whose head is 49.394 wide (docs/brand/whookup-mark.svg's viewBox). */
.wu-hoo__pose {
    display: block;
    width: calc(var(--wu-hoo-head) * var(--wu-hoo-span) / 49.394);
    height: auto;
    overflow: visible;
}
.wu-hoo--friendly, .wu-hoo--tilted, .wu-hoo--confused {
    --wu-hoo-span: 49.394;
}
.wu-hoo--envelope {
    --wu-hoo-span: 52.19;
}
.wu-hoo--yawning {
    --wu-hoo-span: 55.42;
}
.wu-hoo--pointing {
    --wu-hoo-span: 72.27;
}
.wu-hoo--hooray {
    --wu-hoo-span: 84.66;
}
.wu-hoo--leaning {
    --wu-hoo-span: 60.32;
    --wu-hoo-rest: 3.83;
}
.wu-hoo--asleep {
    --wu-hoo-span: 64.3;
    --wu-hoo-rest: 5.39;
}
.wu-hoo--cheeks {
    --wu-hoo-span: 81.56;
}
.wu-hoo--perched {
    --wu-hoo-span: 52.19;
}
.wu-hoo--magnifier {
    --wu-hoo-span: 72.81;
}
.wu-hoo--clapping {
    --wu-hoo-span: 52.2;
}
.wu-hoo--counting {
    --wu-hoo-span: 63.96;
}
.wu-hoo--corner {
    --wu-hoo-span: 61.02;
}
.wu-hoo--preening {
    --wu-hoo-span: 65.85;
}
/* The drawings' parts take the mark's tokens, so they follow the theme like the mark: in the dark theme the head's */
/* silhouette goes and the ears turn white, and the wings and props (--owl-wings) turn white with them. Closed eyes */
/* are white lines, which read on the navy head and on dark grounds alike. */
.wu-hoo__head {
    fill: var(--owl-silhouette);
}
.wu-hoo__ears {
    fill: var(--owl-ears);
}
.wu-hoo__wing {
    fill: var(--owl-wings);
}
.wu-hoo__eye, .wu-hoo__shine, .wu-hoo__paper {
    fill: #ffffff;
}
.wu-hoo__iris, .wu-hoo__beak {
    fill: var(--amber);
}
.wu-hoo__pupil, .wu-hoo__mouth {
    fill: var(--owl);
}
.wu-hoo__lid, .wu-hoo__claw, .wu-hoo__fold, .wu-hoo__glass, .wu-hoo__clap {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.wu-hoo__lid {
    stroke: #ffffff;
    stroke-width: 2.3;
}
.wu-hoo__claw {
    stroke: var(--amber);
    stroke-width: 1.9;
}
.wu-hoo__paper, .wu-hoo__fold {
    stroke: var(--owl);
    stroke-width: 1.1;
}
.wu-hoo__glass {
    stroke: var(--owl-wings);
    stroke-width: 2.4;
}
.wu-hoo__glass--handle {
    stroke-width: 3.4;
}
.wu-hoo__clap {
    stroke: var(--owl-wings);
    stroke-width: 1.5;
}
/* Hoo's motion (owner, 17.10.2026; design system "Motion"): CSS keyframes on transform and opacity, no script and */
/* no style attribute. Each moving part is a wu-hoo-m- group of the drawing, turning around the pivot its translate */
/* wrappers set, and every motion ends in the drawn pose (E04 closes its beak again, E15's marks only flash). An */
/* entrance plays only while the figure is .wu-hoo--enter: the server marks a moment's first render (Heute: once a */
/* day per moment, person and device), and admin.js takes the class off whatever it swaps in, so a refresh or a */
/* live part shows the pose standing still. Loops end: E10 breathes three times, E19 preens three rounds, E16 counts */
/* as long as the wait shows. Hover reactions (E03, E05/E14, E12) come on request. Under reduced motion nothing */
/* moves, not even the blink. */
@media (prefers-reduced-motion: no-preference) {
    .wu-hoo__pop {
        transform-box: fill-box;
        transform-origin: center;
    }
    @keyframes wu-hoo-wink {
        0%, 100% {
            transform: none;
        }
        45%, 55% {
            transform: scaleY(.12);
        }
    }
    /* asleep */
    .wu-hoo--enter.wu-hoo--asleep .wu-hoo-m-doze {
        animation: wu-hoo-asleep-doze 1600ms ease-in-out both;
    }
    .wu-hoo--enter.wu-hoo--asleep .wu-hoo-m-breathe {
        animation: wu-hoo-asleep-breathe 4000ms ease-in-out 1600ms 3;
    }
    @keyframes wu-hoo-asleep-doze {
        0% {
            transform: rotate(-13deg);
        }
        100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-asleep-breathe {
        0%, 100% {
            transform: none;
        }
        45% {
            transform: translateY(-1.1px) rotate(-1.5deg);
        }
    }
    /* cheeks */
    .wu-hoo--enter.wu-hoo--cheeks .wu-hoo-m-rise {
        animation: wu-hoo-cheeks-rise 800ms cubic-bezier(.2, .7, .2, 1) 100ms both;
    }
    .wu-hoo--enter.wu-hoo--cheeks .wu-hoo-m-pop {
        animation: wu-hoo-cheeks-pop 500ms cubic-bezier(.2, .7, .2, 1) 350ms both;
    }
    @keyframes wu-hoo-cheeks-rise {
        0% {
            transform: translateY(9px) rotate(-28deg);
        }
        100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-cheeks-pop {
        0% {
            transform: scale(.82);
        }
        55% {
            transform: scale(1.1);
        }
        100% {
            transform: none;
        }
    }
    /* clapping */
    .wu-hoo--enter.wu-hoo--clapping .wu-hoo-m-clap {
        animation: wu-hoo-clapping-clap 1200ms ease-in-out 100ms both;
    }
    .wu-hoo--enter.wu-hoo--clapping .wu-hoo-m-marks {
        animation: wu-hoo-clapping-marks 1200ms linear 100ms both;
    }
    @keyframes wu-hoo-clapping-clap {
        0%, 26%, 52% {
            transform: rotate(-34deg);
        }
        14%, 40%, 66%, 100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-clapping-marks {
        0%, 13%, 24%, 39%, 50%, 65%, 80%, 100% {
            opacity: 0;
        }
        15%, 41%, 67% {
            opacity: 1;
        }
    }
    /* confused */
    .wu-hoo--enter.wu-hoo--confused .wu-hoo-m-take {
        animation: wu-hoo-confused-take 1200ms ease-in-out both;
    }
    .wu-hoo--enter.wu-hoo--confused .wu-hoo__wink {
        animation: wu-hoo-wink 320ms ease-in-out 380ms both;
    }
    @keyframes wu-hoo-confused-take {
        0% {
            transform: rotate(14deg);
        }
        30%, 45% {
            transform: rotate(21deg);
        }
        80% {
            transform: rotate(-2deg);
        }
        100% {
            transform: none;
        }
    }
    /* corner */
    .wu-hoo--enter.wu-hoo--corner .wu-hoo-m-rise {
        animation: wu-hoo-corner-rise 700ms cubic-bezier(.2, .7, .2, 1) both;
    }
    .wu-hoo--enter.wu-hoo--corner .wu-hoo-m-hook {
        animation: wu-hoo-corner-hook 450ms cubic-bezier(.2, .7, .2, 1) 550ms both;
    }
    .wu-hoo--enter.wu-hoo--corner .wu-hoo-m-hook--r {
        animation-delay: 700ms;
    }
    .wu-hoo--enter.wu-hoo--corner .wu-hoo-m-look {
        animation: wu-hoo-corner-look 500ms ease-in-out 1050ms both;
    }
    @keyframes wu-hoo-corner-rise {
        0% {
            transform: translateY(20px);
        }
        100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-corner-hook {
        0% {
            transform: translateY(-6px) rotate(-40deg);
            opacity: 0;
        }
        15% {
            opacity: 1;
        }
        100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-corner-look {
        0% {
            transform: translate(2.2px, -1.8px);
        }
        100% {
            transform: none;
        }
    }
    /* counting */
    .wu-hoo--enter.wu-hoo--counting .wu-hoo-m-toe {
        animation: wu-hoo-counting-toe 2400ms cubic-bezier(.2, .7, .2, 1) infinite both;
    }
    .wu-hoo--enter.wu-hoo--counting .wu-hoo-m-toe--2 {
        animation-delay: 300ms;
    }
    .wu-hoo--enter.wu-hoo--counting .wu-hoo-m-toe--1 {
        animation-delay: 600ms;
    }
    .wu-hoo--enter.wu-hoo--counting .wu-hoo-m-tap {
        animation: wu-hoo-counting-tap 2400ms ease-in-out infinite both;
    }
    .wu-hoo--enter.wu-hoo--counting .wu-hoo-m-look {
        animation: wu-hoo-counting-look 2400ms ease-in-out infinite both;
    }
    @keyframes wu-hoo-counting-toe {
        0% {
            transform: scale(.3);
        }
        10% {
            transform: scale(1.15);
        }
        16%, 70% {
            transform: none;
        }
        84%, 100% {
            transform: scale(.3);
        }
    }
    @keyframes wu-hoo-counting-tap {
        0%, 12.5%, 25%, 37.5%, 70%, 100% {
            transform: none;
        }
        6%, 18.5%, 31% {
            transform: rotate(-9deg);
        }
    }
    @keyframes wu-hoo-counting-look {
        0%, 8% {
            transform: translateX(-1.1px);
        }
        14%, 20% {
            transform: none;
        }
        26%, 60% {
            transform: translateX(1.1px);
        }
        80%, 100% {
            transform: translateX(-1.1px);
        }
    }
    /* envelope */
    .wu-hoo--enter.wu-hoo--envelope .wu-hoo-m-nod {
        animation: wu-hoo-envelope-nod 700ms ease-in-out both;
    }
    .wu-hoo--enter.wu-hoo--envelope .wu-hoo-m-swing {
        animation: wu-hoo-envelope-swing 1500ms ease-in-out 150ms both;
    }
    .wu-hoo--enter.wu-hoo--envelope .wu-hoo__wink {
        animation: wu-hoo-wink 320ms ease-in-out 1650ms both;
    }
    .wu-hoo--enter.wu-hoo--envelope:hover .wu-hoo-m-swing {
        animation: wu-hoo-envelope-swing 1500ms ease-in-out 150ms both, wu-hoo-envelope-swing 1500ms ease-in-out;
    }
    .wu-hoo--envelope:hover .wu-hoo-m-swing {
        animation: wu-hoo-envelope-swing 1500ms ease-in-out;
    }
    @keyframes wu-hoo-envelope-nod {
        0%, 100% {
            transform: none;
        }
        40% {
            transform: translateY(1.8px);
        }
    }
    @keyframes wu-hoo-envelope-swing {
        0%, 100% {
            transform: none;
        }
        16% {
            transform: rotate(14deg);
        }
        36% {
            transform: rotate(-10deg);
        }
        56% {
            transform: rotate(5deg);
        }
        76% {
            transform: rotate(-2deg);
        }
    }
    /* hooray */
    .wu-hoo--enter.wu-hoo--hooray .wu-hoo-m-fly {
        animation: wu-hoo-hooray-fly 1100ms cubic-bezier(.2, .7, .2, 1) 100ms both;
    }
    .wu-hoo--enter.wu-hoo--hooray .wu-hoo-m-hop {
        animation: wu-hoo-hooray-hop 700ms ease-in-out 100ms both;
    }
    .wu-hoo--enter.wu-hoo--hooray .wu-hoo-m-pop {
        animation: wu-hoo-hooray-pop 500ms cubic-bezier(.2, .7, .2, 1) 250ms both;
    }
    @keyframes wu-hoo-hooray-fly {
        0% {
            transform: rotate(143deg) scale(.68);
        }
        30% {
            transform: rotate(-10deg);
        }
        44% {
            transform: rotate(6deg);
        }
        58% {
            transform: rotate(-5deg);
        }
        72% {
            transform: rotate(2deg);
        }
        86%, 100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-hooray-hop {
        0%, 100% {
            transform: none;
        }
        35% {
            transform: translateY(-2.6px);
        }
        65% {
            transform: none;
        }
    }
    @keyframes wu-hoo-hooray-pop {
        0% {
            transform: scale(.82);
        }
        55% {
            transform: scale(1.1);
        }
        100% {
            transform: none;
        }
    }
    /* leaning */
    .wu-hoo--enter.wu-hoo--leaning .wu-hoo-m-lean {
        animation: wu-hoo-leaning-lean 1800ms ease-in-out 200ms both;
    }
    .wu-hoo--enter.wu-hoo--leaning .wu-hoo-m-lid {
        animation: wu-hoo-leaning-lid 1400ms ease-in-out 600ms both;
    }
    @keyframes wu-hoo-leaning-lean {
        0% {
            transform: translateY(-2.4px) rotate(-6deg);
        }
        100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-leaning-lid {
        0% {
            transform: translateY(-9px);
        }
        100% {
            transform: none;
        }
    }
    /* magnifier */
    .wu-hoo--enter.wu-hoo--magnifier .wu-hoo-m-scan {
        animation: wu-hoo-magnifier-scan 1100ms ease-in-out 100ms both;
    }
    .wu-hoo--enter.wu-hoo--magnifier .wu-hoo-m-look {
        animation: wu-hoo-magnifier-look 1100ms ease-in-out 100ms both;
    }
    @keyframes wu-hoo-magnifier-scan {
        0%, 100% {
            transform: none;
        }
        28% {
            transform: rotate(12deg);
        }
        62% {
            transform: rotate(-8deg);
        }
        84% {
            transform: rotate(2deg);
        }
    }
    @keyframes wu-hoo-magnifier-look {
        0%, 100% {
            transform: none;
        }
        28% {
            transform: translateX(1px);
        }
        62% {
            transform: translateX(-3.4px);
        }
    }
    /* friendly */
    .wu-hoo--enter.wu-hoo--friendly .wu-hoo-m-rise {
        animation: wu-hoo-friendly-rise 700ms cubic-bezier(.2, .7, .2, 1) both;
    }
    .wu-hoo--enter.wu-hoo--friendly .wu-hoo-m-look {
        animation: wu-hoo-friendly-look 500ms ease-in-out 700ms both;
    }
    .wu-hoo--enter.wu-hoo--friendly .wu-hoo__wink {
        animation: wu-hoo-wink 320ms ease-in-out 1350ms both;
    }
    @keyframes wu-hoo-friendly-rise {
        0% {
            transform: translateY(26px);
        }
        100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-friendly-look {
        0% {
            transform: translateY(-1.544px);
        }
        100% {
            transform: none;
        }
    }
    /* perched */
    .wu-hoo--enter.wu-hoo--perched .wu-hoo-m-drop {
        animation: wu-hoo-perched-drop 800ms ease-in both;
    }
    .wu-hoo--enter.wu-hoo--perched .wu-hoo-m-flap {
        animation: wu-hoo-perched-flap 900ms ease-in-out both;
    }
    .wu-hoo--enter.wu-hoo--perched .wu-hoo-m-look {
        animation: wu-hoo-perched-look 500ms ease-in-out 850ms both;
    }
    .wu-hoo--enter.wu-hoo--perched:hover .wu-hoo-m-look {
        animation: wu-hoo-perched-look 500ms ease-in-out 850ms both, wu-hoo-perched-up 1200ms ease-in-out;
    }
    .wu-hoo--perched:hover .wu-hoo-m-look {
        animation: wu-hoo-perched-up 1200ms ease-in-out;
    }
    @keyframes wu-hoo-perched-up {
        0%, 100% {
            transform: none;
        }
        25%, 70% {
            transform: translateY(-4.4px);
        }
    }
    @keyframes wu-hoo-perched-drop {
        0% {
            transform: translateY(-12px);
        }
        80% {
            transform: none;
        }
        90% {
            transform: translateY(.7px);
        }
        100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-perched-flap {
        0% {
            transform: rotate(-70deg) scale(1.25);
        }
        25% {
            transform: rotate(-45deg) scale(1.25);
        }
        50% {
            transform: rotate(-70deg) scale(1.25);
        }
        90%, 100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-perched-look {
        0% {
            transform: translateY(-2.4px);
        }
        100% {
            transform: none;
        }
    }
    /* pointing */
    .wu-hoo--enter.wu-hoo--pointing .wu-hoo-m-swing {
        animation: wu-hoo-pointing-swing 1100ms cubic-bezier(.2, .7, .2, 1) both;
    }
    .wu-hoo--enter.wu-hoo--pointing .wu-hoo-m-look {
        animation: wu-hoo-pointing-look 1100ms cubic-bezier(.2, .7, .2, 1) both;
    }
    .wu-hoo--pointing:hover .wu-hoo-m-nudge {
        animation: wu-hoo-pointing-nudge 600ms ease-in-out;
    }
    @keyframes wu-hoo-pointing-swing {
        0% {
            transform: rotate(77deg) scale(.7);
        }
        48% {
            transform: rotate(-4deg);
        }
        62% {
            transform: none;
        }
        76% {
            transform: rotate(-5deg);
        }
        90%, 100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-pointing-look {
        0%, 20% {
            transform: translate(-2.3px, -1.3px);
        }
        55%, 100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-pointing-nudge {
        0%, 100% {
            transform: none;
        }
        25% {
            transform: rotate(-6deg);
        }
        50% {
            transform: none;
        }
        75% {
            transform: rotate(-4deg);
        }
    }
    /* preening */
    .wu-hoo--enter.wu-hoo--preening .wu-hoo-m-rub {
        animation: wu-hoo-preening-rub 7000ms ease-in-out 3 both;
    }
    .wu-hoo--enter.wu-hoo--preening .wu-hoo-m-drift {
        animation: wu-hoo-preening-drift 7000ms ease-in-out 3 both;
    }
    @keyframes wu-hoo-preening-rub {
        0%, 4%, 34%, 100% {
            transform: none;
        }
        9% {
            transform: rotate(7deg);
        }
        15% {
            transform: rotate(-2deg);
        }
        21% {
            transform: rotate(6deg);
        }
        27% {
            transform: rotate(-1deg);
        }
    }
    @keyframes wu-hoo-preening-drift {
        0%, 30%, 100% {
            transform: none;
            opacity: 1;
        }
        62% {
            transform: translate(5px, 11px) rotate(55deg);
            opacity: 0;
        }
        63%, 84% {
            transform: none;
            opacity: 0;
        }
    }
    /* tilted */
    .wu-hoo--enter.wu-hoo--tilted .wu-hoo-m-tilt {
        animation: wu-hoo-tilted-tilt 700ms cubic-bezier(.2, .7, .2, 1) both;
    }
    .wu-hoo--enter.wu-hoo--tilted .wu-hoo-m-look {
        animation: wu-hoo-tilted-look 1400ms ease-in-out 350ms both;
    }
    @keyframes wu-hoo-tilted-tilt {
        0% {
            transform: rotate(8deg);
        }
        100% {
            transform: none;
        }
    }
    @keyframes wu-hoo-tilted-look {
        0%, 100% {
            transform: none;
        }
        25%, 38% {
            transform: translateX(-2.3px);
        }
        62%, 75% {
            transform: translateX(2.3px);
        }
    }
    /* yawning */
    .wu-hoo--enter.wu-hoo--yawning .wu-hoo-m-tip {
        animation: wu-hoo-yawning-tip 2200ms ease-in-out 200ms both;
    }
    .wu-hoo--enter.wu-hoo--yawning .wu-hoo-m-mouth {
        animation: wu-hoo-yawning-mouth 2200ms ease-in-out 200ms both;
    }
    .wu-hoo--enter.wu-hoo--yawning .wu-hoo-m-jaw {
        animation: wu-hoo-yawning-jaw 2200ms ease-in-out 200ms both;
    }
    .wu-hoo--enter.wu-hoo--yawning .wu-hoo__wink {
        animation: wu-hoo-yawning-squint 1100ms ease-in-out 700ms both;
    }
    @keyframes wu-hoo-yawning-tip {
        0% {
            transform: rotate(-4deg);
        }
        45%, 75% {
            transform: none;
        }
        100% {
            transform: rotate(-2deg);
        }
    }
    @keyframes wu-hoo-yawning-mouth {
        0%, 12% {
            transform: scaleY(.1);
        }
        45%, 70% {
            transform: none;
        }
        92%, 100% {
            transform: scaleY(.1);
        }
    }
    @keyframes wu-hoo-yawning-squint {
        0%, 100% {
            transform: none;
        }
        30%, 70% {
            transform: scaleY(.15);
        }
    }
    @keyframes wu-hoo-yawning-jaw {
        0%, 12% {
            transform: translateY(-4.6px);
        }
        45%, 70% {
            transform: none;
        }
        92%, 100% {
            transform: translateY(-4.6px);
        }
    }
}
/* Above the card that follows it in a .wu-hoo-perch: peeking over its top edge (the mark, E07), the card covering */
/* the lower part of the head and the pupils looking down onto the list, or sitting on the edge (E08, E10), where the */
/* drawing ends and the card covers nothing. The line stands to its left. */
.wu-hoo-perch {
    position: relative;
    padding-top: 44px;
}
.wu-hoo-perch:has(> .wu-hoo--edge) {
    padding-top: 0;
}
.wu-hoo-perch > :not(.wu-hoo) {
    position: relative;
    z-index: 1;
}
.wu-hoo--peek, .wu-hoo--edge {
    --wu-hoo-head: 64px;
    flex-direction: row-reverse;
}
.wu-hoo--peek {
    position: absolute;
    top: 0;
    right: var(--space-6);
    align-items: flex-start;
}
.wu-hoo--peek .wu-hoo__line {
    padding-top: var(--space-1);
    text-align: right;
}
/* It rises from behind the card as it appears: its own box clips it below, where the card's edge is. */
.wu-hoo--peek .wu-hoo__figure {
    overflow: hidden;
}
.wu-hoo--edge {
    justify-content: flex-start;
    align-items: flex-end;
    margin-bottom: calc(-1 * var(--space-5));
    padding-right: var(--space-6);
}
/* A drawing ends where its wings rest, which its viewBox runs on below by --wu-hoo-rest of the mark's units: the */
/* figure's box stops at the wings, so they lie on the card's edge instead of hovering above it. */
.wu-hoo--edge .wu-hoo__figure {
    margin-bottom: calc(-1 * var(--wu-hoo-head) * var(--wu-hoo-rest, 0) / 49.394);
}
.wu-hoo--edge .wu-hoo__line {
    padding-bottom: var(--space-2);
    text-align: right;
}
/* Below 1024 px Hoo gets smaller and sits above the card, beside its heading, instead of on its edge. */
@media (max-width: 1023px) {
    .wu-hoo-perch {
        padding-top: 0;
    }
    .wu-hoo--peek, .wu-hoo--edge {
        --wu-hoo-head: 40px;
        flex-direction: row;
    }
    .wu-hoo--peek {
        position: static;
        align-items: center;
        margin-bottom: var(--space-2);
    }
    .wu-hoo--edge {
        padding: 0 0 0 var(--space-4);
    }
    .wu-hoo--peek .wu-hoo__line, .wu-hoo--edge .wu-hoo__line {
        padding-top: 0;
        text-align: left;
    }
}
/* whookup's maintenance in the admin's frame (E19, components/maintenance-banner): Hoo preening beside the Alert */
/* while it runs. */
.wu-maintenance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-4);
}
.wu-maintenance > .wu-alert {
    flex: 1 1 20rem;
    min-width: 0;
}
.wu-maintenance-list {
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}
.wu-maintenance-list p {
    margin: 0 0 var(--space-2);
}
/* Hoo's tip on Heute (E18, components/hoo-tip): a card Hoo holds at its top right corner. The drawing stands above */
/* the card, only its wing tips over the edge, which lies at 47.3 of the drawing's 56.93 units (0.958 heads from */
/* its top); the card keeps that room above it and the drawing's width on its right. */
.wu-hootip {
    --wu-hootip-head: 48px;
    position: relative;
    margin-top: calc(var(--wu-hootip-head) * .958);
}
.wu-hootip > .wu-hoo--corner {
    --wu-hoo-head: var(--wu-hootip-head);
    position: absolute;
    top: calc(var(--wu-hootip-head) * -.958);
    right: var(--space-5);
}
.wu-hootip .wu-card__body {
    padding-right: calc(var(--space-5) * 2 + var(--wu-hootip-head) * 1.236);
}
.wu-hootip__text {
    margin: 0 0 var(--space-3);
}
.wu-hootip__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
@media (max-width: 1023px) {
    .wu-hootip {
        --wu-hootip-head: 40px;
    }
}
/* Beside a ProgressPanel's progress while its work runs (E16): only a wait of two seconds or more gets Hoo. It */
/* appears then at once, without moving (a step of visibility, no transition), reduced motion or not. */
.wu-progress__hoo {
    animation: wu-hoo-later 0s 2s both;
}
@keyframes wu-hoo-later {
    from {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}
/* Beside an empty state, in its art; larger on a page's own. */
.wu-empty__art .wu-hoo {
    justify-content: center;
}
.wu-empty--page .wu-hoo {
    --wu-hoo-head: 85px;
}

/* Spinner */
.wu-spinner {
    display: inline-block;
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-full);
    border: 2px solid currentColor;
    border-right-color: transparent;
    opacity: .8;
    animation: wu-spin 700ms linear infinite;
}
.wu-spinner--sm {
    width: 14px;
    height: 14px;
}
@keyframes wu-spin {
    to {
        transform: rotate(360deg);
    }
}
@media (prefers-reduced-motion: reduce) {
    .wu-spinner {
        animation-duration: 2s;
    }
}

/* Button */
.wu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: var(--control-md);
    padding: 0 var(--space-4);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition:
        background var(--wu-fast) var(--wu-ease),
        border-color var(--wu-fast) var(--wu-ease),
        color var(--wu-fast) var(--wu-ease);
}
.wu-btn--sm {
    height: var(--control-sm);
    padding: 0 var(--space-3);
    font-size: 13px;
}
.wu-btn--lg {
    height: var(--control-lg);
    padding: 0 var(--space-6);
    font-size: 16px;
}
.wu-btn--block {
    display: flex;
    width: 100%;
}
.wu-btn--primary {
    background: var(--amber);
    color: var(--on-amber);
}
.wu-btn--primary:hover {
    background: var(--amber-hover);
}
.wu-btn--secondary {
    background: var(--surface);
    color: var(--ink);
    border-color: var(--line-strong);
}
.wu-btn--secondary:hover {
    background: var(--sunken);
}
.wu-btn--ghost {
    background: transparent;
    color: var(--ink);
}
.wu-btn--ghost:hover {
    background: var(--sunken);
}
.wu-btn--danger {
    background: var(--red);
    color: var(--on-red);
}
.wu-btn--danger:hover {
    filter: brightness(.92);
}
.wu-btn--link {
    background: transparent;
    color: var(--sky);
    padding: 0 var(--space-1);
    height: auto;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wu-btn:disabled, .wu-btn[aria-disabled="true"] {
    cursor: not-allowed;
    background: var(--sunken);
    border-color: var(--line);
    color: var(--ink-disabled);
    filter: none;
}
.wu-btn--loading:disabled {
    color: inherit;
    border-color: transparent;
}
.wu-btn--primary.wu-btn--loading:disabled {
    background: var(--amber);
    color: var(--on-amber);
}
.wu-btn .wu-kbd {
    margin-left: var(--space-1);
}

/* IconButton */
.wu-iconbtn {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: var(--control-md);
    height: var(--control-md);
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
    transition: background var(--wu-fast) var(--wu-ease), color var(--wu-fast) var(--wu-ease);
}
.wu-iconbtn:hover {
    background: var(--sunken);
    color: var(--ink);
}
.wu-iconbtn--sm {
    width: var(--control-sm);
    height: var(--control-sm);
}
.wu-iconbtn--lg {
    width: var(--control-lg);
    height: var(--control-lg);
}
.wu-iconbtn--secondary {
    background: var(--surface);
    border-color: var(--line-strong);
    color: var(--ink);
}
.wu-iconbtn:disabled {
    color: var(--ink-disabled);
    background: transparent;
    cursor: not-allowed;
}
.wu-iconbtn__badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--red);
    color: var(--on-red);
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
}
@media (pointer: coarse) {
    .wu-iconbtn {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }
}

/* Pro feature (ADR 0016): a feature of Pro a business sees but whose plan doesn't include it */
.wu-pro {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-4);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
}
.wu-pro__badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    background: var(--amber);
    color: var(--on-amber);
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.wu-pro__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.wu-pro__title {
    margin: 0;
    font-weight: 600;
}
.wu-pro__text, .wu-pro__note {
    margin: 0;
    color: var(--ink-muted);
}
.wu-pro__actions {
    margin-top: var(--space-2);
}
.wu-plan-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: 0;
    list-style: none;
}
.wu-plan-features li {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}
.wu-plan-features .wu-icon {
    flex: none;
    color: var(--green);
}

/* Chip */
.wu-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    max-width: 100%;
    height: 24px;
    padding: 0 10px;
    border-radius: var(--radius-full);
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    white-space: nowrap;
    background: var(--neutral-soft);
    color: var(--ink);
}
.wu-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
}
.wu-chip--sm {
    height: 20px;
    padding: 0 8px;
    font-size: 12px;
}
.wu-chip--amber {
    background: var(--amber-soft);
    color: var(--amber-ink);
}
.wu-chip--green {
    background: var(--green-soft);
    color: var(--green);
}
.wu-chip--red {
    background: var(--red-soft);
    color: var(--red);
}
.wu-chip--sky {
    background: var(--sky-soft);
    color: var(--sky);
}
.wu-chip--muted {
    background: var(--neutral-soft);
    color: var(--ink-muted);
}
.wu-chip--outline {
    background: transparent;
    color: var(--ink-muted);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}

/* Counter */
.wu-counter {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--radius-full);
    background: var(--neutral-soft);
    color: var(--ink);
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wu-counter--amber {
    background: var(--amber);
    color: var(--on-amber);
}
.wu-counter--red {
    background: var(--red);
    color: var(--on-red);
}

/* Kbd */
.wu-kbd {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--line);
    border-bottom-width: 2px;
    background: var(--surface);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1;
    font-weight: 500;
}

/*
 * Card, and the rule for every rounded container whose content touches its edge (design-system.md "Rounded
 * containers"): a child paints above its container's border, so a child with a background (or a border, or an inset
 * shadow) and square corners covers the curve and the border line on it, even in the container's own color.
 * - A container without popovers clips its content: `overflow: clip` (rather than `hidden`, which makes it a scroll
 *   container that sticky children stick to). Rows that span its width then draw their focus ring inside
 *   (`inset 0 0 0 2px var(--focus)`), since the clip cuts an outer one: the flush Card, the DayTimeline.
 * - A container with popovers (a row's menu, `details.wu-menu`) can't clip them: the children at its edge take its
 *   inner radius on the corners they touch, `--radius-md-inner` or `--radius-lg-inner`, never the outer one (the
 *   SeasonTable).
 * The browser tests check it with `coveredCorners` (Tests/Browser/support/corners.ts).
 */
.wu-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    min-width: 0;
}
.wu-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5) 0;
}
.wu-card__titles {
    min-width: 0;
}
.wu-card__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-card__subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-card__actions {
    display: flex;
    gap: var(--space-2);
    flex: none;
}
.wu-card__body {
    padding: var(--space-4) var(--space-5) var(--space-5);
}
.wu-card--flush {
    overflow: clip;
}
.wu-card--flush > .wu-card__head {
    padding-bottom: var(--space-3);
}
.wu-card__foot {
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--line);
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
}
.wu-card--amber {
    background: var(--amber-soft);
    border-color: transparent;
}
.wu-card--sunken {
    background: var(--sunken);
    border-color: transparent;
}
@media (max-width: 1023px) {
    .wu-card__head {
        padding: var(--space-4) var(--space-4) 0;
    }
    .wu-card__body {
        padding: var(--space-3) var(--space-4) var(--space-4);
    }
}

/* ===== nav: frame and navigation ===== */

/* Menu */
.wu-menu {
    position: relative;
    display: inline-flex;
    min-width: 0;
    max-width: 100%;
}
.wu-menu__list {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    z-index: var(--z-popover);
    min-width: 200px;
    max-width: min(320px, calc(100vw - var(--space-8)));
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    color: var(--ink);
}
.wu-menu__list--wide {
    min-width: 248px;
}
.wu-menu__list--end {
    left: auto;
    right: 0;
}
.wu-menu__list--inline {
    position: static;
    margin-top: var(--space-1);
    box-shadow: var(--shadow-md);
}
.wu-menu:has(.wu-menu__list--inline) {
    flex-direction: column;
    align-items: flex-start;
}
.wu-menu:has(.wu-menu__list--inline.wu-menu__list--end) {
    align-items: flex-end;
}
.wu-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 36px;
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    line-height: 20px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}
.wu-menu__item .wu-icon {
    color: var(--ink-muted);
}
.wu-menu__item:hover, .wu-menu__item:focus-visible {
    background: var(--sunken);
}
.wu-menu__item:disabled {
    color: var(--ink-disabled);
    cursor: not-allowed;
    background: transparent;
}
.wu-menu__item--danger, .wu-menu__item--danger .wu-icon {
    color: var(--red);
}
.wu-menu__check {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    flex: none;
    color: var(--sky);
}
.wu-menu__item[aria-checked="true"] {
    font-weight: 600;
}
.wu-menu__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.wu-menu__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wu-menu__hint {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
    font-weight: 400;
}
.wu-menu__meta {
    margin-left: auto;
    font-size: 13px;
    color: var(--ink-subtle);
}
.wu-menu__heading {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wu-menu__divider {
    height: 1px;
    margin: var(--space-1) 0;
    background: var(--line);
}
@media (pointer: coarse) {
    .wu-menu__item {
        min-height: var(--touch-min);
    }
}

/* Breadcrumb */
.wu-crumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 18px;
}
.wu-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: 0;
}
.wu-crumbs a {
    color: var(--ink-muted);
    text-decoration: none;
    border-radius: var(--radius-xs);
}
.wu-crumbs a:hover {
    color: var(--sky);
    text-decoration: underline;
}
.wu-crumbs [aria-current] {
    color: var(--ink);
    font-weight: 600;
}
.wu-crumbs__mono {
    font-family: var(--font-mono);
    font-weight: 500;
}
.wu-crumbs__sep {
    color: var(--ink-subtle);
}

/* PageHeader */
.wu-pagehead {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-6);
    min-width: 0;
}
.wu-pagehead__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
}
.wu-pagehead__titles {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1 1 280px;
}
.wu-pagehead__titleline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    min-width: 0;
}
.wu-pagehead__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
    color: var(--ink);
    text-wrap: balance;
}
.wu-pagehead__title--mono {
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: .02em;
}
.wu-pagehead__sub {
    margin: 0;
    max-width: 65ch;
    color: var(--ink-muted);
}
.wu-pagehead__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-top: var(--space-1);
}
.wu-pagehead__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-pagehead__extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding-top: var(--space-2);
}
@media (max-width: 1023px) {
    .wu-pagehead {
        padding-bottom: var(--space-4);
    }
    .wu-pagehead__title {
        font-size: 21px;
        line-height: 26px;
    }
}

/* Tabs */
.wu-tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    scrollbar-width: none;
}
.wu-tabs__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: none;
    height: var(--control-md);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    background: transparent;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
/* The area's tabs head its page: the content below keeps the distance of the page's sections. */
.wu-tabs:not(.wu-tabs--sub) {
    margin-bottom: var(--space-5);
}
.wu-tabs__tab:hover {
    color: var(--ink);
    background: var(--sunken);
}
.wu-tabs__tab--on {
    color: var(--ink);
}
.wu-tabs__tab--on::after {
    content: "";
    position: absolute;
    left: var(--space-2);
    right: var(--space-2);
    bottom: -1px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--amber);
}
.wu-tabs__tab--on .wu-counter {
    background: var(--amber);
    color: var(--on-amber);
}
.wu-tabs--sub {
    border-bottom: 0;
    flex-direction: column;
    overflow: visible;
}
.wu-tabs--sub .wu-tabs__tab {
    border-radius: var(--radius-sm);
    justify-content: space-between;
}
.wu-tabs--sub .wu-tabs__tab--on {
    background: var(--sunken);
}
.wu-tabs--sub .wu-tabs__tab--on::after {
    left: 0;
    top: var(--space-2);
    bottom: var(--space-2);
    right: auto;
    width: 3px;
    height: auto;
    border-radius: 0 3px 3px 0;
}

/* SideNav */
.wu-sidenav {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: var(--sidenav-width);
    height: 100%;
    padding: var(--space-3);
    background: var(--nav);
    color: var(--nav-ink);
    overflow: hidden;
    transition: width var(--wu-base) var(--wu-ease);
}
.wu-sidenav--collapsed {
    width: var(--sidenav-collapsed);
    padding-inline: var(--space-2);
}
.wu-sidenav__head {
    padding-bottom: var(--space-3);
    margin-bottom: var(--space-1);
    border-bottom: 1px solid var(--nav-active);
}
.wu-sidenav__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.wu-sidenav__foot {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: var(--space-2);
    border-top: 1px solid var(--nav-active);
}
.wu-sidenav__link, .wu-sidenav__toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    height: var(--control-md);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--nav-ink);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.wu-sidenav__link:hover, .wu-sidenav__toggle:hover {
    background: var(--nav-active);
    color: var(--nav-ink-active);
}
.wu-sidenav__link:focus-visible, .wu-sidenav__toggle:focus-visible {
    box-shadow: var(--focus-ring-nav);
}
.wu-sidenav__link--on {
    background: var(--nav-active);
    color: var(--nav-ink-active);
}
.wu-sidenav__link--on::before {
    content: "";
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--amber);
}
.wu-sidenav__link--on .wu-icon {
    color: var(--amber);
}
.wu-sidenav__label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wu-sidenav__toggle {
    font-weight: 400;
    color: var(--nav-ink);
    text-align: left;
}
.wu-sidenav--collapsed .wu-sidenav__link, .wu-sidenav--collapsed .wu-sidenav__toggle {
    justify-content: center;
    padding: 0;
}
.wu-sidenav--collapsed .wu-sidenav__label {
    display: none;
}
.wu-sidenav--collapsed .wu-counter {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
}
/* The Whookup logo at the foot of the SideNav, quiet like a signature. The nav is navy in both themes, so it shows */
/* the owner's drawings for dark grounds: the reversed wordmark, the mark when collapsed (white ears, no silhouette). */
.wu-sidenav__brand {
    --owl-ears: var(--nav-ink-active);
    --owl-letters: var(--nav-ink-active);
    --owl-silhouette: transparent;
    display: flex;
    align-items: center;
    height: var(--control-md);
    padding: var(--space-2) var(--space-3) 0;
}
.wu-sidenav__brand .wu-logo__word {
    width: auto;
    height: 22px;
}
.wu-sidenav__brand .wu-logo__word--light, .wu-sidenav__brand .wu-logo--mark {
    display: none;
}
.wu-sidenav__brand .wu-logo__word--dark {
    display: block;
}
.wu-sidenav--collapsed .wu-sidenav__brand {
    justify-content: center;
    padding-inline: 0;
}
.wu-sidenav--collapsed .wu-sidenav__brand .wu-logo--wordmark {
    display: none;
}
.wu-sidenav--collapsed .wu-sidenav__brand .wu-logo--mark {
    display: inline-flex;
    width: auto;
    height: 26px;
}

/* BottomNav */
.wu-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    /* In landscape a phone's notch and rounded corners take the sides too (viewport-fit=cover in the head). */
    padding:
        0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--nav);
    color: var(--nav-ink);
}
.wu-bottomnav--contained {
    position: static;
}
.wu-bottomnav ul {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--bottomnav-height);
    margin: 0;
    padding: 0 var(--space-1);
    list-style: none;
}
.wu-bottomnav__link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--nav-ink);
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}
.wu-bottomnav__link:focus-visible {
    box-shadow: var(--focus-ring-nav);
}
.wu-bottomnav__link--on {
    color: var(--nav-ink-active);
}
.wu-bottomnav__link--on .wu-bottomnav__icon {
    background: var(--nav-active);
}
.wu-bottomnav__link--on .wu-icon {
    color: var(--amber);
}
.wu-bottomnav__icon {
    position: relative;
    display: grid;
    place-items: center;
    width: 48px;
    height: 28px;
    border-radius: var(--radius-full);
}
.wu-bottomnav__link--primary .wu-bottomnav__icon {
    width: 52px;
    height: 40px;
    margin-top: -10px;
    background: var(--amber);
    color: var(--on-amber);
    box-shadow: 0 0 0 4px var(--nav);
}
.wu-bottomnav__link--primary .wu-icon, .wu-bottomnav__link--primary.wu-bottomnav__link--on .wu-icon {
    color: var(--on-amber);
}
.wu-bottomnav__link--primary.wu-bottomnav__link--on .wu-bottomnav__icon {
    background: var(--amber);
}
.wu-bottomnav__badge {
    position: absolute;
    top: -2px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: var(--radius-full);
    background: var(--amber);
    color: var(--on-amber);
    font-size: 10px;
    line-height: 16px;
    font-weight: 700;
    text-align: center;
}
.wu-bottomnav__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* AppBar */
.wu-appbar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: var(--appbar-height);
    padding: 0 var(--space-6);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    color: var(--ink);
}
.wu-appbar--contained {
    position: relative;
    top: 0;
}
.wu-appbar__start {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    flex: 0 1 auto;
}
.wu-appbar__middle {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 180px;
    max-width: 560px;
}
.wu-appbar__end {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-left: auto;
    flex: none;
}
.wu-appbar--compact {
    gap: var(--space-2);
    padding:
        0 calc(var(--space-2) + env(safe-area-inset-right, 0px))
        0 calc(var(--space-4) + env(safe-area-inset-left, 0px));
}
.wu-appbar--compact .wu-appbar__start {
    flex: 1 1 auto;
}
.wu-appbar--compact .wu-appbar__end {
    gap: 0;
}

/* BusinessSwitcher */
.wu-bizswitch {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
    max-width: 100%;
    height: 48px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    text-align: left;
    font: inherit;
}
.wu-bizswitch--button {
    cursor: pointer;
}
.wu-bizswitch--nav {
    color: var(--nav-ink-active);
    width: 100%;
}
.wu-bizswitch--nav.wu-bizswitch--button:hover {
    background: var(--nav-active);
}
.wu-bizswitch--nav:focus-visible {
    box-shadow: var(--focus-ring-nav);
}
.wu-bizswitch--surface {
    color: var(--ink);
}
.wu-bizswitch--surface.wu-bizswitch--button:hover {
    background: var(--sunken);
}
.wu-bizswitch__badge {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--amber);
    color: var(--on-amber);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 900;
}
.wu-bizswitch__badge img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wu-bizswitch__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.wu-bizswitch__name {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 20px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wu-bizswitch__role {
    font-size: 12px;
    line-height: 16px;
    color: var(--nav-ink);
}
.wu-bizswitch--surface .wu-bizswitch__role {
    color: var(--ink-muted);
}
.wu-bizswitch__chev {
    flex: none;
    opacity: .8;
}
.wu-bizswitch--compact {
    height: 40px;
    gap: var(--space-2);
}
.wu-bizswitch--compact .wu-bizswitch__badge {
    width: 28px;
    height: 28px;
    font-size: 12px;
}
.wu-bizswitch--compact .wu-bizswitch__name {
    font-size: 15px;
}
.wu-bizswitch--collapsed {
    justify-content: center;
    padding: 0;
}
.wu-bizswitch--collapsed .wu-bizswitch__text, .wu-bizswitch--collapsed .wu-bizswitch__chev {
    display: none;
}
.wu-menu:has(> .wu-bizswitch--nav) {
    display: flex;
    width: 100%;
}

/* UserMenu */
.wu-usermenu {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-md);
    padding: 0 var(--space-2) 0 var(--space-1);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.wu-usermenu:hover {
    background: var(--sunken);
}
.wu-usermenu--compact {
    padding: 0;
    width: var(--control-md);
    justify-content: center;
}
.wu-usermenu__avatar {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--owl);
    color: var(--cream);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
}
.wu-usermenu__name {
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (pointer: coarse) {
    .wu-usermenu--compact {
        width: var(--touch-min);
        height: var(--touch-min);
    }
}

/* GlobalSearch */
.wu-search {
    position: relative;
    width: 100%;
    min-width: 0;
}
.wu-search__field {
    position: relative;
    display: flex;
    align-items: center;
}
.wu-search__icon {
    position: absolute;
    left: var(--space-3);
    color: var(--ink-subtle);
    pointer-events: none;
}
.wu-search__input {
    width: 100%;
    height: var(--control-md);
    padding: 0 var(--space-12) 0 40px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--ink);
    font-size: 15px;
    outline: none;
}
.wu-search__input::placeholder {
    color: var(--ink-subtle);
}
.wu-search__input:focus-visible, .wu-search__input:focus {
    background: var(--surface);
    border-color: var(--focus);
    box-shadow: var(--focus-ring);
}
.wu-search__input::-webkit-search-cancel-button {
    display: none;
}
.wu-search__kbd {
    position: absolute;
    right: var(--space-3);
    display: flex;
    pointer-events: none;
}
.wu-search__pop {
    position: absolute;
    top: calc(100% + var(--space-1));
    left: 0;
    right: 0;
    z-index: var(--z-popover);
    min-width: 320px;
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.wu-search__pop--inline {
    position: relative;
    top: 0;
    margin-top: var(--space-1);
    min-width: 0;
}
.wu-search__list {
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    max-height: 420px;
    overflow-y: auto;
}
.wu-search__list ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.wu-search__group + .wu-search__group {
    margin-top: var(--space-1);
    padding-top: var(--space-1);
    border-top: 1px solid var(--line);
}
.wu-search__grouplabel {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-search__opt {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.wu-search__opt .wu-icon {
    color: var(--ink-muted);
}
.wu-search__opt--on {
    background: var(--sky-soft);
}
.wu-search__code {
    flex: none;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: var(--ink);
}
.wu-search__opttext {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.wu-search__opttitle {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wu-search__optmeta {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wu-search__empty {
    margin: 0;
    padding: var(--space-4);
    color: var(--ink-muted);
}
.wu-search__foot {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--line);
    background: var(--sunken);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}

/* Panel */
.wu-panel-layer {
    position: fixed;
    inset: 0;
    z-index: var(--z-panel);
    display: flex;
    justify-content: flex-end;
}
.wu-panel-layer__scrim {
    position: absolute;
    inset: 0;
    background: var(--scrim);
    animation: wu-fade var(--wu-base) var(--wu-ease);
}
.wu-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(var(--panel-width), 100%);
    height: 100%;
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    outline: none;
    animation: wu-slide-in var(--wu-slow) var(--wu-ease);
}
.wu-panel--inline {
    height: auto;
    min-height: 100%;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    animation: none;
}
.wu-panel__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6);
    border-bottom: 1px solid var(--line);
}
.wu-panel__titles {
    flex: 1;
    min-width: 0;
    padding-top: var(--space-1);
}
.wu-panel__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
    text-wrap: balance;
}
.wu-panel__sub {
    margin: var(--space-1) 0 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.wu-panel__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line);
    background: var(--surface-raised);
}
@keyframes wu-slide-in {
    from {
        transform: translateX(24px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}
@keyframes wu-fade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@media (max-width: 1023px) {
    .wu-panel:not(.wu-panel--inline) {
        width: 100%;
        padding-top: env(safe-area-inset-top, 0px);
        box-shadow: none;
    }
    .wu-panel:not(.wu-panel--inline) .wu-panel__head {
        padding-right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    }
    .wu-panel__head {
        padding-left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
    }
    .wu-panel__body {
        padding:
            var(--space-4) calc(var(--space-4) + env(safe-area-inset-right, 0px))
            var(--space-4) calc(var(--space-4) + env(safe-area-inset-left, 0px));
    }
    .wu-panel__foot {
        padding-left: calc(var(--space-4) + env(safe-area-inset-left, 0px));
        padding-right: calc(var(--space-4) + env(safe-area-inset-right, 0px));
    }
    .wu-panel__foot .wu-btn {
        flex: 1 1 auto;
    }
}

/* ActionBar */
.wu-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-actionbar--bottom {
    position: fixed;
    left: 0;
    right: 0;
    z-index: var(--z-sticky);
    bottom: calc(var(--bottomnav-height) + env(safe-area-inset-bottom, 0px));
    padding:
        var(--space-3) calc(var(--space-4) + env(safe-area-inset-right, 0px))
        var(--space-3) calc(var(--space-4) + env(safe-area-inset-left, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    flex-wrap: nowrap;
}
.wu-actionbar--bottom.wu-actionbar--contained {
    position: static;
}
.wu-actionbar--bottom > .wu-btn {
    flex: 1 1 0;
    min-width: 0;
    height: var(--control-lg);
    gap: var(--space-1);
    padding: 0 var(--space-2);
}
/* Three actions share 390 px: a long label ("Neue Buchung") takes a second line rather than being cut off. */
.wu-actionbar--bottom > .wu-btn .wu-btn__label {
    overflow: hidden;
    white-space: normal;
    text-align: center;
    line-height: 16px;
    max-height: 32px;
}

/* BulkBar */
.wu-bulkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    min-height: 52px;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--nav);
    color: var(--nav-ink-active);
    border: 1px solid var(--nav-active);
    box-shadow: var(--shadow-md);
}
.wu-bulkbar--sticky {
    position: sticky;
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-sticky);
}
.wu-bulkbar__count {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 600;
}
.wu-bulkbar__count .wu-icon {
    color: var(--amber);
}
.wu-bulkbar__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    flex: 1;
}
.wu-bulkbar__actions .wu-btn--ghost {
    color: var(--nav-ink-active);
}
.wu-bulkbar__actions .wu-btn--ghost:hover {
    background: var(--nav-active);
}
.wu-bulkbar .wu-btn:focus-visible, .wu-bulkbar__clear:focus-visible {
    box-shadow: var(--focus-ring-nav);
}
.wu-bulkbar__clear {
    height: var(--control-md);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--nav-ink);
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.wu-bulkbar__clear:hover {
    color: var(--nav-ink-active);
}

/* AppShell */
.wu-shell {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 100vh;
    background: var(--paper);
}
.wu-shell--contained {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.wu-shell__side {
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: var(--z-nav);
}
.wu-shell--contained .wu-shell__side {
    position: relative;
    height: 100%;
}
.wu-shell__col {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}
.wu-shell--contained .wu-shell__col {
    overflow: hidden;
}
/*
 * The AppBar stays at the top while the page scrolls (UX concept 8.3). The server's frame wraps it in
 * .wu-shell__bar, as tall as the AppBar, so the wrapper is what sticks: the AppBar's own sticky had no room to move.
 */
.wu-shell__bar {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: var(--z-nav);
}
/* What the keyboard focuses never hides under the fixed bars (WCAG 2.4.11, UX concept 15): the page scrolls on. */
html:has(.wu-shell__bar) {
    scroll-padding-top: calc(var(--appbar-height) + var(--space-2));
}
.wu-shell__main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    padding: var(--space-8);
}
.wu-shell--contained .wu-shell__main {
    overflow-y: auto;
}
.wu-shell__content {
    max-width: var(--content-max);
    margin: 0 auto;
}
.wu-shell__foot {
    max-width: var(--content-max);
    margin: var(--space-12) auto 0;
}
.wu-shell__bottom, .wu-shell__action {
    display: none;
}
.wu-shell--bare {
    grid-template-columns: minmax(0, 1fr);
}

/* below the desktop breakpoint: AppBar + BottomNav, no SideNav */
@media (max-width: 1023px) {
    .wu-shell--auto {
        grid-template-columns: minmax(0, 1fr);
    }
    .wu-shell--auto .wu-shell__side {
        display: none;
    }
    .wu-shell--auto .wu-shell__main {
        padding:
            var(--space-4) calc(var(--space-4) + env(safe-area-inset-right, 0px))
            calc(var(--bottomnav-height) + var(--space-6) + env(safe-area-inset-bottom, 0px))
            calc(var(--space-4) + env(safe-area-inset-left, 0px));
    }
    .wu-shell--auto .wu-shell__bottom, .wu-shell--auto .wu-shell__action {
        display: block;
    }
    .wu-shell--auto:has(.wu-shell__action) .wu-shell__main {
        padding-bottom: calc(var(--bottomnav-height) + 96px + env(safe-area-inset-bottom, 0px));
    }
    html:has(.wu-shell--auto) {
        scroll-padding-bottom: calc(var(--bottomnav-height) + var(--space-2) + env(safe-area-inset-bottom, 0px));
    }
    /* The ActionBar above the BottomNav: 48 px buttons in 12 px padding. */
    html:has(.wu-shell--auto .wu-shell__action) {
        scroll-padding-bottom: calc(var(--bottomnav-height) + 73px + var(--space-2) + env(safe-area-inset-bottom, 0px));
    }
}
.wu-shell--mobile {
    grid-template-columns: minmax(0, 1fr);
}
.wu-shell--mobile .wu-shell__side {
    display: none;
}
.wu-shell--mobile .wu-shell__main {
    padding:
        var(--space-4) calc(var(--space-4) + env(safe-area-inset-right, 0px))
        var(--space-4) calc(var(--space-4) + env(safe-area-inset-left, 0px));
}
.wu-shell--mobile .wu-shell__bottom, .wu-shell--mobile .wu-shell__action {
    display: block;
}
.wu-shell--contained .wu-bottomnav, .wu-shell--contained .wu-actionbar--bottom {
    position: static;
}
.wu-shell--keyboard-open .wu-shell__bottom, .wu-shell--keyboard-open .wu-shell__action {
    display: none;
}

/*
 * ===== data: StatusChip, OccupancyBar, SummaryRow, FactList, ContactCard, BookingRow, DataTable, AuditList, Alert,
 * EmptyState, Toast, ProgressPanel, Legend, Skeleton =====
 */

/* OccupancyBar */
.wu-occ {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 120px;
}
.wu-occ__track {
    position: relative;
    height: 8px;
    border-radius: var(--radius-xs);
    background: var(--sunken);
    overflow: hidden;
}
.wu-occ--sm .wu-occ__track {
    height: 6px;
}
/* The held and overbooked places stand inside the fill, which clips them to its rounded ends. */
.wu-occ__fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    justify-content: flex-end;
    overflow: hidden;
    border-radius: var(--radius-xs);
    background: var(--occ-free);
    transition: width var(--wu-base) var(--wu-ease);
}
.wu-occ--low .wu-occ__fill {
    background: var(--occ-low);
}
.wu-occ--full .wu-occ__fill {
    background: var(--occ-full);
}
.wu-occ--over .wu-occ__fill {
    background: var(--occ-full);
}
.wu-occ__over {
    height: 100%;
    background: var(--occ-over);
    border-left: 2px solid var(--surface);
}
.wu-occ__held {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: repeating-linear-gradient(135deg, transparent 0 3px, var(--surface) 3px 5px);
    opacity: .55;
}
.wu-occ--blocked .wu-occ__track {
    background: repeating-linear-gradient(135deg, var(--sunken) 0 4px, var(--line) 4px 6px);
}
.wu-occ--blocked .wu-occ__fill {
    background: var(--ink-subtle);
}
.wu-occ__text {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 13px;
    line-height: 18px;
}
.wu-occ--sm .wu-occ__text {
    font-size: 12px;
    line-height: 16px;
}
.wu-occ__main {
    color: var(--ink);
    font-weight: 500;
}
.wu-occ--over .wu-occ__main {
    color: var(--red);
    font-weight: 600;
}
.wu-occ__side {
    color: var(--ink-muted);
    white-space: nowrap;
}
.wu-occ--low .wu-occ__side {
    color: var(--amber-ink);
    font-weight: 600;
}
.wu-occ--full .wu-occ__side {
    color: var(--ink);
    font-weight: 600;
}
.wu-occ__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* SummaryRow */
.wu-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-6);
    min-width: 0;
}
/*
 * Every figure brings its separator in front of it, and the list starts that wide to the left of its box, which it
 * clips: the separator of the figure that starts a line, the first one or one after a wrap, lies in the clipped strip,
 * so no line ever begins with "·".
 */
.wu-summary__items {
    --wu-summary-separator: calc(2 * var(--space-3) + 0.25em);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) 0;
    margin: 0 0 0 calc(-1 * var(--wu-summary-separator));
    padding: 0;
    list-style: none;
    min-width: 0;
    clip-path: inset(0 0 0 var(--wu-summary-separator));
}
.wu-summary__item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.wu-summary__item::before {
    content: "\00b7";
    flex: none;
    width: var(--wu-summary-separator);
    /* The item's gap would widen the separator's room. */
    margin-right: -6px;
    text-align: center;
    color: var(--ink-subtle);
}
.wu-summary__value {
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.wu-summary--lg .wu-summary__value {
    font-size: 28px;
    line-height: 32px;
}
.wu-summary__label {
    color: var(--ink-muted);
}
.wu-summary__item--amber .wu-summary__value {
    color: var(--amber-ink);
}
.wu-summary__item--green .wu-summary__value {
    color: var(--green);
}
.wu-summary__item--red .wu-summary__value {
    color: var(--red);
}
.wu-summary__stamp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-subtle);
}
.wu-summary__stamp--offline {
    color: var(--amber-ink);
    background: var(--amber-soft);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    font-weight: 600;
}

/* FactList */
.wu-facts {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    container-type: inline-size;
}
.wu-facts__title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-facts__list {
    margin: 0;
    display: flex;
    flex-direction: column;
}
.wu-facts__row {
    display: grid;
    grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--line);
}
.wu-facts__row:first-child {
    border-top: 0;
    padding-top: 0;
}
.wu-facts__label {
    color: var(--ink-muted);
}
.wu-facts__value {
    margin: 0;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: anywhere;
}
.wu-facts__value--mono {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
}
.wu-facts__hint {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-subtle);
}
.wu-facts__link {
    align-self: flex-start;
    font-size: 13px;
    line-height: 18px;
}
.wu-facts__note {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-subtle);
}
.wu-facts--stacked .wu-facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
}
.wu-facts--stacked .wu-facts__label {
    font-size: 13px;
    line-height: 18px;
}
@container (max-width: 380px) {
    .wu-facts__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 2px;
    }
    .wu-facts__label {
        font-size: 13px;
        line-height: 18px;
    }
}

/* ContactCard */
.wu-contact {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    min-width: 0;
}
.wu-contact__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.wu-contact__titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wu-contact__eyebrow {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-contact__name {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-contact__name a {
    color: var(--ink);
    text-decoration: none;
}
.wu-contact__name a:hover {
    color: var(--sky);
    text-decoration: underline;
}
.wu-contact__lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wu-contact__line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink);
    min-width: 0;
}
.wu-contact__line .wu-icon {
    color: var(--ink-subtle);
}
.wu-contact__line a, .wu-contact__line span {
    overflow-wrap: anywhere;
}
.wu-contact__hint {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-subtle);
}

/* BookingRow: the row is its own container, so it adapts inside a Panel as well as on a phone */
.wu-brow {
    container-type: inline-size;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    min-width: 0;
}
.wu-brow__in {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    min-height: 56px;
}
.wu-brow__main {
    flex: 1;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--space-3);
    min-width: 0;
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.wu-brow--notime .wu-brow__main {
    grid-template-columns: minmax(0, 1fr) auto;
}
.wu-brow__main:hover .wu-brow__name {
    color: var(--sky);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.wu-brow__time {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.wu-brow__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wu-brow__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 600;
    color: var(--ink);
    min-width: 0;
}
.wu-brow__note {
    display: inline-flex;
    color: var(--ink-subtle);
}
.wu-brow__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-brow__qty {
    color: var(--ink);
    font-weight: 500;
}
.wu-brow__num {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .02em;
}
.wu-brow__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    justify-content: flex-end;
}
.wu-brow__side {
    flex: none;
    display: flex;
    align-items: center;
}
.wu-brow__att {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.wu-brow--cancelled .wu-brow__name {
    color: var(--ink-muted);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.wu-brow--in .wu-brow__time, .wu-brow--in .wu-brow__qty {
    color: var(--ink-muted);
}
.wu-brow--lg .wu-brow__in {
    min-height: 72px;
    padding: var(--space-3) var(--space-4);
}
.wu-brow--lg .wu-brow__name {
    font-size: 17px;
    line-height: 24px;
}
.wu-brow--lg .wu-brow__qty {
    font-size: 15px;
    font-weight: 600;
}
.wu-brow--lg .wu-brow__meta {
    font-size: 14px;
    line-height: 20px;
}
.wu-brow--lg .wu-btn {
    min-width: 140px;
}
@container (max-width: 560px) {
    .wu-brow__main {
        grid-template-columns: 48px minmax(0, 1fr);
    }
    .wu-brow--notime .wu-brow__main {
        grid-template-columns: minmax(0, 1fr);
    }
    .wu-brow__chips {
        grid-column: 2;
        justify-content: flex-start;
    }
    .wu-brow--notime .wu-brow__chips {
        grid-column: 1;
    }
    .wu-brow__time {
        align-self: start;
        padding-top: 1px;
    }
    .wu-brow--lg .wu-btn {
        min-width: 0;
    }
    .wu-brow__att {
        flex-direction: column;
        align-items: flex-end;
        gap: 0;
    }
}

/* DataTable */
.wu-table {
    container-type: inline-size;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    min-width: 0;
    overflow: hidden;
}
.wu-table__scroll {
    overflow-x: auto;
}
.wu-table__table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.wu-table__caption {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
}
.wu-table__table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sunken);
    text-align: left;
    white-space: nowrap;
    padding: var(--space-2) var(--space-3);
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
    border-bottom: 1px solid var(--line);
}
.wu-table__cell {
    padding: var(--space-3);
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
    color: var(--ink);
}
.wu-table__cell--right {
    text-align: right;
    white-space: nowrap;
}
.wu-table__cell--nowrap {
    white-space: nowrap;
}
.wu-table__table th.wu-table__cell--right {
    text-align: right;
    white-space: nowrap;
}
.wu-table__cell--mono {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.wu-table__group th {
    text-align: left;
    padding: var(--space-4) var(--space-3) var(--space-2);
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--ink);
}
.wu-table__row--link {
    cursor: pointer;
}
.wu-table__row--link:hover > td {
    background: var(--paper);
}
.wu-table__row:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--focus);
}
.wu-table__row--selected > td {
    background: var(--sky-soft);
}
.wu-table__row--selected:hover > td {
    background: var(--sky-soft);
}
.wu-table__row--muted > td {
    color: var(--ink-muted);
}
.wu-table__row:last-child > td {
    border-bottom: 0;
}
.wu-table__sel {
    width: 44px;
    padding: 0 0 0 var(--space-3);
    border-bottom: 1px solid var(--line);
}
.wu-table__check {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--sky);
    cursor: pointer;
    vertical-align: middle;
}
.wu-table__check:focus-visible {
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-xs);
}
.wu-table__empty {
    padding: var(--space-6);
    border-top: 1px solid var(--line);
}
.wu-table__more {
    display: flex;
    justify-content: center;
    padding: var(--space-3);
    border-top: 1px solid var(--line);
}

/*
 * cards below a 560px container (a phone, a Panel): columns marked mobile:'title' head the card, 'meta' stack, 'badge'
 * sit right, 'hide' go
 */
@container (max-width: 560px) {
    .wu-table:not(.wu-table--table) .wu-table__table thead {
        display: none;
    }
    .wu-table:not(.wu-table--table) .wu-table__table, .wu-table:not(.wu-table--table) tbody {
        display: block;
    }
    .wu-table:not(.wu-table--table) .wu-table__row {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 2px var(--space-3);
        padding: var(--space-3) var(--space-4);
        border-bottom: 1px solid var(--line);
        align-items: start;
    }
    .wu-table:not(.wu-table--table) .wu-table__row > td {
        padding: 0;
        border: 0;
        background: transparent;
    }
    .wu-table:not(.wu-table--table) .wu-table__row--selected {
        background: var(--sky-soft);
    }
    .wu-table:not(.wu-table--table) .wu-table__sel {
        grid-column: 1;
        grid-row: 1 / span 8;
        width: auto;
        padding-top: 3px;
    }
    .wu-table:not(.wu-table--table) .wu-table__cell {
        grid-column: 2;
        font-size: 13px;
        line-height: 18px;
        color: var(--ink-muted);
    }
    .wu-table:not(.wu-table--table) .wu-table__cell--m-title {
        order: -1;
        grid-row: 1;
        font-size: 15px;
        line-height: 22px;
        font-weight: 600;
        color: var(--ink);
    }
    .wu-table:not(.wu-table--table) .wu-table__cell--m-meta::before {
        content: attr(data-label) ": ";
        color: var(--ink-subtle);
        font-family: var(--font-sans);
        font-weight: 400;
    }
    .wu-table:not(.wu-table--table) .wu-table__cell--m-badge {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
    .wu-table:not(.wu-table--table) .wu-table__cell--m-hide {
        display: none;
    }
    .wu-table:not(.wu-table--table) .wu-table__group {
        display: block;
    }
    .wu-table:not(.wu-table--table) .wu-table__group th {
        display: block;
        padding: var(--space-3) var(--space-4) var(--space-2);
        background: var(--sunken);
    }
    .wu-table:not(.wu-table--table) .wu-table__cell--right {
        text-align: left;
    }
}

/* AuditList */
.wu-audit {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}
.wu-audit__item {
    position: relative;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: var(--space-3);
    padding-bottom: var(--space-4);
}
.wu-audit__item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--line);
}
.wu-audit__dot {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--sunken);
    color: var(--ink-muted);
}
.wu-audit__item--failed .wu-audit__dot {
    background: var(--red-soft);
    color: var(--red);
}
.wu-audit__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 3px;
    min-width: 0;
}
.wu-audit__what {
    margin: 0;
    color: var(--ink);
}
.wu-audit__meta {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-subtle);
}
.wu-audit__extra {
    margin-top: var(--space-1);
}

/* Alert */
.wu-alert {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    color: var(--ink);
}
.wu-alert__icon {
    display: flex;
    padding-top: 1px;
}
.wu-alert__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wu-alert__title {
    margin: 0;
    font-weight: 600;
}
.wu-alert__text {
    color: var(--ink);
}
.wu-alert__text p {
    margin: 0;
}
.wu-alert__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.wu-alert__close {
    margin: -4px -8px 0 0;
}
.wu-alert--info {
    background: var(--sky-soft);
}
.wu-alert--info .wu-alert__icon {
    color: var(--sky);
}
.wu-alert--warning, .wu-alert--paused {
    background: var(--amber-soft);
}
.wu-alert--warning .wu-alert__icon, .wu-alert--paused .wu-alert__icon {
    color: var(--amber-ink);
}
.wu-alert--danger {
    background: var(--red-soft);
}
.wu-alert--danger .wu-alert__icon {
    color: var(--red);
}
.wu-alert--success {
    background: var(--green-soft);
}
.wu-alert--success .wu-alert__icon {
    color: var(--green);
}
.wu-alert--neutral, .wu-alert--closed {
    background: var(--surface);
    border-color: var(--line);
}
.wu-alert--neutral .wu-alert__icon, .wu-alert--closed .wu-alert__icon {
    color: var(--ink-muted);
}
.wu-alert--compact {
    padding: var(--space-2) var(--space-3);
}
.wu-alert--compact .wu-alert__actions {
    margin-top: var(--space-1);
}

/* Install hint: the browser owns the location of Share and its menus, so the guide stays inside the page. */
.wu-install-dialog:not([open]), .wu-install-dialog__device[hidden] {
    display: none;
}
.wu-install-dialog {
    width: min(480px, calc(100% - 2 * var(--space-4)));
    max-height: calc(100dvh - 2 * var(--space-4));
    margin: auto;
    padding: var(--space-6);
    overflow: auto;
    font: inherit;
    line-height: 1.5;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
}
.wu-install-dialog::backdrop {
    background: var(--scrim);
}
.wu-install-dialog__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}
.wu-install-dialog__head .wu-iconbtn {
    flex: none;
}
.wu-install-dialog__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
    text-wrap: balance;
}
.wu-install-dialog__device {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-5);
}
.wu-install-dialog__step-icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--sky-soft);
    color: var(--sky);
}
.wu-install-dialog__device-title {
    align-self: center;
    margin: 0;
    font-size: 16px;
}
.wu-install-dialog__steps {
    grid-column: 1 / -1;
    margin: var(--space-2) 0 0;
    padding-left: var(--space-6);
}
.wu-install-dialog__steps li + li {
    margin-top: var(--space-2);
}
.wu-install-dialog__note {
    margin: var(--space-5) 0 var(--space-3);
    color: var(--ink-muted);
}
@media (max-width: 479px) {
    .wu-install-dialog {
        padding: var(--space-4);
    }
}

/* EmptyState */
.wu-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
}
.wu-empty__art {
    margin-bottom: var(--space-2);
}
.wu-empty__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: var(--sunken);
    color: var(--ink-muted);
}
.wu-empty__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ink);
    text-wrap: balance;
    max-width: 44ch;
}
.wu-empty__text {
    max-width: 52ch;
    color: var(--ink-muted);
    text-wrap: pretty;
}
.wu-empty__text p {
    margin: 0;
}
.wu-empty__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-3);
}
.wu-empty--page {
    padding: var(--space-12) var(--space-4);
}
.wu-empty--page .wu-empty__title {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
}
.wu-empty--compact {
    padding: var(--space-4);
    align-items: flex-start;
    text-align: left;
}
.wu-empty--compact .wu-empty__actions {
    justify-content: flex-start;
}

/* Toast */
.wu-toast {
    position: fixed;
    z-index: var(--z-toast);
    left: 50%;
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* As wide as its text: from left 50% its width would otherwise shrink to half the window ("Checked / in"). */
    width: max-content;
    max-width: min(560px, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    min-height: 48px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--owl);
    color: var(--cream);
    box-shadow: var(--shadow-md);
    animation: wu-toast-in var(--wu-base) var(--wu-ease);
}
.wu-toast--inline {
    position: relative;
    left: auto;
    bottom: auto;
    transform: none;
    animation: none;
}
.wu-toast__icon {
    color: var(--amber);
}
.wu-toast--danger .wu-toast__icon {
    color: var(--cream);
}
/* A milestone's toast (UX concept 8.8, E06, E11, E15): Hoo instead of the icon, its line the message. The toast is */
/* navy in both themes, so Hoo takes the owner's drawing for dark grounds, as the SideNav's logo does. */
.wu-toast--hoo {
    --owl-ears: #ffffff;
    --owl-silhouette: transparent;
    --owl-wings: #ffffff;
}
.wu-toast__hoo {
    display: inline-flex;
    flex: none;
}
.wu-toast__hoo .wu-hoo {
    --wu-hoo-head: 40px;
}
.wu-toast__msg {
    flex: 1;
    min-width: 0;
    font-weight: 500;
}
.wu-toast__action {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-sm);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--amber);
    color: var(--on-amber);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}
.wu-toast__action:hover {
    background: var(--amber-hover);
}
.wu-toast__action:focus-visible, .wu-toast__close:focus-visible {
    box-shadow: var(--focus-ring-nav);
}
.wu-toast__secs {
    font-weight: 500;
    font-size: 12px;
    opacity: .8;
    font-variant-numeric: tabular-nums;
}
.wu-toast__close {
    flex: none;
    display: grid;
    place-items: center;
    width: var(--control-sm);
    height: var(--control-sm);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--cream);
    cursor: pointer;
}
.wu-toast__timer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--amber);
    transform-origin: left;
    transition: transform 100ms linear;
}
@keyframes wu-toast-in {
    from {
        opacity: 0;
        transform: translate(-50%, 8px);
    }
}
@media (max-width: 1023px) {
    .wu-toast:not(.wu-toast--inline) {
        bottom: calc(var(--bottomnav-height) + var(--space-3) + env(safe-area-inset-bottom, 0px));
    }
    /* Above a page's ActionBar too (Heute), whose buttons it would cover: 48 px buttons in 12 px padding. */
    .wu-shell--auto:has(.wu-shell__action) ~ .wu-toasts .wu-toast:not(.wu-toast--inline) {
        bottom: calc(var(--bottomnav-height) + 73px + var(--space-3) + env(safe-area-inset-bottom, 0px));
    }
}
/* On a phone a toast's action goes below its message: beside the icon or Hoo, the action and the close button, the */
/* message had a few words' width left and broke after each (E11's "Die / erste / Buchung"). The icon or Hoo stands */
/* beside both rows, the close button at the top. */
@media (max-width: 599px) {
    .wu-toast:has(> .wu-toast__action, > form) {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: var(--space-2) var(--space-3);
        padding-block: var(--space-3);
    }
    .wu-toast:has(> .wu-toast__action, > form) > :is(.wu-toast__icon, .wu-toast__hoo) {
        grid-area: 1 / 1 / 3 / 2;
    }
    .wu-toast:has(> .wu-toast__action, > form) > .wu-toast__msg {
        grid-area: 1 / 2;
    }
    .wu-toast:has(> .wu-toast__action, > form) > :is(.wu-toast__action, form) {
        grid-area: 2 / 2;
        justify-self: start;
    }
    .wu-toast:has(> .wu-toast__action, > form) > .wu-toast__close {
        grid-area: 1 / 3;
        align-self: start;
    }
}

/* ProgressPanel */
.wu-progress {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    min-width: 0;
}
.wu-progress__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--sky);
}
.wu-progress__headicon {
    color: var(--green);
}
.wu-progress__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ink);
}
.wu-progress__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.wu-progress__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wu-progress__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 var(--space-3);
}
.wu-progress__label {
    font-weight: 500;
    white-space: nowrap;
}
.wu-progress__count {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 22px;
}
.wu-progress__bar {
    position: relative;
    display: flex;
    height: 6px;
    border-radius: var(--radius-xs);
    background: var(--sunken);
    overflow: hidden;
}
.wu-progress__bar > span:first-child {
    background: var(--sky);
    transition: width var(--wu-base) var(--wu-ease);
}
.wu-progress__item--done .wu-progress__bar > span:first-child {
    background: var(--green);
}
.wu-progress__failed {
    background: var(--red);
    border-left: 2px solid var(--surface);
}
.wu-progress__item--error .wu-progress__count {
    color: var(--red);
    font-weight: 600;
}
.wu-progress__result {
    margin: 0;
    font-weight: 600;
}
.wu-progress__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.wu-progress__note {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-subtle);
}

/* Legend and the slot swatches (WeekGrid, DayTimeline and MonthCalendar use the same .wu-swatch states) */
.wu-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-legend__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.wu-swatch {
    display: inline-grid;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-xs);
    border: 2px solid transparent;
    flex: none;
}
.wu-swatch--free {
    background: var(--green-soft);
    border-color: var(--occ-free);
}
.wu-swatch--low {
    background: var(--amber-soft);
    border-color: var(--occ-low);
}
.wu-swatch--full {
    background: var(--occ-full);
    border-color: var(--occ-full);
}
.wu-swatch--overbooked {
    background: var(--red-soft);
    border-color: var(--occ-over);
    color: var(--red);
}
.wu-swatch--blocked {
    background: repeating-linear-gradient(135deg, var(--sunken) 0 3px, var(--line-strong) 3px 4px);
    border-color: var(--line-strong);
    color: var(--ink);
}
.wu-swatch--manual {
    background: var(--surface);
    border: 2px dashed var(--sky);
    color: var(--sky);
}
.wu-swatch--past {
    background: var(--sunken);
    border-color: var(--line);
}
.wu-swatch .wu-icon {
    width: 12px;
    height: 12px;
}

/* Skeleton */
.wu-skel {
    display: block;
    height: 12px;
    border-radius: var(--radius-xs);
    background: var(--line);
    position: relative;
    overflow: hidden;
}
.wu-skel--sm {
    height: 10px;
}
.wu-skel--pill {
    height: 24px;
    border-radius: var(--radius-full);
}
.wu-skel--block {
    border-radius: var(--radius-md);
}
.wu-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, var(--surface), transparent);
    opacity: .6;
    animation: wu-skel 1.4s var(--wu-ease) infinite;
}
@media (prefers-reduced-motion: reduce) {
    .wu-skel::after {
        animation: none;
        display: none;
    }
}
@keyframes wu-skel {
    to {
        transform: translateX(100%);
    }
}
.wu-skel-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-skel-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-1) 0;
}
.wu-skel-row__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/*
 * ===== time: DateStepper, MonthCalendar, WeekGrid, DayTimeline, DayHeader, SlotPicker, SlotSwitcher, PortalCalendar,
 * DayList =====
 */

/* shared mini occupancy bar (fallback when OccupancyBar is absent, and inside calendar cells) */
.wu-tbar {
    position: relative;
    display: block;
    flex: none;
    width: 64px;
    height: 6px;
    border-radius: var(--radius-xs);
    background: var(--sunken);
    overflow: hidden;
}
.wu-tbar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: inherit;
    background: var(--occ-free);
}
.wu-tbar--low .wu-tbar__fill {
    background: var(--occ-low);
}
.wu-tbar--full .wu-tbar__fill {
    background: var(--occ-full);
}
.wu-tbar--over .wu-tbar__fill {
    background: var(--occ-over);
}
.wu-tocc {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}
.wu-tocc .wu-tbar {
    width: 96px;
}
.wu-tocc__text {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
    white-space: nowrap;
}

/* DateStepper */
.wu-datestep {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-datestep__group {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.wu-datestep__label {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-1);
    min-width: 9.5em;
    justify-content: center;
    padding: 0 var(--space-2);
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.wu-datestep__label--btn {
    align-items: center;
    height: var(--control-sm);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    cursor: pointer;
}
.wu-datestep__label--btn:hover {
    background: var(--sunken);
}
.wu-datestep__prefix {
    color: var(--ink);
}
.wu-datestep__rel {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-muted);
}
.wu-datestep--lg .wu-datestep__label {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
    min-width: 11em;
}
.wu-datestep__pop {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: var(--z-popover);
    width: 320px;
    max-width: calc(100vw - 32px);
    padding: var(--space-3);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* MonthCalendar */
.wu-month {
    min-width: 0;
}
.wu-month__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.wu-month__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
    color: var(--ink);
}
.wu-month__nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.wu-month__grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wu-month__row {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: var(--space-1);
}
.wu-month__wd {
    padding: var(--space-1) 0;
    text-align: center;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-month__cell {
    min-width: 0;
}
.wu-month__cell--out {
    display: grid;
    place-items: center;
    color: var(--ink-disabled);
    font-size: 13px;
}
.wu-month__day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 44px;
    padding: var(--space-1);
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
    transition: background var(--wu-fast) var(--wu-ease), border-color var(--wu-fast) var(--wu-ease);
}
.wu-month__day:hover {
    background: var(--sunken);
}
.wu-month__top {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.wu-month__num {
    font-size: 15px;
    line-height: 20px;
    font-weight: 600;
}
.wu-month__text {
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    color: var(--green);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.wu-month__check {
    margin-left: -2px;
}
.wu-month__day--low .wu-month__text {
    color: var(--amber-ink);
}
.wu-month__day--full .wu-month__text, .wu-month__day--closed .wu-month__text, .wu-month__day--off .wu-month__text {
    color: var(--ink-muted);
    font-weight: 400;
}
.wu-month__day--over .wu-month__text {
    color: var(--red);
}
.wu-month__day--today {
    border-color: var(--line-strong);
}
.wu-month__day--past {
    opacity: .55;
}
.wu-month__day--off {
    cursor: default;
}
.wu-month__day--off:hover {
    background: transparent;
}
.wu-month__day--off .wu-month__num {
    color: var(--ink-muted);
    font-weight: 400;
}
.wu-month__day--closed .wu-month__num {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.wu-month__day--selected, .wu-month__day--selected:hover {
    background: var(--amber);
    color: var(--on-amber);
    border-color: var(--on-amber);
    opacity: 1;
}
.wu-month__day--selected .wu-month__text, .wu-month__day--selected .wu-month__num {
    color: var(--on-amber);
}

/* admin variant: big cells with free count, load, schedule */
.wu-month--admin .wu-month__day {
    align-items: stretch;
    justify-content: flex-start;
    text-align: left;
    min-height: 96px;
    padding: 6px;
    border-color: var(--line);
    background: var(--surface);
}
.wu-month--admin .wu-month__day:hover {
    background: var(--sunken);
}
.wu-month--admin .wu-month__top {
    justify-content: flex-start;
}
.wu-month--admin .wu-month__text {
    font-size: 12px;
    line-height: 16px;
}
.wu-month--admin .wu-month__day--closed {
    background: var(--sunken);
}
.wu-month--admin .wu-month__day--today {
    border-color: var(--sky);
    box-shadow: inset 0 0 0 1px var(--sky);
}
.wu-month--admin .wu-month__day--selected {
    background: var(--amber);
}
.wu-month__today {
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    color: var(--sky);
}
.wu-month__marks {
    display: inline-flex;
    gap: 2px;
    margin-left: auto;
    color: var(--red);
}
.wu-month__load {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 11px;
    line-height: 14px;
    color: var(--ink-muted);
}
.wu-month__load .wu-tbar {
    flex: 1 1 auto;
    width: auto;
    min-width: 16px;
}
.wu-month__sched {
    font-size: 11px;
    line-height: 14px;
    color: var(--ink-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wu-month--admin .wu-month__day--selected .wu-month__load,
.wu-month--admin .wu-month__day--selected .wu-month__sched,
.wu-month--admin .wu-month__day--selected .wu-month__today {
    color: var(--on-amber);
}
.wu-month__cell--out:empty {
    min-height: 0;
}
.wu-month--admin .wu-month__cell--out {
    background: transparent;
}

/* compact variant: date picker inside popovers */
.wu-month--compact .wu-month__day {
    min-height: 36px;
}
.wu-month--compact .wu-month__text {
    font-size: 10px;
    line-height: 12px;
    color: var(--ink-subtle);
    font-weight: 500;
}

/* portal variant: guests, bigger targets */
.wu-month--portal .wu-month__day {
    min-height: 52px;
    border-radius: var(--radius-md);
}
.wu-month--portal .wu-month__num {
    font-size: 16px;
}
.wu-month--portal .wu-month__day:not(.wu-month__day--off):not(.wu-month__day--selected) {
    background: var(--surface);
    border-color: var(--line-strong);
}
.wu-month--portal .wu-month__day:not(.wu-month__day--off):not(.wu-month__day--selected):hover {
    background: var(--sunken);
}
@media (max-width: 720px) {
    .wu-month--admin .wu-month__day {
        min-height: 64px;
        padding: var(--space-1);
    }
    .wu-month--admin .wu-month__sched, .wu-month--admin .wu-month__load span {
        display: none;
    }
    /*
     * A phone's cell is about 40 px wide: "heute" goes below the day's number, and a text wraps (and hyphenates
     * "geschlossen") instead of ending in an ellipsis that hides what the day is.
     */
    .wu-month--admin .wu-month__top {
        flex-wrap: wrap;
    }
    .wu-month--admin .wu-month__text {
        font-size: 11px;
        line-height: 14px;
        white-space: normal;
        overflow: visible;
        overflow-wrap: anywhere;
        hyphens: auto;
    }
}

/* WeekGrid */
.wu-week {
    min-width: 0;
    container-type: inline-size;
}
.wu-week__scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.wu-week__table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    font-variant-numeric: tabular-nums;
}
.wu-week__table th, .wu-week__table td {
    padding: 2px 3px;
    vertical-align: top;
}
.wu-week__corner {
    width: 56px;
}
.wu-week__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}
.wu-week__day {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    padding: var(--space-2) var(--space-2) var(--space-2) !important;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    text-align: left;
    font-weight: 400;
}
.wu-week__date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-1);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--ink);
    white-space: nowrap;
}
.wu-week__todaytag {
    font-size: 11px;
    font-weight: 600;
    color: var(--sky);
}
.wu-week__day--today {
    box-shadow: inset 0 -2px 0 var(--sky);
}
.wu-week__sum {
    display: block;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-week__sched {
    display: block;
    font-size: 11px;
    line-height: 14px;
    color: var(--ink-subtle);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wu-week__time {
    padding: var(--space-1) var(--space-2) !important;
    text-align: right;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    color: var(--ink-subtle);
    white-space: nowrap;
}
/* Week slots and month days are links whose tile shows they are clickable: no underline under every text. */
.wu-week__slot {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--space-1);
    width: 100%;
    padding: 3px var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-xs);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    background: var(--green-soft);
    color: var(--green);
    transition: filter var(--wu-fast) var(--wu-ease);
}
.wu-week__slot:hover {
    filter: brightness(.96);
}
.wu-week__count {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--ink);
}
.wu-week__state {
    grid-column: 1;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
}
.wu-week__marks {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    color: var(--ink-muted);
}
.wu-week__slot--low {
    background: var(--amber-soft);
    color: var(--amber-ink);
}
.wu-week__slot--full {
    background: var(--neutral-soft);
    color: var(--ink-muted);
}
.wu-week__slot--over {
    background: var(--red-soft);
    color: var(--red);
    border-color: var(--red);
}
.wu-week__slot--blocked {
    color: var(--ink-muted);
    border-color: var(--line);
    background: repeating-linear-gradient(135deg, var(--sunken) 0 6px, var(--surface) 6px 12px);
}
.wu-week__slot--past {
    opacity: .55;
}
.wu-week__slot--selected, .wu-week__slot--selected:hover {
    background: var(--amber);
    color: var(--on-amber);
    border-color: var(--on-amber);
    opacity: 1;
    filter: none;
}
.wu-week__slot--selected .wu-week__count, .wu-week__slot--selected .wu-week__marks {
    color: var(--on-amber);
}
.wu-week__closed {
    padding: var(--space-3) var(--space-2) !important;
    background: repeating-linear-gradient(135deg, var(--sunken) 0 6px, transparent 6px 12px);
    color: var(--ink-muted);
    text-align: center;
    vertical-align: middle !important;
}
.wu-week__closed span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    font-weight: 600;
}
.wu-week__closed small {
    display: block;
    font-size: 12px;
    line-height: 16px;
}

/*
 * WeekGrid, the days one below the other: where the table's 720 px (and its border) don't fit, e.g. a phone, each day
 * is a card with its head and its slots as tiles, so nothing scrolls sideways. The table names a slot's start in its
 * row; the tiles name it themselves.
 */
.wu-week__start {
    display: none;
}
.wu-week__days {
    display: none;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
    font-variant-numeric: tabular-nums;
}
@container (max-width: 721px) {
    .wu-week__scroll {
        display: none;
    }
    .wu-week__days {
        display: flex;
    }
}
.wu-week__daycard {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.wu-week__daycard--today {
    border-color: var(--sky);
    box-shadow: inset 0 0 0 1px var(--sky);
}
.wu-week__dayhead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: var(--space-3);
}
.wu-week__dayname {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
}
.wu-week__dayname .wu-week__date {
    display: inline-flex;
    gap: var(--space-2);
    align-items: baseline;
    font-size: 15px;
    line-height: 22px;
}
.wu-week__dayhead .wu-week__sched {
    grid-column: 1 / -1;
    font-size: 12px;
    line-height: 16px;
}
.wu-week__slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wu-week__slots .wu-week__slot {
    min-height: 44px;
    padding: var(--space-1) var(--space-2);
}
/* A tile: the start and "12/20" on the first line, the state and its mark on the second. */
.wu-week__slots .wu-week__start {
    display: block;
    grid-column: 1;
    font-size: 13px;
    line-height: 18px;
    font-weight: 700;
    color: var(--ink);
}
.wu-week__slots .wu-week__count {
    grid-column: 2;
    grid-row: 1;
    font-weight: 500;
}
.wu-week__slots .wu-week__state {
    grid-row: 2;
    white-space: normal;
}
.wu-week__slots .wu-week__marks {
    grid-row: 2;
    flex-direction: row;
}
.wu-week__slots .wu-week__slot--selected .wu-week__start {
    color: var(--on-amber);
}
p.wu-week__closed {
    margin: 0;
    padding: var(--space-2) !important;
    border-radius: var(--radius-xs);
}

/* DayTimeline */
.wu-dayline {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    min-width: 0;
    overflow: clip;
}
.wu-dayline__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5) var(--space-2);
}
.wu-dayline__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-dayline__sub {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-dayline__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wu-dayline__slot {
    border-top: 1px solid var(--line);
}
.wu-dayline__slot:first-child {
    border-top: 0;
}
.wu-dayline__head + .wu-dayline__list .wu-dayline__slot:first-child {
    border-top: 1px solid var(--line);
}
.wu-dayline__row {
    display: grid;
    grid-template-columns: 20px 104px minmax(150px, 220px) 56px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 48px;
    padding: var(--space-2) var(--space-5);
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    color: var(--ink);
}
.wu-dayline__row:hover {
    background: var(--sunken);
}
.wu-dayline__row:focus-visible {
    box-shadow: inset 0 0 0 2px var(--focus);
}
.wu-dayline__chev {
    color: var(--ink-subtle);
}
.wu-dayline__time {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    white-space: nowrap;
}
.wu-dayline__occ {
    min-width: 0;
}
.wu-dayline__present {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
    white-space: nowrap;
}
.wu-dayline__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    min-width: 0;
}
.wu-dayline__now {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: 20px;
    padding: 0 8px;
    border-radius: var(--radius-full);
    background: var(--amber);
    color: var(--on-amber);
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
}
.wu-dayline__slot--now {
    box-shadow: inset 0 1px 0 var(--amber), inset 0 -1px 0 var(--amber);
}
.wu-dayline__slot--past > .wu-dayline__row {
    color: var(--ink-muted);
}
.wu-dayline__row--summary {
    grid-template-columns: 20px minmax(0, 1fr);
}
.wu-dayline__summary {
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-muted);
}
.wu-dayline__bookings {
    padding: 0 var(--space-5) var(--space-3) calc(var(--space-5) + 20px + var(--space-3));
}
.wu-dayline__blist {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.wu-dayline__booking {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px 96px 160px;
    align-items: center;
    gap: var(--space-3);
    min-height: 44px;
    padding: var(--space-1) var(--space-3);
    border-top: 1px solid var(--line);
}
.wu-dayline__booking:first-child {
    border-top: 0;
}
.wu-dayline__bname {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-weight: 600;
    min-width: 0;
    color: var(--ink);
}
.wu-dayline__bname .wu-icon {
    color: var(--ink-subtle);
}
.wu-dayline__bqty {
    font-size: 14px;
    color: var(--ink-muted);
}
.wu-dayline__bcode {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: var(--ink-muted);
}
.wu-dayline__bact {
    justify-self: end;
}
.wu-dayline__nobook {
    margin: 0;
    font-size: 14px;
    color: var(--ink-muted);
}
/* "Bestellt: 87 × Haxe · 31 × Schnitzel": the extras a day or a slot ordered (ADR 0010 "Extras"). */
.wu-dayline__ordered {
    margin: 0 0 var(--space-2);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
@media (max-width: 720px) {
    .wu-dayline__head {
        padding: var(--space-3) var(--space-4) var(--space-2);
    }
    .wu-dayline__row {
        grid-template-columns: 20px auto 1fr;
        row-gap: var(--space-1);
        padding: var(--space-2) var(--space-4);
    }
    .wu-dayline__occ {
        grid-column: 2 / -1;
        grid-row: 2;
    }
    .wu-dayline__present {
        grid-column: 3;
        grid-row: 1;
        justify-self: end;
    }
    .wu-dayline__chips {
        grid-column: 2 / -1;
        grid-row: 3;
    }
    .wu-dayline__chips:empty {
        display: none;
    }
    .wu-dayline__bookings {
        padding: 0 var(--space-4) var(--space-3);
    }
    .wu-dayline__booking {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        column-gap: var(--space-3);
        row-gap: 0;
        padding-block: var(--space-2);
    }
    .wu-dayline__bname {
        grid-column: 1 / 4;
        grid-row: 1;
    }
    .wu-dayline__bqty {
        grid-column: 1;
        grid-row: 2;
        font-size: 13px;
    }
    .wu-dayline__bcode {
        grid-column: 2;
        grid-row: 2;
        font-size: 12px;
    }
    .wu-dayline__bact {
        grid-column: 4;
        grid-row: 1 / span 2;
    }
}

/* DayHeader */
.wu-dayhead {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
}
.wu-dayhead__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.wu-dayhead__titles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-dayhead__title {
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
    color: var(--ink);
}
.wu-dayhead__rel {
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: var(--ink-muted);
}
.wu-dayhead__rule {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-muted);
}
.wu-dayhead__rule .wu-icon {
    margin-top: 2px;
    color: var(--ink-subtle);
}
.wu-dayhead__sum {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-subtle);
}
.wu-dayhead__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* SlotPicker */
.wu-slotpick {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.wu-slotpick__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--ink);
}
.wu-slotpick__tz {
    font-size: 12px;
    line-height: 16px;
    font-weight: 400;
    color: var(--ink-subtle);
}
.wu-slotpick__groups {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.wu-slotpick__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-slotpick__gtitle {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-slotpick__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--space-2);
}
.wu-slotpick__opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    min-height: var(--control-lg);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background var(--wu-fast) var(--wu-ease), border-color var(--wu-fast) var(--wu-ease);
}
.wu-slotpick__opt:hover {
    background: var(--sunken);
}
.wu-slotpick__opt--lg {
    min-height: 56px;
}
.wu-slotpick__time {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 16px;
    line-height: 22px;
    font-weight: 600;
}
.wu-slotpick__sub {
    font-size: 13px;
    line-height: 18px;
    color: var(--green);
    font-weight: 500;
}
.wu-slotpick__sub--full {
    color: var(--ink-muted);
    font-weight: 400;
}
.wu-slotpick__sub--low {
    color: var(--amber-ink);
}
.wu-slotpick__same {
    font-size: 11px;
    line-height: 14px;
    font-weight: 600;
    color: var(--sky);
}
.wu-slotpick__opt--selected, .wu-slotpick__opt--selected:hover {
    background: var(--amber);
    border-color: var(--on-amber);
    box-shadow: inset 0 0 0 1px var(--on-amber);
    color: var(--on-amber);
}
/* The ink of the amber, not --ink-muted: the dark theme's muted ink is light grey, unreadable on amber. */
.wu-slotpick__opt--selected .wu-slotpick__sub, .wu-slotpick__opt--selected .wu-slotpick__sub--full {
    color: var(--on-amber);
    font-weight: 400;
}
/* Only on the chosen slot's amber: unscoped, the tag ("jetzige Zeit") was dark on dark in the dark theme. */
.wu-slotpick__opt--selected .wu-slotpick__same {
    color: var(--on-amber);
}
.wu-slotpick__opt--off {
    cursor: not-allowed;
    background: var(--sunken);
    border-color: var(--line);
    color: var(--ink-muted);
}
.wu-slotpick__opt--off:hover {
    background: var(--sunken);
}
.wu-slotpick__opt--off .wu-slotpick__sub {
    color: var(--ink-muted);
    font-weight: 400;
}
.wu-slotpick__opt--off .wu-slotpick__time {
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    font-weight: 500;
}
.wu-slotpick__empty {
    margin: 0;
    color: var(--ink-muted);
}
.wu-slotpick__hold {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-size: 14px;
    line-height: 20px;
}
.wu-slotpick__hold strong {
    font-variant-numeric: tabular-nums;
}

/* Neue Buchung (UX concept 10.3, 8.9): "Wahl mit Wert" with the values below the two cards, which stay side by side */
/* on phones too, so "Andere Uhrzeit" sits right below the day; only the chosen option's fields show, no script. */
.wu-newbooking-when .wu-radiocards--row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wu-newbooking-when__slot,
.wu-newbooking-when__other {
    margin-top: var(--space-3);
}
.wu-newbooking-when:has(.wu-radio__input[value=other]:checked) .wu-newbooking-when__slot,
.wu-newbooking-when:not(:has(.wu-radio__input[value=other]:checked)) .wu-newbooking-when__other {
    display: none;
}

/* SlotSwitcher */
.wu-slotswitch {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: var(--space-2);
    min-width: 0;
}
.wu-slotswitch__step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-width: var(--control-lg);
    min-height: 56px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.wu-slotswitch__step:hover {
    background: var(--sunken);
}
.wu-slotswitch__step:disabled {
    cursor: not-allowed;
    color: var(--ink-disabled);
    border-color: var(--line);
    background: transparent;
}
.wu-slotswitch__adj {
    color: var(--ink-muted);
}
.wu-slotswitch__cur {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--line);
}
.wu-slotswitch__line {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
    font-variant-numeric: tabular-nums;
}
.wu-slotswitch__time {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
    color: var(--ink);
}
.wu-slotswitch__sep {
    color: var(--ink-subtle);
}
.wu-slotswitch__count {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    color: var(--ink);
}
.wu-slotswitch__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
@media (max-width: 480px) {
    .wu-slotswitch__adj {
        display: none;
    }
}

/* DayList */
.wu-daylist {
    margin: 0;
    font-size: 14px;
    line-height: 22px;
    color: var(--ink-muted);
}
.wu-daylist__title {
    color: var(--ink-muted);
}
.wu-daylist__link {
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--sky);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    border-radius: var(--radius-xs);
}
.wu-daylist__link:hover {
    text-decoration-thickness: 2px;
}
.wu-daylist--list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-daylist__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--control-lg);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    font-size: 16px;
    line-height: 24px;
}
.wu-daylist__row:hover {
    background: var(--sunken);
}
.wu-daylist__row .wu-icon {
    color: var(--ink-subtle);
}
.wu-daylist__day {
    font-weight: 600;
    display: inline-flex;
    gap: var(--space-2);
    align-items: baseline;
}
.wu-daylist__rel {
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-muted);
}
.wu-daylist__free {
    font-size: 14px;
    color: var(--green);
    font-weight: 500;
}
.wu-daylist__row:disabled {
    cursor: not-allowed;
    background: var(--sunken);
    border-color: var(--line);
    color: var(--ink-muted);
}
.wu-daylist__row:disabled .wu-daylist__free {
    color: var(--ink-muted);
    font-weight: 400;
}
.wu-daylist__row--selected, .wu-daylist__row--selected:hover {
    background: var(--amber);
    border-color: var(--on-amber);
    box-shadow: inset 0 0 0 1px var(--on-amber);
    color: var(--on-amber);
}
.wu-daylist__row--selected .wu-daylist__free,
.wu-daylist__row--selected .wu-daylist__rel,
.wu-daylist__row--selected .wu-icon {
    color: var(--on-amber);
}

/* PortalCalendar */
.wu-pcal {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
    max-width: var(--portal-max);
}
.wu-pcal__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--sky-soft);
    color: var(--ink);
    font-size: 15px;
    line-height: 22px;
}
.wu-pcal__notice .wu-icon {
    margin-top: 2px;
    color: var(--sky);
}

/*
 * ===== input: Field, TextField, SearchField, Select, Stepper, NumberField, DurationField, DateRangeField,
 * LocalizedField, SegmentedControl, RadioCard, CheckboxGroup, Checkbox, Switch, InlineEdit, CopyField, ConfirmDialog
 * =====
 */

/* Field */
.wu-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.wu-field__labelrow {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    flex-wrap: wrap;
}
.wu-field__label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--ink);
}
/* "optional" inside the label, on its line: muted helper text that wraps as a whole after a long label. */
.wu-field__optional {
    margin-inline-start: var(--space-1);
    font-size: 13px;
    line-height: 18px;
    font-weight: 400;
    color: var(--ink-muted);
    white-space: nowrap;
}
.wu-field__aside {
    margin-left: auto;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-field__hint {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
    max-width: 65ch;
}
/* What a question is for, below its label and before the options it explains (UX concept 8.9). */
.wu-field__desc {
    margin: 0 0 var(--space-1);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
    max-width: 65ch;
}
.wu-field__error, .wu-field__note {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-1);
    align-self: flex-start;
    max-width: 100%;
    margin: 0;
    padding: 3px var(--space-2);
    border-radius: var(--radius-xs);
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    background: var(--red-soft);
    color: var(--red);
}
.wu-field__error .wu-icon, .wu-field__note .wu-icon {
    margin-top: 1px;
}
.wu-field__note {
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-weight: 500;
}
.wu-field__vh {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.wu-fieldset {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Read only (design-system.md "Read only"): a page whose module the role sees but doesn't change shows what it holds
    and leaves out what changes it; its forms are a disabled fieldset. */
.wu-readonly .wu-pagehead__actions,
.wu-readonly .wu-formfoot,
body:has(.wu-readonly) [data-wu-changes],
body:has(.wu-readonly) .wu-shell__action,
body:has(.wu-readonly) .wu-panel__foot {
    display: none;
}
.wu-fieldset:disabled .wu-input {
    background: var(--sunken);
    border-color: var(--line);
}
.wu-fieldset:disabled :is(input, select, textarea) {
    color: var(--ink-disabled);
    cursor: not-allowed;
}

/* the input box shared by TextField, SearchField, Select, NumberField, DurationField, DateRangeField, CopyField */
.wu-input {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    height: var(--control-md);
    padding: 0 var(--space-3);
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    transition: border-color var(--wu-fast) var(--wu-ease), box-shadow var(--wu-fast) var(--wu-ease);
}
.wu-input:hover {
    border-color: var(--ink-muted);
}
.wu-input:focus-within {
    border-color: var(--focus);
    box-shadow: var(--focus-ring);
}
.wu-input--sm {
    height: var(--control-sm);
}
.wu-input--lg {
    height: var(--control-lg);
    padding: 0 var(--space-4);
}
.wu-input--lg .wu-input__control {
    font-size: 16px;
}
.wu-input__control {
    flex: 1;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    line-height: 22px;
}
.wu-input__control:focus-visible {
    box-shadow: none;
}
.wu-input__control::placeholder {
    color: var(--ink-subtle);
    opacity: 1;
}
.wu-input__icon {
    color: var(--ink-subtle);
}
.wu-input__affix {
    flex: none;
    color: var(--ink-muted);
    font-size: 14px;
}
.wu-input--multiline {
    height: auto;
    align-items: stretch;
    padding: var(--space-2) var(--space-3);
}
.wu-input--multiline .wu-input__control {
    resize: vertical;
    min-height: 66px;
}
.wu-input--mono .wu-input__control {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .01em;
}
.wu-input--invalid, .wu-input--invalid:hover {
    border-color: var(--red);
}
.wu-input--invalid:focus-within {
    border-color: var(--red);
}
.wu-input--disabled, .wu-input--disabled:hover {
    background: var(--sunken);
    border-color: var(--line);
    color: var(--ink-disabled);
}
.wu-input--disabled .wu-input__control {
    color: var(--ink-disabled);
    cursor: not-allowed;
}
.wu-input .wu-iconbtn--sm {
    margin-right: calc(var(--space-2) * -1);
}
input[type="date"].wu-input__control::-webkit-calendar-picker-indicator {
    opacity: .6;
    cursor: pointer;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) input[type="date"].wu-input__control::-webkit-calendar-picker-indicator {
        filter: invert(1);
    }
}
[data-theme="dark"] input[type="date"].wu-input__control::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* SearchField */
.wu-search .wu-input__control::-webkit-search-cancel-button {
    display: none;
}
.wu-search__clear {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    margin-right: calc(var(--space-1) * -1);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--ink-muted);
    cursor: pointer;
}
.wu-search__clear:hover {
    background: var(--sunken);
    color: var(--ink);
}

/* Select */
.wu-select {
    position: relative;
    padding-right: 0;
}
.wu-select .wu-input__control {
    appearance: none;
    -webkit-appearance: none;
    padding-right: calc(var(--space-3) + 24px);
    cursor: pointer;
}
.wu-select__chevron {
    position: absolute;
    right: var(--space-3);
    pointer-events: none;
    color: var(--ink-muted);
}
.wu-select--empty .wu-input__control {
    color: var(--ink-subtle);
}
.wu-select .wu-input__control option {
    color: var(--ink);
    background: var(--surface-raised);
}

/* Stepper */
.wu-stepper__wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    align-items: flex-start;
}
.wu-stepper {
    display: inline-flex;
    align-items: stretch;
    height: var(--control-md);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    overflow: hidden;
}
.wu-stepper:focus-within {
    border-color: var(--focus);
    box-shadow: var(--focus-ring);
}
.wu-stepper--lg {
    height: var(--control-lg);
}
.wu-stepper--invalid {
    border-color: var(--red);
}
.wu-stepper__btn {
    display: grid;
    place-items: center;
    width: var(--control-md);
    border: 0;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background var(--wu-fast) var(--wu-ease);
}
.wu-stepper--lg .wu-stepper__btn {
    width: var(--control-lg);
}
.wu-stepper__btn:hover {
    background: var(--sunken);
}
.wu-stepper__btn:focus-visible {
    box-shadow: inset 0 0 0 2px var(--focus);
}
.wu-stepper__btn:disabled {
    color: var(--ink-disabled);
    background: transparent;
    cursor: not-allowed;
}
.wu-stepper__value {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 112px;
    padding: 0 var(--space-2);
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
    cursor: text;
}
.wu-stepper__input {
    /* Four digits: without a width a number field takes its default one, too wide for a narrow column. */
    width: 4ch;
    min-width: 2ch;
    padding: 0;
    border: 0;
    outline: none;
    background: transparent;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.wu-stepper__input:focus-visible {
    box-shadow: none;
}
/* With the buttons (admin.js) the browser's own arrows would be a second pair; WebKit shows them always. */
.wu-stepper__btn:not([hidden]) ~ .wu-stepper__value .wu-stepper__input {
    appearance: textfield;
}
.wu-stepper__btn:not([hidden]) ~ .wu-stepper__value .wu-stepper__input::-webkit-inner-spin-button,
.wu-stepper__btn:not([hidden]) ~ .wu-stepper__value .wu-stepper__input::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}
.wu-stepper--lg .wu-stepper__input {
    font-size: 18px;
}
.wu-stepper__unit {
    font-size: 15px;
    color: var(--ink-muted);
}
.wu-stepper--disabled {
    background: var(--sunken);
    border-color: var(--line);
}
.wu-stepper--disabled .wu-stepper__input, .wu-stepper--disabled .wu-stepper__unit {
    color: var(--ink-disabled);
}

/* NumberField */
.wu-number__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-number {
    flex: none;
}
.wu-number .wu-input__control {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.wu-number__text {
    color: var(--ink);
    font-size: 15px;
}

/* DurationField */
.wu-duration {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-duration__num {
    width: calc(6ch + 2 * var(--space-3));
    flex: none;
}
.wu-duration__num .wu-input__control {
    text-align: right;
}
.wu-duration__unit {
    width: 144px;
    flex: none;
}
.wu-duration__readback {
    color: var(--ink-muted);
    font-size: 13px;
}

/* DateRangeField */
.wu-daterange {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/*
 * The dates line up at their labels, so an error below one doesn't push the other down; the checkbox sits beside the
 * inputs.
 */
.wu-daterange__row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
}
/* Room for "Mi, 31. März 2027" and the calendar button: on a phone the end goes below the start rather than cut off. */
.wu-daterange__part {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1 1 200px;
    max-width: 220px;
    min-width: 0;
}
.wu-daterange__label {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-daterange__open {
    display: flex;
    align-items: center;
    height: var(--control-md);
    margin-top: calc(18px + var(--space-1));
}
.wu-daterange__about {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-daterange__summary {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
}
.wu-daterange__effect {
    margin: 0;
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
    max-width: 65ch;
}
.wu-daterange__effect .wu-icon {
    color: var(--sky);
    margin-top: 1px;
}

/* LocalizedField */
.wu-localized {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* fixed column counts: auto-fit grids inside a fieldset make Chrome size the fieldset as if they wrapped */
.wu-localized--side .wu-localized__inputs {
    display: grid;
    grid-template-columns: repeat(var(--wu-cols, 2), minmax(0, 1fr));
    gap: var(--space-3);
}
@media (max-width: 599px) {
    .wu-localized--side .wu-localized__inputs {
        grid-template-columns: minmax(0, 1fr);
    }
}
.wu-localized__lang {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.wu-localized__lang[hidden] {
    display: none;
}
.wu-localized__code {
    flex: none;
    align-self: center;
    padding: 1px 6px;
    border-radius: var(--radius-xs);
    background: var(--sunken);
    color: var(--ink-muted);
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
}
.wu-input--multiline .wu-localized__code {
    align-self: flex-start;
    margin-top: 3px;
}
.wu-localized__missing {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    line-height: 18px;
    color: var(--amber-ink);
    font-weight: 500;
}
.wu-localized__tabs {
    display: flex;
    gap: var(--space-1);
    border-bottom: 1px solid var(--line);
}
.wu-localized__tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 var(--space-3);
    margin-bottom: -1px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
}
.wu-localized__tab:hover {
    color: var(--ink);
}
.wu-localized__tab--on {
    color: var(--ink);
    border-bottom-color: var(--amber);
}
.wu-localized__dot {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--amber-ink);
}

/* SegmentedControl */
.wu-segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: var(--radius-sm);
    background: var(--sunken);
    max-width: 100%;
    overflow-x: auto;
}
.wu-segmented--block {
    display: flex;
}
.wu-segmented--block .wu-segmented__opt {
    flex: 1;
}
.wu-segmented__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: calc(var(--control-md) - 6px);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    background: transparent;
    color: var(--ink-muted);
    font-size: 14px;
    font-weight: 600;
    /* Its options are links to views, but read as buttons of one control, never as text links. */
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--wu-fast) var(--wu-ease), color var(--wu-fast) var(--wu-ease);
}
.wu-segmented--sm .wu-segmented__opt {
    height: calc(var(--control-sm) - 6px);
    font-size: 13px;
    padding: 0 10px;
}
.wu-segmented--lg .wu-segmented__opt {
    height: calc(var(--control-lg) - 6px);
    font-size: 15px;
}
.wu-segmented__opt:hover {
    color: var(--ink);
}
.wu-segmented__opt--on {
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.wu-segmented__opt:disabled {
    color: var(--ink-disabled);
    cursor: not-allowed;
}

/* Radio dot (RadioCard) and Checkbox box: amber fill + navy glyph when on */
.wu-radio, .wu-check__boxwrap {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 20px;
    height: 20px;
}
.wu-radio__input, .wu-check__input {
    position: absolute;
    inset: -2px;
    width: auto;
    height: auto;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.wu-radio__dot, .wu-check__box {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    pointer-events: none;
    background: var(--surface);
    border: 1.5px solid var(--line-strong);
    transition: background var(--wu-fast) var(--wu-ease), border-color var(--wu-fast) var(--wu-ease);
}
.wu-radio__dot {
    border-radius: var(--radius-full);
}
.wu-radio__dot::after {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--on-amber);
    transform: scale(0);
    transition: transform var(--wu-fast) var(--wu-ease);
}
.wu-radio__input:checked + .wu-radio__dot {
    background: var(--amber);
    border-color: var(--amber-ink);
}
.wu-radio__input:checked + .wu-radio__dot::after {
    transform: scale(1);
}
.wu-radio__input:focus-visible + .wu-radio__dot, .wu-check__input:focus-visible + .wu-check__box {
    box-shadow: var(--focus-ring);
}
.wu-radio__input:disabled + .wu-radio__dot, .wu-check__input:disabled + .wu-check__box {
    background: var(--sunken);
    border-color: var(--line);
}
.wu-check__box {
    border-radius: var(--radius-xs);
    color: var(--on-amber);
}
.wu-check__tick, .wu-check__dash {
    grid-area: 1 / 1;
    opacity: 0;
}
.wu-check__input:checked + .wu-check__box, .wu-check__input:indeterminate + .wu-check__box {
    background: var(--amber);
    border-color: var(--amber-ink);
}
.wu-check__input:checked + .wu-check__box .wu-check__tick {
    opacity: 1;
}
.wu-check__input:indeterminate + .wu-check__box .wu-check__dash {
    opacity: 1;
}
.wu-check__input:indeterminate + .wu-check__box .wu-check__tick {
    opacity: 0;
}
.wu-check__input:checked:disabled + .wu-check__box {
    background: var(--sunken);
    color: var(--ink-disabled);
}
.wu-check--invalid .wu-check__box {
    border-color: var(--red);
}
.wu-radio__input:hover:not(:checked):not(:disabled) + .wu-radio__dot,
.wu-check__input:hover:not(:checked):not(:disabled) + .wu-check__box {
    border-color: var(--ink-muted);
}

/* Checkbox */
.wu-check {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-2);
    cursor: pointer;
    min-width: 0;
}
.wu-check .wu-check__boxwrap {
    margin-top: 1px;
}
.wu-check__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wu-check__label {
    font-size: 15px;
    line-height: 22px;
    color: var(--ink);
}
.wu-check__desc {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-check--disabled {
    cursor: not-allowed;
}
.wu-check--disabled .wu-check__label {
    color: var(--ink-disabled);
}
.wu-check--lg .wu-check__label {
    font-size: 16px;
    line-height: 24px;
}
@media (pointer: coarse) {
    .wu-check {
        min-height: var(--touch-min);
        align-items: center;
    }
    .wu-check .wu-check__boxwrap {
        margin-top: 0;
    }
}

/* CheckboxGroup */
.wu-checkgroup__wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-checkgroup__all {
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--line);
}
.wu-checkgroup__all .wu-check__label {
    font-weight: 600;
}
.wu-checkgroup {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-checkgroup--cols {
    display: grid;
    grid-template-columns: repeat(var(--wu-cols, 2), minmax(0, 1fr));
    gap: var(--space-2) var(--space-6);
}
@media (max-width: 599px) {
    .wu-checkgroup--cols {
        grid-template-columns: 1fr;
    }
}

/* RadioCard */
.wu-radiocards {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-radiocards--row {
    display: grid;
    grid-template-columns: repeat(var(--wu-cols, 2), minmax(0, 1fr));
    gap: var(--space-3);
}
@media (max-width: 599px) {
    .wu-radiocards--row {
        grid-template-columns: minmax(0, 1fr);
    }
}
.wu-radiocard {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wu-radiocard__main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}
/* The card's padding belongs to its label, so a click anywhere inside the border chooses it (owner, 14.10.2026). */
.wu-radiocard--card {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color var(--wu-fast) var(--wu-ease), background var(--wu-fast) var(--wu-ease);
}
.wu-radiocard--card:hover {
    border-color: var(--ink-muted);
}
/* The checked option follows its radio button, not the class the server rendered for the saved choice. */
.wu-radiocard--card:has(> .wu-radiocard__main .wu-radio__input:checked) {
    border-color: var(--amber-ink);
    background: var(--amber-soft);
    box-shadow: inset 0 0 0 1px var(--amber-ink);
}
.wu-radiocard--card:has(.wu-radio__input:focus-visible) {
    box-shadow: var(--focus-ring);
}
.wu-radiocard--card:has(.wu-radio__input:focus-visible) .wu-radio__dot {
    box-shadow: none;
}
/* It also takes the height a taller card beside it gives the row, unless the option's own field shows below it. */
.wu-radiocard--card > .wu-radiocard__main {
    flex-grow: 1;
    padding: var(--space-3) var(--space-4);
}
.wu-radiocard--card > .wu-radiocard__main:has(.wu-radio__input:checked):has(+ .wu-radiocard__extra) {
    flex-grow: 0;
}
.wu-radiocard .wu-radio {
    margin-top: 1px;
}
.wu-radiocard__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.wu-radiocard__title {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--ink);
}
.wu-radiocard--plain .wu-radiocard__title {
    font-weight: 400;
}
.wu-radiocard__desc {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-radiocard:has(> .wu-radiocard__main .wu-radio__input:checked) .wu-radiocard__desc {
    color: var(--ink);
}
.wu-radiocard__meta {
    flex: none;
    font-size: 13px;
    line-height: 22px;
    color: var(--ink-muted);
    white-space: nowrap;
}
.wu-radiocard__extra {
    padding: var(--space-3) 0 0 calc(20px + var(--space-3));
}
.wu-radiocard--plain .wu-radiocard__extra {
    padding-top: var(--space-2);
}
.wu-radiocard--card > .wu-radiocard__extra {
    flex-grow: 1;
    padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 20px + var(--space-3));
}
.wu-radiocard--disabled .wu-radiocard__main {
    cursor: not-allowed;
}
.wu-radiocard--disabled .wu-radiocard__title,
.wu-radiocard--disabled .wu-radiocard__desc,
.wu-radiocard--disabled .wu-radiocard__meta {
    color: var(--ink-disabled);
}
.wu-radiocard--card.wu-radiocard--disabled {
    background: var(--sunken);
    border-color: var(--line);
}

/* Switch */
.wu-switch {
    display: inline-flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}
.wu-switch__track {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    padding: 0;
    margin-top: -2px;
    border: 1.5px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--sunken);
    cursor: pointer;
    transition: background var(--wu-base) var(--wu-ease), border-color var(--wu-base) var(--wu-ease);
}
.wu-switch__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    display: grid;
    place-items: center;
    width: 19px;
    height: 19px;
    border-radius: var(--radius-full);
    background: var(--ink-muted);
    color: var(--amber);
    transition: transform var(--wu-base) var(--wu-ease), background var(--wu-base) var(--wu-ease);
}
.wu-switch__track--on {
    background: var(--amber);
    border-color: var(--amber-ink);
}
.wu-switch__track--on .wu-switch__thumb {
    transform: translateX(18px);
    background: var(--on-amber);
}
.wu-switch__track:disabled {
    cursor: not-allowed;
    background: var(--sunken);
    border-color: var(--line);
}
.wu-switch__track:disabled .wu-switch__thumb {
    background: var(--ink-disabled);
}
.wu-switch__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wu-switch__label {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: 15px;
    line-height: 22px;
    color: var(--ink);
    cursor: pointer;
}
.wu-switch__state {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-subtle);
}
.wu-switch__state--on {
    color: var(--ink);
}
.wu-switch__desc {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
    max-width: 60ch;
}
.wu-switch--disabled .wu-switch__label {
    color: var(--ink-disabled);
    cursor: not-allowed;
}
@media (pointer: coarse) {
    .wu-switch {
        min-height: var(--touch-min);
        align-items: center;
    }
    .wu-switch__track {
        margin-top: 0;
    }
}

/* InlineEdit */
.wu-inline__read {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}
.wu-inline__value {
    flex: 1;
    min-width: 0;
    padding: 5px 0;
    font-size: 15px;
    line-height: 22px;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.wu-inline__value--multi {
    white-space: pre-wrap;
}
.wu-inline__value--empty {
    color: var(--ink-subtle);
}
.wu-inline__edit {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-inline__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-inline__keys {
    font-size: 12px;
    line-height: 16px;
    color: var(--ink-subtle);
    margin-left: var(--space-1);
}

/* CopyField */
.wu-copy__wrap {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-copy {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    min-width: 0;
}
.wu-copy__box {
    flex: 1;
    background: var(--sunken);
    border-color: var(--line-strong);
}
.wu-copy__box:hover {
    border-color: var(--line-strong);
}
@media (max-width: 479px) {
    .wu-copy {
        flex-wrap: wrap;
    }
    .wu-copy > .wu-btn {
        width: 100%;
    }
}

/* ShareLink: a link to book with its QR code and how it looks when shared (ADR 0010) */
.wu-share {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.wu-share__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--space-4);
    align-items: start;
}
.wu-share__qr {
    justify-self: start;
}
.wu-share__downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}
.wu-share__preview {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}
.wu-linkpreview {
    margin: 0;
    max-width: 400px;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
}
.wu-linkpreview__image {
    display: block;
    width: 100%;
    height: auto;
}
.wu-linkpreview__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-3);
    background: var(--sunken);
}
.wu-linkpreview__host {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-subtle);
    overflow-wrap: anywhere;
}
.wu-linkpreview__title {
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--ink);
}
.wu-linkpreview__text {
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-muted);
}

/* ConfirmDialog */
.wu-dialog__scrim {
    position: fixed;
    inset: 0;
    z-index: var(--z-dialog);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: var(--scrim);
    animation: wu-dialog-fade var(--wu-base) var(--wu-ease);
}
.wu-dialog {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(100%, 480px);
    max-height: calc(100vh - 2 * var(--space-4));
    overflow: auto;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-lg);
    animation: wu-dialog-in var(--wu-base) var(--wu-ease);
}
.wu-dialog--inline {
    animation: none;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--line);
}
.wu-dialog__head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.wu-dialog__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 36px;
    height: 36px;
    margin-top: -6px;
    border-radius: var(--radius-full);
    background: var(--sky-soft);
    color: var(--sky);
}
.wu-dialog--danger .wu-dialog__icon {
    background: var(--red-soft);
    color: var(--red);
}
.wu-dialog__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
    text-wrap: balance;
}
.wu-dialog__body {
    font-size: 15px;
    line-height: 22px;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.wu-dialog__body p {
    margin: 0;
}
.wu-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}
@media (max-width: 479px) {
    .wu-dialog__foot {
        flex-direction: column-reverse;
    }
    .wu-dialog__foot .wu-btn {
        width: 100%;
    }
    .wu-dialog {
        padding: var(--space-4);
    }
}
@keyframes wu-dialog-fade {
    from {
        opacity: 0;
    }
}
@keyframes wu-dialog-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.98);
    }
}
@media (prefers-reduced-motion: reduce) {
    .wu-dialog, .wu-dialog__scrim {
        animation: none;
    }
}

/*
 * ===== planning: WeekdayPicker, TimeRange, IntervalSelect, WindowEditor, DiffSummary, WeekPreview, ScheduleList,
 * ConflictResolver =====
 */
.wu-plan-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.wu-plan-input, .wu-plan-select {
    height: var(--control-md);
    min-width: 0;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line-strong);
    background: var(--surface);
    color: var(--ink);
    font-size: 15px;
    line-height: 22px;
    font-variant-numeric: tabular-nums;
}
.wu-plan-select {
    padding-right: var(--space-8);
    appearance: none;
    cursor: pointer;
}
/* A plan select wrapped with the Select component's chevron, which lies over the select's end. */
.wu-plan-selectwrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}
.wu-plan-selectwrap > .wu-icon {
    position: absolute;
    right: var(--space-3);
    pointer-events: none;
    color: var(--ink-muted);
}
.wu-plan-select--quiet {
    color: var(--ink-muted);
}
.wu-plan-input:focus-visible, .wu-plan-select:focus-visible {
    border-color: var(--focus);
}
.wu-plan-input[aria-invalid="true"] {
    border-color: var(--red);
}
.wu-plan-input:disabled, .wu-plan-select:disabled {
    background: var(--sunken);
    color: var(--ink-disabled);
    border-color: var(--line);
}
.wu-plan-check {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.wu-plan-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--sky);
}

/* row menu */
.wu-plan-menu {
    position: relative;
    display: inline-flex;
}
.wu-plan-menu__list {
    position: absolute;
    right: 0;
    top: calc(100% + var(--space-1));
    z-index: var(--z-popover);
    min-width: 200px;
    display: flex;
    flex-direction: column;
    padding: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}
.wu-plan-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    height: var(--control-sm);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    text-align: left;
    font-size: 14px;
    cursor: pointer;
}
.wu-plan-menu__item:hover {
    background: var(--sunken);
}
.wu-plan-menu__item--danger {
    color: var(--red);
}

/* messages under a row (server feedback) */
.wu-plan-msgs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wu-plan-msgs__item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-plan-msgs__item .wu-icon {
    margin-top: 1px;
}
.wu-plan-msgs__item--warning {
    color: var(--amber-ink);
}
.wu-plan-msgs__item--error {
    color: var(--red);
    font-weight: 600;
}

/* WeekdayPicker */
.wu-weekdays {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-weekdays__days {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: var(--radius-sm);
    background: var(--sunken);
}
.wu-weekdays__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--ink-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--wu-fast) var(--wu-ease), color var(--wu-fast) var(--wu-ease);
}
.wu-weekdays__day:hover {
    color: var(--ink);
    background: var(--surface);
}
/* On while its box is checked: the look follows a click without admin.js too. */
.wu-weekdays__day:has(:checked), .wu-weekdays__day:has(:checked):hover {
    background: var(--ink);
    color: var(--surface);
}
.wu-weekdays__day:has(:focus-visible) {
    outline: 2px solid var(--focus);
    outline-offset: 1px;
}
.wu-weekdays--invalid .wu-weekdays__days {
    box-shadow: inset 0 0 0 1px var(--red);
}
.wu-weekdays__shortcuts {
    display: inline-flex;
    gap: var(--space-1);
}
.wu-weekdays__shortcut {
    height: 26px;
    padding: 0 var(--space-2);
    border-radius: var(--radius-full);
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.wu-weekdays__shortcut:hover {
    border-color: var(--line-strong);
    color: var(--ink);
}
.wu-weekdays__shortcut--on {
    border-color: var(--sky);
    color: var(--sky);
    background: var(--sky-soft);
}
.wu-weekdays__day:disabled, .wu-weekdays__shortcut:disabled {
    cursor: not-allowed;
    color: var(--ink-disabled);
}
@media (pointer: coarse) {
    .wu-weekdays__day {
        width: var(--touch-min);
        height: var(--touch-min);
    }
}

/* TimeRange */
.wu-timerange {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wu-timerange__row {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.wu-timerange__field {
    display: inline-flex;
}
.wu-timerange__input {
    width: 104px;
    padding-right: var(--space-2);
}
.wu-timerange__dash {
    color: var(--ink-muted);
}
.wu-timerange__note {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    line-height: 18px;
    color: var(--sky);
}

/* IntervalSelect */
.wu-interval {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.wu-interval .wu-plan-select {
    max-width: 260px;
}
.wu-interval__custom {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.wu-interval__number {
    width: 80px;
}
.wu-interval__unit {
    font-size: 14px;
    color: var(--ink-muted);
}

/* WindowEditor */
.wu-wineditor {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    container-type: inline-size;
}
.wu-wineditor__inherited {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--sky-soft);
    color: var(--ink);
    font-size: 14px;
}
.wu-wineditor__inherited .wu-icon {
    color: var(--sky);
}
.wu-wineditor__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
/* The row's menu stays in its top corner beside the inputs, so it never wraps onto a line of its own. */
.wu-wineditor__row {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.wu-wineditor__row--invalid {
    border-color: var(--red);
}
.wu-wineditor__fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3) var(--space-4);
    padding-right: calc(var(--control-md) + var(--space-2));
}
.wu-wineditor .wu-weekdays {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}
.wu-wineditor .wu-timerange__input {
    width: 100px;
}
.wu-wineditor .wu-interval .wu-plan-select {
    width: 168px;
}
.wu-wineditor__cell {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.wu-wineditor__cell--menu {
    position: absolute;
    top: calc(var(--space-3) + 20px);
    right: var(--space-4);
}
.wu-wineditor__label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-wineditor__cap {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.wu-wineditor__capinput {
    width: 76px;
}
.wu-wineditor__unit {
    font-size: 14px;
    color: var(--ink-muted);
}
.wu-wineditor__break {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--sunken);
}
.wu-wineditor__breaklabel {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    font-weight: 600;
}
.wu-wineditor__add {
    align-self: flex-start;
}
@container (max-width: 560px) {
    .wu-wineditor__row {
        padding: var(--space-3);
    }
    .wu-wineditor__cell--menu {
        top: var(--space-2);
        right: var(--space-2);
    }
}

/* DiffSummary */
.wu-diff {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    min-width: 0;
}
.wu-diff--loading .wu-diff__stats, .wu-diff--loading .wu-diff__tablewrap {
    opacity: .55;
}
.wu-diff__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
}
.wu-diff__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-diff__scope, .wu-diff__computing, .wu-diff__changes {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 13px;
    color: var(--ink-muted);
}
.wu-diff__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-2);
}
.wu-diff__stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--sunken);
    color: var(--ink-muted);
}
.wu-diff__num {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 24px;
    line-height: 30px;
    font-weight: 600;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.wu-diff__sign {
    min-width: .6em;
}
.wu-diff__label {
    font-size: 13px;
    line-height: 18px;
}
.wu-diff__stat--added {
    background: var(--green-soft);
}
.wu-diff__stat--added .wu-diff__num {
    color: var(--green);
}
.wu-diff__stat--removed {
    background: var(--red-soft);
}
.wu-diff__stat--removed .wu-diff__num {
    color: var(--red);
}
.wu-diff__stat--changed {
    background: var(--amber-soft);
}
.wu-diff__stat--changed .wu-diff__num {
    color: var(--amber-ink);
}
.wu-diff__stat--affected {
    background: var(--amber-soft);
    color: var(--amber-ink);
}
.wu-diff__stat--affected .wu-diff__num {
    color: var(--amber-ink);
    gap: var(--space-2);
}
.wu-diff__stat--affected .wu-diff__label {
    font-weight: 600;
}
.wu-diff__stat--calm .wu-diff__num {
    color: var(--green);
    font-size: 0;
    line-height: 30px;
}
.wu-diff__stat--calm .wu-diff__num .wu-icon {
    width: 22px;
    height: 22px;
}
.wu-diff__tablewrap {
    overflow-x: auto;
}
.wu-diff__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
}
.wu-diff__table th, .wu-diff__table td {
    padding: var(--space-2) var(--space-3);
    text-align: right;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
.wu-diff__table th:first-child {
    text-align: left;
}
.wu-diff__table thead th {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-diff__table tbody th {
    font-weight: 600;
}
.wu-diff__table tbody tr:last-child > * {
    border-bottom: 0;
}
.wu-diff__cell--affected {
    color: var(--amber-ink);
    font-weight: 600;
}
.wu-diff__notes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font-size: 14px;
    color: var(--ink-muted);
}
.wu-diff__notes li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.wu-diff__notes .wu-icon {
    margin-top: 3px;
    color: var(--sky);
}

/* WeekPreview */
.wu-weekprev {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.wu-weekprev__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-weekprev__week {
    font-size: 15px;
    font-weight: 600;
    min-width: 13em;
    text-align: center;
}
.wu-weekprev__legend {
    list-style: none;
    margin: 0 0 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    font-size: 12px;
    color: var(--ink-muted);
}
.wu-weekprev__legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}
.wu-weekprev__swatch {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    background: var(--sunken);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}
.wu-weekprev__swatch--added {
    background: var(--green);
    box-shadow: none;
}
.wu-weekprev__swatch--removed {
    background: var(--red);
    box-shadow: none;
}
.wu-weekprev__swatch--capacity {
    background: var(--amber);
    box-shadow: none;
}
.wu-weekprev__swatch--manual {
    background: var(--sky-soft);
    box-shadow: inset 0 0 0 1px var(--sky);
}
.wu-weekprev__scroll {
    overflow-x: auto;
}
.wu-weekprev__grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(112px, 1fr));
    gap: var(--space-2);
}
.wu-weekprev__day {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--surface);
    border: 1px solid var(--line);
}
.wu-weekprev__day--other {
    background: var(--sky-soft);
    border-color: transparent;
}
.wu-weekprev__day--closed {
    background: var(--sunken);
    border-style: dashed;
    border-color: var(--line-strong);
}
.wu-weekprev__dayhead {
    display: flex;
    flex-direction: column;
}
.wu-weekprev__dayname {
    font-size: 14px;
    font-weight: 600;
}
.wu-weekprev__count {
    font-size: 12px;
    color: var(--ink-muted);
}
.wu-weekprev__note {
    margin: 0;
    overflow-wrap: anywhere;
    display: flex;
    gap: var(--space-1);
    font-size: 12px;
    line-height: 16px;
    color: var(--ink);
}
.wu-weekprev__note .wu-icon {
    flex: none;
    margin-top: 1px;
    color: var(--sky);
}
.wu-weekprev__slots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 260px;
    overflow-y: auto;
}
.wu-weekprev__slot {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    height: 22px;
    padding: 0 var(--space-1);
    border-radius: var(--radius-xs);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    background: var(--sunken);
}
.wu-weekprev__mark {
    width: 10px;
    font-weight: 700;
    text-align: center;
}
.wu-weekprev__time {
    font-weight: 500;
}
.wu-weekprev__cap {
    margin-left: auto;
    color: var(--ink-muted);
}
.wu-weekprev__slot--added {
    background: var(--green-soft);
}
.wu-weekprev__slot--added .wu-weekprev__mark {
    color: var(--green);
}
.wu-weekprev__slot--removed {
    background: var(--red-soft);
    color: var(--red);
}
.wu-weekprev__slot--removed .wu-weekprev__time {
    text-decoration: line-through;
}
.wu-weekprev__slot--capacity {
    background: var(--amber-soft);
}
.wu-weekprev__slot--capacity .wu-weekprev__mark, .wu-weekprev__slot--capacity .wu-weekprev__cap {
    color: var(--amber-ink);
    font-weight: 600;
}
.wu-weekprev__slot--manual {
    box-shadow: inset 0 0 0 1px var(--sky);
}
.wu-weekprev__hand {
    font-size: 10px;
    font-weight: 600;
    color: var(--sky);
}
.wu-weekprev__slot--manual .wu-weekprev__cap {
    margin-left: 0;
}
.wu-weekprev__slot--manual .wu-weekprev__hand {
    margin-left: auto;
}

/* ScheduleList */
.wu-schedlist {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    container-type: inline-size;
    min-width: 0;
}
.wu-schedlist__colhead, .wu-schedlist__row {
    display: grid;
    grid-template-columns: minmax(170px, 1.4fr) 104px minmax(160px, 1.6fr) minmax(100px, .9fr) 184px 32px;
    gap: var(--space-3);
    align-items: center;
}
.wu-schedlist__colhead {
    padding: 0 var(--space-4);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-schedlist__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-schedlist__grouphead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}
.wu-schedlist__offering {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-schedlist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.wu-schedlist__list > .wu-schedlist__item + .wu-schedlist__item {
    border-top: 1px solid var(--line);
}
.wu-schedlist__row {
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
}
.wu-schedlist__item--nested .wu-schedlist__main {
    padding-left: var(--space-6);
}
.wu-schedlist__main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}
.wu-schedlist__nesticon {
    margin-top: 3px;
    color: var(--sky);
}
.wu-schedlist__titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wu-schedlist__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
.wu-schedlist__name:hover {
    text-decoration: underline;
}
.wu-schedlist__period {
    color: var(--ink-muted);
    font-size: 13px;
}
.wu-schedlist__override {
    color: var(--sky);
    font-size: 13px;
}
.wu-schedlist__summary {
    color: var(--ink);
    min-width: 0;
}
.wu-schedlist__muted, .wu-schedlist__applies {
    color: var(--ink-muted);
}
.wu-schedlist__menu {
    justify-self: end;
}
.wu-schedlist--empty {
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-12) var(--space-6);
    color: var(--ink-muted);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
}
.wu-schedlist--empty p {
    margin: 0;
    max-width: 36em;
    color: var(--ink);
}
.wu-schedlist__emptyactions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}
@container (max-width: 820px) {
    .wu-schedlist__colhead {
        display: none;
    }
    .wu-schedlist__row {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "main menu" "kind kind" "summary summary" "applies applies" "state state";
        gap: var(--space-1) var(--space-3);
    }
    .wu-schedlist__main {
        grid-area: main;
    }
    .wu-schedlist__menu {
        grid-area: menu;
    }
    .wu-schedlist__kind {
        grid-area: kind;
    }
    .wu-schedlist__summary {
        grid-area: summary;
    }
    .wu-schedlist__applies {
        grid-area: applies;
    }
    .wu-schedlist__state {
        grid-area: state;
    }
    .wu-schedlist__item--nested .wu-schedlist__main {
        padding-left: var(--space-3);
    }
}

/* ConflictResolver */
.wu-conflicts {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-width: 0;
}
.wu-conflicts__bulk {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--sunken);
}
.wu-conflicts__bulkselect {
    height: var(--control-sm);
    font-size: 14px;
}
.wu-conflicts__group {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    overflow: hidden;
}
.wu-conflicts__grouphead {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--line);
    background: var(--red-soft);
}
.wu-conflicts__slot {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--red);
}
.wu-conflicts__note {
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--ink);
}
.wu-conflicts__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wu-conflicts__booking {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) minmax(220px, auto);
    gap: var(--space-2) var(--space-3);
    align-items: center;
    padding: var(--space-3) var(--space-4);
}
.wu-conflicts__booking + .wu-conflicts__booking {
    border-top: 1px solid var(--line);
}
.wu-conflicts__booking--selected {
    background: var(--sky-soft);
}
.wu-conflicts__who {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.wu-conflicts__name {
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
}
.wu-conflicts__name:hover {
    text-decoration: underline;
}
.wu-conflicts__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    font-size: 13px;
    color: var(--ink-muted);
}
.wu-conflicts__number {
    font-family: var(--font-mono);
    font-weight: 500;
    color: var(--ink);
}
.wu-conflicts__choice {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
}
.wu-conflicts__choice .wu-plan-select, .wu-conflicts__choice .wu-plan-input {
    height: var(--control-sm);
    font-size: 14px;
}
.wu-conflicts__sub {
    display: inline-flex;
}
.wu-conflicts__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-5);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.wu-conflicts__summary {
    margin-right: auto;
    font-size: 14px;
    color: var(--ink-muted);
}
.wu-conflicts__summary strong {
    color: var(--ink);
}
@media (max-width: 640px) {
    .wu-conflicts__booking {
        grid-template-columns: auto minmax(0, 1fr);
    }
    .wu-conflicts__choice {
        grid-column: 2;
        justify-content: flex-start;
    }
}

/* switch (local, until Switch from the Input group is used) */
.wu-plan-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 14px;
    cursor: pointer;
}
.wu-plan-switch input {
    position: absolute;
    opacity: 0;
    width: 40px;
    height: 24px;
    margin: 0;
    cursor: pointer;
}
.wu-plan-switch__track {
    position: relative;
    width: 40px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--line-strong);
    transition: background var(--wu-fast) var(--wu-ease);
    flex: none;
}
.wu-plan-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--surface);
    transition: transform var(--wu-fast) var(--wu-ease);
}
.wu-plan-switch input:checked + .wu-plan-switch__track {
    background: var(--sky);
}
.wu-plan-switch input:checked + .wu-plan-switch__track::after {
    transform: translateX(16px);
}
.wu-plan-switch input:focus-visible + .wu-plan-switch__track {
    box-shadow: var(--focus-ring);
}

/* ===== portal: Check-in & portal ===== */

/* QrCode — modules are always dark on white, whatever the theme: scanners need it */
.wu-qrcode {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
}
.wu-qrcode__svg {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
}
.wu-qrcode--framed {
    padding: var(--space-4);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.wu-qrcode__caption {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    text-align: center;
}
.wu-qrcode__number {
    font-family: var(--font-mono);
    font-size: 18px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink);
}
.wu-qrcode__text {
    font-size: 15px;
    line-height: 22px;
    color: var(--ink-muted);
}

/*
 * QrScanner: the scan button of Einlass and its viewfinder, a square dialog in the upper part of the screen, as wide
 * as the column below it (the button is its query container) and short enough for the screen's height. The page
 * around it stays undimmed (owner, 14.10.2026): the backdrop is transparent, still catching the tap that closes it, and
 * a wide shadow separates the square from the page. Until the camera's picture comes, the square has the page's color.
 */
.wu-qrscanner {
    width: 100%;
    container-type: inline-size;
}
.wu-qrscanner__dialog {
    --wu-qrscanner-top: calc(env(safe-area-inset-top, 0px) + var(--appbar-height) + var(--space-4));
    --wu-qrscanner-size: min(100cqi, 100dvh - var(--wu-qrscanner-top) - var(--space-4));
    width: var(--wu-qrscanner-size);
    height: var(--wu-qrscanner-size);
    max-width: none;
    max-height: none;
    margin: var(--wu-qrscanner-top) auto auto;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    outline: none;
    background: var(--paper);
    box-shadow: var(--shadow-xl);
}
/* The dialog takes the focus when it opens, without a ring: it is meant for touch (owner, 14.10.2026). */
.wu-qrscanner__dialog:focus-visible {
    box-shadow: var(--shadow-xl);
}
/* The square lies on its button, as wide as it: hidden, the amber can't show in the square's rounder corners. */
.wu-qrscanner:has(> .wu-qrscanner__dialog[open]) > .wu-btn {
    visibility: hidden;
}
.wu-qrscanner__dialog::backdrop {
    background: transparent;
}
.wu-qrscanner__finder {
    position: relative;
    width: 100%;
    height: 100%;
    color: var(--nav-ink-active);
    display: grid;
    place-items: center;
}
.wu-qrscanner__video {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.wu-qrscanner__video > video {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* In the picture's shape (admin.js sets it), covering the square and cropped by it: WebKit sometimes draws */
/* a camera's picture letterboxed despite object-fit, and a video of the picture's shape leaves no room for bars. */
.wu-qrscanner__video > video[data-wu-shape="upright"] {
    height: auto;
}
.wu-qrscanner__video > video[data-wu-shape="wide"] {
    width: auto;
}
/* A square of 60%, raised so the hint below it leaves the corners free. */
.wu-qrscanner__frame {
    position: absolute;
    inset: 12% 20% 28%;
    pointer-events: none;
}
.wu-qrscanner__corner {
    position: absolute;
    width: 22%;
    height: 22%;
    border: 4px solid var(--amber);
}
.wu-qrscanner__corner--tl {
    top: 0;
    left: 0;
    border-right: 0;
    border-bottom: 0;
    border-top-left-radius: var(--radius-md);
}
.wu-qrscanner__corner--tr {
    top: 0;
    right: 0;
    border-left: 0;
    border-bottom: 0;
    border-top-right-radius: var(--radius-md);
}
.wu-qrscanner__corner--bl {
    bottom: 0;
    left: 0;
    border-right: 0;
    border-top: 0;
    border-bottom-left-radius: var(--radius-md);
}
.wu-qrscanner__corner--br {
    bottom: 0;
    right: 0;
    border-left: 0;
    border-top: 0;
    border-bottom-right-radius: var(--radius-md);
}
.wu-qrscanner__finder--ready .wu-qrscanner__corner {
    border-color: var(--line-strong);
}
.wu-qrscanner__finder--denied .wu-qrscanner__frame {
    display: none;
}
.wu-qrscanner__line {
    position: absolute;
    left: 6%;
    right: 6%;
    top: 50%;
    height: 3px;
    border-radius: var(--radius-full);
    background: var(--amber);
    animation: wu-scanline 1.8s var(--wu-ease) infinite alternate;
}
@keyframes wu-scanline {
    from {
        top: 8%;
    }
    to {
        top: 92%;
    }
}
@media (prefers-reduced-motion: reduce) {
    .wu-qrscanner__line {
        animation: none;
    }
}
.wu-qrscanner__hint {
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--nav) 80%, transparent);
    text-align: center;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--nav-ink-active);
}
/* Slightly translucent over the camera's picture, and dark enough for its white X on the page's color. */
.wu-qrscanner__close.wu-iconbtn {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    background: color-mix(in srgb, var(--nav) 70%, transparent);
    color: var(--nav-ink-active);
    width: var(--control-lg);
    height: var(--control-lg);
}
.wu-qrscanner__close.wu-iconbtn:focus-visible {
    box-shadow: var(--focus-ring-nav);
}
.wu-qrscanner__msg {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: var(--space-12) var(--space-4) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 16px;
    line-height: 24px;
}
.wu-qrscanner__msg .wu-icon {
    flex: none;
    margin-top: 1px;
}
.wu-qrscanner__msg--denied {
    background: var(--amber-soft);
    color: var(--ink);
}
.wu-qrscanner__msg--denied .wu-icon {
    color: var(--amber-ink);
}

/* CheckInCard */
.wu-checkin {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--portal-max);
    padding: var(--space-5);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.wu-checkin__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.wu-checkin__who {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}
.wu-checkin__name {
    margin: 0;
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 30px;
    font-weight: 800;
    text-wrap: balance;
}
.wu-checkin__number {
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 20px;
    font-weight: 500;
    color: var(--ink-muted);
}
.wu-checkin__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-checkin__body p {
    margin: 0;
}
.wu-checkin__qty {
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 44px;
    font-weight: 900;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}
.wu-checkin__when {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-checkin__timing {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    align-self: flex-start;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}
.wu-checkin__facts {
    margin: var(--space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--line);
}
.wu-checkin__fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.wu-checkin__fact dt {
    font-size: 13px;
    line-height: 20px;
    color: var(--ink-muted);
}
.wu-checkin__fact dd {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    overflow-wrap: anywhere;
}
.wu-checkin__unverified {
    display: inline-block;
    padding: 0 6px;
    border-radius: var(--radius-xs);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    font-size: 11px;
    line-height: 16px;
    font-weight: 600;
    color: var(--ink-muted);
}
.wu-checkin__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-checkin__notice {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 15px;
    line-height: 22px;
    color: var(--ink);
}
.wu-checkin__notice .wu-icon {
    margin-top: 1px;
}
.wu-checkin__notice--sky {
    background: var(--sky-soft);
}
.wu-checkin__notice--sky .wu-icon {
    color: var(--sky);
}
.wu-checkin__notice--amber {
    background: var(--amber-soft);
}
.wu-checkin__notice--amber .wu-icon {
    color: var(--amber-ink);
}
.wu-checkin__notice--red {
    background: var(--red-soft);
}
.wu-checkin__notice--red .wu-icon {
    color: var(--red);
}
.wu-checkin__notice-text {
    min-width: 0;
}
.wu-checkin__done {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--green-soft);
    color: var(--green);
}
.wu-checkin__done-text {
    flex: 1;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
}
.wu-checkin__countdown {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    background: var(--green);
    transform-origin: left;
    animation: wu-countdown 5s linear forwards;
}
@keyframes wu-countdown {
    to {
        transform: scaleX(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .wu-checkin__countdown {
        animation: none;
    }
}
.wu-checkin--cancelled .wu-checkin__qty, .wu-checkin--cancelled .wu-checkin__when {
    color: var(--ink-muted);
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
@media (max-width: 480px) {
    .wu-checkin {
        padding: var(--space-4);
    }
}

/* PortalHeader / PortalFooter */
.wu-portalheader {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding-inline: var(--space-4);
}
.wu-portalheader__inner {
    max-width: var(--portal-max);
    margin: 0 auto;
    min-height: var(--appbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}
.wu-portalheader__brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    color: var(--ink);
    text-decoration: none;
    border-radius: var(--radius-sm);
}
.wu-portalheader__logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}
.wu-portalheader__name {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wu-portalheader__nav {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    flex: none;
}
.wu-portalheader__lang {
    display: inline-flex;
    padding: 2px;
    border-radius: var(--radius-full);
    background: var(--sunken);
}
.wu-portalheader__langbtn {
    min-width: 36px;
    height: 28px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--ink-muted);
    cursor: pointer;
}
.wu-portalheader__langbtn[aria-pressed="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.wu-portalfooter {
    padding: var(--space-6) var(--space-4) var(--space-8);
}
.wu-portalfooter__inner {
    max-width: var(--portal-max);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
.wu-portalfooter__links {
    display: flex;
    gap: var(--space-4);
}
.wu-portalfooter__links a {
    color: var(--ink-muted);
}

/* WhookupHint: "Buchungssystem:" with the wordmark, small and quiet; the business is the star. */
.wu-whookuphint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--ink-muted);
    text-decoration: none;
}
.wu-whookuphint:hover {
    color: var(--ink);
}
.wu-whookuphint .wu-logo__word {
    width: auto;
    height: 16px;
}

/* BookingHeader */
.wu-bookingheader {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    max-width: var(--portal-max);
}
.wu-bookingheader p {
    margin: 0;
}
.wu-bookingheader__eyebrow {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-bookingheader__number {
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .02em;
    text-transform: none;
    color: var(--ink-muted);
}
.wu-bookingheader__date {
    margin: 0;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 36px;
    font-weight: 800;
    text-wrap: balance;
}
.wu-bookingheader__date--void {
    color: var(--ink-muted);
}
.wu-bookingheader--cancelled .wu-bookingheader__date {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}
.wu-bookingheader__prev {
    font-weight: 700;
}
.wu-bookingheader__summary {
    font-size: 16px;
    line-height: 24px;
    color: var(--ink-muted);
}
.wu-bookingheader__box {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    margin-top: var(--space-2);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-size: 16px;
    line-height: 24px;
}
.wu-bookingheader__box .wu-icon {
    margin-top: 1px;
}
.wu-bookingheader__box--amber {
    background: var(--amber-soft);
    color: var(--ink);
}
.wu-bookingheader__box--amber .wu-icon {
    color: var(--amber-ink);
}
.wu-bookingheader__box--neutral {
    background: var(--neutral-soft);
    color: var(--ink);
}
.wu-bookingheader__box--neutral .wu-icon {
    color: var(--ink-muted);
}
.wu-bookingheader__action {
    margin-top: var(--space-3);
}
@media (max-width: 480px) {
    .wu-bookingheader__date {
        font-size: 26px;
        line-height: 32px;
    }
}

/* ActionList */
.wu-actionlist {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: var(--portal-max);
}
.wu-actionlist__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
}
.wu-actionlist__deadline {
    margin: 0;
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    font-size: 16px;
    line-height: 24px;
}
.wu-actionlist__deadline .wu-icon {
    margin-top: 3px;
    color: var(--ink-muted);
}
.wu-actionlist__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    overflow: hidden;
}
.wu-actionlist__primary {
    padding: var(--space-4);
}
.wu-actionlist__item + .wu-actionlist__item, .wu-actionlist__primary + .wu-actionlist__item {
    border-top: 1px solid var(--line);
}
.wu-actionlist__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    border: 0;
    background: transparent;
    color: var(--ink);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background var(--wu-fast) var(--wu-ease);
}
.wu-actionlist__row:hover {
    background: var(--sunken);
}
.wu-actionlist__row:focus-visible {
    box-shadow: inset 0 0 0 3px var(--focus);
}
.wu-actionlist__row > .wu-icon:first-child {
    color: var(--ink-muted);
}
.wu-actionlist__row > .wu-icon:last-child {
    color: var(--ink-subtle);
}
.wu-actionlist__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.wu-actionlist__label {
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-actionlist__desc {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}
/* A finished step of a checklist (Einrichtung): the check and a chip in green set it apart from the open ones. */
.wu-actionlist__row > .wu-icon.wu-actionlist__done {
    color: var(--green);
}
.wu-actionlist__row > .wu-chip {
    flex-shrink: 0;
}
.wu-actionlist__row--quiet .wu-actionlist__label {
    font-weight: 400;
    color: var(--ink-muted);
}
.wu-actionlist__item--off {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    padding: var(--space-3) var(--space-4);
    color: var(--ink-muted);
}
.wu-actionlist__item--off > div {
    display: flex;
    flex-direction: column;
}
.wu-actionlist__item--off .wu-actionlist__label {
    color: var(--ink-muted);
}
.wu-actionlist__item--off .wu-actionlist__desc {
    color: var(--ink);
    font-size: 14px;
    line-height: 20px;
}
.wu-actionlist__policy summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--sky);
    list-style: none;
    border-radius: var(--radius-xs);
}
.wu-actionlist__policy summary::-webkit-details-marker {
    display: none;
}
.wu-actionlist__policy[open] summary .wu-icon {
    transform: rotate(180deg);
}
.wu-actionlist__policytext {
    padding-top: var(--space-2);
    font-size: 15px;
    line-height: 22px;
    color: var(--ink-muted);
    max-width: 65ch;
}

/* HelpTopic: a topic of Hilfe (UX concept 9.9), its steps numbered, its ways into the admin wrapping on phones */
.wu-helptopic__steps {
    margin: 0;
    padding-inline-start: var(--space-5);
}
.wu-helptopic__steps li + li {
    margin-top: var(--space-2);
}
.wu-helptopic__block {
    margin-top: var(--space-4);
}
.wu-helptopic .wu-card__foot {
    flex-wrap: wrap;
}

/* ContactBlock */
.wu-contact {
    max-width: var(--portal-max);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background: var(--sunken);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.wu-contact__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-contact p {
    margin: 0;
}
.wu-contact__name {
    font-size: 15px;
    line-height: 22px;
    color: var(--ink-muted);
}
.wu-contact__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wu-contact__list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--touch-min);
    font-size: 16px;
    line-height: 24px;
}
.wu-contact__list .wu-icon {
    color: var(--ink-muted);
}
.wu-contact__key {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}
.wu-contact__list a {
    color: var(--sky);
    font-weight: 600;
    user-select: text;
    overflow-wrap: anywhere;
}
.wu-contact__ref {
    font-size: 14px;
    line-height: 20px;
    color: var(--ink-muted);
}
.wu-contact__code {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--ink);
    letter-spacing: .02em;
    user-select: all;
}

/* SuccessState */
.wu-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    max-width: var(--portal-max);
}
.wu-success__badge {
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    background: var(--green-soft);
    color: var(--green);
    margin-bottom: var(--space-2);
}
.wu-success--neutral .wu-success__badge {
    background: var(--neutral-soft);
    color: var(--ink-muted);
}
.wu-success--amber .wu-success__badge {
    background: var(--amber);
    color: var(--on-amber);
}
.wu-success__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 40px;
    line-height: 44px;
    font-weight: 900;
    letter-spacing: -.01em;
    text-wrap: balance;
}
.wu-success__text {
    font-size: 16px;
    line-height: 24px;
    color: var(--ink-muted);
    max-width: 44ch;
}
.wu-success__text p {
    margin: 0;
}
.wu-success__details {
    margin: var(--space-2) 0 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    text-align: left;
}
.wu-success__details > div {
    display: grid;
    grid-template-columns: minmax(0, 9em) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
}
.wu-success__details > div + div {
    border-top: 1px solid var(--line);
}
.wu-success__details dt {
    font-size: 14px;
    line-height: 22px;
    color: var(--ink-muted);
}
.wu-success__details dd {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
}
.wu-success__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
}
@media (max-width: 480px) {
    .wu-success__title {
        font-size: 32px;
        line-height: 38px;
    }
}

/* EmailLayout — styles are inline; this only frames it in a preview */
.wu-email {
    border-radius: var(--radius-md);
}

/*
 * ===== server rendering: what the Leaf admin adds to the design system (ADR 0011) =====
 * The components above are unchanged. These rules stand in for what the React components do with JavaScript or
 * attributes, and style the frame of the sign-in pages, which the design system leaves to the product.
 */

/* Icons come from the sprite /icons.svg; the React Icon sets these as attributes on each svg. */
svg.wu-icon {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
}
svg.wu-icon:not([stroke-width]) {
    stroke-width: 2;
}

/* Menus are details elements: the summary is the trigger, the list shows while the menu is open. */
details.wu-menu > summary {
    list-style: none;
}
details.wu-menu > summary::-webkit-details-marker {
    display: none;
}
.wu-menu__list form {
    margin: 0;
}
/* The chosen entry of a choice (language, business): aria-current instead of the React menuitemradio. */
.wu-menu__item[aria-current="true"] {
    font-weight: 600;
}

/* The AppShell renders the desktop and the phone AppBar; this shows the one that fits. */
@media (min-width: 1024px) {
    .wu-only-mobile {
        display: none !important;
    }
}
@media (max-width: 1023px) {
    .wu-only-desktop {
        display: none !important;
    }
}

/* Skip link: the first stop of the keyboard on every page. */
.wu-skip {
    position: absolute;
    top: calc(var(--space-2) + env(safe-area-inset-top, 0px));
    left: calc(var(--space-2) + env(safe-area-inset-left, 0px));
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-md);
    transform: translateY(-200%);
}
.wu-skip:focus {
    transform: none;
}
main[tabindex="-1"]:focus {
    outline: none;
}

/* Switch: a real checkbox with role switch over the track, so it works in a form without a script. */
.wu-switch__control {
    position: relative;
    display: inline-flex;
    flex: none;
}
/* WebKit keeps a checkbox at its own size with width: auto, so the input gets the control's size explicitly. */
.wu-switch__input {
    position: absolute;
    top: -2px;
    left: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    margin: 0;
    opacity: 0;
    cursor: pointer;
    appearance: none;
}
/* The track comes after the input and is positioned too, so it would paint over it and swallow the click. */
.wu-switch__control .wu-switch__track {
    pointer-events: none;
}
.wu-switch__input:checked + .wu-switch__track {
    background: var(--amber);
    border-color: var(--amber-ink);
}
.wu-switch__input:checked + .wu-switch__track .wu-switch__thumb {
    transform: translateX(18px);
    background: var(--on-amber);
}
.wu-switch__input:not(:checked) + .wu-switch__track .wu-icon {
    display: none;
}
.wu-switch__input:focus-visible + .wu-switch__track {
    box-shadow: var(--focus-ring);
}
.wu-switch__input:disabled + .wu-switch__track {
    cursor: not-allowed;
    background: var(--sunken);
    border-color: var(--line);
}
.wu-switch__input:disabled + .wu-switch__track .wu-switch__thumb {
    background: var(--ink-disabled);
}
.wu-switch:has(.wu-switch__input:checked) .wu-switch__state {
    color: var(--ink);
}
.wu-switch:has(.wu-switch__input:checked) .wu-switch__off,
.wu-switch:not(:has(.wu-switch__input:checked)) .wu-switch__on {
    display: none;
}

/* DateRangeField: while "Ohne Ende" is checked there is no end to enter (the server ignores it then). */
.wu-daterange__row:has(.wu-daterange__open .wu-check__input:checked) .wu-daterange__until {
    display: none;
}

/*
 * DateField and TimeField (admin.js, modules date-time-fields): a text field with the date as people read it and a
 * calendar, a text field for HH:MM with a list of times. Both popovers live in the top layer, placed by the script
 * below the field (above it where there is no room). Without the script the native inputs stay.
 */
.wu-datefield, .wu-timefield {
    min-width: 0;
}
.wu-datefield .wu-input {
    width: 232px;
    max-width: 100%;
}
.wu-daterange__part {
    max-width: 232px;
}
.wu-timefield .wu-input {
    width: calc(7ch + 2 * var(--space-3) + 2px);
    font-size: 15px;
}
.wu-datefield__text, .wu-timefield__text {
    font-variant-numeric: tabular-nums;
    text-overflow: ellipsis;
}
.wu-input--sm .wu-datefield__button {
    width: 28px;
    height: 28px;
    margin-right: calc(var(--space-1) * -1 - 2px);
}
.wu-datetime__hint[hidden] {
    display: none;
}
/* A press on an icon is one on its button: WebKit took one on the sprite's <use> for a press outside the popover. */
.wu-datefield .wu-icon {
    pointer-events: none;
}
.wu-weekprev__pick .wu-field {
    gap: 0;
}
.wu-datepicker, .wu-timelist {
    position: fixed;
    inset: auto;
    margin: 0;
    padding: var(--space-2);
    background: var(--surface-raised);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-family: var(--font-sans);
}
.wu-datepicker:focus {
    outline: none;
}
.wu-datepicker {
    width: min(296px, calc(100vw - 2 * var(--space-4)));
    padding: var(--space-3);
}
.wu-datepicker__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}
.wu-datepicker__title {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 22px;
    font-weight: 800;
}
.wu-datepicker__grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 2px;
    table-layout: fixed;
}
.wu-datepicker__weekday {
    padding: var(--space-1) 0;
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-datepicker__grid td {
    padding: 0;
}
.wu-datepicker__day {
    display: grid;
    place-items: center;
    width: 100%;
    height: 36px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}
.wu-datepicker__day:hover {
    background: var(--sunken);
}
.wu-datepicker__day:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.wu-datepicker__day--out {
    color: var(--ink-subtle);
}
.wu-datepicker__day--range, .wu-datepicker__day--range:hover {
    background: var(--amber-soft);
}
.wu-datepicker__day--edge {
    border-color: var(--amber);
}
.wu-datepicker__day--today {
    border-color: var(--line-strong);
    font-weight: 600;
}
.wu-datepicker__day--chosen, .wu-datepicker__day--chosen:hover {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--on-amber);
    font-weight: 700;
}
.wu-datepicker__day[aria-disabled="true"], .wu-datepicker__day[aria-disabled="true"]:hover {
    background: transparent;
    color: var(--ink-disabled);
    cursor: not-allowed;
}
.wu-datepicker__foot {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--line);
}
.wu-timelist {
    max-height: 240px;
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
    padding: var(--space-1);
}
.wu-timelist__option {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: 15px;
    line-height: 20px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: pointer;
}
.wu-timelist__option:hover {
    background: var(--sunken);
}
.wu-timelist__option[aria-selected="true"] {
    font-weight: 700;
}
.wu-timelist__option--active, .wu-timelist__option--active:hover {
    background: var(--sky-soft);
    box-shadow: inset 0 0 0 2px var(--focus);
}
.wu-timelist__duration {
    color: var(--ink-muted);
    font-weight: 400;
}

/* LocalizedField: without a script every language shows, one below the other, with its code. */
/* admin.js turns them into the design system's tabs (wu-localized--tabbed): one language at a time, no code. */
.wu-localized--tabs .wu-localized__inputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.wu-localized__tabs[hidden], .wu-localized--tabbed .wu-localized__code {
    display: none;
}
.wu-localized__tab:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.wu-localized__tab--invalid, .wu-localized__tab--invalid:hover {
    color: var(--red);
}

/* RadioCard: the chosen card follows the radio, also before the page is sent. */
.wu-radiocard--card:has(.wu-radio__input:checked) {
    border-color: var(--amber-ink);
    background: var(--amber-soft);
    box-shadow: inset 0 0 0 1px var(--amber-ink);
}
.wu-radiocard:has(.wu-radio__input:checked) .wu-radiocard__desc {
    color: var(--ink);
}

/* Panel: closing is a link back to the page behind it; with a form, body and footer belong to it. */
.wu-panel-layer__scrim {
    display: block;
}
.wu-panel__form {
    display: contents;
}

/* EmptyState: the owl is 48 px high inline and 72 px on a page, as the React EmptyState draws it. */
.wu-empty--page .wu-logo--mark {
    width: 85px;
    height: 72px;
}

/* ===== the frame of the sign-in pages: the logo, one card, the language choice ===== */
.wu-auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    min-height: 100vh;
    padding: var(--space-12) var(--space-4) var(--space-8);
}
/* The logo with its slogan stands large above the card: the wordmark 64 px high (about 258 px wide) on wide */
/* screens, down to 52 px (about 210 px) on a 320 px phone; the slogan 16 to 18 px. */
.wu-auth__brand .wu-logo--lockup {
    --wu-logo-h: clamp(52px, 16vw, 64px);
}
.wu-auth__brand .wu-logo__word {
    width: auto;
    height: var(--wu-logo-h);
}
.wu-auth__brand .wu-logo__slogan {
    font-size: clamp(16px, 4.6vw, 18px);
}
.wu-auth__main {
    width: 100%;
    max-width: 480px;
}
.wu-auth__card .wu-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8) var(--space-6) var(--space-6);
}
.wu-auth__card .wu-pagehead {
    padding-bottom: 0;
}
.wu-auth__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.wu-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
}
.wu-auth__note,
.wu-auth__hint {
    margin: 0;
    color: var(--ink-muted);
}
.wu-auth__hint {
    font-size: 13px;
    line-height: 18px;
}
/* The portal address in full below its field while it is typed (Betrieb registrieren), the slug in bold. */
.wu-auth__address {
    margin: var(--space-2) 0 0;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
    overflow-wrap: anywhere;
}
.wu-auth__address strong {
    color: var(--ink);
    font-weight: 600;
}
/* Betrieb registrieren through whookup.app/vereine (AGB § 4a): only the consent of the kind chosen shows. */
.wu-auth__consent {
    min-width: 0;
}
.wu-auth__form:has(input[name="kind"][value="club"]:checked) .wu-auth__consent--business,
.wu-auth__form:has(input[name="kind"][value="business"]:checked) .wu-auth__consent--club {
    display: none;
}
.wu-auth__tips {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding-left: var(--space-5);
    color: var(--ink-muted);
}
.wu-auth__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
.wu-auth__actions form {
    margin: 0;
}
/* The links to the AGB and the privacy policy below the consent wrap on a phone instead of running out of the card. */
.wu-auth__actions .wu-btn--link {
    white-space: normal;
    text-align: start;
}
.wu-auth__redeem {
    align-items: center;
    padding: var(--space-8) 0;
    text-align: center;
}
.wu-auth__redeem p {
    margin: 0;
    color: var(--ink-muted);
}
.wu-auth__foot {
    color: var(--ink-muted);
    font-size: 13px;
    line-height: 18px;
}
.wu-auth__languages {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}
.wu-auth__languages [aria-current="true"] {
    color: var(--ink);
    font-weight: 600;
    text-decoration: none;
}
.wu-auth__foot .wu-legal {
    justify-content: center;
    margin-top: var(--space-3);
}

/* LegalLinks: Whookup's Impressum and Datenschutz, quiet at the foot of the admin's and the console's frames. */
.wu-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: 13px;
    line-height: 18px;
}
.wu-legal a {
    color: var(--ink-muted);
}
@media (max-width: 1023px) {
    .wu-auth {
        gap: var(--space-6);
        padding-top: var(--space-8);
    }
    .wu-auth__card .wu-card__body {
        padding: var(--space-6) var(--space-4) var(--space-4);
    }
}

/* ===== the views of the admin: sections stacked, forms in columns, the actions below them ===== */
.wu-stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.wu-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.wu-form__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

/* DataTable: the buttons of a row stay together; inside a flush Card the card draws the border and clips it. */
.wu-table__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.wu-card--flush .wu-table {
    border: 0;
    border-radius: 0;
}

/*
 * A row of controls above a list (filters), and fields side by side in a form that wrap on phones (UX concept 8.7
 * "Abstände und Ausrichtung"). The controls line up at the top of their inputs, never at their bottom edge: a hint or
 * an error below one field must not move the others. Fields with a label line up at their labels; while one does,
 * the controls without a label row (buttons, switches, a checkbox, a field whose label only screen readers read)
 * start below the height of a label row, beside the inputs. A switch takes the height of the small controls of a
 * filter row and centers its track on them.
 */
.wu-toolbar, .wu-form__row {
    --wu-row-label: 0px;
}
.wu-toolbar:has(> .wu-field > .wu-field__labelrow), .wu-form__row:has(> .wu-field > .wu-field__labelrow) {
    --wu-row-label: calc(20px + var(--space-1));
}
.wu-toolbar > :not(.wu-field:has(> .wu-field__labelrow)),
.wu-form__row > :not(.wu-field:has(> .wu-field__labelrow)) {
    margin-top: var(--wu-row-label);
}
.wu-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: flex-start;
}
.wu-toolbar > .wu-switch {
    align-items: center;
    min-height: var(--control-sm);
}
.wu-toolbar > .wu-switch .wu-switch__track {
    margin-top: 0;
}
/*
 * Fields that belong together closer, e.g. a DateField between the buttons for the day before and after. They stay on
 * one line, the field giving way: at 390 px the button for the next day otherwise wrapped below the field.
 */
.wu-toolbar--fields {
    gap: var(--space-2);
    flex-wrap: nowrap;
}
.wu-toolbar--fields > .wu-field {
    min-width: 0;
}
/*
 * A search with its button (Suche): the field takes the row up to a readable width and the button stays beside it, also
 * at 390 px, where the field at its own width pushed the button below it.
 */
.wu-toolbar--search {
    max-width: 40rem;
}
.wu-toolbar--search > .wu-field--search {
    flex: 1 1 auto;
}
/* Fields side by side line up at their labels, so a hint below one doesn't push the other down (see .wu-toolbar). */
.wu-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: flex-start;
}

/* Einstellungen: the sub-navigation on the left from 1024 px; on phones it scrolls sideways above the page. */
.wu-settings {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    min-width: 0;
}
@media (min-width: 1024px) {
    .wu-settings {
        grid-template-columns: 220px minmax(0, 1fr);
        align-items: start;
    }
}
@media (max-width: 1023px) {
    .wu-settings .wu-tabs--sub {
        flex-direction: row;
        overflow-x: auto;
    }
    /* On phones the row names the areas only; the current area's pages follow as a second row. */
    .wu-settings .wu-tabs--sub .wu-tabs__tab--child {
        display: none;
    }
    .wu-settings .wu-tabs--sub .wu-tabs__tab--open {
        color: var(--ink);
        background: var(--sunken);
    }
    .wu-settings .wu-tabs--pages {
        margin-top: calc(var(--space-3) - var(--space-5));
    }
}
/* From 1024 px the pages stand below their area in the left column: indented, without the second row. */
@media (min-width: 1024px) {
    .wu-settings .wu-tabs--sub .wu-tabs__tab--child {
        margin-left: var(--space-4);
        font-weight: 500;
    }
    .wu-settings .wu-tabs--sub .wu-tabs__tab--grandchild {
        margin-left: calc(var(--space-4) * 2);
    }
    .wu-settings .wu-tabs--pages {
        display: none;
    }
}

/*
 * A group inside a form's section, e.g. "Neue Person" below the customer search: a line and a small title above it,
 * so it reads apart from the fields before it while its own fields stay together.
 */
.wu-subsection {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
    padding-top: var(--space-5);
    border-top: 1px solid var(--line);
}
.wu-subsection__title {
    margin: 0 0 calc(var(--space-2) - var(--space-5));
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

/*
 * ===== inputs concept (UX concept 8.9): Section with its main switch, an option's own value, FormFooter, FilterBar
 * =====
 */

/*
 * Section: a card of a few settings. With a main switch the switch leads and its dependants hang below it, on a line
 * from the middle of its track to where its label starts; while it is off they are hidden (CSS only, so it works
 * without the script and follows the switch at once). Hidden fields are still sent; the server keeps their values.
 */
.wu-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.wu-section__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}
.wu-section__toggle .wu-switch__label {
    font-weight: 600;
}
/* The line runs below the middle of the switch's 44 px track; the fields start where its label starts. */
.wu-section--switched > .wu-section__inner > .wu-section__body {
    margin-left: 21px;
    padding-left: calc(44px + var(--space-3) - 21px - 2px);
    border-left: 2px solid var(--line);
}
.wu-section--switched:has(> .wu-section__inner > .wu-section__toggle .wu-switch__input:not(:checked))
    > .wu-section__inner > .wu-section__body {
    display: none;
}

/* "Wahl mit Wert": an option's own field (the minutes of "Automatisch markieren") shows only while it is checked. */
.wu-radiocard:not(:has(> .wu-radiocard__main .wu-radio__input:checked)) > .wu-radiocard__extra {
    display: none;
}
/* Angebot › Angaben: the settings of own places apply only while shared places aren't chosen (UX concept 9.7). */
.wu-section:has(.wu-radio__input[name="places"][value="shared"]:checked) .wu-offering__own {
    display: none;
}

/*
 * FormFooter: the end of a form that saves, its main button last. Once a field changed (admin.js, module
 * unsaved-changes, or the server after a refused save) it sticks to the bottom of the screen, above the BottomNav on
 * phones, with "Nicht gespeichert" and "Verwerfen"; at the form's end it stands in its place again.
 */
.wu-formfoot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px solid var(--line);
}
.wu-formfoot__status {
    flex: 1 1 auto;
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    font-weight: 600;
    color: var(--amber-ink);
}
.wu-formfoot__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-left: auto;
}
.wu-formfoot:not(.wu-formfoot--dirty) .wu-formfoot__discard {
    display: none;
}
.wu-formfoot--dirty {
    position: sticky;
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-sticky);
    padding: var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
}
@media (min-width: 1024px) {
    html:has(.wu-formfoot--dirty) {
        scroll-padding-bottom: 88px;
    }
}
@media (max-width: 1023px) {
    .wu-shell--auto .wu-formfoot--dirty {
        bottom: calc(var(--bottomnav-height) + var(--space-2) + env(safe-area-inset-bottom, 0px));
    }
    .wu-shell--auto.wu-shell--keyboard-open .wu-formfoot--dirty {
        bottom: var(--space-2);
    }
    html:has(.wu-shell--auto .wu-formfoot--dirty) {
        scroll-padding-bottom: calc(var(--bottomnav-height) + 88px + env(safe-area-inset-bottom, 0px));
    }
}

/*
 * FilterBar: the search with the button "Filter" (a details element), the period and quick filters as pills, the
 * own range's dates and the chips of the filters set. The rarer filters open as a popover below the button, from
 * 600 px, and as a sheet from the bottom on phones. A tap beside it lands on the summary's ::before, which covers the
 * screen while it is open, and closes it without a script.
 */
.wu-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}
.wu-filters__top {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}
.wu-filters__top > .wu-field--search {
    flex: 1 1 auto;
    max-width: 40rem;
}
.wu-filters__more {
    position: relative;
    flex: none;
}
.wu-filters__toggle {
    list-style: none;
    cursor: pointer;
}
.wu-filters__toggle::-webkit-details-marker {
    display: none;
}
.wu-filters__more[open] > .wu-filters__toggle::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--z-popover);
    cursor: default;
}
.wu-filters__sheet {
    position: absolute;
    top: calc(100% + var(--space-2));
    left: 0;
    z-index: calc(var(--z-popover) + 1);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(360px, calc(100vw - 2 * var(--space-4)));
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-md);
}
.wu-filters__top:has(> .wu-field--search) .wu-filters__sheet {
    left: auto;
    right: 0;
}
.wu-filters__title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-filters__fields {
    gap: var(--space-4);
}
/* The own range of dates in the sheet: "Eigener Zeitraum" over Von and Bis, side by side where they fit. */
.wu-filters__range > legend {
    margin-bottom: var(--space-2);
    padding: 0;
}
.wu-filters__sheetfoot {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}
@media (max-width: 599px) {
    .wu-filters__more[open] > .wu-filters__toggle::before {
        z-index: var(--z-panel);
        background: var(--scrim);
    }
    .wu-filters__sheet,
    .wu-filters__top:has(> .wu-field--search) .wu-filters__sheet {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: calc(var(--z-panel) + 1);
        width: auto;
        max-height: 85vh;
        padding:
            var(--space-5) calc(var(--space-4) + env(safe-area-inset-right, 0px))
            calc(var(--space-4) + env(safe-area-inset-bottom, 0px))
            calc(var(--space-4) + env(safe-area-inset-left, 0px));
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        box-shadow: var(--shadow-lg);
    }
    .wu-filters__sheetfoot > .wu-btn {
        flex: 1 1 0;
    }
}
.wu-filters__pills {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
}
.wu-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/*
 * On phones each group of pills stays one line that scrolls sideways (the period, then the quick filters below it),
 * so the list starts right below them; the padding keeps the focus ring inside the scrolling box.
 */
@media (max-width: 599px) {
    .wu-filters__pills > .wu-pills {
        flex-wrap: nowrap;
        max-width: calc(100% + 6px);
        margin: -3px;
        padding: 3px;
        overflow-x: auto;
        scrollbar-width: none;
    }
}
.wu-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    height: var(--control-sm);
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: border-color var(--wu-fast) var(--wu-ease), background var(--wu-fast) var(--wu-ease);
}
.wu-pill:hover {
    border-color: var(--ink-muted);
    color: var(--ink);
}
.wu-pill:focus-visible, .wu-filterchip:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.wu-pill--on {
    border-color: var(--amber-ink);
    background: var(--amber-soft);
    box-shadow: inset 0 0 0 1px var(--amber-ink);
    font-weight: 600;
}
.wu-pill__check {
    display: none;
}
.wu-pill--on .wu-pill__check {
    display: block;
}
@media (pointer: coarse) {
    .wu-pill {
        height: var(--touch-min);
    }
}
.wu-filters__active {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}
.wu-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wu-filterchip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 28px;
    padding: 0 var(--space-2) 0 var(--space-3);
    border-radius: var(--radius-full);
    background: var(--neutral-soft);
    color: var(--ink);
    font-size: 13px;
    line-height: 18px;
    text-decoration: none;
}
.wu-filterchip:hover {
    background: var(--line);
    color: var(--ink);
}

/* A ghost button alone at the start of a line: its icon lines up with the text above it, not its padding. */
.wu-flush-start > .wu-btn--ghost.wu-btn--sm {
    margin-left: calc(var(--space-3) * -1);
}
.wu-flush-start > .wu-btn--ghost.wu-btn--md {
    margin-left: calc(var(--space-4) * -1);
}

/* A live part (ADR 0011 "Live navigation") only marks what the server renders again: no box of its own. */
.wu-live {
    display: contents;
}
/*
 * A live part waiting for the answer to a link or button that takes longer than a moment (admin.js BUSY_DELAY): it
 * fades back and takes no clicks, so nothing is chosen in what is about to be replaced. A part that is only a mark
 * fades its children. The focus and typing stay where they are; what is typed meanwhile is kept.
 */
[data-wu-live-busy]:not(.wu-live), .wu-live[data-wu-live-busy] > * {
    opacity: .5;
    pointer-events: none;
    transition: opacity var(--wu-base) var(--wu-ease);
}
[data-wu-live-scope]:has([data-wu-live-busy]) {
    cursor: progress;
}

/* Stacks with less room between their parts, e.g. a list of alerts. */
.wu-stack--tight {
    gap: var(--space-2);
}
/* A filter form: the search and the rows of filters below it, as far apart as the rows themselves. */
.wu-stack--snug {
    gap: var(--space-3);
}
.wu-text-muted {
    margin: 0;
    color: var(--ink-muted);
}

/* DayTimeline: each slot is a details element; its summary is the row and the chevron turns while it is open. */
details.wu-dayline__fold > summary {
    list-style: none;
}
details.wu-dayline__fold > summary::-webkit-details-marker {
    display: none;
}
details.wu-dayline__fold[open] > summary .wu-dayline__chev {
    transform: rotate(90deg);
}
.wu-dayline__fold > .wu-dayline__list {
    border-top: 1px solid var(--line);
}
.wu-dayline__bact {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.wu-dayline__bact form {
    margin: 0;
}
a.wu-dayline__bname {
    text-decoration: none;
}
a.wu-dayline__bname:hover {
    text-decoration: underline;
}

/* Buchungen and the search: the heading of a day's group, and a list of BookingRows. */
.wu-daygroup__title {
    margin: 0;
    font-size: 15px;
    line-height: 22px;
    font-weight: 700;
    color: var(--ink);
}
.wu-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Buchung: "Nummer kopieren" shows once admin.js can copy. */
[data-wu=copy-code]:not(.wu-copy-ready) {
    display: none;
}

/* SlotPicker: each time slot is a label around a radio button; the chosen one looks selected before it is sent. */
fieldset.wu-slotpick {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.wu-slotpick__input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.wu-slotpick__input:disabled {
    cursor: not-allowed;
}
.wu-slotpick__opt:has(.wu-slotpick__input:checked) {
    background: var(--amber);
    border-color: var(--on-amber);
    box-shadow: inset 0 0 0 1px var(--on-amber);
    color: var(--on-amber);
}
.wu-slotpick__opt:has(.wu-slotpick__input:checked) .wu-slotpick__sub,
.wu-slotpick__opt:has(.wu-slotpick__input:checked) .wu-slotpick__same {
    color: var(--on-amber);
}
.wu-slotpick__opt:has(.wu-slotpick__input:focus-visible) {
    box-shadow: var(--focus-ring);
}

/* Einlass: the full screen without SideNav, one column with room for thumbs, the offering switch below the AppBar. */
.wu-focus .wu-shell__main {
    padding:
        var(--space-4) calc(var(--space-4) + env(safe-area-inset-right, 0px))
        calc(var(--space-4) + env(safe-area-inset-bottom, 0px)) calc(var(--space-4) + env(safe-area-inset-left, 0px));
}
.wu-focus .wu-shell__content {
    max-width: 640px;
}
.wu-focus__title {
    margin: 0;
    font-size: 17px;
    line-height: 24px;
    font-weight: 700;
    color: var(--ink);
}
.wu-focus__clock {
    margin-right: var(--space-3);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ink-muted);
}
.wu-focus__switch {
    padding:
        var(--space-3) calc(var(--space-4) + env(safe-area-inset-right, 0px))
        0 calc(var(--space-4) + env(safe-area-inset-left, 0px));
    overflow-x: auto;
}
/* The list to print (UX concept 9.3 "Liste zum Drucken"): in Einlass's full screen, wider for the extras' columns. */
.wu-focus .wu-shell__content:has(.wu-printlist) {
    max-width: 960px;
}
.wu-printlist {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.wu-printlist__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wu-printlist__title {
    margin: 0;
    font: 800 22px/28px var(--font-display);
    color: var(--ink);
}
.wu-printlist__meta {
    margin: 0;
    color: var(--ink-muted);
}
.wu-printlist__ordered {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}
.wu-printlist__tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}
.wu-printlist__group {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.wu-printlist__group-title {
    margin: 0;
    font: 700 17px/24px var(--font-display);
    color: var(--ink);
}
.wu-printlist__table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    font-size: 14px;
    line-height: 20px;
    color: var(--ink);
}
.wu-printlist__caption {
    padding: 0 0 var(--space-2);
    text-align: left;
    color: var(--ink-muted);
}
.wu-printlist__caption strong {
    color: var(--ink);
}
.wu-printlist__table th,
.wu-printlist__table td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.wu-printlist__table thead th {
    background: var(--sunken);
    font-weight: 600;
}
.wu-printlist__table tbody th {
    font-weight: 600;
}
.wu-printlist__table .wu-printlist__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.wu-printlist__code {
    font-family: var(--font-mono);
    white-space: nowrap;
}
/* On paper, every admin page drops its frame: navigation, bars, buttons, toasts and hints. Black on white, table
 * rows kept whole and their headers repeated on every page; A4 with a margin of 12 mm. */
@media print {
    @page {
        size: A4;
        margin: 12mm;
    }
    :root {
        color-scheme: light;
    }
    body {
        background: #fff;
        color: #000;
    }
    .wu-skip,
    .wu-supportbar,
    .wu-shell__side,
    .wu-shell__bar,
    .wu-shell__bottom,
    .wu-shell__action,
    .wu-shell__foot,
    .wu-focus .wu-appbar,
    .wu-focus__switch,
    .wu-toasts,
    .wu-printlist__tools,
    .wu-install-dialog {
        display: none !important;
    }
    .wu-shell,
    .wu-shell__col,
    .wu-shell__main,
    .wu-focus .wu-shell__main,
    .wu-focus .wu-shell__content:has(.wu-printlist) {
        display: block;
        max-width: none;
        min-height: 0;
        padding: 0;
        overflow: visible;
        background: #fff;
    }
    .wu-printlist,
    .wu-printlist__title,
    .wu-printlist__group-title,
    .wu-printlist__meta,
    .wu-printlist__ordered,
    .wu-printlist__caption,
    .wu-printlist__caption strong,
    .wu-printlist__table {
        background: #fff;
        color: #000;
    }
    .wu-printlist__table {
        font-size: 11pt;
        line-height: 1.3;
    }
    .wu-printlist__table th,
    .wu-printlist__table td {
        padding: 1.5mm 2mm;
        border-color: #000;
    }
    .wu-printlist__table thead th {
        background: #fff;
        border-bottom-width: 2px;
    }
    .wu-printlist__table thead {
        display: table-header-group;
    }
    .wu-printlist__table tr {
        break-inside: avoid;
    }
    .wu-printlist__caption,
    .wu-printlist__group-title {
        break-after: avoid;
    }
}
a.wu-slotswitch__step {
    text-decoration: none;
}

/* Kalender, choosing several slots of a day: the checkbox sits before the slot's row. */
.wu-dayline__slot:has(> .wu-dayline__select) {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
}
.wu-dayline__slot:has(> .wu-dayline__select) > .wu-dayline__fold {
    flex: 1;
    min-width: 0;
}
.wu-dayline__select {
    margin: var(--space-3) 0 0 var(--space-3);
}
.wu-calendar__selection {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
}

/* Kurzfristig schließen: one column, as on a phone; the summary stands out above the main action. */
.wu-close {
    max-width: 640px;
}
/* Only the dates of the choice show: none from now, the day for a whole day, start and end for a period. */
.wu-close:has(input[name="when"][value="now"]:checked) .wu-close__dates,
.wu-close:has(input[name="when"][value="day"]:checked) [data-wu-when="range"],
.wu-close:has(input[name="when"][value="range"]:checked) [data-wu-when="day"] {
    display: none;
}
.wu-close__summary {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
}

/*
 * Einstellungen › E-Mails, one kind: one column at every width, the settings first, then their preview below them
 * (owner, 14.10.2026: two columns were too narrow for either).
 */
.wu-email-kind {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    min-width: 0;
}

/* Einstellungen › E-Mails: the email of the preview in a frame of its own, as a guest's mail program shows it. */
.wu-email-preview {
    width: 100%;
    min-height: 480px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.wu-email-preview__text pre {
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    font-family: var(--font-mono);
    font-size: 13px;
    white-space: pre-wrap;
}
.wu-email-preview__subject {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
}
/* Kundenportal (UX concept 8.4, 9.10): one narrow column of portal-max under the PortalHeader, with body-lg text. */
.wu-portal {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px;
    line-height: 24px;
}
.wu-portal__main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
    width: 100%;
    /* The column is portal-max wide inside its padding, like the header's and the footer's, so their edges align. */
    max-width: calc(var(--portal-max) + 2 * var(--space-4));
    box-sizing: border-box;
    margin: 0 auto;
    padding: var(--space-6) var(--space-4) var(--space-8);
}
.wu-portal__main:focus {
    outline: none;
}
.wu-portal__step,
.wu-portal__section,
.wu-portal__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
}
.wu-portal__step {
    gap: var(--space-8);
}
.wu-portal__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 30px;
    line-height: 36px;
    font-weight: 800;
}
.wu-portal__subtitle {
    margin: 0;
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
}
.wu-portal__lead {
    margin: 0;
    color: var(--ink-muted);
}
.wu-portal__redeem {
    align-items: center;
    padding: var(--space-8) 0;
    text-align: center;
}
.wu-portal__redeem p {
    margin: 0;
    color: var(--ink-muted);
}
.wu-portal__back {
    align-self: flex-start;
}
/* The day as a fact where there is nothing to choose (single-day offering, day fixed by a link): "Tag" over the
    date, both in the heading, so a screen reader reads them as one. */
.wu-portal__day {
    gap: var(--space-2);
}
.wu-portal__day-title {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
}
.wu-portal__day-label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    color: var(--ink-muted);
}
.wu-portal__day-date {
    font-family: var(--font-display);
    font-size: 19px;
    line-height: 24px;
    font-weight: 800;
}
/* The language switch is a pair of links, so it works without scripts. */
a.wu-portalheader__langbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}
.wu-portalheader__langbtn[aria-current="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
}
.wu-portalheader__signout {
    margin: 0;
}
/* A long business name wraps to a second line at 390 px instead of being cut short, and stops after two. */
.wu-portalheader__inner {
    padding-block: var(--space-2);
}
.wu-portalheader__name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    white-space: normal;
    overflow-wrap: anywhere;
}
/* Umbuchen: the offerings as a list of links, the chosen one marked. */
.wu-portal__choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wu-portal__choice {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--ink);
    text-decoration: none;
}
.wu-portal__choice[aria-current="true"] {
    border-color: var(--ink);
    font-weight: 600;
}
/* Meine Buchungen: each booking a card that opens it. */
.wu-portal__cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wu-portal__card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--ink);
    text-decoration: none;
}
.wu-portal__cardwhen {
    font-weight: 600;
}
.wu-portal__cardsummary {
    color: var(--ink-muted);
}
.wu-portal__past > summary {
    cursor: pointer;
}
/* Buttons side by side that wrap on narrow screens: "Route planen" and "Zum Kalender hinzufügen". */
.wu-portal__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
/*
 * The wallets under Einlass (ADR 0017), like the guest emails': a sentence, then Apple's badge and Google's condensed
 * badge, unchanged and 48px high (Google's minimum, above the page's 40px buttons, as Google asks, without outshining
 * the QR code, as Apple asks). Centered above the QR code they belong to (below it on the day of the appointment),
 * 8px apart (Google's clear space, more than Apple's tenth of the height): side by side from a column of 335px on,
 * stacked in the middle on narrower phones.
 */
.wu-portal__wallets {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
    text-align: center;
}
/* Above the QR code, before the day of the appointment: the space goes below, between the badges and the code. */
.wu-portal__wallets--above {
    margin-top: 0;
    margin-bottom: var(--space-4);
}
.wu-portal__wallets .wu-portal__buttons {
    align-items: center;
    justify-content: center;
}
.wu-portal__wallet img {
    display: block;
    max-width: 100%;
    height: auto;
}
/* Buchen: the steps of the booking flow, numbered, the current one in ink, earlier ones as links. */
.wu-portal__steplist {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 20px;
}
.wu-portal__steplink {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--ink-muted);
    text-decoration: none;
}
a.wu-portal__steplink {
    color: var(--sky);
}
.wu-portal__stepnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-full);
    font-weight: 600;
}
.wu-portal__stepitem--current .wu-portal__steplink {
    color: var(--ink);
    font-weight: 600;
}
.wu-portal__stepitem--current .wu-portal__stepnum {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--surface);
}
.wu-portal__stepitem--done .wu-portal__stepnum {
    border-color: var(--green);
    color: var(--green);
}
/* The hold's remaining time ("Noch 9:41 Min. für dich reserviert."). */
.wu-portal__hold {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--amber-soft);
    color: var(--amber-ink);
    font-weight: 600;
}
.wu-portal__policy > summary {
    cursor: pointer;
    color: var(--sky);
}
.wu-portal__policy > p {
    margin: var(--space-2) 0 0;
    color: var(--ink-muted);
}
/* Prüfen: the notices above "Verbindlich buchen" (cancellation terms, privacy), which ask for no tick. */
.wu-portal__notice {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
}
.wu-portal__quantity {
    gap: var(--space-2);
}
/* Einstellungen › Kundenportal: the offerings of the booking flow, each with whether it is bookable online. */
.wu-settings__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}
.wu-settings__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

/*
 * YearPlanner (UX concept 9.6 "Jahresplaner", 13; new with v0.16, built from the design system's tokens): the year as
 * a wall calendar. A day's schedule gives it a colour (--yr, one of eight from the tokens) and its letter; open days
 * are filled, open days without hours that weekday pale, closed days hatched, days without a plan dashed; past days
 * muted, today outlined. Never colour alone: the letter and the pattern say it too. Below 1024 px only the list shows.
 */
.wu-year--c1 {
    --yr: var(--sky);
}
.wu-year--c2 {
    --yr: var(--green);
}
.wu-year--c3 {
    --yr: var(--amber);
}
.wu-year--c4 {
    --yr: color-mix(in srgb, var(--sky) 50%, var(--green));
}
.wu-year--c5 {
    --yr: var(--ink-muted);
}
.wu-year--c6 {
    --yr: var(--amber-ink);
}
.wu-year--c7 {
    --yr: color-mix(in srgb, var(--sky) 55%, var(--red));
}
.wu-year--c8 {
    --yr: color-mix(in srgb, var(--green) 50%, var(--amber));
}
.wu-year {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
    min-width: 0;
}
.wu-year__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
}
.wu-year__title, .wu-season__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    line-height: 24px;
    font-weight: 800;
}
.wu-year__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 13px;
    color: var(--ink-muted);
}
.wu-year__legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}
.wu-year__swatch {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 16px;
    padding: 0;
}
.wu-year__explain {
    min-height: 20px;
    margin: 0 0 var(--space-2);
    font-size: 14px;
    line-height: 20px;
    color: var(--ink);
}
.wu-year__table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2px;
}
.wu-year__table th {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--ink-subtle);
    text-align: center;
}
.wu-year__table .wu-year__num {
    width: 24px;
    padding-right: var(--space-1);
    text-align: right;
    font-weight: 500;
}
.wu-year__table td {
    padding: 0;
}
.wu-year__day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2px;
    height: 20px;
    padding: 0 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    color: var(--ink);
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    overflow: hidden;
}
a.wu-year__day:hover {
    border-color: var(--ink);
}
.wu-year__day:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.wu-year__wd {
    color: var(--ink-muted);
}
.wu-year__day--weekend .wu-year__wd {
    color: var(--ink);
    font-weight: 700;
}
.wu-year__letter {
    font-weight: 700;
}
.wu-year__day--open {
    background: color-mix(in srgb, var(--yr, var(--line)) 40%, var(--surface));
}
.wu-year__day--pale {
    background: color-mix(in srgb, var(--yr, var(--line)) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--yr, var(--line)) 40%, var(--surface));
}
.wu-year__day--closed {
    background: repeating-linear-gradient(135deg, var(--sunken) 0 3px, var(--line-strong) 3px 4px);
}
.wu-year__day--closed .wu-year__letter, .wu-year__day--closed .wu-year__wd {
    padding: 0 1px;
    border-radius: 2px;
    background: var(--surface);
}
.wu-year__day--unplanned {
    border: 1px dashed var(--line-strong);
}
.wu-year__day--weekend.wu-year__day--unplanned {
    background: var(--sunken);
}
.wu-year__day--past {
    filter: saturate(.35);
}
.wu-year__day--past .wu-year__letter, .wu-year__day--past .wu-year__wd {
    color: var(--ink-muted);
    font-weight: 400;
}
.wu-year__day--today {
    outline: 2px solid var(--ink);
    outline-offset: 1px;
}
.wu-year__swatch.wu-year__day--today {
    outline-offset: -2px;
}
.wu-year__list > summary {
    cursor: pointer;
    color: var(--sky);
    font-size: 14px;
    font-weight: 600;
}
.wu-year__runs {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 20px;
}
.wu-year__runs li, .wu-year__runs a {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.wu-year__runs a {
    color: var(--ink);
    text-decoration: none;
}
.wu-year__runs a:hover {
    text-decoration: underline;
}
.wu-year__phone {
    display: none;
}
.wu-year__phonetitle {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}
@media (max-width: 1023.98px) {
    .wu-year__grid, .wu-year__list, .wu-year__legend {
        display: none;
    }
    .wu-year__phone {
        display: block;
    }
}

/*
 * SeasonTable (UX concept 9.6 "Zeitpläne des Jahres"; new with v0.16): a row per schedule on two lines, letter and
 * colour, name and period in place, the opening hours below with "Ändern"; the open row shows the WindowEditor under
 * it. Rows stack where the table's width doesn't fit (container query).
 */
.wu-season__titles {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wu-season__lead {
    margin: 0;
    font-size: 14px;
    color: var(--ink-muted);
}
.wu-season__table {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    container-type: inline-size;
    min-width: 0;
}
/*
 * The heads, the list, its items, rows and editors share the columns of one grid (subgrid): a column is as wide as
 * its widest head or field, so a long head ("Kennung") never runs into the next one.
 */
.wu-season__grid {
    display: grid;
    grid-template-columns: minmax(32px, auto) minmax(140px, 1fr) auto minmax(112px, auto) minmax(120px, auto) auto;
    gap: var(--space-3);
}
.wu-season__colhead, .wu-season__list, .wu-season__item, .wu-season__row, .wu-season__editor {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    row-gap: 0;
}
.wu-season__colhead, .wu-season__row {
    grid-template-areas: "mark name period days state actions" ". windows windows windows windows .";
    row-gap: var(--space-2);
    align-items: center;
}
.wu-season__colhead {
    grid-template-areas: "mark name period days state actions";
    padding: 0 var(--space-4);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-subtle);
}
.wu-season__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface);
}
.wu-season__item + .wu-season__item {
    border-top: 1px solid var(--line);
}
.wu-season__item--nested {
    background: var(--paper);
    border-top-style: dashed;
}
/* Its rows' menus leave the list, so it can't clip: the items at its edge take its inner radius (see Card). */
.wu-season__item:first-child {
    border-radius: var(--radius-md-inner) var(--radius-md-inner) 0 0;
}
.wu-season__item:last-child, .wu-season__item:last-child > .wu-season__editor {
    border-radius: 0 0 var(--radius-md-inner) var(--radius-md-inner);
}
.wu-season__item:only-child {
    border-radius: var(--radius-md-inner);
}
.wu-season__item:focus-visible {
    outline: none;
    box-shadow: inset var(--focus-ring);
}
.wu-season__item:target {
    box-shadow: inset 4px 0 0 var(--sky);
}
.wu-season__row {
    padding: var(--space-3) var(--space-4);
    font-size: 14px;
}
.wu-season__mark {
    grid-area: mark;
}
.wu-season__swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--yr) 40%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--yr) 70%, var(--surface));
    color: var(--ink);
    font-weight: 700;
}
.wu-season__item--removed .wu-season__swatch {
    background: var(--sunken);
    border-color: var(--line);
}
.wu-season__name {
    grid-area: name;
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}
.wu-season__item--nested .wu-season__name {
    padding-left: var(--space-4);
}
.wu-season__nesticon {
    margin-top: 12px;
    color: var(--sky);
    flex: none;
}
.wu-season__namebox {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
    flex: 1;
}
.wu-season__nameinput {
    width: 100%;
    height: var(--control-sm);
    font-size: 14px;
}
.wu-season__instead, .wu-season__shared {
    font-size: 13px;
    color: var(--sky);
}
.wu-season__fielderror, .wu-season__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    font-size: 13px;
    line-height: 18px;
    color: var(--red);
}
.wu-season__error {
    grid-column: 2 / -1;
    padding: 0 var(--space-4) var(--space-3) 0;
}
.wu-season__error .wu-icon {
    flex: none;
    margin-top: 1px;
}
.wu-season__period {
    grid-area: period;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    min-width: 0;
}
.wu-season__period .wu-field {
    flex: 0 1 184px;
    min-width: 0;
}
.wu-season__period .wu-datefield .wu-input {
    width: 184px;
}
.wu-season__dash {
    margin-top: 6px;
    color: var(--ink-muted);
}
.wu-season__struck {
    color: var(--ink-muted);
}
.wu-season__windows {
    grid-area: windows;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    min-width: 0;
}
.wu-season__summary--closed {
    color: var(--ink-muted);
}
.wu-season__taken {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: 13px;
    color: var(--ink-muted);
}
.wu-season__taken .wu-icon {
    color: var(--sky);
}
.wu-season__days {
    grid-area: days;
    color: var(--ink-muted);
}
.wu-season__dayswarn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--amber-ink);
    font-weight: 600;
}
.wu-season__state {
    grid-area: state;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
}
.wu-season__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-1);
}
.wu-season__editor {
    row-gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-4);
    border-top: 1px dashed var(--line);
    background: var(--paper);
}
.wu-season__editor > * {
    grid-column: 2 / -1;
}
/* The kind, "Geöffnet" or "Geschlossen", as a RadioCard whose two options say what they mean. */
.wu-season__kind {
    max-width: 720px;
}
.wu-season__editor [data-wu="season-windows"][hidden] {
    display: none;
}
@container (max-width: 920px) {
    .wu-season__colhead {
        display: none;
    }
    .wu-season__grid, .wu-season__list, .wu-season__item {
        display: block;
    }
    .wu-season__row {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        grid-template-areas: "mark name actions" ". period period" ". windows windows" ". days days" ". state state";
    }
    .wu-season__editor {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
    }
    .wu-season__editor, .wu-season__error {
        padding-left: var(--space-4);
    }
}

/* ===== the operator console (ADR 0013): the strip naming the environment on every page ===== */
.wu-envbar {
    display: block;
    padding: 2px var(--space-4);
    font: 600 12px/18px var(--font-sans);
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}
.wu-envbar--production {
    background: var(--red);
    color: var(--on-red);
}
.wu-envbar--test {
    background: var(--sky-soft);
    color: var(--ink);
}
.wu-console-brand {
    font: 600 16px/24px var(--font-display);
    color: var(--ink);
}
/* whookup's support in a business's admin (ADR 0013): a fixed banner in a colour the admin uses nowhere else. */
.wu-supportbar {
    --support: #5b21b6;
    position: sticky;
    top: 0;
    z-index: var(--z-toast);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    justify-content: center;
    padding: var(--space-2) var(--space-4);
    background: var(--support);
    color: #fff;
    font: 600 14px/20px var(--font-sans);
}
.wu-supportbar__end {
    display: inline;
}
.wu-supportbar__link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}