/*
    Guest app. The look follows the guest-info viewer: warm off-white page, the hotel's own accent
    colour, Cormorant Garamond for names and titles, Manrope for everything else.

    The hotel's values arrive as CSS variables in a style block after this file
    (GuestTheme.ToCssVariables): the bar's colours, accent, page and card colours with the text
    colours that can be read on them, cards per row, gap, hero height.

    Text colours are relative to what they stand on: --ink / --muted / --line are redefined inside
    a card and inside the white surfaces (dialog, menu), so the same rules work everywhere.

    Titles use --display with font-weight var(--display-weight, <weight>): a font style whose title
    font has one regular weight only (Pacifico, Square Peg) sets --display-weight, so the browser
    does not make it bold artificially. Every other font style keeps the weights written here.

    Screen sizes follow the Flutter app: small < 630px, medium 630-899px, large >= 900px.
*/

@font-face {
    font-family: "Manrope";
    src: url("../fonts/manrope.woff") format("woff");
    font-weight: 400 700;
    font-display: swap;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("../fonts/cormorant-garamond.woff") format("woff");
    font-weight: 500 700;
    font-display: swap;
}

:root {
    --header-bg: #1f4a3c;
    --header-text: #fff;
    --accent: #1f4a3c;
    --on-accent: #fff;
    --surface: #f6f2ec;
    --panel-bg: #fff;
    --card-bg: #fff;
    --card-ink: #1d2622;
    --card-muted: rgba(29, 38, 34, 0.66);
    --card-line: rgba(29, 38, 34, 0.12);
    --header-height: 56px;
    --hero-height: 420px;
    --card-gap: 24px;
    --cards-small: 1;
    --cards-medium: 3;
    --cards-large: 4;

    --ink: #1d2622;
    --muted: rgba(29, 38, 34, 0.66);
    --line: rgba(29, 38, 34, 0.12);
    --danger: #b3261e;
    --radius: 20px;
    --radius-small: 12px;
    --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
    --body: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

    --cols: var(--cards-small);
    --side: 16px;

    /* names used by the widget styles */
    --primary: var(--accent);
    --text: var(--ink);
    --card-button-bg: var(--accent);
    --card-button-text: var(--on-accent);
}

@media (min-width: 630px) {
    :root {
        --cols: var(--cards-medium);
        --side: 24px;
    }
}

@media (min-width: 900px) {
    :root {
        --cols: var(--cards-large);
        --side: 32px;
    }
}

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

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

body {
    margin: 0;
    background: var(--surface);
    color: var(--ink);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
}

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

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

.shell {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 var(--side);
}

.page {
    max-width: 1000px;
    margin: 0 auto;
    padding: 48px 16px;
}

.notice {
    font-size: 20px;
    text-align: center;
}

/* ---- header bar ---- */

.bar {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--header-height);
    padding: 0 8px 0 var(--side);
    background: var(--header-bg);
    color: var(--header-text);
}

.bar--pinned {
    position: sticky;
    top: 0;
}

.bar__logo {
    width: auto;
    height: 40px;
    margin-right: 4px;
}

.bar__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-family: var(--display);
    font-size: 26px;
    font-weight: var(--display-weight, 600);
    line-height: 1.1;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar :focus-visible {
    outline-color: var(--header-text);
}

.bar__chat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: none;
    padding: 8px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.bar__chat:hover {
    background: rgba(127, 127, 127, 0.22);
}

.bar__chat-text {
    display: none;
}

.bar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.bar__icon:hover {
    background: rgba(127, 127, 127, 0.22);
}

.bar__form {
    display: inline-flex;
    margin: 0;
}

.bar__user {
    display: none;
    flex: none;
    max-width: 240px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar__icon--login {
    display: none;
}

@media (min-width: 630px) {
    .bar__user {
        display: inline;
    }

    .bar__icon--login {
        display: inline-flex;
    }
}

/* ---- hotel employees ---- */

.editbar {
    padding: 6px var(--side);
    background: #f5a623;
    color: #1d2622;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
}

.sheet__error {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: var(--radius-small);
    background: #fbeae8;
    color: var(--danger);
}

.sheet__hint {
    margin: 0 0 8px;
    color: var(--muted);
    font-size: 13px;
}

@media (min-width: 900px) {
    .bar__chat-text {
        display: inline;
    }
}

/* ---- language menu ---- */

.lang {
    position: relative;
}

.lang summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: var(--header-height);
    padding: 0 12px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
}

.lang summary::-webkit-details-marker {
    display: none;
}

.lang img {
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
}

.lang__name {
    display: none;
}

@media (min-width: 630px) {
    .lang__name {
        display: inline;
    }
}

.lang ul {
    position: absolute;
    top: calc(100% - 4px);
    right: 8px;
    min-width: 210px;
    max-height: 70vh;
    margin: 0;
    padding: 8px;
    overflow-y: auto;
    border-radius: var(--radius-small);
    background: #fff;
    box-shadow: 0 12px 32px rgba(29, 38, 34, 0.22);
    list-style: none;

    /* a white surface: dark text whatever the page colour is */
    --ink: #1d2622;
    --muted: rgba(29, 38, 34, 0.66);
    --line: rgba(29, 38, 34, 0.12);
}

.lang li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: var(--ink);
    font-size: 15px;
    text-decoration: none;
}

.lang li a:hover,
.lang li a:focus {
    background: #f1ede6;
}

/* ---- header pictures with the hotel's name ---- */

.hero {
    position: relative;
    height: clamp(230px, 42vw, var(--hero-height));
    margin: 0 calc(var(--side) * -1);
    overflow: hidden;
    border-radius: 0 0 28px 28px;
    background: var(--header-bg);
}

@media (min-width: 630px) {
    .hero {
        margin: 0;
    }
}

.hero__track {
    display: flex;
    height: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.hero__track::-webkit-scrollbar {
    display: none;
}

.hero__track img {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scroll-snap-align: start;
}

/* the name has to be readable on any photo */
.hero::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.62) 100%);
    pointer-events: none;
}

.hero__text {
    position: absolute;
    right: 24px;
    bottom: 26px;
    left: 24px;
    z-index: 1;
    color: #fff;
    pointer-events: none;
}

@media (min-width: 630px) {
    .hero__text {
        right: 48px;
        bottom: 40px;
        left: 48px;
    }
}

.hero__name {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(38px, 6.4vw, 72px);
    font-weight: var(--display-weight, 500);
    line-height: 1.02;
    text-wrap: balance;
}

.hero__welcome {
    margin: 8px 0 0;
    font-size: 16px;
    font-weight: 500;
    opacity: 0.92;
}

.hero__dots {
    position: absolute;
    right: 24px;
    bottom: 12px;
    z-index: 2;
    display: flex;
    gap: 6px;
}

@media (min-width: 630px) {
    .hero__dots {
        right: 48px;
        bottom: 20px;
    }
}

.hero__dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    cursor: pointer;
}

.hero__dots button[aria-current="true"] {
    width: 22px;
    border-radius: 4px;
    background: #fff;
}

.hero__dots :focus-visible {
    outline-color: #fff;
}

/* ---- panels: the open card, the message to the guest ---- */

.panel {
    margin-top: 24px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel-bg);
}

@media (min-width: 630px) {
    .panel {
        padding: 28px 32px;
    }
}

.message h2 {
    margin: 0 0 8px;
    font-family: var(--display);
    font-size: 28px;
    font-weight: var(--display-weight, 600);
    line-height: 1.15;
}

.message p {
    max-width: 75ch;
    margin: 8px 0 0;
}

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

/* a card link ends in #card: the card lands just under the bar, with a strip of the picture above it */
#card {
    scroll-margin-top: calc(var(--header-height) + 74px);
}

.detail__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
}

.detail__image {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-small);
    object-fit: contain;
}

.detail__header h1 {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: var(--display-weight, 600);
    line-height: 1.1;
}

.detail__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--ink);
    font-size: 24px;
    line-height: 1;
    text-decoration: none;
}

.detail__close:hover {
    background: var(--line);
}

.detail .content {
    max-width: 80ch;
}

/* ---- buttons ---- */

.button {
    display: inline-block;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.button--outline {
    border-color: var(--muted);
    background: transparent;
    color: var(--ink);
}

.button--outline:hover {
    background: var(--line);
}

/* ---- titles ---- */

.titles {
    padding: 40px 0 8px;
}

.titles h2 {
    margin: 0 0 6px;
    font-family: var(--display);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: var(--display-weight, 600);
    line-height: 1.1;
}

.titles p {
    max-width: 70ch;
    margin: 0;
    color: var(--muted);
    font-size: 17px;
}

/* ---- card text (DeltaHtmlRenderer) ---- */

.content {
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.content p {
    padding: 3px 0;
}

.content p,
.content h2,
.content h3,
.content h4,
.content blockquote,
.content pre,
.content ul,
.content ol {
    margin: 0;
}

.content h2,
.content h3,
.content h4 {
    font-family: var(--display);
    font-weight: var(--display-weight, 600);
}

.content h2 {
    margin-top: 16px;
    font-size: 34px;
    line-height: 1.15;
}

.content h3 {
    margin-top: 8px;
    font-size: 27px;
    line-height: 1.2;
}

.content h4 {
    margin-top: 8px;
    font-size: 22px;
    line-height: 1.25;
}

.content blockquote {
    margin: 6px 0;
    padding-left: 16px;
    border-left: 4px solid var(--line);
    opacity: 0.8;
}

.content pre,
.content code {
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: 14px;
}

.content pre {
    padding: 8px;
    overflow-x: auto;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.05);
    white-space: pre-wrap;
}

.content ul,
.content ol {
    padding-left: 24px;
}

.content img {
    display: block;
    height: auto;
    border-radius: var(--radius-small);
}

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

.content .align-right {
    text-align: right;
}

.content .align-justify {
    text-align: justify;
}

.content .rtl {
    direction: rtl;
}

.content .indent-1 { padding-left: 32px; }
.content .indent-2 { padding-left: 64px; }
.content .indent-3 { padding-left: 96px; }
.content .indent-4 { padding-left: 128px; }
.content .indent-5 { padding-left: 160px; }
.content .indent-6 { padding-left: 192px; }
.content .indent-7 { padding-left: 224px; }
.content .indent-8 { padding-left: 256px; }

.content .size-small {
    font-size: 10px;
}

.content .size-large {
    font-size: 18px;
}

.content .size-huge {
    font-size: 22px;
}

/* The editor's fonts. A font file is only downloaded when a text on the page uses it. */
@font-face {
    font-family: "ga-sans-serif";
    src: url("../fonts/sans-serif.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "ga-serif";
    src: url("../fonts/serif.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "ga-monospace";
    src: url("../fonts/monospace.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "ga-ibarra-real-nova";
    src: url("../fonts/ibarra-real-nova.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "ga-square-peg";
    src: url("../fonts/square-peg.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "ga-nunito";
    src: url("../fonts/nunito.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "ga-pacifico";
    src: url("../fonts/pacifico.woff") format("woff");
    font-display: swap;
}

@font-face {
    font-family: "ga-roboto-mono";
    src: url("../fonts/roboto-mono.woff") format("woff");
    font-display: swap;
}

.content .font-sans-serif {
    font-family: "ga-sans-serif", sans-serif;
}

.content .font-serif {
    font-family: "ga-serif", serif;
}

.content .font-monospace {
    font-family: "ga-monospace", monospace;
}

.content .font-ibarra-real-nova {
    font-family: "ga-ibarra-real-nova", serif;
}

.content .font-square-peg {
    font-family: "ga-square-peg", cursive;
}

.content .font-nunito {
    font-family: "ga-nunito", sans-serif;
}

.content .font-pacifico {
    font-family: "ga-pacifico", cursive;
}

.content .font-roboto-mono {
    font-family: "ga-roboto-mono", monospace;
}


/* ---- widgets inside card text ---- */

.widget {
    margin: 6px 0;
}

.icon {
    display: inline-block;
    flex: none;
    width: 22px;
    height: 22px;
    margin-right: 10px;
    background: currentColor;
    opacity: 0.8;
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
}

.icon--person {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z'/%3E%3C/svg%3E");
}

.icon--business {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z'/%3E%3C/svg%3E");
}

.icon--place {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E");
}

.icon--phone {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
}

.icon--email {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E");
}

.account {
    margin: 16px 0 14px;
    padding: 0;
    list-style: none;
    font-size: 15px;
    font-weight: 600;
}

.account li {
    display: flex;
    align-items: center;
    margin-bottom: 6px;
}

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

/* words stay whole in a table: a table that does not fit scrolls sideways */
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    overflow-wrap: normal;
    word-break: normal;
}

.table th,
.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.table th {
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

@media (max-width: 629.98px) {
    .table th,
    .table td {
        padding: 10px 10px;
    }

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

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

.table .number {
    text-align: right;
    white-space: nowrap;
}

.outstanding {
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
}

.outstanding summary {
    padding: 14px 16px;
    font-weight: 600;
    cursor: pointer;
}

.pay-form {
    display: inline-block;
    margin: 8px;
}

.pay-row {
    display: flex;
    align-items: center;
}

.button:hover {
    filter: brightness(0.93);
}

.instruction {
    padding: 4px 0;
}

.widget-link {
    display: inline-block;
    margin-right: 12px;
    font-size: 15px;
}

/* ---- forms, dialogs and messages ---- */

.button--large {
    padding: 12px 24px;
}

.button:disabled {
    opacity: 0.45;
    cursor: default;
}

.inline-form {
    display: inline-flex;
    align-items: flex-end;
    gap: 8px;
    margin: 6px 0;
}

.field {
    display: block;
    margin-bottom: 10px;
}

.field span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

.field input,
.field select {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(29, 38, 34, 0.28);
    border-radius: var(--radius-small);
    background: #fff;
    color: #1d2622;
    font: inherit;
}

.field input:focus,
.field select:focus {
    border-color: var(--accent);
    outline: 1px solid var(--accent);
}

.field--pin {
    width: 180px;
    margin-bottom: 0;
}

.field--pin input {
    letter-spacing: 3px;
    text-align: center;
}

.check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.check input {
    width: 20px;
    height: 20px;
}

.dialog {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    padding: 28px;
    overflow-y: auto;
    border: 0;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 24px 60px rgba(29, 38, 34, 0.3);

    /* a white surface: dark text whatever the page colour is */
    --ink: #1d2622;
    --muted: rgba(29, 38, 34, 0.66);
    --line: rgba(29, 38, 34, 0.12);
    color: var(--ink);
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    text-align: left;
}

.dialog::backdrop {
    background: rgba(29, 38, 34, 0.55);
}

.dialog__message {
    margin: 0 0 16px;
    white-space: pre-line;
}

.dialog__actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 8px;
}

.flash {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 560px;
    margin: 0 auto;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--ink);
    box-shadow: 0 12px 32px rgba(29, 38, 34, 0.3);
    color: #fff;
    font-weight: 500;
}

.flash--error {
    background: var(--danger);
}

.flash span {
    flex: 1;
}

.flash button {
    border: 0;
    background: none;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.stay {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 4px 0;
}

.stay .button {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
}

.stay p {
    margin: 4px 0 0;
    text-align: center;
}

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

.button--small {
    padding: 6px 16px;
    font-size: 14px;
}

.guest-list {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.guest-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    padding: 14px 0;
    border-top: 1px solid var(--line);
}

.guest-list__who {
    display: flex;
    flex-direction: column;
    flex: 1 1 180px;
    min-width: 0;
    overflow-wrap: break-word;
}

.guest-list__who span {
    color: var(--muted);
    font-size: 14px;
}

.guest-list__actions {
    display: flex;
    flex: none;
    gap: 8px;
}

.thermostats__list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 8px;
}

.thermostat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 340px;
    max-width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-small);
}

.thermostat input[type="range"] {
    width: 100%;
    margin-top: 12px;
    accent-color: var(--accent);
}

.thermostat__scale {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    opacity: 0.7;
}

.thermostat p {
    margin: 0;
    text-align: center;
}

/* ---- pages with one job: breakfast, parking, review, newsletter ---- */

.sheet {
    max-width: 760px;
    margin: 24px auto 64px;
}

.sheet--narrow {
    max-width: 520px;
}

.sheet h1 {
    margin: 0 0 20px;
    font-family: var(--display);
    font-size: clamp(30px, 5vw, 42px);
    font-weight: var(--display-weight, 600);
    line-height: 1.1;
}

.sheet__empty,
.sheet__done {
    margin: 32px 0;
    font-size: 18px;
    text-align: center;
}

.sheet__done::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--accent)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")
        center / 30px no-repeat;
}

.sheet__note {
    margin: 24px 0 8px;
    color: var(--muted);
    white-space: pre-line;
}

.sheet__form {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}

.sheet__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
}

.rows {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rows li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

.rows__main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.rows__main span {
    color: var(--muted);
    font-size: 14px;
}

.rows input[type="time"] {
    flex: none;
    width: 124px;
    padding: 9px 12px;
    border: 1px solid rgba(29, 38, 34, 0.28);
    border-radius: var(--radius-small);
    background: #fff;
    color: #1d2622;
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.plate {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.06em;
}

.question {
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

.question legend {
    margin-bottom: 10px;
    padding: 0;
    font-weight: 700;
}

.question textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(29, 38, 34, 0.28);
    border-radius: var(--radius-small);
    background: #fff;
    color: #1d2622;
    font: inherit;
    resize: vertical;
}

.check--top {
    align-items: flex-start;
}

.check--top input {
    flex: none;
    margin-top: 2px;
}

/* the stars are in reverse order in the page and turned round here, so that choosing one can
   light up the ones before it */
.stars {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 4px;
}

.stars input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.stars label {
    width: 36px;
    height: 36px;
    background: var(--muted);
    opacity: 0.45;
    cursor: pointer;
    -webkit-mask: var(--star) center / contain no-repeat;
    mask: var(--star) center / contain no-repeat;
    --star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E");
}

.stars input:checked ~ label,
.stars label:hover,
.stars label:hover ~ label {
    background: #e0a100;
    opacity: 1;
}

.stars input:focus-visible + label {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

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

/* ---- cards ---- */

.cards {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    gap: var(--card-gap);
    padding: 32px 0 64px;
}

.card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--card-bg);
    text-decoration: none;

    /* text colours for the card's own background */
    --ink: var(--card-ink);
    --muted: var(--card-muted);
    --line: var(--card-line);
    color: var(--ink);
}

.card:hover {
    border-color: var(--muted);
    box-shadow: 0 10px 28px rgba(29, 38, 34, 0.12);
}

/* the card that is open above the grid */
.card[aria-current="page"] {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

/* an icon is shown whole on a light tint of the accent colour */
.card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 168px;
    padding: 22px;
    background: #f1ede6;
    background: color-mix(in srgb, var(--accent) 8%, var(--card-bg));
}

.card__media img {
    max-height: 100%;
    object-fit: contain;
}

/* a photo fills the picture area */
.card--photo .card__media {
    padding: 0;
}

.card--photo .card__media img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
}

.card__body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px 20px;
}

.card__title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.card__teaser {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

/* narrow cards: picture and title only */
@media (max-width: 629.98px) {
    .cards {
        gap: min(var(--card-gap), 14px);
        padding: 24px 0 48px;
    }

    .card__media {
        height: 118px;
        padding: 16px;
    }

    .card__body {
        padding: 12px 14px 14px;
    }

    .card__title {
        font-size: 15px;
    }

    .card__teaser {
        display: none;
    }
}

/* ---- footer ---- */

.footer {
    padding: 28px var(--side) 36px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* ---- diagnostics page ---- */

.diag table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.diag th, .diag td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.diag .notice {
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
    text-align: left;
}

.diag .ok {
    color: #1b7a3d;
    font-weight: 600;
    white-space: nowrap;
}

.diag .fail {
    color: var(--danger);
    font-weight: 600;
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .hero__track {
        scroll-behavior: smooth;
    }

    .card {
        transition: box-shadow 0.18s ease, border-color 0.18s ease;
    }
}

/* ---- AI chat ---- */

.chat {
    width: min(440px, calc(100vw - 32px));
    height: min(640px, calc(100vh - 32px));
    max-width: none;
    max-height: none;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius);
    background: #fff;
    box-shadow: 0 24px 60px rgba(29, 38, 34, 0.3);

    /* a white surface: dark text whatever the page colour is */
    --ink: #1d2622;
    --muted: rgba(29, 38, 34, 0.66);
    --line: rgba(29, 38, 34, 0.12);
    color: var(--ink);
    font-size: 15px;
}

.chat[open] {
    display: flex;
    flex-direction: column;
}

.chat::backdrop {
    background: rgba(29, 38, 34, 0.55);
}

@media (max-width: 629px) {
    .chat {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border-radius: 0;
    }
}

.chat__head {
    display: flex;
    align-items: center;
    flex: none;
    min-height: 52px;
    padding: 0 8px 0 20px;
    background: var(--header-bg);
    color: var(--header-text);
    font-weight: 700;
}

.chat__head span {
    flex: 1;
}

.chat__head button {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.chat__head :focus-visible {
    outline-color: var(--header-text);
}

.chat__log {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.chat__empty {
    margin: auto;
    padding: 0 16px;
    color: var(--muted);
    text-align: center;
}

.chat__bubble {
    max-width: 86%;
    padding: 9px 14px;
    border-radius: 16px;
    overflow-wrap: anywhere;
}

.chat__bubble--guest {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--accent);
    color: var(--on-accent);
    white-space: pre-wrap;
}

.chat__bubble--hotel {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background: #f1eee9;
}

.chat__bubble--error {
    align-self: flex-start;
    border-bottom-left-radius: 4px;
    background: #fbeae8;
    color: var(--danger);
}

.chat__bubble p,
.chat__bubble ul,
.chat__bubble ol {
    margin: 0 0 8px;
}

.chat__bubble ul,
.chat__bubble ol {
    padding-left: 20px;
}

.chat__bubble > :last-child {
    margin-bottom: 0;
}

.chat__bubble code {
    font-size: 0.92em;
}

.chat__dots {
    display: inline-flex;
    gap: 4px;
    padding: 6px 2px;
}

.chat__dots i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--muted);
    animation: chat-dot 1.2s infinite ease-in-out;
}

.chat__dots i:nth-child(2) {
    animation-delay: 0.15s;
}

.chat__dots i:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes chat-dot {
    0%, 60%, 100% {
        opacity: 0.3;
        transform: none;
    }

    30% {
        opacity: 1;
        transform: translateY(-3px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat__dots i {
        animation: none;
    }
}

.chat__form {
    display: flex;
    align-items: flex-end;
    flex: none;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--line);
}

.chat__form textarea {
    flex: 1;
    min-width: 0;
    max-height: 120px;
    padding: 10px 14px;
    border: 1px solid rgba(29, 38, 34, 0.28);
    border-radius: var(--radius-small);
    background: #fff;
    color: #1d2622;
    font: inherit;
    /* 16px: a phone does not zoom in when the field gets the focus */
    font-size: 16px;
    resize: none;
}

.chat__form textarea:focus {
    border-color: var(--accent);
    outline: 1px solid var(--accent);
}

.chat__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    cursor: pointer;
}

.chat__send:disabled {
    opacity: 0.45;
    cursor: default;
}