/* FirstPitch design tokens and the UI kit behind Components/Ui.

   A dark navy sidebar, a cool grey-blue workspace and white cards. Orange is the one accent: the
   bright tone marks the brand and active states, the deeper ones carry white text or sit as text
   on white. The pastel tints belong to the overview tiles and status markers, nothing else. */

@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("fonts/InstrumentSans-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Instrument Sans";
    font-style: normal;
    font-weight: 400 700;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("fonts/InstrumentSans-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Icons are ligatures: <span class="icon">mail</span>. "block" keeps the ligature names from
   flashing up as words while the font loads. */
@font-face {
    font-family: "Material Symbols Outlined";
    font-style: normal;
    font-weight: 100 700;
    font-display: block;
    src: url("fonts/MaterialSymbolsOutlined.woff2") format("woff2");
}

:root {
    /* Surfaces and text */
    --wd-paper: #eef2f7;
    --wd-sheet: #ffffff;
    --wd-sunken: #f6f8fb;
    --wd-ink: #1d2433;
    --wd-graphite: #5f6779;
    --wd-pencil: #939bae;
    --wd-rule: #e2e7ee;
    --wd-rule-soft: #eef1f5;
    --wd-rule-strong: #d3dae4;

    /* Sidebar */
    --wd-navy: #0b1a3d;
    --wd-navy-raised: #15274f;
    --wd-navy-text: #c3cbe0;
    --wd-navy-muted: #7582a3;

    /* Accent. The bright orange is decorative only; white text goes on the strong tone (4.5:1). */
    --wd-accent: #ff5a1f;
    --wd-accent-strong: #d4430c;
    --wd-accent-hover: #b8390a;
    --wd-accent-text: #c13a09;
    --wd-accent-wash: #fff1ea;
    --wd-accent-ring: rgb(212 67 12 / 0.18);

    /* Tints for the overview tiles and status markers */
    --wd-tint-blue: #e0f0ff;
    --wd-tint-blue-ink: #1a62b0;
    --wd-tint-yellow: #fff5d6;
    --wd-tint-yellow-ink: #8a5a00;
    --wd-tint-peach: #ffe6dc;
    --wd-tint-peach-ink: #c13a09;
    --wd-tint-lavender: #efe2ff;
    --wd-tint-lavender-ink: #6b2bc4;

    /* Status */
    --wd-ok: #16794a;
    --wd-ok-wash: #e3f6ea;
    --wd-warn: #8a5a00;
    --wd-warn-wash: #fff3d1;
    --wd-bad: #b42323;
    --wd-bad-wash: #fde8e8;
    --wd-info: #1a62b0;
    --wd-info-wash: #e4f0fd;
    --wd-neutral: #4b5467;
    --wd-neutral-wash: #eef1f5;

    --wd-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wd-mono: ui-monospace, "Cascadia Code", "Consolas", monospace;
    --wd-radius-control: 8px;
    --wd-radius-sheet: 12px;
    --wd-shadow-card: 0 1px 2px rgb(16 24 40 / 0.05), 0 1px 3px rgb(16 24 40 / 0.04);
    --wd-shadow-float: 0 24px 64px rgb(11 26 61 / 0.22), 0 2px 8px rgb(11 26 61 / 0.08);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--wd-sans);
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--wd-ink);
    background: var(--wd-paper);
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
    line-height: 1.25;
}

h1:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--wd-accent-strong);
    outline-offset: 2px;
}

a {
    color: var(--wd-accent-text);
}

code,
.mono {
    font-family: var(--wd-mono);
    font-size: 0.875em;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Icons ------------------------------------------------------------------------------ */

.icon {
    flex: none;
    display: inline-block;
    width: 1em;
    overflow: hidden;
    font-family: "Material Symbols Outlined";
    font-weight: normal;
    font-style: normal;
    font-size: 1.25rem;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    direction: ltr;
    font-feature-settings: "liga";
    font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

/* ---- Page frame ------------------------------------------------------------------------- */

.page {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 1440px;
    padding: 1.75rem 2rem 3rem;
}

.page--narrow {
    max-width: 920px;
}

@media (max-width: 720px) {
    .page {
        gap: 1.25rem;
        padding: 1.25rem 1rem 2rem;
    }
}

.card {
    padding: 1.25rem 1.5rem 1.5rem;
    border-radius: var(--wd-radius-sheet);
    background: var(--wd-sheet);
    box-shadow: var(--wd-shadow-card);
}

/* A card that holds a table edge to edge; only its head keeps the padding. */
.card--table {
    padding: 0;
    overflow: hidden;
}

.card--table > .card__head {
    margin: 0;
    padding: 1.125rem 1.5rem 1rem;
}

.card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1.25rem;
}

.card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 650;
    color: var(--wd-ink);
}

.card__subtitle {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    color: var(--wd-graphite);
}

.fine-print {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--wd-graphite);
}

.muted {
    color: var(--wd-graphite);
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.stack--tight {
    gap: 0.5rem;
}

.cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.125rem 1.25rem;
}

.form-grid > .span-all {
    grid-column: 1 / -1;
}

@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.loading {
    display: grid;
    place-items: center;
    padding: 4rem 0;
}

/* ---- Buttons ---------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 2.375rem;
    padding: 0 1rem;
    border: 1px solid transparent;
    border-radius: var(--wd-radius-control);
    background: none;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    color: var(--wd-ink);
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn .icon {
    font-size: 1.125rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn[aria-busy="true"] {
    opacity: 0.8;
    cursor: progress;
}

.btn--primary {
    background: var(--wd-accent-strong);
    color: #fff;
}

.btn--primary:hover:not(:disabled) {
    background: var(--wd-accent-hover);
}

.btn--secondary {
    border-color: var(--wd-rule-strong);
    background: var(--wd-sheet);
}

.btn--secondary:hover:not(:disabled) {
    border-color: var(--wd-pencil);
    background: var(--wd-sunken);
}

.btn--ghost {
    color: var(--wd-graphite);
}

.btn--ghost:hover:not(:disabled) {
    background: rgb(29 36 51 / 0.06);
    color: var(--wd-ink);
}

.btn--danger {
    background: var(--wd-bad);
    color: #fff;
}

.btn--danger:hover:not(:disabled) {
    background: #951b1b;
}

/* Icon-only destructive actions in table rows. */
.btn--danger-ghost {
    color: var(--wd-graphite);
}

.btn--danger-ghost:hover:not(:disabled) {
    background: var(--wd-bad-wash);
    color: var(--wd-bad);
}

.btn--sm {
    height: 2rem;
    padding: 0 0.75rem;
    font-size: 0.8125rem;
}

.btn--icon {
    width: 2.375rem;
    padding: 0;
}

.btn--sm.btn--icon {
    width: 2rem;
}

.btn--icon .icon {
    font-size: 1.25rem;
}

.btn-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
}

.row-actions {
    display: inline-flex;
    gap: 0.125rem;
}

/* ---- Badges and chips ------------------------------------------------------------------- */

.badge {
    --badge-bg: var(--wd-neutral-wash);
    --badge-ink: var(--wd-neutral);
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    height: 1.5rem;
    padding: 0 0.625rem;
    border-radius: 999px;
    background: var(--badge-bg);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--badge-ink);
}

.badge--dot::before {
    content: "";
    flex: none;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
}

.badge--info {
    --badge-bg: var(--wd-info-wash);
    --badge-ink: var(--wd-info);
}

.badge--success {
    --badge-bg: var(--wd-ok-wash);
    --badge-ink: var(--wd-ok);
}

.badge--warning {
    --badge-bg: var(--wd-warn-wash);
    --badge-ink: var(--wd-warn);
}

.badge--danger {
    --badge-bg: var(--wd-bad-wash);
    --badge-ink: var(--wd-bad);
}

.badge--accent {
    --badge-bg: var(--wd-accent-wash);
    --badge-ink: var(--wd-accent-text);
}

/* A code or tag: square-ish, monospaced digits, no status dot. */
.chip {
    display: inline-flex;
    align-items: center;
    height: 1.375rem;
    padding: 0 0.5rem;
    border-radius: 6px;
    background: var(--wd-rule-soft);
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wd-neutral);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Two or three mutually exclusive views; the pressed option is the one shown. */
.segmented {
    flex: none;
    display: inline-flex;
    padding: 3px;
    border-radius: 8px;
    background: var(--wd-paper);
}

.segmented__option {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3125rem 0.875rem;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wd-graphite);
    cursor: pointer;
}

.segmented__option .icon {
    font-size: 1.125rem;
}

.segmented__option:hover:not(:disabled) {
    color: var(--wd-ink);
}

.segmented__option:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.segmented__option[aria-pressed="true"] {
    background: var(--wd-sheet);
    color: var(--wd-accent-text);
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.1);
}

/* ---- Alerts ----------------------------------------------------------------------------- */

.alert {
    --alert-bg: var(--wd-info-wash);
    --alert-ink: var(--wd-info);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--wd-radius-control);
    background: var(--alert-bg);
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--wd-ink);
}

.alert > .icon {
    margin-top: 0.0625rem;
    color: var(--alert-ink);
}

.alert__content {
    flex: 1;
    min-width: 0;
}

.alert__title {
    margin: 0 0 0.125rem;
    font-weight: 650;
    color: var(--alert-ink);
}

.alert__content p {
    margin: 0;
}

.alert__content p + p {
    margin-top: 0.375rem;
}

.alert__close {
    flex: none;
    margin: -0.375rem -0.5rem -0.375rem 0;
}

.alert--success {
    --alert-bg: var(--wd-ok-wash);
    --alert-ink: var(--wd-ok);
}

.alert--warning {
    --alert-bg: var(--wd-warn-wash);
    --alert-ink: var(--wd-warn);
}

.alert--danger {
    --alert-bg: var(--wd-bad-wash);
    --alert-ink: var(--wd-bad);
}

.alert--accent {
    --alert-bg: var(--wd-accent-wash);
    --alert-ink: var(--wd-accent-text);
}

.alert--neutral {
    --alert-bg: var(--wd-sunken);
    --alert-ink: var(--wd-graphite);
}

/* ---- Form fields ------------------------------------------------------------------------ */

.field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.field__label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--wd-ink);
}

.field__optional {
    font-weight: 400;
    color: var(--wd-graphite);
}

.field__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--wd-graphite);
}

.input {
    width: 100%;
    height: 2.5rem;
    padding: 0 0.75rem;
    border: 1px solid var(--wd-rule-strong);
    border-radius: var(--wd-radius-control);
    background: var(--wd-sheet);
    font: inherit;
    font-size: 0.9375rem;
    color: var(--wd-ink);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.input::placeholder {
    color: var(--wd-pencil);
}

.input:hover {
    border-color: var(--wd-pencil);
}

.input:focus {
    outline: none;
    border-color: var(--wd-accent-strong);
    box-shadow: 0 0 0 3px var(--wd-accent-ring);
}

.input:disabled,
.input[readonly] {
    background: var(--wd-sunken);
}

.input.invalid {
    border-color: var(--wd-bad);
}

textarea.input {
    height: auto;
    min-height: 5.5rem;
    padding: 0.5625rem 0.75rem;
    line-height: 1.55;
    resize: vertical;
}

select.input {
    appearance: none;
    padding-right: 2.25rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%235f6779' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
    cursor: pointer;
}

.input--mono {
    font-family: var(--wd-mono);
    font-size: 0.8125rem;
}

.input--code {
    min-height: 24rem;
    font-family: var(--wd-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre;
    tab-size: 2;
}

.validation-message {
    font-size: 0.8125rem;
    color: var(--wd-bad);
}

.validation-errors {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.8125rem;
    color: var(--wd-bad);
}

.search-input {
    position: relative;
    min-width: 0;
}

.search-input > .icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    color: var(--wd-pencil);
    pointer-events: none;
}

.search-input > .input {
    padding-left: 2.5rem;
}

.checkbox {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.checkbox input,
.check {
    flex: none;
    width: 1.0625rem;
    height: 1.0625rem;
    margin: 0.125rem 0 0;
    accent-color: var(--wd-accent-strong);
    cursor: pointer;
}

/* A radio group laid out as cards, each option with a line of explanation. */
.choices {
    display: grid;
    gap: 0.5rem;
}

.choice {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 0.875rem;
    border: 1px solid var(--wd-rule-strong);
    border-radius: var(--wd-radius-control);
    cursor: pointer;
}

.choice:has(input:checked) {
    border-color: var(--wd-accent-strong);
    background: var(--wd-accent-wash);
}

.choice input {
    margin: 0.1875rem 0 0;
    accent-color: var(--wd-accent-strong);
}

.choice__label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
}

.choice__hint {
    display: block;
    font-size: 0.8125rem;
    color: var(--wd-graphite);
}

/* ---- Switch ----------------------------------------------------------------------------- */

.switch {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.switch__input {
    appearance: none;
    position: relative;
    flex: none;
    width: 2.25rem;
    height: 1.25rem;
    margin: 0.0625rem 0 0;
    border-radius: 999px;
    background: #c9d1dd;
    cursor: pointer;
    transition: background-color 150ms ease;
}

.switch__input::before {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgb(16 24 40 / 0.25);
    transition: transform 150ms ease;
}

.switch__input:checked {
    background: var(--wd-accent-strong);
}

.switch__input:checked::before {
    transform: translateX(1rem);
}

.switch__input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.switch__text {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.switch__label {
    font-weight: 600;
}

.switch__hint {
    font-size: 0.8125rem;
    color: var(--wd-graphite);
}

/* ---- Tables ----------------------------------------------------------------------------- */

.table-scroll {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.table th {
    padding: 0.625rem 1rem;
    border-top: 1px solid var(--wd-rule-soft);
    border-bottom: 1px solid var(--wd-rule);
    background: var(--wd-sunken);
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    color: var(--wd-graphite);
}

.table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wd-rule-soft);
    vertical-align: middle;
}

.table th:first-child,
.table td:first-child {
    padding-left: 1.5rem;
}

.table th:last-child,
.table td:last-child {
    padding-right: 1.5rem;
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr:hover td {
    background: #fafbfd;
}

.table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.table .center {
    text-align: center;
}

.table .actions {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.table .strong {
    font-weight: 600;
}

.table .secondary {
    display: block;
    margin-top: 0.125rem;
    font-size: 0.8125rem;
    color: var(--wd-graphite);
}

.sort {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin: -0.25rem -0.375rem;
    padding: 0.25rem 0.375rem;
    border: 0;
    border-radius: 6px;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.sort:hover {
    background: rgb(29 36 51 / 0.05);
    color: var(--wd-ink);
}

.sort .icon {
    font-size: 1rem;
    opacity: 0;
}

.sort:hover .icon {
    opacity: 0.45;
}

th[aria-sort] .sort {
    color: var(--wd-ink);
}

th[aria-sort] .sort .icon {
    opacity: 1;
    color: var(--wd-accent-text);
}

/* ---- Empty state ------------------------------------------------------------------------ */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--wd-graphite);
}

.empty > .icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.5rem;
    border-radius: 50%;
    background: var(--wd-rule-soft);
    font-size: 1.5rem;
    line-height: 3rem;
    text-align: center;
    color: var(--wd-pencil);
}

.empty__title {
    margin: 0;
    font-weight: 600;
    color: var(--wd-ink);
}

.empty p {
    max-width: 44ch;
    margin: 0;
    font-size: 0.875rem;
}

.empty .btn {
    margin-top: 0.75rem;
}

/* ---- Progress and spinner --------------------------------------------------------------- */

.progress {
    height: 0.375rem;
    overflow: hidden;
    border-radius: 999px;
    background: var(--wd-rule-soft);
}

.progress__bar {
    height: 100%;
    border-radius: inherit;
    background: var(--wd-accent-strong);
    transition: width 300ms ease;
}

.progress--ok .progress__bar {
    background: var(--wd-ok);
}

.progress--warn .progress__bar {
    background: #d69300;
}

.progress--bad .progress__bar {
    background: var(--wd-bad);
}

.spinner {
    display: inline-block;
    flex: none;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: wd-spin 700ms linear infinite;
}

.spinner--lg {
    width: 2rem;
    height: 2rem;
    border-width: 3px;
    color: var(--wd-accent-strong);
}

@keyframes wd-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---- Modal ------------------------------------------------------------------------------ */

.modal {
    width: min(var(--modal-width, 560px), calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 14px;
    background: var(--wd-sheet);
    box-shadow: var(--wd-shadow-float);
    color: var(--wd-ink);
}

.modal[open] {
    display: flex;
    flex-direction: column;
    animation: wd-modal-in 160ms ease-out;
}

.modal::backdrop {
    background: rgb(11 26 61 / 0.45);
}

.modal--sm {
    --modal-width: 440px;
}

.modal--lg {
    --modal-width: 720px;
}

.modal--xl {
    --modal-width: 1040px;
}

.modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.25rem 0 1.5rem;
}

.modal__title {
    margin: 0.25rem 0 0;
    font-size: 1.125rem;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.modal__body {
    min-height: 0;
    padding: 1.25rem 1.5rem 1.5rem;
    overflow: auto;
}

.modal__body > form,
.modal__stack {
    display: flex;
    flex-direction: column;
    gap: 1.125rem;
}

.modal__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.375rem;
}

@keyframes wd-modal-in {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
}

/* ---- Toasts ----------------------------------------------------------------------------- */

.toasts {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: min(380px, calc(100vw - 2.5rem));
    margin: 0;
    padding: 0;
    list-style: none;
}

.toast {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 0.75rem 0.875rem 1rem;
    border-radius: 10px;
    background: var(--wd-navy);
    box-shadow: var(--wd-shadow-float);
    color: #fff;
    animation: wd-toast-in 200ms ease-out;
}

.toast > .icon {
    margin-top: 0.0625rem;
    color: #8ab8ff;
}

.toast--success > .icon {
    color: #5fd497;
}

.toast--danger > .icon {
    color: #ff8f86;
}

.toast--warning > .icon {
    color: #ffc95c;
}

.toast__content {
    flex: 1;
    min-width: 0;
}

.toast__title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.toast__detail {
    margin: 0.125rem 0 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--wd-navy-text);
}

.toast__close {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    margin: -0.25rem 0;
    border: 0;
    border-radius: 6px;
    background: none;
    color: var(--wd-navy-muted);
    cursor: pointer;
}

.toast__close:hover {
    background: var(--wd-navy-raised);
    color: #fff;
}

.toast__close .icon {
    font-size: 1.125rem;
}

@keyframes wd-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
}

/* ---- Blazor ----------------------------------------------------------------------------- */

.blazor-error-boundary {
    padding: 1rem 1.25rem;
    border-radius: var(--wd-radius-sheet);
    background: var(--wd-bad-wash);
    color: #7f1d1d;
}

.blazor-error-boundary::after {
    content: "Při zobrazení této části došlo k chybě.";
}

@media (prefers-reduced-motion: reduce) {
    *:not(.spinner),
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---- Confirmation text ------------------------------------------------------------------ */

.confirm__message {
    margin: 0;
    line-height: 1.55;
    color: var(--wd-ink);
}