:root {
    --md-ref-typeface-brand: 'Roboto', system-ui, sans-serif;
    --md-ref-typeface-plain: 'Roboto', system-ui, sans-serif;

    /* Material Design 3 baseline colour roles (light scheme). */
    --md-sys-color-primary: #4f5bd5;
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: #e0e0ff;
    --md-sys-color-on-primary-container: #05006c;
    --md-sys-color-secondary-container: #e1e0f9;
    --md-sys-color-on-secondary-container: #191a2c;
    --md-sys-color-surface: #fbf8ff;
    --md-sys-color-surface-container-lowest: #ffffff;
    --md-sys-color-surface-container: #efedf4;
    --md-sys-color-on-surface: #1b1b21;
    --md-sys-color-on-surface-variant: #46464f;
    --md-sys-color-outline: #777680;
    --md-sys-color-outline-variant: #c7c5d0;
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    --app-color-success-container: #d7f5dc;
    --app-color-on-success-container: #0b3d18;
    --app-color-warning-container: #ffe9c2;
    --app-color-on-warning-container: #4a2f00;
}

[hidden] {
    display: none !important;
}

body {
    margin: 0;
    font-family: var(--md-ref-typeface-plain);
    background: var(--md-sys-color-surface);
    color: var(--md-sys-color-on-surface);
}

/* Authentication pages: login, password reset. */
.auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 16px;
    padding: 24px 16px;
    box-sizing: border-box;
    background: var(--md-sys-color-surface-container);
}

.auth__card {
    width: min(100%, 440px);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 24px;
    border-radius: 28px;
    background: var(--md-sys-color-surface-container-lowest);
}

.auth__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.auth__header h1,
.auth__card p {
    margin: 0;
}

.auth__logo {
    --md-icon-size: 28px;
    padding: 12px;
    border-radius: 50%;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.auth__subtitle {
    color: var(--md-sys-color-on-surface-variant);
}

.auth__form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.auth__form md-outlined-text-field {
    width: 100%;
}

.auth__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 20px 16px;
}

.auth__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.auth__actions--end {
    justify-content: flex-end;
}

.auth__footer {
    font-size: 0.875rem;
}

.auth__alert {
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.auth__alert--error {
    background: var(--md-sys-color-error-container);
    color: var(--md-sys-color-on-error-container);
}

.auth__alert--success {
    background: var(--app-color-success-container);
    color: var(--app-color-on-success-container);
}

/* Application shell. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.link {
    color: var(--md-sys-color-primary);
    text-decoration: none;
}

.link:hover,
.link:focus-visible {
    text-decoration: underline;
}

.impersonation {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 8px 24px;
    background: var(--md-sys-color-secondary-container);
    color: var(--md-sys-color-on-secondary-container);
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 24px;
    background: var(--md-sys-color-surface-container-lowest);
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.topbar__brand {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 1.375rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
}

.topbar__brand md-icon {
    color: var(--md-sys-color-primary);
}

.topbar__user {
    display: flex;
    align-items: center;
    gap: 8px 16px;
}

.topbar__identity {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.25;
}

.topbar__name {
    font-weight: 500;
}

.topbar__groups {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
}

.page {
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px 16px 48px;
    display: grid;
    gap: 24px;
}

.footer {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 16px 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    font-size: 0.875rem;
}

.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
}

.panel {
    padding: 24px;
    border-radius: 16px;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
}

.panel h1,
.panel p {
    margin: 0;
}

.panel .auth__alert {
    margin-bottom: 16px;
}

.panel__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px 16px;
    margin-bottom: 20px;
}

.panel--narrow {
    width: min(100%, 640px);
    box-sizing: border-box;
    justify-self: center;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 12px;
    font-size: 0.875rem;
}

.form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form md-outlined-text-field {
    width: 100%;
}

.form__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.panel__subtitle {
    margin-top: 4px;
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
}

/* Client calendars. */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 16px;
    padding: 16px 8px 8px 16px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    background: var(--md-sys-color-surface);
}

.card__icon {
    padding: 8px;
    border-radius: 12px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.card__body {
    min-width: 0;
    padding-right: 8px;
}

.card__body h2 {
    margin: 0;
    overflow-wrap: anywhere;
}

.card__text {
    margin-top: 4px;
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

.card__meta {
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
}

.card__actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
}

.card__actions form {
    margin: 0;
}

.empty md-filled-button {
    margin-top: 8px;
}

/* Admin account lists (clients, administrators). */
.tabs {
    display: flex;
    gap: 8px;
    margin: -8px 0 20px;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    overflow-x: auto;
}

.tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    border-radius: 8px 8px 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
}

.tabs__tab:hover {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.tabs__tab:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: -2px;
}

.tabs__tab[aria-current='page'] {
    border-bottom-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-primary);
}

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 16px;
}

.toolbar__search {
    flex: 1 1 320px;
}

.toolbar__status {
    flex: 0 1 180px;
    min-width: 160px;
}

.clients {
    overflow-x: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
}

.clients__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 0.875rem;
    background: transparent;
}

.clients__table th,
.clients__table td {
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    text-align: left;
    vertical-align: middle;
    background: transparent;
    color: var(--md-sys-color-on-surface);
}

.clients__table th {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--md-sys-color-on-surface-variant);
    background: var(--md-sys-color-surface-container);
}

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

.clients__table tbody tr:hover td {
    background: color-mix(in srgb, var(--md-sys-color-primary) 5%, transparent);
}

.clients__name {
    font-weight: 500;
}

.clients__row--archived td:not(.clients__actions) {
    color: var(--md-sys-color-on-surface-variant);
}

.clients__table td.clients__actions {
    padding-block: 4px;
    white-space: nowrap;
    text-align: right;
}

.clients__table th.clients__actions-head {
    text-align: right;
}

.clients__actions form {
    display: inline-block;
    margin: 0;
}

.badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    background: var(--app-color-success-container);
    color: var(--app-color-on-success-container);
}

.badge--pending {
    margin-left: 8px;
    background: var(--app-color-warning-container);
    color: var(--app-color-on-warning-container);
}

.badge--muted {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface-variant);
}

.empty {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 48px 16px;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
    border: 1px dashed var(--md-sys-color-outline-variant);
    border-radius: 12px;
}

.empty md-icon {
    --md-icon-size: 40px;
}

.empty .md-typescale-title-medium {
    color: var(--md-sys-color-on-surface);
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    margin-top: 16px;
}

.pagination__summary {
    color: var(--md-sys-color-on-surface-variant);
    font-size: 0.875rem;
}

.pagination__pages {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination__link {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    box-sizing: border-box;
    padding: 0 8px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
}

a.pagination__link:hover {
    background: var(--md-sys-color-surface-container);
}

a.pagination__link:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.pagination__link[aria-current='page'] {
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.pagination__link[aria-disabled='true'] {
    opacity: 0.38;
}

.pagination__gap {
    min-width: 24px;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
}

turbo-frame[busy] .clients {
    opacity: 0.6;
    transition: opacity 150ms ease 150ms;
}

/* Below this width the table becomes a list of cards, one per client. */
@media (max-width: 720px) {
    .panel {
        padding: 16px;
    }

    .topbar {
        padding-inline: 16px;
    }

    .toolbar__status {
        flex-basis: 100%;
    }

    .clients {
        border: 0;
        overflow: visible;
    }

    .clients__table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .clients__table,
    .clients__table tbody,
    .clients__table tr,
    .clients__table td {
        display: block;
    }

    .clients__table tr {
        margin-bottom: 12px;
        padding: 8px 0;
        border: 1px solid var(--md-sys-color-outline-variant);
        border-radius: 12px;
    }

    .clients__table td {
        display: grid;
        grid-template-columns: 96px 1fr;
        gap: 8px;
        padding: 6px 16px;
        border: 0;
        overflow-wrap: anywhere;
    }

    .clients__table td[data-label]::before {
        content: attr(data-label);
        font-size: 0.75rem;
        color: var(--md-sys-color-on-surface-variant);
    }

    .clients__table td.clients__actions {
        display: block;
        text-align: right;
    }
}

/* Calendar management. */
.card__link {
    color: inherit;
    text-decoration: none;
}

.card__link:hover,
.card__link:focus-visible {
    color: var(--md-sys-color-primary);
    text-decoration: underline;
}

.card__meta .badge {
    margin-right: 6px;
}

.panel__subtitle .badge {
    margin-right: 6px;
}

.section-title {
    margin: 28px 0 4px;
}

.section-title:first-child {
    margin-top: 0;
}

.form--narrow {
    max-width: 640px;
}

.form__section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form__section legend {
    margin-bottom: 12px;
    padding: 0;
}

.form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px 16px;
}

.form__grid md-outlined-select {
    width: 100%;
    min-width: 0;
}

.form__hint {
    margin: 0 0 12px;
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
}

.form__section .form__hint {
    margin: -8px 0 0;
}

.check {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

.hours {
    display: grid;
    gap: 8px;
}

.hours__row {
    display: grid;
    grid-template-columns: repeat(var(--fields, 3), minmax(0, 1fr)) auto;
    align-items: center;
    gap: 8px 16px;
}

.hours__row md-outlined-select,
.hours__row md-outlined-text-field {
    width: 100%;
    min-width: 0;
}

.hours__empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
}

.danger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 32px;
    padding: 16px;
    border: 1px solid var(--md-sys-color-error);
    border-radius: 12px;
}

.danger h2,
.danger p,
.danger form {
    margin: 0;
}

.danger p {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
}

.danger md-outlined-button {
    --md-outlined-button-label-text-color: var(--md-sys-color-error);
    --md-outlined-button-icon-color: var(--md-sys-color-error);
    --md-outlined-button-hover-label-text-color: var(--md-sys-color-error);
    --md-outlined-button-hover-icon-color: var(--md-sys-color-error);
    --md-outlined-button-focus-label-text-color: var(--md-sys-color-error);
    --md-outlined-button-pressed-label-text-color: var(--md-sys-color-error);
    --md-outlined-button-outline-color: var(--md-sys-color-error);
}

.notice {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px 16px;
    padding: 16px;
    border-radius: 12px;
    background: var(--md-sys-color-surface-container);
}

.notice--on {
    background: var(--app-color-success-container);
    color: var(--app-color-on-success-container);
}

.notice h2,
.notice p,
.notice form {
    margin: 0;
}

.notice p {
    font-size: 0.875rem;
}

.copy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.copy__value {
    flex: 1 1 280px;
    min-width: 0;
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 8px;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
    font: 0.875rem/1.5 ui-monospace, 'Roboto Mono', Menlo, Consolas, monospace;
    overflow-x: auto;
    white-space: pre;
}

.copy--block {
    align-items: flex-start;
}

.copy--block .copy__value {
    flex-basis: 100%;
}

.howto {
    display: grid;
    grid-template-columns: minmax(120px, max-content) 1fr;
    gap: 12px 24px;
    margin: 8px 0 0;
    font-size: 0.875rem;
}

.howto dt {
    font-weight: 500;
}

.howto dd {
    margin: 0;
    color: var(--md-sys-color-on-surface-variant);
}

.preview {
    margin-top: 8px;
    border: 1px dashed var(--md-sys-color-outline);
    border-radius: 12px;
    overflow: hidden;
}

.preview iframe {
    display: block;
    width: 100%;
    height: 560px;
    border: 0;
}

/* Public booking page (standalone, or embedded in an iframe on a customer's site). */
body.standalone {
    background: var(--md-sys-color-surface-container);
}

body.embed {
    display: flow-root;
    background: transparent;
}

.public {
    box-sizing: border-box;
    max-width: 720px;
    margin: 0 auto;
    padding: 32px;
    display: grid;
    /* Three levels of spacing: 32px between steps, 16px between a step's title and its content, 8px inside a group. */
    gap: 32px;
    line-height: 1.5;
    background: var(--md-sys-color-surface-container-lowest);
}

.public__header,
.public section {
    display: grid;
    gap: 16px;
}

.public__header {
    gap: 8px;
}

.public section {
    /* A slot link jumps to #reserver: keep the step title clear of the viewport edge. */
    scroll-margin-top: 16px;
}

.standalone .public {
    margin-block: 24px;
    border-radius: 24px;
}

.embed .public {
    max-width: none;
    padding: 16px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 16px;
}

.public h1,
.public h2,
.public p {
    margin: 0;
}

.public__description {
    color: var(--md-sys-color-on-surface-variant);
}

.public__step {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
}

/* The step title on the left, the previous / next arrows on the right. */
.public__step-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.public__step > span {
    display: grid;
    place-items: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 0.875rem;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.public__step small {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant);
}

.public__step small::first-letter {
    text-transform: uppercase;
}

.public__none,
.public__required,
.public__footer {
    font-size: 0.875rem;
    color: var(--md-sys-color-on-surface-variant);
}

.public__footer {
    text-align: center;
}

/* In the text colour of the calendar's theme rather than the browser's link blue. */
.public__footer a {
    color: inherit;
}

.public__recap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
    font-weight: 500;
}

.public__recap md-icon {
    flex: none;
}

.days__pager {
    display: flex;
    gap: 4px;
}

.days__nav {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
}

a.days__nav:hover {
    background: var(--md-sys-color-surface-container);
}

.days__nav[aria-disabled='true'] {
    opacity: 0.38;
}

.days__list {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.day {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 10px 2px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    line-height: 1.3;
    color: var(--md-sys-color-on-surface);
    text-decoration: none;
}

.day__weekday,
.day__month {
    font-size: 0.75rem;
    color: var(--md-sys-color-on-surface-variant);
}

.day__number {
    font-size: 1.25rem;
    font-weight: 500;
}

a.day:hover {
    background: var(--md-sys-color-surface-container);
}

.day[aria-disabled='true'] {
    border-style: dashed;
    opacity: 0.45;
}

.day[aria-current='date'] {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary);
}

.day[aria-current='date'] span {
    color: var(--md-sys-color-on-primary);
}

.slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.slots-period {
    display: grid;
    gap: 8px;
}

.public .slots-period__label {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--md-sys-color-on-surface-variant);
}

.slot {
    display: grid;
    justify-items: center;
    align-content: center;
    box-sizing: border-box;
    /* A comfortable touch target, with or without the "places left" line. */
    min-height: 48px;
    padding: 6px 4px;
    line-height: 1.3;
    border: 1px solid var(--resa-accent-ink, var(--md-sys-color-primary));
    border-radius: 8px;
    font-weight: 500;
    color: var(--resa-accent-ink, var(--md-sys-color-primary));
    text-decoration: none;
}

.slot small {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--md-sys-color-on-surface-variant);
}

a.slot:hover {
    background: var(--md-sys-color-primary-container);
}

a.slot:focus-visible,
a.day:focus-visible,
a.days__nav:focus-visible {
    outline: 2px solid var(--md-sys-color-primary);
    outline-offset: 2px;
}

.slot[aria-current='true'] {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.slot[aria-current='true'] small {
    color: var(--md-sys-color-on-primary);
}

.slot[aria-disabled='true'] {
    border-style: dashed;
    color: var(--md-sys-color-on-surface-variant);
    opacity: 0.6;
    text-decoration: line-through;
}

.slot[aria-disabled='true'] small {
    text-decoration: none;
}

.confirmation {
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
}

.confirmation__icon {
    --md-icon-size: 48px;
    color: #1e7d32;
}

.confirmation__details {
    display: grid;
    grid-template-columns: auto auto;
    gap: 8px 24px;
    margin: 8px 0;
    padding: 16px 24px;
    border-radius: 12px;
    background: var(--md-sys-color-surface-container);
    text-align: left;
}

.confirmation__details dt {
    color: var(--md-sys-color-on-surface-variant);
}

.confirmation__details dd {
    margin: 0;
    font-weight: 500;
}

@media (max-width: 720px) {
    .hours__row {
        grid-template-columns: 1fr 1fr auto;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--md-sys-color-outline-variant);
    }

    .hours__row[style*='--fields: 3'] > :first-child {
        grid-column: 1 / -1;
    }

    .notice {
        grid-template-columns: auto 1fr;
    }

    .notice form {
        grid-column: 1 / -1;
    }

    .howto {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .howto dd {
        margin-bottom: 12px;
    }

    .public {
        padding: 20px 16px;
        gap: 28px;
    }

    /* On a phone the page is the card: edge to edge, no grey margin around it. */
    .standalone .public {
        min-height: 100dvh;
        margin-block: 0;
        border-radius: 0;
        align-content: start;
    }

    .days__list {
        gap: 4px;
    }

    .day__month {
        display: none;
    }

    /* The main action spans the screen, within reach of the thumb. */
    .public .form__actions md-filled-button {
        flex: 1;
    }
}

/* Calendar configuration form. */
.form__subsection,
.collection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form__subsection h3 {
    margin: 12px 0 0;
}

.form__subsection .form__hint,
.form__section > .form__hint {
    margin: -4px 0 0;
}

.form__section + .form__section {
    padding-top: 20px;
    border-top: 1px solid var(--md-sys-color-outline-variant);
}

.colors {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 32px;
}

.color {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.color input[type='color'] {
    width: 48px;
    height: 48px;
    padding: 2px;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: 12px;
    background: none;
    cursor: pointer;
}

.color__error {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.75rem;
    color: var(--md-sys-color-error);
}

.clients__comment {
    max-width: 280px;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

/* Colours chosen by the calendar owner, applied to the public page and widget. */
body.standalone,
body.embed {
    --md-sys-color-primary: var(--resa-accent, #4f5bd5);
    --md-sys-color-on-primary: var(--resa-on-accent, #ffffff);
    --md-sys-color-primary-container: color-mix(in srgb, var(--md-sys-color-primary) 16%, var(--resa-background, #ffffff));
    --md-sys-color-on-primary-container: var(--resa-text, #1b1b21);
    --md-sys-color-secondary-container: var(--md-sys-color-primary-container);
    --md-sys-color-on-secondary-container: var(--resa-text, #1b1b21);
    --md-sys-color-surface-container-lowest: var(--resa-background, #ffffff);
    --md-sys-color-surface: var(--resa-background, #ffffff);
    --md-sys-color-on-surface: var(--resa-text, #1b1b21);
    --md-sys-color-on-surface-variant: color-mix(in srgb, var(--resa-text, #1b1b21) 72%, var(--resa-background, #ffffff));
    --md-sys-color-outline: color-mix(in srgb, var(--resa-text, #1b1b21) 50%, var(--resa-background, #ffffff));
    --md-sys-color-outline-variant: color-mix(in srgb, var(--resa-text, #1b1b21) 20%, var(--resa-background, #ffffff));
    --md-sys-color-surface-container: color-mix(in srgb, var(--resa-text, #1b1b21) 7%, var(--resa-background, #ffffff));
    color: var(--md-sys-color-on-surface);
}

body.standalone {
    background: var(--md-sys-color-surface-container);
}

.public h1,
.public h2,
.public p,
.public dd {
    color: inherit;
}

.public .public__description,
.public .public__footer,
.public .public__required,
.public .public__none {
    color: var(--md-sys-color-on-surface-variant);
}

.public__location {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.875rem;
}

.public__location md-icon {
    --md-icon-size: 20px;
    color: var(--resa-accent-ink, var(--md-sys-color-primary));
}

.slots--wide {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.confirmation__icon {
    color: var(--resa-accent-ink, var(--md-sys-color-primary));
}

/* Text buttons and field focus rings are accent-coloured text on the background too. */
body.standalone md-text-button,
body.embed md-text-button,
body.standalone md-outlined-button,
body.embed md-outlined-button {
    --md-sys-color-primary: var(--resa-accent-ink);
}

body.standalone md-outlined-text-field,
body.embed md-outlined-text-field,
body.standalone md-outlined-select,
body.embed md-outlined-select,
body.standalone md-checkbox,
body.embed md-checkbox {
    --md-sys-color-primary: var(--resa-accent-ink);
    --md-sys-color-on-primary: var(--resa-background);
}

.confirmation__share {
    display: grid;
    justify-items: center;
    gap: 12px;
    max-width: 100%;
}

.confirmation__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.share {
    display: grid;
    gap: 8px;
    max-width: 100%;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--md-sys-color-surface-container);
}

.share[hidden] {
    display: none;
}

.confirmation__message {
    max-width: 480px;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--md-sys-color-primary-container);
    text-align: left;
}

/* Registration-form builder. */
.field-row {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(160px, 1.5fr) auto auto;
    align-items: center;
    gap: 8px 16px;
    padding: 12px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
}

.field-row md-outlined-select,
.field-row md-outlined-text-field {
    width: 100%;
    min-width: 0;
}

.field-row__options {
    grid-column: 1 / -1;
    grid-row: 2;
}

.field-row__actions {
    display: flex;
}

.check__error {
    margin: 0;
    font-size: 0.75rem;
    color: var(--md-sys-color-error);
}

.public .form md-outlined-select {
    width: 100%;
}

/* Registration form: one field per line, except the short identity fields, which pair up when there is room. */
.public .form {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
}

.public .form > * {
    flex: 1 1 100%;
    min-width: 0;
}

.public .form > md-outlined-text-field:is([autocomplete='given-name'], [autocomplete='family-name'], [autocomplete='email'], [autocomplete='tel']) {
    flex: 1 1 240px;
    width: auto;
}

.public .form__actions {
    margin-top: 8px;
}

@media (max-width: 720px) {
    .field-row {
        grid-template-columns: 1fr auto;
    }

    .field-row > md-outlined-select,
    .field-row > md-outlined-text-field {
        grid-column: 1 / -1;
    }

    .field-row__options {
        grid-row: auto;
    }
}

.panel__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.menu-anchor {
    position: relative;
}

.menu-anchor [slot='headline'] {
    white-space: nowrap;
}

/* A wide table scrolls inside its panel instead of stretching the page. */
.page > *,
.panel > turbo-frame {
    min-width: 0;
}

.clients__table td,
.clients__table th {
    white-space: nowrap;
}

.clients__table td.clients__comment {
    min-width: 200px;
    white-space: pre-line;
}

@media (max-width: 720px) {
    .clients__table td {
        white-space: normal;
    }
}

/* Client documentation. */
.doc {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    align-items: start;
    gap: 24px;
}

.doc__toc {
    position: sticky;
    top: 16px;
    padding: 16px;
    border-radius: 16px;
    background: var(--md-sys-color-surface-container-lowest);
    border: 1px solid var(--md-sys-color-outline-variant);
    font-size: 0.875rem;
}

.doc__toc-title {
    margin: 0 0 8px;
    font-weight: 500;
}

.doc__toc ol {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.doc__toc a {
    display: block;
    padding: 6px 8px;
    border-radius: 8px;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
}

.doc__toc a:hover,
.doc__toc a:focus-visible {
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.doc__content {
    display: grid;
    gap: 40px;
    line-height: 1.6;
}

.doc__content section {
    display: grid;
    gap: 14px;
    min-width: 0;
    /* Anchors land below the top of the viewport, not flush against it. */
    scroll-margin-top: 16px;
}

.doc__content h1,
.doc__content h2,
.doc__content h3,
.doc__content p,
.doc__content ul,
.doc__content ol,
.doc__content dl {
    margin: 0;
}

.doc__content section > h2 {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.375rem;
    font-weight: 500;
}

.doc__content section > h3 {
    margin-top: 16px;
    font-size: 1.0625rem;
    font-weight: 500;
    scroll-margin-top: 16px;
}

.doc__content section > ul,
.doc__steps {
    display: grid;
    gap: 6px;
    padding-left: 22px;
}

.doc__kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.875rem;
    color: var(--md-sys-color-primary);
}

.doc__lead {
    margin-top: 8px;
    font-size: 1.0625rem;
    color: var(--md-sys-color-on-surface-variant);
}

.doc__step {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 1rem;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
}

.doc__box {
    display: grid;
    gap: 8px;
    padding: 16px 20px;
    border-left: 4px solid var(--md-sys-color-primary);
    border-radius: 4px 12px 12px 4px;
    background: var(--md-sys-color-primary-container);
    color: var(--md-sys-color-on-primary-container);
}

.doc__box h2,
.doc__box h3 {
    font-size: 1rem;
    font-weight: 500;
}

.doc__box ul {
    display: grid;
    gap: 4px;
    padding-left: 20px;
}

.doc__box--goal {
    margin-top: 20px;
}

.doc__box--example {
    border-left-color: var(--md-sys-color-outline);
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.doc__box--warning {
    border-left-color: #b26a00;
    background: var(--app-color-warning-container);
    color: var(--app-color-on-warning-container);
}

.doc__path {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.doc__path a {
    display: grid;
    justify-items: center;
    gap: 4px;
    height: 100%;
    box-sizing: border-box;
    padding: 16px 8px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    font-size: 0.8125rem;
    line-height: 1.35;
    text-align: center;
    color: var(--md-sys-color-on-surface-variant);
    text-decoration: none;
}

.doc__path a:hover,
.doc__path a:focus-visible {
    border-color: var(--md-sys-color-primary);
    background: var(--md-sys-color-primary-container);
}

.doc__path span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    font-weight: 500;
}

.doc__path strong {
    font-size: 0.9375rem;
    color: var(--md-sys-color-on-surface);
}

.doc__glossary {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 10px 20px;
}

.doc__glossary dt {
    font-weight: 500;
}

.doc__glossary dd {
    margin: 0;
}

.doc__glossary em,
.doc__content section > p em {
    color: var(--md-sys-color-on-surface-variant);
}

.doc__figure {
    margin: 4px 0;
}

.doc__figure a {
    display: block;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
    overflow: hidden;
    background: var(--md-sys-color-surface);
}

.doc__figure img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.doc__figure figcaption {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--md-sys-color-on-surface-variant);
    text-align: center;
}

.doc__table {
    overflow-x: auto;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
}

.doc__table table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    font-size: 0.875rem;
    line-height: 1.45;
}

.doc__table th,
.doc__table td {
    padding: 10px 14px;
    border: 0;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    text-align: left;
    vertical-align: top;
    background: transparent;
    color: var(--md-sys-color-on-surface);
}

.doc__table thead th {
    background: var(--md-sys-color-surface-container);
    font-weight: 500;
}

.doc__table tbody th {
    font-weight: 500;
}

.doc__table tbody tr:last-child > * {
    border-bottom: 0;
}

.doc__cases {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.doc__case {
    padding: 16px 20px;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
}

.doc__case h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 500;
}

.doc__case md-icon {
    color: var(--md-sys-color-primary);
}

.doc__case dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 16px;
    font-size: 0.875rem;
}

.doc__case dt {
    color: var(--md-sys-color-on-surface-variant);
}

.doc__case dd {
    margin: 0;
}

.doc__question {
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: 12px;
}

.doc__question summary {
    padding: 14px 16px;
    font-weight: 500;
    cursor: pointer;
}

.doc__question[open] summary {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.doc__question p {
    padding: 14px 16px;
}

.doc__checklist {
    display: grid;
    gap: 2px;
    padding: 0;
    list-style: none;
}

.doc__checklist label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

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

    .doc__toc {
        position: static;
    }

    .doc__toc ol {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    .doc__path {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    .doc__glossary {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .doc__glossary dd {
        margin-bottom: 10px;
    }
}