/*
 * whookup admin: the design system "WhookUp" (Artifact JnzZXMxamdiAiL3g4a52S9) for server-rendered pages.
 * Generated from tokens.json and components/bundle.css (without the .wu-demo preview scaffolding), then
 * the additions server rendering needs at the end. Keep the class names unchanged (ADR 0011).
 */
/* ===== tokens: the values of tokens.json (light theme on :root, dark theme below) ===== */
@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;
    --owl-ears: 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;
    --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;
    --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: #fdf4e7;
        --owl-letters: #eef1f6;
        --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;
    }
}
[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: #fdf4e7;
    --owl-letters: #eef1f6;
    --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);
    stroke: var(--owl);
    stroke-width: 3.2;
    stroke-linejoin: round;
    paint-order: stroke;
}
.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: var(--owl);
}
.wu-logo--tile-navy .wu-logo__tile {
    fill: var(--owl);
}
.wu-logo--tile-navy .wu-logo__ears {
    fill: var(--cream);
}
.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);
}

/* 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);
    }
}

/* 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 */
.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 > .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;
}

/* BottomNav */
.wu-bottomnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-nav);
    padding-bottom: env(safe-area-inset-bottom, 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 var(--space-2) 0 var(--space-4);
}
.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__head {
        padding-left: var(--space-4);
    }
    .wu-panel__body {
        padding: var(--space-4);
    }
    .wu-panel__foot {
        padding-inline: var(--space-4);
    }
    .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) var(--space-4);
    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__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) var(--space-4)
            calc(var(--bottomnav-height) + var(--space-6) + env(safe-area-inset-bottom, 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);
}
.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;
}

/*
 * ===== 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;
}
.wu-occ__fill {
    position: absolute;
    inset: 0 auto 0 0;
    display: flex;
    justify-content: flex-end;
    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;
}
.wu-summary__items {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1) 0;
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}
.wu-summary__item {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.wu-summary__item + .wu-summary__item::before {
    content: "\00b7";
    color: var(--ink-subtle);
    margin: 0 var(--space-3);
}
.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__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);
}

/* 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);
}
.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));
    }
}

/* 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 {
    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;
}
.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__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);
}
@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;
}

/* 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);
}
.wu-field__optional {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-subtle);
}
.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;
}
.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;
}

/* 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;
    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;
}
.wu-radiocard--card {
    padding: var(--space-3) var(--space-4);
    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);
}
.wu-radiocard--card.wu-radiocard--on {
    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;
}
.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--on .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--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%;
    }
}

/* 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, .wu-schedlist__children {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wu-schedlist__list {
    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__children {
    border-top: 1px dashed var(--line);
    background: var(--paper);
}
.wu-schedlist__children .wu-schedlist__item + .wu-schedlist__item {
    border-top: 1px dashed var(--line);
}
.wu-schedlist__item:last-child > .wu-schedlist__children {
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.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 */
.wu-qrscanner {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: 100%;
    max-width: var(--portal-max);
}
.wu-qrscanner__finder {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 100%;
    width: 100%;
    max-height: 420px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--nav);
    color: var(--nav-ink-active);
    display: grid;
    place-items: center;
}
.wu-qrscanner__video {
    position: absolute;
    inset: 0;
}
.wu-qrscanner__video > video, .wu-qrscanner__video > img, .wu-qrscanner__video > canvas {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wu-qrscanner__frame {
    position: absolute;
    inset: 18%;
    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, .wu-qrscanner__finder--denied .wu-qrscanner__corner {
    border-color: var(--nav-ink);
    opacity: .5;
}
.wu-qrscanner__finder--found .wu-qrscanner__corner, .wu-qrscanner__finder--notFound .wu-qrscanner__corner {
    border-color: var(--nav-ink-active);
}
.wu-qrscanner__badge {
    position: relative;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
}
.wu-qrscanner__badge--found {
    background: var(--green-soft);
    color: var(--green);
}
.wu-qrscanner__badge--notFound {
    background: var(--red-soft);
    color: var(--red);
}
.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__start {
    position: relative;
    display: grid;
    place-items: center;
    color: var(--nav-ink);
}
.wu-qrscanner__hint {
    position: absolute;
    left: var(--space-4);
    right: var(--space-4);
    bottom: var(--space-4);
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 22px;
    font-weight: 600;
    color: var(--nav-ink-active);
}
.wu-qrscanner__tools {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    display: flex;
    gap: var(--space-2);
}
.wu-qrscanner__tool.wu-iconbtn {
    background: var(--nav-active);
    color: var(--nav-ink-active);
    width: var(--control-lg);
    height: var(--control-lg);
}
.wu-qrscanner__tool.wu-iconbtn:focus-visible {
    box-shadow: var(--focus-ring-nav);
}
.wu-qrscanner__msg {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
}
.wu-qrscanner__msg .wu-icon {
    margin-top: 1px;
}
.wu-qrscanner__msg--found {
    background: var(--green-soft);
    color: var(--green);
}
.wu-qrscanner__msg--error {
    background: var(--red-soft);
    color: var(--red);
}
.wu-qrscanner__msg--denied {
    background: var(--amber-soft);
    color: var(--ink);
    font-weight: 400;
}
.wu-qrscanner__msg--denied .wu-icon {
    color: var(--amber-ink);
}
.wu-qrscanner__manual {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.wu-qrscanner__label {
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
}
.wu-qrscanner__row {
    display: flex;
    gap: var(--space-2);
}
.wu-qrscanner__input {
    flex: 1;
    min-width: 0;
    height: var(--control-lg);
    padding: 0 var(--space-3);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.wu-qrscanner__input::placeholder {
    color: var(--ink-subtle);
    font-weight: 500;
}
.wu-qrscanner__input:focus-visible {
    outline: none;
    border-color: var(--focus);
    box-shadow: var(--focus-ring);
}
.wu-qrscanner__mhint {
    font-size: 13px;
    line-height: 18px;
    color: var(--ink-muted);
}

/* 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);
}
.wu-portalfooter__system {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.wu-portalfooter__system > span {
    font-weight: 600;
    color: var(--ink);
}

/* 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;
}

/* 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: var(--space-2);
    left: var(--space-2);
    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: 76px;
    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);
}
.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;
}
.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;
}
.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;
}
@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. */
.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;
    }
}

/*
 * 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);
}

/* 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 of a form (admin.js, module live-parts) only marks what the server renders again: no box of its own. */
.wu-live {
    display: contents;
}

/* 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);
}
.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) var(--space-4) 0;
    overflow-x: auto;
}
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: 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 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;
}
.wu-portalfooter__mark .wu-logo {
    width: auto;
    height: 16px;
}
/* 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);
}
/* 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);
}
.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__table {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    container-type: inline-size;
    min-width: 0;
}
.wu-season__colhead, .wu-season__row {
    display: grid;
    grid-template-columns: 32px minmax(140px, 1fr) auto 112px minmax(120px, auto) auto;
    grid-template-areas: "mark name period days state actions" ". windows windows windows windows .";
    gap: var(--space-2) var(--space-3);
    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__colhead > :nth-child(3) {
    width: 384px;
}
.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;
}
.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 {
    padding: 0 var(--space-4) var(--space-3) calc(var(--space-4) + 32px + var(--space-3));
}
.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 {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4) var(--space-4) calc(var(--space-4) + 32px + var(--space-3));
    border-top: 1px dashed var(--line);
    background: var(--paper);
}
.wu-season__kind {
    align-self: flex-start;
}
.wu-season__kind .wu-segmented__opt:has(input:checked) {
    background: var(--surface-raised);
    color: var(--ink);
    box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.wu-season__kind .wu-segmented__opt:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
}
.wu-season__closedhint {
    margin: 0;
    font-size: 14px;
    color: var(--ink-muted);
}
.wu-season__closedhint[hidden], .wu-season__editor [data-wu="season-windows"][hidden] {
    display: none;
}
@container (max-width: 920px) {
    .wu-season__colhead {
        display: none;
    }
    .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, .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;
}