/* =================================================================================================
   Orlando Up — hand-written stylesheet, no framework and no build step (D7/01).
   Palette v1, approved as D29 and tabulated in Docs/architecture.md section 12.

   Contrast, computed with the WCAG relative-luminance formula from the token values below and
   not estimated. Every pair the site actually paints is here:

     white       on navy    ...... 16.38     ink         on paper   ...... 15.74
     sun         on navy    ...... 10.50     ink         on white   ...... 16.97
     on-navy-muted on navy  ...... 10.88     link        on paper   ......  6.63
     navy        on sun     ...... 10.50     link        on white   ......  7.14
     navy        on paper   ...... 15.20     muted       on paper   ......  6.96
     fit-text    on fit-bg  ......  6.58     muted       on white   ......  7.50
     tint-text   on tint    ......  6.25     ink         on tint    ...... 15.33

   The sun token reaches 1.45 against paper, which is why it is a SURFACE and never a text colour
   on a light ground: it carries navy on top of it, and it is a text colour only over navy.
   Section 12 rounds the fit pill to ">= 7" and the tint to 6.4; measured here they are 6.58 and
   6.25. Both clear the 4.5 the D9 requires, and the measured number is the one that governs.

   The focus ring is a token too, because it has to clear 3:1 on both grounds: navy on paper is
   15.20, and inside a dark panel it flips to sun on navy, 10.50.
   ============================================================================================== */

:root {
    --color-navy: #0B1F3F;
    --color-ink: #111C33;
    --color-paper: #FAF6EE;
    --color-card: #FFFFFF;
    --color-sun: #FFC72C;
    --color-link: #175A96;
    --color-muted: #4B5568;
    --color-on-navy-muted: #C9D3E6;
    --color-card-border: #EAE3D6;
    --color-fit-bg: #E1F1EC;
    --color-fit-text: #0B5E51;
    --color-tint: #FFF3CF;
    --color-tint-border: #F5DFA0;
    --color-tint-text: #7A5200;

    /* Reassigned inside dark panels, at the bottom of this file. */
    --color-focus: var(--color-navy);

    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;

    --radius-card: 22px;
    --radius-panel: 28px;
    --radius-pill: 999px;
    --shadow: 0 1px 2px rgba(11, 31, 63, 0.06), 0 10px 30px rgba(11, 31, 63, 0.07);

    --font-heading: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
    --font-body: "Manrope", "Segoe UI", system-ui, sans-serif;

    /* The display scale of Docs/architecture.md section 12 is a DESKTOP scale (D5 of the amendment
       EMENDA-02-04). Each step keeps its desktop maximum and shrinks on a narrow viewport, because
       84 px with -0.02em tracking breaks a headline into three lines on a 375 px phone. Hit targets
       and the focus ring do not scale with this — they are fixed further down. */
    --type-display: clamp(2.5rem, 1.4rem + 5.2vw, 5.25rem);   /* 40 -> 84 px */
    --type-h1: clamp(2rem, 1.3rem + 3vw, 3rem);               /* 32 -> 48 px */
    --type-h2: clamp(1.625rem, 1.2rem + 1.9vw, 2.5rem);       /* 26 -> 40 px */
    --type-h3: clamp(1.375rem, 1.15rem + 1vw, 2rem);          /* 22 -> 32 px */
    --type-h4: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);      /* 20 -> 26 px */
    --type-h5: 1.5rem;                                        /* 24 px */

    --measure: 68ch;
    --page: 72rem;
    --tap: 44px;
}

/* Both families are VARIABLE fonts and the ranges below are what the FILES carry, measured with
   fontTools, not the ranges this design happens to use: wght 200-800 in both. Declaring the used
   range instead would make the browser synthesise weights it already has (EMENDA-02-04 D3).

   The subsets are latin and latin-ext. Portuguese lives entirely in latin — its accented letters
   are U+00C0-U+00FF — and latin-ext is U+0100-024F, Central and Eastern Europe. latin-ext ships
   anyway, and unicode-range is why that is free: a browser fetches a subset only when a character
   on the page needs it, so those bytes are repository size and never page weight. A guest name or
   a hotel name with a Central-European letter then renders in the site's own type instead of
   dropping to a fallback mid-word. */
@font-face {
    font-family: "Bricolage Grotesque";
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
        U+FEFF, U+FFFD;
}

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

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

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

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

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

body {
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.55;
    font-weight: 400;
}

/* The heading family carries a second axis, opsz 12-96, and this is the line that decides what to
   do with it: automatic optical sizing, so an 84 px display headline and a 24 px sub-heading take
   different letterforms. Pinning the axis would throw away half of what the file carries. */
h1, h2, h3, h4, h5, h6, .wordmark {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 0 var(--space-4);
    text-wrap: balance;
}

h1 { font-size: var(--type-h1); }
h2 { font-size: var(--type-h2); }
h3 { font-size: var(--type-h3); }
h4 { font-size: var(--type-h4); }

p { margin: 0 0 var(--space-4); }

a {
    color: var(--color-link);
    text-underline-offset: 0.15em;
}

a:hover { text-decoration-thickness: 2px; }

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

ul { padding-left: 1.2em; }

/* Focus is never removed, only replaced, and it is visible on both grounds (D9). */
:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

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

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -4rem;
    z-index: 10;
    background: var(--color-sun);
    color: var(--color-navy);
    font-weight: 700;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}

.skip-link:focus {
    top: var(--space-4);
}

.page {
    width: 100%;
    max-width: var(--page);
    margin: 0 auto;
    padding: 0 var(--space-5);
}

.section {
    padding: var(--space-8) 0;
}

.section--tint {
    background: var(--color-tint);
}

.section--navy {
    background: var(--color-navy);
    color: #FFFFFF;
    --color-focus: var(--color-sun);
}

.section--navy h1,
.section--navy h2,
.section--navy h3 {
    color: #FFFFFF;
}

.section--navy .section__lead,
.section--navy p {
    color: var(--color-on-navy-muted);
}

.section__lead {
    color: var(--color-muted);
    font-size: 1.1875rem;
    max-width: var(--measure);
}

.prose {
    max-width: var(--measure);
}

.prose h2 {
    margin-top: var(--space-7);
}

/* ---------------------------------------------------------------------------------------------
   Header, navigation, language switch
   ------------------------------------------------------------------------------------------ */

.site-header {
    background: var(--color-navy);
    color: #FFFFFF;
    --color-focus: var(--color-sun);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4) var(--space-6);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

.wordmark {
    font-size: 1.625rem;
    font-weight: 800;
    color: #FFFFFF;
    text-decoration: none;
    margin: 0;
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

.wordmark span {
    color: var(--color-sun);
}

.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-nav a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
}

.site-nav a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

.lang-switch {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-pill);
    padding: var(--space-1);
}

.lang-switch a,
.lang-switch span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.9375rem;
    color: #FFFFFF;
    text-decoration: none;
}

.lang-switch [aria-current] {
    background: var(--color-sun);
    color: var(--color-navy);
}

/* ---------------------------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------------------------ */

/* Text and photograph side by side, and the photograph under the button once the band is narrower
   than two 20 rem columns: a fitting grid instead of a width breakpoint (D66, D7/04c). */
.hero {
    background: var(--color-navy);
    color: #FFFFFF;
    padding: var(--space-8) var(--space-5);
    --color-focus: var(--color-sun);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-6);
    align-items: center;
}

.hero h1 {
    font-size: var(--type-display);
    font-weight: 800;
    color: #FFFFFF;
    max-width: 18ch;
}

.hero h1 em,
.hero .accent {
    color: var(--color-sun);
    font-style: normal;
}

.hero p {
    color: var(--color-on-navy-muted);
    font-size: 1.25rem;
    max-width: 46ch;
}

.hero__photo {
    margin: 0;
}

.hero__photo img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-card);
}

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

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 var(--space-6);
    border: 2px solid transparent;
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.button--primary {
    background: var(--color-sun);
    color: var(--color-navy);
}

.button--primary:hover {
    filter: brightness(0.95);
}

.button--quiet {
    background: transparent;
    color: var(--color-link);
    border-color: currentColor;
}

.section--navy .button--quiet,
.hero .button--quiet {
    color: #FFFFFF;
}

.button--disabled {
    background: var(--color-card-border);
    color: var(--color-muted);
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------------------------
   Grids and cards
   ------------------------------------------------------------------------------------------ */

.grid {
    display: grid;
    gap: var(--space-5);
    list-style: none;
    margin: 0 0 var(--space-6);
    padding: 0;
}

.grid--3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.card {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
}

.card h2,
.card h3 {
    font-size: var(--type-h4);
    margin-bottom: var(--space-3);
}

.card p:last-child { margin-bottom: 0; }

.section--navy .card {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-panel);
}

.steps {
    counter-reset: step;
}

.steps .card {
    counter-increment: step;
}

.steps .card h2::before,
.steps .card h3::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    margin-right: var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-sun);
    color: var(--color-navy);
    font-size: 1.125rem;
    vertical-align: middle;
}

/* ---------------------------------------------------------------------------------------------
   Product card
   ------------------------------------------------------------------------------------------ */

.product-card {
    display: flex;
    flex-direction: column;
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

/* The photograph fills the frame; the tint is what shows while it loads (D67). */
.product-card__art {
    background: var(--color-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-card__art img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.product-photo {
    margin: 0 0 var(--space-6);
    max-width: 36rem;
}

.product-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-card);
}

.product-card__body {
    padding: var(--space-5) var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.product-card__name {
    font-size: var(--type-h4);
    margin: 0;
}

.product-card__tagline {
    color: var(--color-muted);
    margin: 0;
}

.product-card__price {
    font-weight: 700;
    font-size: 1.1875rem;
    margin: 0;
}

.product-card__link {
    margin: var(--space-2) 0 0;
}

.product-card__link a {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    font-weight: 700;
}

/* ---------------------------------------------------------------------------------------------
   Badges and pills
   ------------------------------------------------------------------------------------------ */

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.badge {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-pill);
    font-size: 0.9375rem;
    font-weight: 700;
}

/* Both pills carry their meaning in words, never in the colour alone (D9). */
.badge--transport {
    background: var(--color-fit-bg);
    color: var(--color-fit-text);
}

.badge--soon {
    background: var(--color-tint);
    color: var(--color-tint-text);
    border: 1px solid var(--color-tint-border);
}

/* ---------------------------------------------------------------------------------------------
   Definition lists, tables, notices
   ------------------------------------------------------------------------------------------ */

.specs {
    display: grid;
    grid-template-columns: minmax(10rem, auto) 1fr;
    gap: var(--space-2) var(--space-5);
    margin: 0 0 var(--space-6);
}

.specs dt {
    font-weight: 700;
}

.specs dd {
    margin: 0;
    color: var(--color-muted);
}

.table-scroll {
    overflow-x: auto;
    margin-bottom: var(--space-6);
}

/* The equipment block of the staff booking screen: one card per product. The grid fits itself —
   one column at 375 px, two or three on a desktop — so this file still has no width breakpoint,
   which is D7/04c stated in CSS rather than in a comment somewhere else. The one query for a medium
   is the print block at the end of the file (leva 04d). */
.line-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

.line-card {
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card);
    padding: var(--space-4) var(--space-5);
    margin: 0;
}

.line-card legend {
    font-weight: 700;
    padding: 0 var(--space-2);
}

.line-card .field {
    max-width: none;
}

/* The public forms hold their card directly, with no grid gap to space it from the next field; the
   staff card sits inside .line-cards and is not reached (EMENDA-02B-02 B1). */
form > fieldset.line-card {
    margin-bottom: var(--space-5);
}

.field__legend {
    display: block;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

/* One add-on per row, the box and its words on one line, the way .field--check does it. The choice
   is a label inside a .field, so .field label (0,1,1) would win over a lone class (0,1,0) and put
   back display: block and bold: the selector names the .field to outrank it (0,2,0). */
.field .field__choice {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-weight: 400;
}

/* The sibling of .field--check input[type="checkbox"]: .field input stretches every input inside a
   .field, and a line card is one, so without this the box was the width of the card (EMENDA-04C-02). */
.field__choice input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    padding: 0;
    flex: none;
    accent-color: var(--color-link);
}

table {
    border-collapse: collapse;
    width: 100%;
}

caption {
    text-align: left;
    color: var(--color-muted);
    padding-bottom: var(--space-2);
}

th,
td {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-card-border);
}

th {
    font-weight: 700;
}

.notice {
    background: var(--color-tint);
    border: 1px solid var(--color-tint-border);
    border-radius: var(--radius-card);
    color: var(--color-tint-text);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.notice--draft {
    font-weight: 700;
}

.todo {
    color: var(--color-tint-text);
    background: var(--color-tint);
    border-radius: var(--radius-pill);
    padding: 0 var(--space-3);
    font-style: normal;
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------------------------
   Delivery zones
   ------------------------------------------------------------------------------------------ */

.zone {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}

.zone h2 {
    font-size: var(--type-h3);
}

.zone__locations {
    columns: 2 16rem;
    color: var(--color-muted);
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------------------------------ */

.site-footer {
    background: var(--color-ink);
    color: #FFFFFF;
    padding: var(--space-8) 0 var(--space-6);
    --color-focus: var(--color-sun);
}

.site-footer h2 {
    font-size: var(--type-h4);
    color: #FFFFFF;
}

.site-footer a {
    color: #FFFFFF;
}

.site-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer li {
    margin-bottom: var(--space-2);
    color: var(--color-on-navy-muted);
}

.site-footer li a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
}

.site-footer__cols {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    margin-bottom: var(--space-6);
}

.site-footer__legal {
    color: var(--color-on-navy-muted);
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--space-5);
    margin: 0;
    font-size: 0.9375rem;
}

/* ---------------------------------------------------------------------------------------------
   Administration
   ------------------------------------------------------------------------------------------ */

.stat-row {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.stat {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card);
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.stat__value {
    font-family: var(--font-heading);
    font-optical-sizing: auto;
    font-size: var(--type-h5);
    font-weight: 800;
    line-height: 1;
}

.stat__label {
    color: var(--color-muted);
}

.field {
    margin-bottom: var(--space-5);
    max-width: 24rem;
}

.field label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--space-2);
}

.field input {
    width: 100%;
    min-height: var(--tap);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-card-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--color-card);
    color: var(--color-ink);
}

.error-summary {
    background: var(--color-tint);
    border: 1px solid var(--color-tint-border);
    border-radius: var(--radius-card);
    color: var(--color-tint-text);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}

/* Form controls the administration needed and the public site never did. They inherit the shape of
   .field input on purpose: one visual language for every control on one screen. */

.field select,
.field textarea {
    width: 100%;
    min-height: var(--tap);
    padding: var(--space-3) var(--space-4);
    border: 2px solid var(--color-card-border);
    border-radius: var(--radius-card);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--color-card);
    color: var(--color-ink);
}

.field textarea {
    line-height: 1.5;
    resize: vertical;
}

/* A checkbox is one control and one label on one line, and the label is still a label: the tap
   target stays big enough to hit without aiming (D9). */
.field--check {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: none;
}

.field--check input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    min-height: 0;
    accent-color: var(--color-link);
}

.field--check label {
    margin-bottom: 0;
    font-weight: 400;
}

.field__help {
    color: var(--color-muted);
    font-size: 0.9375rem;
    margin: var(--space-2) 0 0;
    max-width: 42rem;
}

/* A refusal under its field keeps the help's distance from it (EMENDA-02B-02 B2). */
.field > .todo {
    margin: var(--space-2) 0 0;
}

/* The repeating row of the price editor: four narrow fields that must not stretch to the width of
   the table cell they sit in. */
.tier-row input,
.tier-row select {
    width: 100%;
    min-width: 6rem;
    min-height: var(--tap);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--color-card-border);
    border-radius: var(--radius-card);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--color-card);
    color: var(--color-ink);
}

.notice {
    background: var(--color-card);
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-card);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}

.admin-nav {
    border-bottom: 1px solid var(--color-card-border);
}

.admin-nav__inner {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
}

/* The day's screen (leva 04d). Built for the phone in the van: the cards are one column at 375 px
   and sit side by side on a desktop, by the same fitting grid as the booking form, with no width
   breakpoint. The buttons of a card take its whole width, stacked, so a long label such as "Left at
   the entrance" never has to fit beside another one. */
.day-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.day-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: var(--space-5);
    margin-bottom: var(--space-6);
}

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

.day-card h3 {
    margin-top: 0;
}

.day-card__status {
    font-weight: 700;
}

.day-card__guidance {
    background: var(--color-tint);
    border: 1px solid var(--color-tint-border);
    border-radius: var(--radius-card);
    color: var(--color-tint-text);
    padding: var(--space-3) var(--space-4);
}

.day-card__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.day-card__actions .button {
    width: 100%;
}

/* The fleet calendar: seven equal columns that share whatever width there is, so a month fits 375 px
   without scrolling sideways; the words of a day wrap inside its cell instead of widening it. */
.calendar {
    table-layout: fixed;
    margin-bottom: var(--space-5);
}

.calendar th,
.calendar td {
    padding: var(--space-1);
    vertical-align: top;
    font-size: 0.8125rem;
    overflow-wrap: anywhere;
}

/* The pickup charges of a booking (EMENDA-04F-02 B3): the items get room to read, and the long ids
   — the provider's PaymentIntent, the staff e-mail — may break anywhere, so their unbreakable width
   no longer pushes the table past its box on a desktop. No width breakpoint (D7/04c). */
.charges__items {
    min-width: 14rem;
}

.charges__break {
    overflow-wrap: anywhere;
}

.calendar__count,
.calendar__over {
    display: block;
}

.calendar__day--over {
    background: var(--color-tint);
    color: var(--color-tint-text);
}

/* The label (D60): the customer's name is the largest text of the page — more than three times the
   body size — because it is read from across a hotel lobby. */
.label-sheet {
    border: 2px solid var(--color-ink);
    border-radius: var(--radius-card);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    text-align: center;
}

.label-sheet__lead {
    font-size: 1.5rem;
}

.label-sheet__name {
    font-family: var(--font-heading);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.label-sheet__brand,
.label-sheet__tag {
    font-weight: 700;
}

.label-sheet__tag {
    font-size: 1.5rem;
}

/* Paper, not a screen (D10/04d): the administration's header and navigation and the print hint
   disappear, and every machine's label starts a page of its own. */
@media print {
    .site-header,
    .admin-nav,
    .print-hint {
        display: none;
    }

    .label-sheet {
        border: none;
        break-after: page;
    }

    .label-sheet:last-child {
        break-after: auto;
    }
}