/* base.css - shared by every page.
   Colours, sizes and fonts are custom properties here, so they're changed in one place
   (and so restaurants can later have their own colours). Mobile first. */

/* Open Sans, served from our own server (see public/assets/fonts/LICENSE.txt).
   font-display: swap shows text straight away in the system font while the font loads. */
@font-face {
    font-family: "Open Sans";
    src: url("../fonts/open-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/open-sans-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans";
    src: url("../fonts/open-sans-800.woff2") format("woff2");
    font-weight: 800;
    font-display: swap;
}

:root {
    /* Brand */
    --colour-slate: #2e3842;
    --colour-teal: #21b2a6;
    --colour-teal-dark: #1a8f85;
    --colour-purple: #505393;
    --colour-magenta: #e5097f;

    /* Page */
    --colour-background: #f4f6f7;
    --colour-surface: #ffffff;
    --colour-text: #24303a;
    --colour-text-muted: #5f6b75;
    --colour-border: #d9dee2;
    --colour-ok: #1d7a43;
    --colour-failed: #b3261e;
    --colour-warning: #8a5a00;
    --colour-ok-background: #e6f4ec;
    --colour-failed-background: #fbe9e7;
    --colour-warning-background: #fff4dc;
    --colour-info-background: #e5f5f3;

    /* Text */
    --font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size: 1rem;
    --letter-spacing-heading: 0.075em;

    /* Spacing and shapes */
    --nav-bar-height: 61px; /* the bar along the bottom: its buttons (60px) and top border */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 1rem;
    --space-4: 1.5rem;
    --space-5: 2.5rem;
    --radius: 6px;
    --tap-size: 48px; /* minimum height for anything an owner taps */
}

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

html,
body {
    margin: 0;
}

/* Anything marked hidden stays hidden, even if another rule (like .field or .button)
   says how it should be displayed. Without this, hiding things from JavaScript fails. */
[hidden] {
    display: none !important;
}

body {
    background: var(--colour-background);
    color: var(--colour-text);
    font-family: var(--font);
    font-size: var(--font-size);
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--colour-teal-dark);
}

h1,
h2,
h3 {
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-heading);
}

h1 {
    font-size: 1.5rem;
    margin: 0 0 var(--space-3);
}

/* ---------- Top bar ---------- */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--colour-surface);
    border-bottom: 1px solid var(--colour-border);
}

.topbar-logo {
    display: flex;
}

/* ---------- Language switcher ---------- */

.lang-switcher {
    display: flex;
    flex-wrap: wrap;   /* a menu in several languages: chips wrap on a phone */
    gap: var(--space-1);
}

.lang-switcher a,
.lang-switcher-current {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-size);
    padding: 0 var(--space-3);
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
}

.lang-switcher a {
    color: var(--colour-text);
}

/* Owner area: the menu's languages as codes on phones (ES EN DE), names on wider screens */
.lang-code {
    display: none;
}

@media (max-width: 599px) {
    .lang-switcher .lang-name:has(+ .lang-code) {
        display: none;
    }

    .lang-switcher .lang-code {
        display: inline;
    }
}

/* Owner area: (+) after the menu's languages - add or remove languages */
.lang-switcher-add {
    justify-content: center;
    min-width: var(--tap-size);
    border: 1px dashed var(--colour-border);
    font-size: 1.25rem;
}

/* Owner area: "🌐 Auto" - automatic translation on (teal) or off (grey, crossed out) */
.lang-switcher form {
    margin: 0;
}

.translate-switch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--tap-size);
    padding: 0 var(--space-2);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    background: none;
    color: var(--colour-text-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.translate-switch.is-on {
    border-color: var(--colour-teal);
    background: var(--colour-info-background);
    color: var(--colour-teal-dark);
}

.translate-switch.is-off span {
    text-decoration: line-through;
}

/* Phones: just the globe (teal = on, faded = off), so the top bar stays on one line */
@media (max-width: 599px) {
    .translate-switch span {
        display: none;
    }

    .translate-switch.is-off {
        opacity: 0.45;
    }
}

.lang-switcher a:hover,
.lang-switcher a:focus-visible {
    background: var(--colour-background);
}

.lang-switcher-current {
    background: var(--colour-slate);
    color: #ffffff;
}

/* ---------- Page and panels ---------- */

.page {
    max-width: 960px;
    margin: 0 auto;
    padding: var(--space-2);
}

@media (min-width: 460px) {
    .page {
        padding: var(--space-3);
    }
}

.panel {
    background: var(--colour-surface);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    padding: var(--space-4) var(--space-3);
}

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

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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-size);
    padding: 0 var(--space-4);
    border: 0;
    border-radius: var(--radius);
    background: var(--colour-teal);
    color: #ffffff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.button:hover,
.button:focus-visible {
    background: var(--colour-teal-dark);
}

/* ---------- System check list (/health) ---------- */

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

.check-list li {
    display: flex;
    gap: var(--space-3);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--colour-border);
}

.check-result {
    flex: 0 0 5.5rem;
    font-weight: 800;
}

.check-ok .check-result {
    color: var(--colour-ok);
}

.check-failed .check-result {
    color: var(--colour-failed);
}

/* ---------- Top bar: right-hand side ---------- */

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.topbar-right form {
    margin: 0;
}

/* Phones: keep the top bar on one line ("Log out" used to wrap and double its height). */
.topbar-right .button,
.lang-switcher a,
.lang-switcher-current {
    white-space: nowrap;
}

/* Log out: the word on wider screens, a door icon on narrow phones (below) */
.topbar-logout-icon {
    display: none;
}

@media (max-width: 459px) {
    .topbar {
        gap: var(--space-2);
        padding: var(--space-1) var(--space-2);
    }

    .topbar-logo img {
        width: 56px;
        height: auto;
    }

    .lang-switcher a,
    .lang-switcher-current,
    .topbar-right .button {
        padding: 0 var(--space-2);
    }

    /* Phil, 2026-10-07: three menu languages + (+) + Auto + Log out wrapped onto two lines at 360px */
    .topbar-logo img {
        width: 48px;
    }

    .topbar-right {
        gap: var(--space-1);
    }

    .lang-switcher a,
    .lang-switcher-current {
        padding: 0 0.375rem;
    }

    .lang-switcher-add {
        min-width: 2.5rem;
    }

    .translate-switch {
        padding: 0 0.375rem;
    }

    .topbar-logout-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .topbar-logout-icon {
        display: block;
    }
}

/* ---------- More panels and buttons ---------- */

.panel + .panel {
    margin-top: var(--space-3);
}

.panel-narrow {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* A little wider for the busiest form (the dish form with sizes and choices). */
.panel-medium {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.button-quiet {
    background: transparent;
    color: var(--colour-text);
    border: 1px solid var(--colour-border);
}

.button-quiet:hover,
.button-quiet:focus-visible {
    background: var(--colour-background);
}

.button-wide {
    width: 100%;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
}

/* ---------- Forms ---------- */

.form {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.field-label {
    font-weight: 600;
}

/* Every kind of typing box (text, email, password, tel, url, number...), so none is ever
   left small. Checkboxes, radio buttons and file pickers are styled separately. */
.field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
.field textarea {
    min-height: var(--tap-size);
    padding: 0 var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1.0625rem; /* 17px: stops iPhones zooming in when the field is tapped */
    background: var(--colour-surface);
}

.field input:focus {
    outline: 2px solid var(--colour-teal);
    outline-offset: 1px;
    border-color: var(--colour-teal);
}

.field-hint {
    color: var(--colour-text-muted);
    font-size: 0.875rem;
}

.field-error {
    margin: calc(-1 * var(--space-2)) 0 0;
    color: var(--colour-failed);
    font-weight: 600;
}

.field-check {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    min-height: var(--tap-size);
}

.field-check input {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    accent-color: var(--colour-teal);
}

.form-footer {
    text-align: center;
    margin: var(--space-3) 0 0;
}

/* ---------- Messages ---------- */

.notice {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    border-radius: var(--radius);
    border-left: 4px solid currentColor;
}

.notice p {
    margin: 0 0 var(--space-2);
}

.notice form {
    margin: 0;
}

.notice-ok {
    color: var(--colour-ok);
    background: var(--colour-ok-background);
}

.notice-error {
    color: var(--colour-failed);
    background: var(--colour-failed-background);
}

.notice-warning {
    color: var(--colour-warning);
    background: var(--colour-warning-background);
}

.notice-info {
    color: var(--colour-slate);
    background: var(--colour-info-background);
}

/* ---------- Lists of cards (admin restaurants) ---------- */

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

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--colour-border);
}

.card-actions {
    margin: 0;
}

.badge {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
}

.badge-pending {
    background: var(--colour-warning-background);
    color: var(--colour-warning);
}

.badge-live {
    background: var(--colour-ok-background);
    color: var(--colour-ok);
}

.badge-suspended {
    background: var(--colour-failed-background);
    color: var(--colour-failed);
}

/* ---------- Setup wizard ---------- */

.setup-progress-text {
    margin: 0 0 var(--space-1);
    color: var(--colour-text-muted);
    font-weight: 600;
}

.setup-progress {
    height: 6px;
    margin-bottom: var(--space-4);
    background: var(--colour-border);
    border-radius: 999px;
    overflow: hidden;
}

.setup-progress-bar {
    height: 100%;
    background: var(--colour-teal);
}

.setup-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.setup-secondary {
    display: flex;
    gap: var(--space-2);
}

.setup-secondary .button {
    flex: 1;
}

.field select {
    min-height: var(--tap-size);
    padding: 0 var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1.0625rem;
    background: var(--colour-surface);
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--space-2);
}

fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

/* Big tappable checkboxes in a grid (languages, general info) */
.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.choice {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-size);
    padding: 0 var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.choice input {
    width: 1.375rem;
    height: 1.375rem;
    flex: none;
    accent-color: var(--colour-teal);
}

.choice:has(input:checked) {
    border-color: var(--colour-teal);
    background: var(--colour-info-background);
    font-weight: 600;
}

/* Opening hours: one block per day, each with up to two time ranges */
.hours-day {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--colour-border);
}

.hours-range {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.hours-range input[data-time] {
    flex: 1;
    min-width: 0;
    min-height: var(--tap-size);
    padding: 0 var(--space-2);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1.0625rem;
    text-align: center;
}

.logo-preview img {
    display: block;
    max-height: 120px;
    width: auto;
    margin: 0 auto var(--space-3);
}

/* Dashboard: "Finish setting up" */
.checklist {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.checklist .button {
    justify-content: flex-start;
}

/* Settings page: name on the left, done / to do on the right */
.settings-link {
    justify-content: space-between;
    gap: var(--space-3);
}

.settings-status {
    font-size: 0.875rem;
    font-weight: 600;
}

.settings-done {
    color: var(--colour-ok);
}

.settings-missing {
    color: var(--colour-warning);
}

/* ---------- Menu editor ---------- */

.button-small {
    min-height: 40px;
    padding: 0 var(--space-3);
    font-size: 0.9375rem;
}

.button-danger {
    background: var(--colour-failed);
}

.button-danger:hover,
.button-danger:focus-visible {
    background: #8c1d17;
}

/* Something needs an answer (the waiter's "Sold-out dishes: 4" while "Still sold out?" waits) */
.button-warning {
    background: var(--colour-warning);
}

.button-warning:hover,
.button-warning:focus-visible {
    background: #6b4600;
}

.link-danger {
    color: var(--colour-failed);
}

.preset-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) 0 var(--space-3);
}

.reorder-status {
    min-height: 1.5em;
    margin: var(--space-2) 0 0;
    color: var(--colour-ok);
    font-weight: 600;
}

.reorder-status-error {
    color: var(--colour-failed);
}

.menu-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.menu-section-header h2 {
    flex: 1;
    margin: 0;
    font-size: 1.125rem;
}

/* The fold button next to "Options" (menu-editor.js), and "6 dishes (closed)" under a folded section's name */
.menu-section-name-folds {
    cursor: pointer;   /* tapping the section's name opens or closes it (menu-editor.js) */
}

.menu-fold-button {
    min-width: 44px;
    font-size: 1.125rem;
}

.menu-section-folded-count {
    margin: var(--space-1) 0 0;
    color: var(--colour-text-muted);
    font-size: 0.875rem;
}

/* A folded section: a thinner box, so a long menu folded up fits on the screen (Phil, 2026-10-24) */
.menu-section.is-folded {
    padding-top: var(--space-1);
    padding-bottom: var(--space-1);
}

/* The ⋮⋮ grip: big enough to grab with a thumb */
.drag-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: var(--tap-size);
    color: var(--colour-text-muted);
    font-weight: 800;
    letter-spacing: -2px;
    cursor: grab;
    touch-action: none; /* lets SortableJS drag on phones instead of scrolling the page */
    user-select: none;
}

.menu-items {
    list-style: none;
    margin: var(--space-3) 0;
    padding: 0;
    min-height: var(--tap-size); /* an empty section can still receive a dragged dish */
}

.menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    border-bottom: 1px solid var(--colour-border);
    background: var(--colour-surface);
}

.menu-item.sortable-ghost {
    opacity: 0.4;
}

.menu-item-link {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    min-height: var(--tap-size);
    padding: var(--space-2) 0;
    color: var(--colour-text);
    text-decoration: none;
}

.menu-item-name {
    font-weight: 600;
}

.menu-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.menu-item-price {
    font-weight: 600;
}

.menu-item-note {
    color: var(--colour-text-muted);
    font-size: 0.875rem;
}

.flag-missing {
    color: var(--colour-warning);
    background: var(--colour-warning-background);
    border-radius: 999px;
    padding: 0 var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
}

.allergen-icons {
    display: inline-flex;
    gap: 2px;
}

/* Dish form */
.input-short {
    max-width: 10rem;
}

/* A button that looks like a link: "change" next to the section, "· different sizes / options". */
.link-button {
    min-height: var(--tap-size);
    padding: 0 var(--space-1);
    border: 0;
    background: none;
    color: var(--colour-teal-dark);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Dish form title: "New dish in Tapas · change" - small, so the form fits above the phone keyboard */
.item-form-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-2);
}

.item-form-title h1 {
    margin: 0;
    font-size: 1.05rem;
}

/* Dish form: price box with the vegetarian / vegan ticks and "· different sizes / options" beside it */
.price-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.price-row input {
    flex: 0 1 8rem;
    min-width: 0;
}

.price-row .link-button {
    white-space: nowrap;
}

/* Vegetarian / vegan beside the price: compact ticks (tick, icon, word); the row wraps on narrow phones */
.dish-label-ticks {
    display: flex;
    gap: var(--space-2);
}

.price-row .dish-label-tick {
    gap: var(--space-1);
    padding: 0 var(--space-2);
    font-size: 0.875rem;
}

.dish-label-tick img,
.spice-choice img,
.choice img {
    flex: none;
}

/* "How spicy is it?" - four answers in a row: not spicy, 1, 2 or 3 chillies */
.spice-choices {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-2);
}

.spice-choice input {
    position: absolute;
    opacity: 0;
}

.spice-choice > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: var(--tap-size);
    padding: var(--space-1);
    border: 2px solid var(--colour-border);
    border-radius: var(--radius);
    font-size: 0.875rem;
    text-align: center;
    cursor: pointer;
}

.spice-choice input:checked + span {
    border-color: var(--colour-teal);
    background: var(--colour-info-background);
}

.spice-choice input:focus-visible + span {
    outline: 3px solid var(--colour-teal-dark);
    outline-offset: 2px;
}

/* Dish form: tighter than other pages, so it fits above the phone keyboard */
.item-form-panel {
    padding: var(--space-3) var(--space-3) var(--space-4);
}

.item-form-panel .form {
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.item-options-area {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Dish form: everything else in one box; the boxes inside it are spaced like the form */
/* (margins, not flex: older phone browsers can't lay out <details> as flex) */
.more-options > * + * {
    margin-top: var(--space-3);
}

.field textarea {
    padding: var(--space-2) var(--space-3);
    min-height: 6rem;
    resize: vertical;
}

.allergen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.allergen-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 56px;
    padding: var(--space-1) var(--space-2);
    border: 2px solid var(--colour-border);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.9375rem;
}

.allergen-choice input {
    position: absolute;
    opacity: 0; /* the whole tile is the button; the tick shows as the tile's colour */
}

.allergen-choice:has(input:focus-visible) {
    outline: 2px solid var(--colour-teal);
    outline-offset: 2px;
}

.allergen-choice:has(input:checked) {
    border-color: var(--colour-teal);
    background: var(--colour-info-background);
    font-weight: 700;
}

/* A suggestion: dashed outline and a small label, until the owner taps it */
.allergen-suggested {
    display: none;
    position: absolute;
    top: -0.6rem;
    right: var(--space-1);
    padding: 0 var(--space-1);
    background: var(--colour-warning-background);
    color: var(--colour-warning);
    border-radius: var(--radius);
    font-size: 0.6875rem;
    font-weight: 700;
}

.allergen-choice.is-suggested:not(:has(input:checked)) {
    border-style: dashed;
    border-color: var(--colour-warning);
}

.allergen-choice.is-suggested:not(:has(input:checked)) .allergen-suggested {
    display: block;
}

/* Dish form: the three allergen answers, big buttons in a row (stacked on narrow phones) */
/* "Any allergens?" - three short answers side by side, even on a small phone. */
.allergen-answers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.allergen-answer input {
    position: absolute;
    opacity: 0;
}

.allergen-answer span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-size);
    padding: var(--space-2);
    border: 2px solid var(--colour-border);
    border-radius: var(--radius);
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

.allergen-answer input:checked + span {
    border-color: var(--colour-teal);
    background: var(--colour-info-background);
}

.allergen-answer input:focus-visible + span {
    outline: 3px solid var(--colour-teal-dark);
    outline-offset: 2px;
}

.more-details {
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    padding: 0 var(--space-3);
}

.more-details summary {
    min-height: var(--tap-size);
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
}

.more-details[open] {
    padding-bottom: var(--space-3);
}

/* Button bar fixed along the bottom of long forms (the dish form): Cancel, Save and add
   another, Save - always in reach, whatever the scroll position. */
.action-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: var(--space-2) var(--space-3);
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom)); /* clear the iPhone home bar */
    background: var(--colour-surface);
    border-top: 1px solid var(--colour-border);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}

.action-bar-inner {
    display: flex;
    gap: var(--space-2);
    max-width: 480px;
    margin: 0 auto;
}

.action-bar .button {
    flex: 1;
    min-height: 52px;
    padding: 0 var(--space-2);
    font-size: 0.9375rem;
    line-height: 1.15;
    text-align: center;
}

/* Shown left to right: Cancel, Save and add another, Save (the HTML order is different, see the template) */
.action-bar-first {
    order: 1;
}

.action-bar-middle {
    order: 2;
}

.action-bar-main {
    order: 3;
    flex-grow: 1.4;
    font-size: 1.0625rem;
}

.has-action-bar {
    margin-bottom: 96px; /* room so the bar never covers the end of the form */
}

/* The bar along the bottom of the owner's and waiter's pages (partials/nav_bar.php): the same places on every
   page, icon over word, the current one in teal. Always on top: the options panel opens above it. "Sold out" carries a count and turns orange while
   "Still sold out?" waits. */
.page-with-nav {
    padding-bottom: calc(88px + env(safe-area-inset-bottom)); /* room so the bar never covers the end of the page */
}

.nav-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 23;
    padding-bottom: env(safe-area-inset-bottom); /* clear the iPhone home bar */
    background: var(--colour-surface);
    border-top: 1px solid var(--colour-border);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}

.nav-bar-inner {
    display: flex;
    max-width: 480px;
    margin: 0 auto;
}

.nav-bar-button {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    height: calc(var(--nav-bar-height) - 1px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: var(--space-1) 2px;
    border-top: 3px solid transparent;
    color: var(--colour-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
}

.nav-bar-button:hover,
.nav-bar-button:focus-visible {
    color: var(--colour-text);
    background: var(--colour-background);
}

.nav-bar-button.is-current {
    color: var(--colour-teal-dark);
    border-top-color: var(--colour-teal);
}

.nav-bar-button.is-warning {
    color: var(--colour-warning);
    background: var(--colour-warning-background);
}

/* The cogwheel has no word under it (Phil): a bigger icon fills the same box as icon + word */
.nav-bar-button.is-icon-only .nav-bar-icon {
    width: 30px;
    height: 30px;
}

.nav-bar-text {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The number of sold-out marks, a small badge on the icon's top right */
.nav-bar-count {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 10px;
    background: var(--colour-failed);
    color: #fff;
    font-size: 0.75rem;
    line-height: 20px;
    text-align: center;
}

.nav-bar-button.is-warning .nav-bar-count {
    background: var(--colour-warning);
}

/* Two or three tabs across the top of a page ("Agotados (4)" / "Todos" on the sold-out page) */
.tabs {
    display: flex;
    margin: var(--space-3) 0;
    border-bottom: 1px solid var(--colour-border);
}

.tab {
    flex: 1;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    color: var(--colour-text-muted);
    font-weight: 600;
    text-decoration: none;
}

.tab.is-current {
    color: var(--colour-teal-dark);
    border-bottom-color: var(--colour-teal);
}

/* The cogwheel page's lists of buttons (templates/owner/business.php) */
.business-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* An owner looking at the waiter's pages (src/platform/nav_bar.php): a strip under the top bar. */
.waiter-mode-strip {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--colour-purple);
    color: #fff;
    font-size: 0.875rem;
    text-align: center;
}

.waiter-mode-strip a {
    color: #fff;
    font-weight: 600;
}

.add-suggested {
    margin-top: var(--space-2);
    border-style: dashed;
    border-color: var(--colour-warning);
    color: var(--colour-warning);
    background: var(--colour-warning-background);
}

/* A name not yet written in the screen's language: the original, greyed out like a
   placeholder, with a small language tag ("ES"). */
.text-fallback {
    color: var(--colour-text-muted);
    font-style: italic;
    font-weight: 400;
}

.lang-tag {
    display: inline-block;
    margin-left: var(--space-1);
    padding: 0 var(--space-1);
    border: 1px solid var(--colour-border);
    border-radius: 4px;
    color: var(--colour-text-muted);
    font-size: 0.6875rem;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

::placeholder {
    color: #9aa4ad;
    font-style: italic;
    opacity: 1;
}

/* Quick-add list */
.menu-quick-add {
    margin-top: var(--space-2);
}

.quick-add-text {
    font-size: 1.0625rem;
    line-height: 1.6;
}

.quick-add-rows {
    margin: 0;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.quick-add-row {
    padding: var(--space-2);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

/* A line that wasn't fully understood: highlighted, never dropped */
.quick-add-row-problem {
    border: 2px solid var(--colour-warning);
    background: var(--colour-warning-background);
}

/* Import review: a dish that can't be saved as corrected - red, so it stands out among Claude's orange notes */
.import-row-error {
    border: 3px solid var(--colour-failed);
    background: var(--colour-failed-background);
    scroll-margin-top: var(--space-5);   /* "Go to the first one" leaves a little room above it */
}

.import-error {
    margin: 0 0 var(--space-2);
    color: var(--colour-failed);
    font-weight: 700;
}

.quick-add-problem {
    margin: 0 0 var(--space-2);
    color: var(--colour-warning);
    font-weight: 600;
    font-size: 0.9375rem;
}

.quick-add-fields {
    display: flex;
    gap: var(--space-2);
}

.quick-add-fields input {
    min-height: var(--tap-size);
    padding: 0 var(--space-2);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1.0625rem;
    background: var(--colour-surface);
    min-width: 0;
}

.quick-add-fields input:first-child {
    flex: 1;
}

/* The price box: just wide enough for "12,50" (Phil: it was far too big on the import review) */
.quick-add-fields input:not(:first-child) {
    flex: 0 0 6.5rem;
    width: 6.5rem;
    text-align: right;
}

.quick-add-price {
    width: 6.5rem;
    flex: none;
}

.quick-add-skip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-1);
    color: var(--colour-text-muted);
    font-size: 0.875rem;
    min-height: 36px;
}

.quick-add-row:has(.quick-add-skip input:checked) .quick-add-fields {
    opacity: 0.4;
}

/* After "Ordenar con IA" (src/platform/quick_add_ai.php): what was said, the description, suggested allergens */
.quick-add-heard {
    margin: var(--space-1) 0 0;
    color: var(--colour-text-muted);
    font-size: 0.875rem;
    font-style: italic;
}

.quick-add-description {
    width: 100%;
    min-height: var(--tap-size);
    margin-top: var(--space-1);
    padding: 0 var(--space-2);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--colour-surface);
}

.quick-add-allergens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin: var(--space-1) 0 0;
    padding: 0;
    border: 0;
}

.quick-add-allergens legend {
    margin-bottom: var(--space-1);
    padding: 0;
    color: var(--colour-text-muted);
    font-size: 0.875rem;
}

.quick-add-allergen {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: var(--tap-size);
    padding: 0 0.75rem;
    border: 1px solid var(--colour-border);
    border-radius: 20px;
    background: var(--colour-surface);
    font-size: 0.9375rem;
}

.quick-add-allergen:has(input:not(:checked)) {
    opacity: 0.5;
    text-decoration: line-through;
}

.quick-add-confirm {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-size);
    margin-top: var(--space-3);
    font-weight: 600;
}

.quick-add-ai {
    margin-top: var(--space-3);
    padding: var(--space-2);
    border-radius: var(--radius);
    background: var(--colour-surface);
    border: 1px dashed var(--colour-border);
}

.quick-add-ai p {
    margin: 0 0 var(--space-2);
}

/* Undo and history */
.undo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.undo-bar form {
    margin: 0;
}

.history-yesterday {
    margin: var(--space-3) 0;
}

.history-day {
    margin: var(--space-4) 0 var(--space-2);
    font-size: 1rem;
}

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

.history-entry {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--colour-border);
}

.history-time {
    color: var(--colour-text-muted);
    font-weight: 600;
    min-width: 3rem;
}

.history-what {
    flex: 1;
    min-width: 10rem;
}

.history-entry form {
    margin: 0;
}

/* Sizes and customer choices in the dish form */
.option-rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: var(--space-2) 0;
}

.option-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.option-row input[type="text"] {
    min-height: var(--tap-size);
    padding: 0 var(--space-2);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 1.0625rem;
    background: var(--colour-surface);
    min-width: 0;
}

.option-name {
    flex: 1 1 7rem;
}

.option-price {
    width: 5.5rem;
    flex: none;
}

.option-remove {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--colour-text-muted);
    font-size: 0.75rem;
    min-height: 36px;
}

.option-row:has(.option-remove input:checked) input[type="text"] {
    opacity: 0.4;
    text-decoration: line-through;
}

.option-allergens {
    flex-basis: 100%;
    font-size: 0.875rem;
    color: var(--colour-text-muted);
}

.option-allergens summary {
    cursor: pointer;
    min-height: 32px;
    display: flex;
    align-items: center;
}

.option-allergen-icons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding-top: var(--space-1);
}

.option-allergen-icons label {
    position: relative;
    display: inline-flex;
    padding: 3px;
    border: 2px solid transparent;
    border-radius: 999px;
    cursor: pointer;
}

.option-allergen-icons input {
    position: absolute;
    opacity: 0;
}

.option-allergen-icons label:has(input:not(:checked)) img {
    opacity: 0.3;
    filter: grayscale(1);
}

.option-allergen-icons label:has(input:checked) {
    border-color: var(--colour-teal);
}

.choice-group {
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

.choice-group .field {
    margin-bottom: var(--space-2);
}

.field-row-even {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
}

.option-remove-group {
    margin-top: var(--space-2);
}

/* Sold out */
.flag-sold-out {
    color: var(--colour-failed);
    background: var(--colour-failed-background);
    border-radius: 999px;
    padding: 0 var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
}

/* Hidden from diners ("Hide", Phil 2026-10-19): greyed out in the owner's menu, with a "🙈 Hidden" tag */
.flag-hidden {
    display: inline-block;
    color: var(--colour-text);
    background: var(--colour-border);
    border-radius: 999px;
    padding: 0 var(--space-2);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
}

.menu-item-hidden .menu-item-name,
.menu-item-hidden .menu-item-photo,
.menu-section-hidden .menu-section-body {
    opacity: 0.5;
}

.hide-switch {
    margin-top: var(--space-4);
}

/* The sold-out page (Phil, 2026-10-14): laid out like the customers' Interactivo menu. Sections fold (one open
   at a time), sub-headings fold inside them, and each dish is one big button: name, price, small photo. */
.sold-out-page h1 {
    margin-bottom: var(--space-2);
}

.sold-out-fold > summary,
.sold-out-sub-fold > summary {
    display: block;
    list-style: none;
    cursor: pointer;
}

.sold-out-fold > summary::-webkit-details-marker,
.sold-out-sub-fold > summary::-webkit-details-marker {
    display: none;
}

.sold-out-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--colour-border);
    font-size: 1rem;
}

.sold-out-fold > summary .sold-out-section-title::before,
.sold-out-sub-fold > summary .sold-out-sub-title::before {
    content: "▸";
    color: var(--colour-teal-dark);
}

.sold-out-fold[open] > summary .sold-out-section-title::before,
.sold-out-sub-fold[open] > summary .sold-out-sub-title::before {
    content: "▾";
}

.sold-out-sub-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) 0 var(--space-2) var(--space-2);
    border-bottom: 1px solid var(--colour-border);
    color: var(--colour-teal-dark);
    font-size: 0.875rem;
    letter-spacing: 0.08em;
}

/* How many dishes are inside: the grey bubble at the right */
.sold-out-count {
    margin-left: auto;
    padding: 0 0.55rem;
    border-radius: 999px;
    background: var(--colour-border);
    color: var(--colour-text-muted);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: normal;
}

.sold-out-section-title .flag-sold-out {
    letter-spacing: normal;
    text-transform: none;
}

/* "Agotados (4)" in the bottom bar: the button lays its parts out side by side, so the space is a margin */
.sold-out-total {
    margin-left: 0.3em;
}

/* The name takes the room, so "Agotados: 2" and the count sit at the right */
.sold-out-section-title > span:first-of-type {
    margin-right: auto;
}

.sold-out-section-title .sold-out-count {
    margin-left: 0;
}

.sold-out-dishes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.sold-out-sub-fold .sold-out-dishes {
    padding-left: var(--space-2);
}

.sold-out-dish {
    border-bottom: 1px solid var(--colour-border);
}

.sold-out-dish form {
    margin: 0;
}

/* The whole line is the button, like a dish on the customers' menu */
.sold-out-dish-line {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 56px;
    padding: var(--space-2) 0;
    border: 0;
    background: none;
    color: var(--colour-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sold-out-dish-line:focus-visible {
    outline: 3px solid var(--colour-teal);
    outline-offset: 2px;
}

.sold-out-dish-photo {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    object-fit: cover;
}

.sold-out-dish-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.sold-out-dish-name {
    font-weight: 600;
}

.sold-out-dish-price {
    flex: none;
    font-weight: 600;
    white-space: nowrap;
}

.sold-out-dish-who,
.sold-out-who {
    color: var(--colour-failed);
    font-size: 0.8125rem;
    font-weight: 600;
}

.sold-out-dish-who:empty {
    display: none;
}

/* The red "Agotado" label, like the customers see it */
.sold-out-dish-tag {
    display: none;
    flex: none;
    padding: 0 var(--space-2);
    border-radius: 999px;
    background: var(--colour-failed-background);
    color: var(--colour-failed);
    font-size: 0.75rem;
    font-weight: 600;
}

.sold-out-dish.is-sold-out .sold-out-dish-tag {
    display: inline-block;
}

.sold-out-dish.is-sold-out .sold-out-dish-name,
.sold-out-dish.is-sold-out .sold-out-dish-price {
    color: var(--colour-text-muted);
    text-decoration: line-through;
}

.sold-out-dish.is-sold-out .sold-out-dish-photo {
    opacity: 0.45;
}

/* Saving: a small spinning circle at the end of the line (js/sold-out.js), and the line fades a little */
.sold-out-spinner {
    display: none;
    flex: none;
    width: 20px;
    height: 20px;
    border: 3px solid var(--colour-border);
    border-top-color: var(--colour-teal);
    border-radius: 50%;
    animation: sold-out-spin 0.7s linear infinite;
    vertical-align: middle;
}

.is-busy > form .sold-out-spinner {
    display: inline-block;
}

.is-busy > form .sold-out-dish-line,
.is-busy > span {
    opacity: 0.6;
}

/* "Still sold out?" buttons: the spinner on the one that was tapped (the page then loads again) */
.button.is-busy::after {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: var(--space-2);
    border: 3px solid rgba(255, 255, 255, 0.5);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: sold-out-spin 0.7s linear infinite;
    vertical-align: middle;
}

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

@media (prefers-reduced-motion: reduce) {
    .sold-out-spinner,
    .button.is-busy::after {
        animation-duration: 2s;
    }
}

/* "Still sold out?" each new day (partials/sold_out_check.php): a warning box, two buttons per mark */
.sold-out-check {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border-radius: var(--radius);
    border-left: 4px solid var(--colour-warning);
    background: var(--colour-warning-background);
}

.sold-out-check h2 {
    margin: 0 0 var(--space-1);
    font-size: 1.0625rem;
    color: var(--colour-warning);
}

.sold-out-check p {
    margin: 0 0 var(--space-2);
}

.sold-out-check-list {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding: 0;
}

.sold-out-check-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--colour-border);
}

.sold-out-check-name {
    font-weight: 600;
}

.sold-out-check-name small {
    font-weight: 400;
    color: var(--colour-text-muted);
}

.sold-out-check-since {
    font-size: 0.8125rem;
    color: var(--colour-text-muted);
}

.sold-out-check-buttons {
    display: flex;
    gap: var(--space-2);
    width: 100%;
    margin-top: var(--space-2);
}

.sold-out-check-buttons .button {
    flex: 1;
}

/* The floating "Options" button and its panel (templates/partials/options_sheet.php). The button sits just above
   the bar along the bottom; open, the panel is a card floating just above it (the bar stays usable, Phil
   2026-10-15), and the button becomes "✕ Close" exactly where it was, under the thumb (it's the <details>
   summary, so it works without JavaScript). */
.options-fab {
    position: fixed;
    right: var(--space-3);
    bottom: calc(var(--nav-bar-height) + 15px + env(safe-area-inset-bottom));
    z-index: 22;
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding: 0 var(--space-3);
    border-radius: 999px;
    background: var(--colour-teal-dark);
    color: #fff;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* A page with the button: more room at the end, so it never covers the last "+ Add a dish" */
.page-with-nav:has(.options-sheet) {
    padding-bottom: calc(150px + env(safe-area-inset-bottom));
}

.options-fab::-webkit-details-marker {
    display: none;
}

.options-fab:hover,
.options-fab:focus-visible {
    background: var(--colour-slate);
}

.options-fab-open {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.options-fab-close,
.options-sheet[open] .options-fab-open {
    display: none;
}

.options-sheet[open] .options-fab-close {
    display: inline;
}

.options-sheet[open] .options-fab {
    background: var(--colour-slate);
}

/* Something needs an answer: orange, with how many, and two pulses when the page opens */
.options-fab.is-warning {
    background: var(--colour-warning);
    animation: options-pulse 1.2s ease-out 2;
}

.options-fab-count {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: #fff;
    color: var(--colour-warning);
    font-size: 0.8125rem;
    line-height: 22px;
    text-align: center;
}

@keyframes options-pulse {
    0% { box-shadow: 0 0 0 0 rgba(138, 90, 0, 0.6); }
    100% { box-shadow: 0 0 0 18px rgba(138, 90, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .options-fab.is-warning {
        animation: none;
    }
}

.options-sheet-backdrop {
    position: fixed;
    inset: 0 0 calc(var(--nav-bar-height) + env(safe-area-inset-bottom));
    z-index: 20;
    background: rgba(46, 56, 66, 0.45);
}

/* A floating card just above the "✕ Close" button (Phil, 2026-10-15), not touching the screen's edges */
.options-sheet-panel {
    position: fixed;
    left: var(--space-2);
    right: var(--space-2);
    bottom: calc(var(--nav-bar-height) + env(safe-area-inset-bottom) + 75px);
    z-index: 21;
    max-width: 560px;
    max-height: calc(85vh - var(--nav-bar-height) - 75px);
    margin: 0 auto;
    overflow-y: auto;
    padding: var(--space-3);
    border-radius: 16px;
    background: var(--colour-surface);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}

.options-sheet-title {
    margin: var(--space-3) 0 var(--space-1);
    color: var(--colour-text-muted);
    font-size: 0.8125rem;
}

.options-sheet-title:first-child {
    margin-top: 0; /* the card's own padding is enough: same space at the top as at the bottom */
}

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

.options-sheet-list form {
    margin: 0;
}

/* One row per option: icon, words (and a small line under), the whole row is the button */
.options-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 52px;
    padding: var(--space-2);
    border: 0;
    border-radius: 8px;
    background: none;
    color: var(--colour-text);
    font: inherit;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.options-sheet-item:hover,
.options-sheet-item:focus-visible {
    background: var(--colour-background);
}

.options-sheet-item.is-warning {
    background: var(--colour-warning-background);
    color: var(--colour-warning);
    font-weight: 600;
}

.options-sheet-list li + li .options-sheet-item.is-warning {
    margin-top: var(--space-1);
}

.options-sheet-icon {
    flex: 0 0 28px;
    font-size: 1.25rem;
    text-align: center;
}

.options-sheet-text small {
    display: block;
    color: var(--colour-text-muted);
    font-weight: 400;
}

/* The page behind doesn't scroll while the panel is open (js/options-sheet.js) */
body.has-options-open {
    overflow: hidden;
}

.history-who {
    display: block;
    color: var(--colour-text-muted);
}

/* Staff login QR code */
.staff-login-code {
    margin-bottom: var(--space-3);
    text-align: center;
}

.staff-qr {
    width: min(260px, 80vw);
    margin: var(--space-2) auto var(--space-3);
    padding: var(--space-2);
    background: #ffffff;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

.staff-qr svg {
    display: block;
    width: 100%;
    height: auto;
}

.staff-qr .qr-data.dark,
.staff-qr path.dark {
    fill: #000000;
}

/* /app/qr: the tables first, one box per zone (its name, its numbers with − / + beside them, how many tables) */
.qr-tables-total {
    margin: 0 0 var(--space-1);
    font-size: 1.125rem;
}

.qr-zone {
    margin: 0 0 var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

.qr-zone[hidden] {
    display: none;
}

.qr-zone .field {
    margin-bottom: var(--space-2);
}

.qr-zone-numbers-row {
    display: flex;
    gap: var(--space-2);
}

.qr-zone-numbers-row input {
    flex: 1;
    min-width: 0;
}

.qr-zone-step {
    flex: none;
    width: var(--tap-size);
    padding: 0;
    font-size: 1.5rem;
    font-weight: 800;
}

.qr-zone-count {
    display: block;
    color: var(--colour-text-muted);
    font-weight: 600;
}

/* Sticker sizes: a square drawn to scale beside each (6px a centimetre) */
.qr-sizes {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.qr-size-square {
    flex: none;
    width: calc(var(--qr-cm) * 6px);
    height: calc(var(--qr-cm) * 6px);
    margin: var(--space-1) 0;
    border: 2px solid var(--colour-slate);
    border-radius: 3px;
    background: repeating-conic-gradient(var(--colour-slate) 0 25%, #ffffff 0 50%) 0 0 / 8px 8px;
    opacity: 0.8;
}

/* "Elegir cuáles…" / "Descargar…": folded away until asked for */
.qr-print-some,
.qr-downloads {
    margin: var(--space-2) 0;
}

.qr-print-some > summary,
.qr-downloads > summary {
    list-style: none;
}

.qr-print-some > summary::-webkit-details-marker,
.qr-downloads > summary::-webkit-details-marker {
    display: none;
}

.qr-print-tables {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: var(--space-2);
    margin: var(--space-2) 0;
}

/* Held back while the tables have changes not saved yet (js/qr-tables.js) */
[data-qr-print] button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.qr-menu-code {
    width: min(180px, 60vw);
}

/* Mesas: a heading per zone ("Barra", "Terraza") */
.tables-zone {
    margin: var(--space-4) 0 0;
}

.staff-link-text {
    width: 100%;
    margin-top: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    font-size: 0.8125rem;
    color: var(--colour-text-muted);
}

/* ---------- Larger screens ---------- */

@media (min-width: 700px) {
    .page {
        padding: var(--space-5) var(--space-4);
    }

    .panel {
        padding: var(--space-5);
    }

    h1 {
        font-size: 2rem;
    }

    .card {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

/* Sold-out screen: change the message of a dish with a schedule */
.sold-out-note {
    margin-top: 0.4rem;
}

.sold-out-note summary {
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    color: var(--colour-teal-dark);
    font-size: 0.9375rem;
}

.sold-out-note-form {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.sold-out-note-form input {
    flex: 1;
    min-width: 0;
}

/* Dish and section forms: the day buttons of "Only at certain times or dates" */
.schedule-days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 48px));
    gap: 0.3rem;
}

.schedule-day input {
    position: absolute;
    opacity: 0;
}

.schedule-day span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid var(--colour-border);
    border-radius: 50%;
    font-weight: 700;
    cursor: pointer;
}

.schedule-day input:checked + span {
    background: var(--colour-teal);
    border-color: var(--colour-teal);
    color: #fff;
}

.schedule-day input:focus-visible + span {
    outline: 3px solid var(--colour-teal-dark);
    outline-offset: 2px;
}

.schedule-pair {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.schedule-pair input[data-time] {
    width: 7em;
    text-align: center;
}

.schedule-pair label {
    display: flex;
    flex-direction: column;
}

/* Owner menu list: "Fridays · with message" */
.menu-schedule-chip {
    display: block;
    font-weight: 400;
    margin-top: 0.2rem;
    color: var(--colour-text-muted);
    font-size: 0.8125rem;
}

/* Dish photo: the form's preview and the menu list's small square */
.photo-preview img {
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: 0.5rem;
    object-fit: cover;
    border-radius: 8px;
}

.menu-item-photo {
    float: right;
    width: 48px;
    height: 48px;
    margin-left: 0.5rem;
    object-fit: cover;
    border-radius: 6px;
}

/* Dish photo buttons: "Take a photo" / "Choose from the gallery". The real file boxes are hidden
   inside the buttons (tapping a label opens its box). No camera button on computers. */
.photo-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (pointer: fine) {
    .photo-camera {
        display: none;
    }
}

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

.photo-buttons label:focus-within {
    outline: 3px solid var(--colour-teal-dark);
    outline-offset: 2px;
}

/* Menu editor: "12 texts to translate · Translate now" (menu-translate.js) */
.translate-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.translate-bar form {
    margin: 0;
}

.translate-bar small {
    flex-basis: 100%;
    color: var(--colour-text-muted);
}

/* While translating: stays at the top of the screen when the owner scrolls down the menu (Phil). */
.translate-bar.is-working {
    position: sticky;
    top: 0;
    z-index: 9;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.translate-progress {
    flex-basis: 100%;
    margin: 0;
}

/* Dish/section form title: the language being written in ("DE") */
.writing-language {
    vertical-align: middle;
    font-size: 0.75rem;
}

/* An automatic translation not checked yet (partials/menu_name.php) */
.auto-tag {
    display: inline-block;
    padding: 0 var(--space-1);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    color: var(--colour-text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

.auto-tag-allergens {
    border-color: var(--colour-warning);
    background: var(--colour-warning-background);
    color: var(--colour-warning);
}

/* The privacy policy and legal notice: a document to read, so plain text with room to breathe */
.legal-page h2 {
    margin-top: var(--space-4);
    font-size: 1.125rem;
}

.legal-page h3 {
    margin-top: var(--space-3);
    font-size: 1rem;
}

.legal-page ul {
    padding-left: 1.25rem;
}

.legal-page li {
    margin-bottom: var(--space-1);
}

/* ---------- Phil's AI model page (/admin/ai-models) ---------- */

/* The menu photo being compared, never wider than the screen */
.admin-menu-photo {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

/* "Read with Opus" / "Read with Haiku": one small form each, side by side when there's room */
.admin-read-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.admin-read-buttons form {
    margin: 0;
}

/* ---------- Menu import from photos (/app/import) ---------- */

.import-photo-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.import-photo-list form {
    margin: 0;
}

/* Reading: something always moves (Phil: the owner must never think nothing is happening) */
.import-progress {
    margin: var(--space-4) 0;
    text-align: center;
}

.import-progress-title {
    font-size: 1.25rem;
    font-weight: 600;
}

.progress-bar {
    height: 14px;
    margin: var(--space-3) 0;
    overflow: hidden;
    border-radius: 7px;
    background: var(--colour-border);
}

.progress-bar-fill {
    height: 100%;
    border-radius: 7px;
    /* moving stripes, so the bar looks alive even between updates */
    background: repeating-linear-gradient(-45deg, var(--colour-teal) 0 12px, var(--colour-teal-dark) 12px 24px);
    background-size: 34px 34px;
    animation: progress-stripes 1s linear infinite;
    transition: width 0.5s ease-out;
}

@keyframes progress-stripes {
    to { background-position: 34px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .progress-bar-fill { animation: none; }
}

.import-progress-hint {
    min-height: 1.5em;
    color: var(--colour-text-muted);
}

.import-progress-time {
    font-variant-numeric: tabular-nums;
    color: var(--colour-text-muted);
}

/* Review */
.import-section {
    margin: 0 0 var(--space-4);
    padding: var(--space-3);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

.import-include {
    margin-bottom: var(--space-1);
}

.import-size {
    margin-top: var(--space-1);
    padding-left: var(--space-3);
}

.import-description {
    width: 100%;
    margin-top: var(--space-1);
}

/* Small previews of the photos being imported */
.import-thumb {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
}

.import-photo-list li > span {
    flex: 1;
}

.import-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.import-section .quick-add-rows {
    list-style: none;
    padding: 0;
}

/* The description box: same look as the other boxes, one size smaller */
.import-description {
    min-height: 40px;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--colour-border);
    border-radius: var(--radius);
    font: inherit;
    font-size: 0.9375rem;
}

/* ---------- The allergen screen (/app/allergens): every dish on one page ---------- */

.allergen-screen-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.allergen-screen-section {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

.allergen-screen-section legend h2 {
    margin: 0 0 var(--space-2);
}

.allergen-screen-shortcut {
    margin-bottom: var(--space-3);
    font-size: 0.9375rem;
}

.allergen-screen-shortcut summary {
    color: var(--colour-teal-dark);
    cursor: pointer;
}

/* One dish: compact, so a long menu stays easy to work down on a phone */
.allergen-screen-dish {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--colour-border);
}

.allergen-screen-name {
    margin: 0 0 var(--space-2);
}

.allergen-answers-small .allergen-answer span {
    min-height: 44px;
    padding: var(--space-1);
    font-size: 0.9375rem;
}

/* Smaller tiles: three side by side on a phone */
.allergen-grid-small {
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: var(--space-1);
}

.allergen-grid-small .allergen-choice {
    min-height: 44px;
    gap: var(--space-1);
    padding: var(--space-1);
    font-size: 0.8125rem;
    line-height: 1.2;
}

.allergen-screen-status {
    min-height: 1.2em;
    margin: var(--space-1) 0 0;
    font-size: 0.875rem;
    color: var(--colour-text-muted);
}

.allergen-screen-dish.is-saved .allergen-screen-status {
    color: var(--colour-ok);
    font-weight: 600;
}

.allergen-screen-dish.has-problem .allergen-screen-status {
    color: var(--colour-warning);
    font-weight: 600;
}

.allergen-screen-note {
    margin-top: var(--space-4);
}

/* ---------- Trial restaurants: "Trial menu · 11 days left · Make this menu mine" ---------- */

.trial-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.trial-banner p {
    margin: 0;
}

/* ---------- Set menus (sections of kind set_menu / daily_menu) ---------- */

/* "+ Section": ordinary / menú del día / set menu */
.section-kinds {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

/* In the menu editor: the menu's price beside its name, what's included, and each course */
.menu-set-price {
    margin-left: var(--space-2);
    color: var(--colour-teal-dark);
    letter-spacing: normal;
}

.menu-set-includes {
    margin: 0 0 var(--space-2);
    color: var(--colour-text-muted);
}

.menu-course {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-2);
    border-left: 3px solid var(--colour-border);
}

.menu-course-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.menu-course-header h3 {
    margin: var(--space-2) 0;
    font-size: 1rem;
}

/* An ordinary section's sub-headings ("Cervezas" in "Bebidas"): the same box as a set menu's courses */
.menu-subheading {
    margin-top: var(--space-3);
    border-left-color: var(--colour-teal);
}

/* In the menu editor: the featured section stands out like it does for diners; adverts are marked */
.menu-section-featured {
    border: 2px solid var(--colour-teal);
}

.menu-item-notice .menu-item-name {
    font-style: italic;
}

/* A new owner's first steps (src/platform/first_steps.php) */
.start-here {
    border: 2px solid var(--colour-teal);
}

.start-here-go {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    margin-bottom: var(--space-2);
    padding: var(--space-3);
    border-radius: 0.5rem;
    background: var(--colour-teal);
    color: #fff;
    font-weight: 800;
    font-size: 1.125rem;
    text-decoration: none;
}

.start-here-go small {
    display: block;
    font-weight: 400;
    font-size: 0.875rem;
}

.start-here-arrow {
    font-size: 2rem;
    line-height: 1;
}

.next-steps-list,
.start-ways {
    margin: 0;
    padding-left: 1.5rem;
}

.next-steps-list li,
.start-way {
    margin-bottom: var(--space-3);
}

.next-step-done {
    color: var(--colour-text-muted);
    text-decoration: line-through;
}

.next-step-tick {
    color: var(--colour-teal-dark);
    font-weight: 800;
}

.start-way h2 {
    margin-bottom: var(--space-1);
    font-size: 1rem;
}

.start-way-tag {
    margin-left: var(--space-1);
    padding: 0 var(--space-2);
    border-radius: 999px;
    background: var(--colour-teal);
    color: #fff;
    font-size: 0.75rem;
    letter-spacing: normal;
    text-transform: none;
    vertical-align: middle;
}

/* Import of a menu printed in two languages: the second language's name, under the first */
.import-second {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.import-second input {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
}

/* "What's sold out": a dish's sizes and choices, each with its own button */
.sold-out-options ul {
    margin: var(--space-1) 0 0;
    padding: 0;
    list-style: none;
}

.sold-out-options li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    padding: var(--space-1) 0;
}

.sold-out-options li.is-sold-out > span {
    text-decoration: line-through;
}

/* "Mesas": the waiter's tables and a scanned list (templates/owner/tables.php, table.php, order.php) */
.tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: 0;
    list-style: none;
}

.tables-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 96px;
    padding: var(--space-2);
    border: 1px solid var(--colour-border, #d5dbe0);
    border-radius: 0.75rem;
    color: inherit;
    font-size: 0.8125rem;
    text-align: center;
    text-decoration: none;
}

.tables-cell strong {
    font-size: 1.75rem;
    line-height: 1.2;
}

.tables-cell-busy {
    border: 2px solid var(--colour-teal);
    background: #e9f7f5;
}

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

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

.table-lines li {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--colour-border, #d5dbe0);
    font-size: 1.0625rem;
}

.table-line-price {
    float: right;
    font-weight: 600;
}

.table-line-detail,
.table-line-note {
    display: block;
    color: var(--colour-text-muted);
    font-size: 0.9375rem;
}

.table-line-note {
    font-style: italic;
}

/* A dish of a scanned list that had already reached a waiter: not added again */
.table-line-received {
    color: var(--colour-text-muted);
    text-decoration: line-through;
}

.table-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.25rem;
}

.table-total strong {
    white-space: nowrap;
}

.table-round-done {
    margin-top: var(--space-3);
}

.table-round-done summary {
    min-height: 48px;
    padding: var(--space-2) 0;
    font-weight: 600;
    cursor: pointer;
}

.table-close {
    margin-top: var(--space-4, 2rem);
}

/* "📷 Scan an order" (templates/partials/order_scan.php): only once js/order-scan.js knows the phone can scan */
.order-scan-button {
    margin: var(--space-2) 0;
}

html:not(.can-scan) .order-scan-button {
    display: none;
}

/* "Delete account..." on /admin/restaurants: quiet and closed until opened (templates/admin/restaurants.php) */
.admin-delete summary {
    min-height: var(--tap-size);
    padding: var(--space-2) 0;
    color: #b3261e;
    cursor: pointer;
}

.admin-delete form {
    padding: var(--space-3);
    border: 2px solid #b3261e;
    border-radius: 0.75rem;
    background: #fdecea;
}

/* "Quitar" under a dish on a table's page (a read-back mistake, the kitchen ran out): two taps */
.table-remove-box {
    margin-top: var(--space-1);
    font-size: 0.875rem;
}

.table-remove-box summary {
    min-height: 32px;
    color: #b3261e;
    cursor: pointer;
}

.table-remove-box form {
    margin-top: var(--space-1);
}

/* Under each dish on a table's page: "+1" (one more of the same), "📳 Avisar" (buzz the phone that ordered
   it) and "Quitar", in one row; an opened box takes the whole width */
.table-line-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-1) var(--space-3);
    margin-top: var(--space-1);
}

.table-line-actions details[open] {
    flex-basis: 100%;
}

/* "+1" opens a box with "Add another: 1 × Wine", so a second tap is needed */
.table-again-box summary {
    min-width: 48px;
    list-style: none;   /* a button, without the box's triangle */
}

.table-again-box summary::-webkit-details-marker {
    display: none;
}

.table-again-box[open] summary {
    background: var(--colour-teal-dark);
    color: #fff;
}

.table-again-box form {
    margin-top: var(--space-1);
}

.table-ping-box {
    margin-top: var(--space-1);
    font-size: 0.875rem;
}

.table-ping-box summary {
    min-height: 32px;
    color: var(--colour-teal-dark);
    font-weight: 600;
    cursor: pointer;
}

.table-ping-box form {
    display: grid;
    gap: var(--space-1);
    margin-top: var(--space-1);
}

/* A dish taken off: the dish crossed out (.table-line-received), "quitado a las 14:32" under it */
.table-line-removed {
    display: block;
    color: #b3261e;
    font-size: 0.875rem;
    font-weight: 600;
}

/* A scanned list's dishes, each with its tick: unticked ones are not added (templates/owner/order.php) */
.table-line-tickable {
    display: grid;
    grid-template-columns: auto 1fr auto;
    column-gap: var(--space-2);
    align-items: baseline;
}

.table-line-tickable > .table-line-detail,
.table-line-tickable > .table-line-note {
    grid-column: 2 / 4;
}

.table-line-tickable .table-line-price {
    float: none;
}

.table-line-tick {
    width: 24px;
    height: 24px;
}

/* "Log out on this phone..." at the bottom of the waiter's page: well out of the way */
.waiter-logout {
    margin-top: var(--space-6, 3rem);
}

/* Cuentas (src/platform/cuentas.php): which slip a scanned list goes on, and each slip's box */
.cuenta-choice {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0;
    padding: 0;
    border: 0;
}

.cuenta-choice .choice {
    padding-top: var(--space-2);
    padding-bottom: var(--space-2);
}

.cuenta-why {
    display: block;
    color: var(--colour-text-muted);
    font-weight: 400;
}

.cuenta-new {
    padding: 0 var(--space-3);
}

.cuenta-long {
    display: inline-block;
    margin-left: var(--space-1);
    color: #c77700;
    font-weight: 700;
}

.cuenta-box {
    margin: var(--space-4, 2rem) 0 0;
    padding: var(--space-3);
    border: 2px solid var(--colour-border);
    border-radius: 0.75rem;
}

.cuenta-box-long {
    border-color: #c77700;
}

.cuenta-box h2 {
    margin: 0;
    font-size: 1.125rem;
}

.cuenta-tools {
    margin-top: var(--space-3);
}

.cuenta-tools summary {
    min-height: var(--tap-size);
    padding: var(--space-2) 0;
    cursor: pointer;
}

.cuenta-tools form {
    margin-bottom: var(--space-3);
}

/* A table with a cuenta open for hours ("still here?"): never closed by itself, just shown */
.tables-cell-long {
    border-color: #c77700;
    background: #fff4dc;
}

/* "Cuentas cobradas": ← previous day · Today · next day → */
.cuentas-days {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2);
}

details.cuenta-box > summary {
    min-height: var(--tap-size);
    cursor: pointer;
}

/* The Help page (/app/help): the question box, the answers, then the whole list in closed boxes */
.help-ask label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.help-ask-row {
    flex-direction: row; /* .field gives the box its look; the button sits beside it */
    gap: var(--space-2);
}

.help-ask-row input {
    flex: 1 1 auto;
    min-width: 0;
    min-height: var(--tap-size);
}

.help-answers,
.help-ask + .notice {
    margin-top: var(--space-4);
}

.help-all-title {
    margin-top: 0;
}

.help-also {
    margin: var(--space-4) 0 var(--space-2);
    color: var(--colour-text-muted);
}

/* The AI step (src/platform/help_ai.php): "Yes, that's it" under an answer, "Not what I meant", "Thinking…" */
.help-yes,
.help-yes-done {
    margin: var(--space-2) 0 var(--space-3);
}

.help-yes-done {
    color: var(--colour-ok);
    font-weight: 600;
}

.help-not-meant {
    margin-top: var(--space-4);
}

.help-not-meant a {
    display: inline-block;
    min-height: var(--tap-size);
    line-height: var(--tap-size);
}

.help-thinking {
    margin-top: var(--space-2);
}

/* The Help page's three parts (HELP_PARTS), buttons above the list */
.help-parts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.help-area h3 {
    margin: var(--space-4) 0 var(--space-2);
}

.help-entry {
    border-bottom: 1px solid var(--colour-border);
}

.help-entry > summary {
    min-height: var(--tap-size);
    padding: var(--space-3) 0;
    font-weight: 600;
    cursor: pointer;
}

.help-entry[open] {
    padding-bottom: var(--space-3);
}

.help-how {
    margin-top: 0;
}

.help-entry-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Phil's /admin/help-questions: a question that found nothing, still to look at */
.help-question-unanswered {
    border-left: 4px solid var(--colour-failed);
}