/* ============================================
   FONTS
   ============================================
   Self-hosted from the OFL releases (the @fontsource packages), latin subset,
   under /css/fonts/ with their licences beside them. No font host is
   contacted at runtime: a page that fetched its type from a third party would
   hand that party every visitor's address, and would render in the fallback
   whenever it was slow. swap shows the fallback at once and the face when it
   arrives. */
@font-face{
    font-family: "Instrument Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face{
    font-family: "Instrument Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}
@font-face{
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2");
}
@font-face{
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/hanken-grotesk-latin-500-normal.woff2") format("woff2");
}
@font-face{
    font-family: "Hanken Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
}
@font-face{
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
}
@font-face{
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}

:root{
    /* The Evergreen palette (HH-S39), taken from Heidi's "Booking Platform
       Roadmap": forest-green buttons and bands, cream grounds, olive-black
       type, mint panels and an apricot accent. It replaces the Westside ocean
       blues (HH-S9 to HH-S11). Approved by Peter (HH-S39 directive). Every hex
       colour the site's CSS uses is defined here and nowhere else; rules below
       name tokens.

       Measured contrast (WCAG 2.x), asserted by e2e/tests/westside.spec.js:
         Ink on Cream 15.62, on Paper 16.42 — body text
         Cream on Evergreen 11.43, Mint on Evergreen 9.16 — header and footer
         Cream on Pine 7.73 — button label on hover
         Pine on Cream 7.73 — the hero's italic
         Moss on Cream 6.82, on Paper 7.17 — secondary text
         Clay on Cream 6.33 — links, focus ring
         Error on Cream 4.85, on Paper 5.09 — error text
         Apricot on Evergreen 5.77 — graphics only (the dot), never text
         the kit's sage dot on Cream 3.33 — graphics only
         the input border on white 3.71 — a component boundary, 3:1
       Mint on a light ground is under 1.5:1: it is never text there. */
    --cream:     #FBF7F1;   /* page background */
    --paper:     #FFFDFA;   /* cards, form panels, the signature pad surround */
    --white:     #FFFFFF;   /* form inputs, the drawing surface */
    --ink:       #1E1F12;   /* body text and headings */
    --evergreen: #0B3D2E;   /* header, footer, primary buttons */
    --pine:      #245840;   /* primary button hover, the hero italic */
    --mint:      #D0E4D8;   /* links on Evergreen, quiet rules and fills */
    --moss:      #4E5A4A;   /* secondary text, captions, hints */
    --clay:      #8A4B1F;   /* text links on light grounds, focus ring */
    --apricot:   #E8A466;   /* graphics only: the dot on dark bands */

    /* The error red. The red before HH-S9 (CC3333) measured 4.47:1 on the
       first Westside ground, under the 4.5:1 AA asks of text; #CB3333 is the
       nearest red of the same hue that cleared it. On the HH-S39 grounds it is
       4.85:1 on Cream, 5.09:1 on Paper, 5.17:1 on white. Borders need 3:1 and
       use the same token. */
    --error:     #CB3333;

    --bg: var(--cream);
    --fg: var(--ink);
    --muted: var(--moss);
    --card: var(--paper);
    /* Hairlines are Evergreen at low alpha, not grey: a neutral rule against a
       tinted ground is what makes a palette look accidental. The input border
       is stronger — #6D8B82 on white, 3.71:1 — because it is what tells a
       guest where the field is, and WCAG asks 3:1 of that. */
    --border: rgba(11,61,46,.16);
    --input-border: rgba(11,61,46,.60);
    --shadow: 0 10px 30px color-mix(in srgb, var(--ink) 10%, transparent);
    --shadow-sm: 0 6px 18px color-mix(in srgb, var(--ink) 7%, transparent);

    --btn-bg: var(--evergreen);
    --btn-bg-hover: var(--pine);
    --btn-fg: var(--cream);

    --radius: 18px;

    /* Type. Every family names its fallbacks, so a slow or failed font load
       still sets the page in something of the same kind. */
    --font-display: "Instrument Serif", ui-serif, Georgia, "Times New Roman", serif;
    --font-body: "Hanken Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Brand. --h-color and --dot-color are read by the inlined mark; the SVG
       carries the same two values as its own fallbacks, so the logo is correct
       even on a page that renders before this stylesheet arrives. These are
       the kit's colours for a LIGHT ground; header.html and footer.html pass
       Cream and Apricot for the Evergreen bands. */
    --brand-ink: #363736;
    --brand-sage: #838A7E;
    --h-color: var(--brand-ink);
    --dot-color: var(--brand-sage);
}

* { box-sizing: border-box; }

/* Checkboxes, radios, range thumbs and progress bars are painted by the
   browser in its own accent — a system blue that has nothing to do with this
   palette and shows up right next to the consent tick on /booking. One
   declaration colours all of them. */
:root{ accent-color: var(--evergreen); }

/*
 * min-height, not height.
 *
 * `height: 100%` pins the body box to the viewport, and on a page taller than
 * that the content overflows a box the browser still believes is one screen
 * tall. Combined with the off-canvas nav below it left the bottom of a long
 * page — on the signing screen, the Clear and Submit buttons — outside the
 * layout viewport and unreachable by a click.
 */
html, body { min-height: 100%; }

/*
 * The off-canvas menu is parked to the RIGHT of the viewport by a transform,
 * and a transformed fixed element still contributes to the document's
 * scrollable overflow. Every page was therefore 280px wider than the phone
 * showing it: a dead horizontal strip, a zoomed-out layout viewport, and a
 * bottom-of-page click that landed on nothing.
 *
 * `clip` rather than `hidden`: hidden would make the root a scroll container,
 * which changes how position:sticky and scroll anchoring behave. clip simply
 * refuses to scroll to it.
 */
html { overflow-x: clip; }
body{
    margin: 0;
    font-family: var(--font-body);
    font-weight: 400;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wrap{
    max-width: 980px;
    margin: 0 auto;
    padding: 18px 18px;
}

/* ============================================
   HEADER & NAVIGATION
   ============================================ */
/* The header is an Evergreen band, matching the footer. Solid rather than
   translucent: a blurred, semi-transparent band would take its contrast from
   whatever scrolled under it, and the nav text has to clear AA at all times,
   not on average.

   e2e/tests/logo-position.spec.js holds the mark where it stood before the
   HH-S9 restyle (x 168, y 22 at 1280 wide; x 14, y 16 on a phone). Since
   HH-S13 everything in the bar is 44px tall — the touch-target minimum — so
   the bar's vertical padding is what keeps the mark's top where it was: 17px
   plus (44 - 34) / 2 is 22 on a desktop, 8px plus (44 - 28) / 2 is 16 on a
   phone. */
.top{
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--evergreen);
    border-bottom: 1px solid var(--evergreen);
}

.top .topbar{
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 17px;
    padding-bottom: 17px;
}

/* The wordmark is Cream on Evergreen, 11.43:1. */
.top .brand,
.top .brand-text{
    color: var(--cream);
}

.brand{
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    margin-right: auto;
    color: var(--fg);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* The mark is inline SVG with a viewBox and no intrinsic size, so height is
   what sizes it and the aspect ratio follows from the viewBox. Setting width
   too would squash it. */
.logo{
    height: 34px;
    width: auto;
    display: block;
    flex: none;
}

.logo--footer{
    height: 18px;
    display: inline-block;
    vertical-align: -3px;
}

.brand-text{
    font-size: 16px;
}

/* Links on the band are Mint, 9.16:1, and turn Cream on hover — brighter,
   never dimmer, than where they started. */
.nav-desktop{
    display: flex;
    gap: 2px;
}

.nav-desktop a,
.menu-panel a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 12px;
    color: var(--mint);
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: background 120ms ease, color 120ms ease;
}

.nav-desktop a:hover,
.menu-panel a:hover{
    color: var(--cream);
    background: color-mix(in srgb, var(--cream) 10%, transparent);
}

/* The button on an Evergreen band: Cream with an Evergreen label (11.43:1),
   white on hover (Evergreen on white, 12.20:1). The header's Complete
   Booking and Book, and the closing band's Complete Booking. */
.btn-cream{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--cream);
    color: var(--evergreen);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 120ms ease;
}

.btn-cream:hover{
    background: var(--white);
    color: var(--evergreen);
}

/* The phone menu is a <details>: it opens by click, tap, Enter and Space
   with no script. Its panel hangs from the sticky header under the menu
   button, against the right edge, its links right-aligned (Peter, HH-S42:
   the thumb that opened it is there). Absolute, and never wider than the
   screen less the gutters, so it cannot push the page sideways the way the
   old off-canvas drawer did. */
.menu{
    display: none;
}

.menu-button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    list-style: none;
    cursor: pointer;
}

.menu-button::-webkit-details-marker{
    display: none;
}

.menu-bars{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* The bars are drawn with a background colour: Cream on Evergreen. */
.menu-bars span{
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--cream);
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.menu[open] .menu-bars span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.menu[open] .menu-bars span:nth-child(2){ opacity: 0; }
.menu[open] .menu-bars span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.menu-panel{
    position: absolute;
    top: 100%;
    right: 18px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-width: 200px;
    max-width: calc(100vw - 36px);
    padding: 8px 6px 12px;
    background: var(--evergreen);
    border-top: 1px solid color-mix(in srgb, var(--cream) 20%, transparent);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--shadow);
}

.menu-panel a{
    justify-content: flex-end;
    min-height: 48px;
    padding: 0 12px;
    font-size: 17px;
    text-align: right;
}

@media (prefers-reduced-motion: reduce) {
    .menu-bars span{ transition: none; }
}

/* Signed in, the account icon (HH-S16): Mint like the links, 9.16:1 on
   Evergreen, turning Cream on hover; 44px square like the menu button. Its
   focus ring is the band's Cream, from .top :focus-visible. */
.nav-account{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    color: var(--mint);
    transition: background 120ms ease, color 120ms ease;
}

.nav-account:hover{
    color: var(--cream);
    background: color-mix(in srgb, var(--cream) 10%, transparent);
}

.nav-account svg{
    display: block;
    width: 24px;
    height: 24px;
}

.nav-book--narrow{
    display: none;
}

/* The full bar needs about 820px; below 900 the phone header takes over. */
@media (max-width: 899px) {
    .top .topbar{
        gap: 8px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .nav-desktop,
    .nav-book--wide{
        display: none;
    }

    .nav-book--narrow{
        display: inline-flex;
        padding: 0 18px;
    }

    .menu{
        display: block;
    }
}

@media (max-width: 540px) {
    .top .topbar{
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* ============================================
   LAYOUT
   ============================================ */
main.wrap{
    padding-top: 22px;
    padding-bottom: 30px;
}

.card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px;
}

/* Page headlines are the display face. Instrument Serif is drawn for large
   sizes and thins out below them, so it is never set under 28px: the clamp's
   floor is that rule. Smaller headings stay in the body face. */
.card h1{
    margin: 0 0 10px 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 3.4vw, 40px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--fg);
}

h2, h3, legend{
    font-weight: 600;
}

.card p{
    margin: 10px 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
}

/* ============================================
   AUTH PAGES
   ============================================ */
.auth-card{
    max-width: 500px;
    margin: 2rem auto;
}

.auth-card-wide{
    max-width: 600px;
}

.auth-footer{
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
    text-align: center;
}

.auth-footer p{
    margin: 0;
    color: var(--muted);
}

/* Text links on light grounds are Clay: 6.33:1 on Cream, 6.66:1 on Paper.
   Mint is the link colour on the Evergreen bands only — on Cream it
   measures 1.38:1 and cannot carry words. */
a{
    color: var(--clay);
}

.auth-link{
    color: var(--clay);
    text-decoration: none;
    font-weight: 500;
}

.auth-link:hover{
    text-decoration: underline;
}

/* ============================================
   ALERTS & MESSAGES
   ============================================ */
.flash{
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--pine) 35%, transparent);
    background: color-mix(in srgb, var(--mint) 22%, var(--paper));
    color: var(--evergreen);
}

/* A flash that reports a PROBLEM rather than a success.
   .flash is green, which is right for "sent" and wrong for "we could not load
   the properties" — a green banner telling somebody something failed reads as
   a success at a glance. The tint and rule carry the warning in Apricot;
   the text stays ink, because Apricot is a graphic colour and never
   carries words. */
.flash--warn{
    border-color: color-mix(in srgb, var(--apricot) 55%, transparent);
    background: color-mix(in srgb, var(--apricot) 12%, var(--paper));
    color: var(--fg);
}

/* Error text sits on Paper, never on a red tint: --error clears 4.5:1 on Cream
   and Paper, and a pink wash under it would take it below. */
.error-message{
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid var(--error);
    background: var(--paper);
    color: var(--error);
    font-weight: 500;
}

.error{
    display: block;
    color: var(--error);
    font-size: 12px;
    margin-top: 4px;
    font-weight: 500;
}

/* .card p (0,1,1) outranks .error (0,1,0), so a <p class="error"> inside a
   card — every message under the signing fields on /booking — was drawn in
   Moss, not red. Found by the HH-S10 contrast spec. */
.card p.error{
    color: var(--error);
}

/* ============================================
   FORMS
   ============================================ */
.form{
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

fieldset{
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    margin: 0 0 16px 0;
    background: var(--paper);
    /* A fieldset is never narrower than its content by default, and the
       signature pad's canvas is 600px wide until the script sizes it: on a
       phone, with no script or before it runs, the fieldset pushed the page
       sideways and Sign and submit off the screen. Found by the e2e suite
       (HH-S34). */
    min-width: 0;
}

legend{
    font-weight: 600;
    font-size: 14px;
    color: var(--fg);
    padding: 0 8px;
}

label{
    display: block;
    color: var(--fg);
    font-size: 14px;
    font-weight: 500;
}

label input,
label select,
label textarea{
    margin-top: 6px;
}

input,
select,
textarea{
    width: 100%;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid var(--input-border);
    background: var(--white);
    color: var(--fg);
    outline: none;
    font-size: 16px;
    font-family: inherit;
    transition: box-shadow 120ms ease, border-color 120ms ease;
}

input:focus,
select:focus,
textarea:focus{
    /* Solid Evergreen, 12.20:1 on white: a focused field's edge is never
       fainter than a resting one's (60%, 3.71:1). The 55% this was under
       HH-S9 measured 2.93:1 once the resting border rose past it. */
    border-color: var(--evergreen);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--evergreen) 14%, transparent);
}

textarea{
    resize: vertical;
    min-height: 80px;
}

.hint{
    display: block;
    color: var(--muted);
    font-size: 12px;
    margin-top: 4px;
}

/* Heidi's privacy statement (HH-S41): Moss, as a hint, but a sentence a
   guest should read, so body size and a Mint rule beside it. */
.privacy-note{
    margin: 12px 0;
    padding: 8px 12px;
    border-left: 3px solid var(--mint);
    color: var(--muted);
    font-size: 14px;
}

/* Form validation, AFTER the guest has had a go at the field.
   
   :user-invalid, not :invalid. An empty required field is :invalid from the
   moment the page loads, so these rules greeted somebody who had typed
   nothing with a form full of red boxes — as if they had already made five
   mistakes. The :not(:placeholder-shown) guard only deferred that for the
   handful of fields that carry a placeholder; the `:required:invalid` rule
   below it had no guard at all and caught everything else on sight.
   
   :user-invalid waits for interaction or a submit attempt, which is the state
   these colours were always meant to describe. */
.form input:user-invalid,
.form textarea:user-invalid,
.form select:user-invalid {
    border-color: var(--error);
}

.form input:user-valid,
.form textarea:user-valid,
.form select:user-valid {
    border-color: var(--evergreen);
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0.5rem;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* ============================================
   BUTTONS
   ============================================ */
/* The primary button: an Evergreen pill with a Cream label (11.43:1), Pine on
   hover (7.73:1), so the label clears AA in every state. Weight 600 is the
   heaviest Hanken Grotesk the site loads. */
.btn{
    display: inline-flex;
    align-items:center;
    justify-content:center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    border: 1px solid var(--btn-bg);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: 600;
    font-size: 16px;
    font-family: var(--font-body);
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--evergreen) 20%, transparent);
    transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.btn:hover{
    background: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    color: var(--btn-fg);
    transform: translateY(-1px);
}

.btn:active{
    background: var(--btn-bg-hover);
    border-color: var(--btn-bg-hover);
    transform: translateY(0);
}

/* Disabled is a FADED VERSION OF THE SAME BUTTON, not a different hue.
   Faded with opacity rather than by mixing the background toward Cream.
   Mixing lightens the fill but leaves the Cream label on top of it, and the
   two converge until the text is unreadable. Opacity fades fill and label
   together, so their contrast with each other is preserved. */
.btn:disabled,
.btn[disabled] {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-fg);
    opacity: 0.55;
    box-shadow: none;
    cursor: not-allowed;
}

.btn:disabled:hover,
.btn[disabled]:hover {
    background: var(--btn-bg);
    border-color: var(--btn-bg);
    transform: none;
}

.btn-full{
    width: 100%;
    margin-top: 8px;
}

/* The secondary button is a ghost: transparent, a Ink label, and a
   1.5px Evergreen ring drawn inset so it takes no layout space and lines up
   with a primary button beside it. Paper on hover. */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    background: transparent;
    border: 0;
    box-shadow: inset 0 0 0 1.5px var(--evergreen);
    border-radius: 999px;
    text-decoration: none;
    color: var(--fg);
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: background 120ms ease;
}

.btn-secondary:hover,
.btn-secondary:active {
    background: var(--paper);
}

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

/* ============================================
   HOME HERO
   ============================================ */
/* Small uppercase labels, rates, dates and contract IDs are set in the
   utility mono. */
.label-mono{
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
}

.hero{
    padding: 28px 0 8px;
}

.hero .label-mono{
    margin: 0 0 18px;
}

/* The palm separators (HH-S12), in place of the middle dots. About the
   capitals' height, sitting on the baseline so it centres on uppercase
   text, in currentColor — the label's Moss. Each palm is glued to the
   place after it by .hero-place, so a narrow screen breaks the line before
   a palm, never after one or around one alone. */
.hero-place{
    white-space: nowrap;
}

.hero-sep .palm{
    display: inline-block;
    width: .8em;
    height: .8em;
    vertical-align: baseline;
}

.hero-title{
    margin: 0 0 20px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(44px, 7vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--fg);
}

/* "already home." — the italic cut, in Pine (7.73:1 on Cream). */
.hero-title em{
    font-style: italic;
    color: var(--pine);
}

.hero-lede{
    margin: 0 0 28px;
    max-width: 34em;
    font-size: 18px;
    line-height: 1.55;
    color: var(--muted);
}

.hero-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 22px;
    margin: 0;
}

/* A text link that is a touch target: 44px tall however short its words. */
.link-clay,
.link-mint{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
    text-decoration: none;
}

.link-clay{ color: var(--clay); }
.link-mint{ color: var(--mint); }

.link-clay:hover{ text-decoration: underline; }
.link-mint:hover{ color: var(--cream); text-decoration: underline; }

/* ============================================
   HOME SECTIONS (HH-S13)
   ============================================ */
/* Below the hero: search, stays, availability, how it works, and a closing
   band. Two of them are full-bleed bands inside main's 980px column: a
   box-shadow the band's own colour, clipped to its height. A shadow is
   painted, not laid out, so it adds no scrollable width at any size — the
   negative-margin 100vw trick is wider than the page by the scrollbar. */
.home-section{
    padding: 56px 0;
    /* The header is sticky; an anchor jump would otherwise land the
       section's heading underneath it. */
    scroll-margin-top: 80px;
}

.band-shell,
.band-deep{
    clip-path: inset(0 -100vmax);
}

.band-shell{
    background: var(--paper);
    box-shadow: 0 0 0 100vmax var(--paper);
}

.band-deep{
    background: var(--evergreen);
    box-shadow: 0 0 0 100vmax var(--evergreen);
    color: var(--cream);
}

/* Section labels: the utility mono, Moss on light grounds (6.82:1 on
   Cream, 7.17:1 on Paper), Clay where the mockup marks one out. */
.kicker{
    margin: 0 0 12px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
}

.kicker--clay{
    color: var(--clay);
}

.section-title{
    margin: 0 0 14px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(34px, 4.6vw, 48px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    color: var(--fg);
}

.section-text{
    margin: 0 0 24px;
    max-width: 36em;
    font-size: 17px;
    line-height: 1.55;
    color: var(--muted);
}

/* #search */
#search{
    padding-top: 28px;
}

.search-card{
    padding: 28px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.search-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 20px;
}

.field--hood,
.field--date,
.search-submit{
    grid-column: 1 / -1;
}

.field-label{
    display: block;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    color: var(--muted);
}

/* Each field is a column with its control at the bottom, so two fields
   side by side line their controls up whatever their labels wrap to: on a
   phone the Spanish "Duración de la estancia" takes two lines beside
   "Huéspedes" and pushed its select lower (HH-S41). The grid stretches the
   fields in a row to one height; the labels stay level at the top. */
.search-form .field{
    display: flex;
    flex-direction: column;
}

.search-form input,
.search-form select{
    min-height: 46px;
    margin-top: auto;
}

/* The gap under the label that label select's margin-top gave. */
.search-form .field-label{
    margin-bottom: 6px;
}

.search-submit{
    min-height: 46px;
    white-space: nowrap;
}

/* #stays */
.stays{
    display: grid;
    gap: 18px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.stay-card{
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--fg);
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.stay-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* The photo's stand-in: Mint on Evergreen, 9.16:1. */
.stay-photo{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 200px;
    background: var(--evergreen);
    color: var(--mint);
}

.stay-palm{
    width: 88px;
    height: 88px;
}

.stay-photo-note,
.stay-details{
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
}

.stay-body{
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 20px 16px;
}

.stay-name{
    margin: 0 0 6px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
}

.stay-meta{
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--muted);
}

.stay-row{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.stay-details{
    color: var(--clay);
}

.stay-book{
    color: var(--pine);
    font-weight: 600;
}

/* #regions (HH-S42): one card per region of Los Angeles, to its page. */
.regions{
    display: grid;
    gap: 18px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.region-card{
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 24px 22px 18px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-top: 4px solid var(--evergreen);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    color: var(--fg);
    text-decoration: none;
    transition: transform 120ms ease, box-shadow 120ms ease;
}

.region-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.region-name{
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 32px;
    line-height: 1.1;
}

.region-areas{
    margin: 0 0 18px;
    font-size: 15px;
    color: var(--muted);
}

.region-go{
    margin-top: auto;
    color: var(--pine);
    font-weight: 600;
}

/* #availability */
.availability{
    display: grid;
    gap: 28px;
}

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

.cal-card{
    padding: 22px;
    background: var(--cream);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

/* The grid never squeezes a day below a tap's width: at 320px it scrolls
   inside the card instead of widening the page. */
.cal-scroll{
    overflow-x: auto;
}

.cal{
    width: 100%;
    min-width: 252px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 4px;
}

.cal-title{
    padding: 0 4px 10px;
    caption-side: top;
    text-align: left;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
    color: var(--fg);
}

.cal th{
    padding: 4px 0 8px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--muted);
}

.wd-letter{
    display: none;
}

.cal td{
    height: 44px;
    border-radius: 10px;
    text-align: center;
    vertical-align: middle;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

.cal-day{
    background: var(--paper);
    border: 1px solid var(--border);
    color: var(--fg);
}

.cal-day--today{
    background: var(--evergreen);
    border-color: var(--evergreen);
    color: var(--cream);
    font-weight: 600;
}

/* #how */
.steps{
    display: grid;
    gap: 28px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
}

.step{
    padding-top: 18px;
    border-top: 2px solid var(--evergreen);
}

.step-num{
    display: block;
    margin-bottom: 10px;
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .14em;
    color: var(--clay);
}

.step-title{
    margin: 0 0 8px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 30px;
    line-height: 1.1;
}

.step-title a{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.step-title a:hover{
    text-decoration: underline;
    text-decoration-color: var(--clay);
}

.step p{
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--muted);
}

/* The closing band: Cream on Evergreen, 11.43:1. */
.cta{
    padding: 64px 0;
    text-align: center;
}

.cta .section-title,
.cta .section-text{
    color: var(--cream);
}

.cta .section-text{
    margin-left: auto;
    margin-right: auto;
}

.cta-actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 24px;
    margin: 0;
}

/* The home page ends on the closing band, which meets the footer at its
   hairline with no Cream between them. */
main.wrap--home{
    padding-bottom: 0;
}

.wrap--home + .footer{
    margin-top: 0;
}

@media (min-width: 900px) {
    .search-form{
        grid-template-columns: 1.25fr 1.2fr 1fr .8fr auto;
        align-items: end;
    }

    .field--hood,
    .field--date,
    .search-submit{
        grid-column: auto;
    }

    .stays,
    .steps{
        grid-template-columns: repeat(3, 1fr);
    }

    .regions{
        grid-template-columns: repeat(2, 1fr);
    }

    .availability{
        grid-template-columns: 1fr 1.1fr;
        align-items: center;
    }
}

@media (max-width: 599px) {
    .wd-short{ display: none; }
    .wd-letter{ display: inline; }
}

@media (max-width: 540px) {
    .home-section{ padding: 44px 0; }
    #search{ padding-top: 20px; }
    .search-card{ padding: 20px 16px; }
    .cal-card{ padding: 14px 10px; }
    .cal{ border-spacing: 3px; }
}

/* ============================================
   BOOKING FLOW SPECIFIC
   ============================================ */
.apply-start {
    text-align: center;
}

.apply-start h1 {
    margin-bottom: 1rem;
}

.apply-start p {
    font-size: 1.125rem;
    color: var(--muted);
    margin-bottom: 2rem;
}

.apply-start .btn {
    margin-top: 2rem;
}

/* Terms page */
.terms-scroll {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin: 1rem 0;
    background: var(--paper);
    border-radius: 14px;
}

.terms-scroll h2 {
    margin-top: 0;
    margin-bottom: 1.5rem;
    color: var(--fg);
    font-size: 1.5rem;
}

.terms-scroll h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    color: var(--fg);
    font-size: 1.125rem;
}

.terms-scroll p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--muted);
}

.terms-scroll em {
    color: var(--muted);
    display: block;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.terms-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 1.5rem 0;
    padding: 1rem;
    background: var(--paper);
    border-radius: 14px;
    border: 1px solid var(--border);
}

.terms-checkbox input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.terms-checkbox span {
    font-weight: 500;
    color: var(--fg);
}

/* Display fields */
.display-field {
    background-color: var(--paper);
    border: 1px solid var(--border);
    padding: 12px;
    border-radius: 14px;
    font-size: 1rem;
    color: var(--fg);
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    margin-top: 6px;
}

.total-field {
    font-family: var(--font-mono);
    background-color: color-mix(in srgb, var(--mint) 18%, var(--paper));
    border-color: var(--pine);
    font-weight: 600;
    font-size: 1.1rem;
}

.grand-total {
    background-color: color-mix(in srgb, var(--mint) 30%, var(--paper));
    border-color: var(--evergreen);
    font-size: 1.2rem;
}

/* Review page */
.review-intro {
    color: var(--muted);
    margin-bottom: 2rem;
    font-size: 1.0625rem;
}

.review-section {
    background: var(--paper);
    border: 1px solid var(--border);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: 14px;
}

.review-section h2 {
    margin-top: 0;
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    color: var(--fg);
    border-bottom: 2px solid var(--mint);
    padding-bottom: 0.5rem;
}

.review-section dl {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0.75rem 1.5rem;
    margin: 0;
}

.review-section dt {
    font-weight: 600;
    color: var(--muted);
}

.review-section dd {
    margin: 0;
    color: var(--fg);
}

.review-actions {
    margin-top: 2rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Confirmation page */
.apply-sent {
    text-align: center;
}

.apply-sent h1 {
    margin-bottom: 1rem;
    color: var(--fg);
}

.success-icon {
    font-size: 4rem;
    color: var(--pine);
    margin: 2rem 0;
    line-height: 1;
}

.sent-message {
    font-size: 1.125rem;
    margin-bottom: 1rem;
    color: var(--fg);
    font-weight: 500;
}

.sent-description {
    color: var(--muted);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.next-steps {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--paper);
    border-radius: 14px;
    border-left: 4px solid var(--evergreen);
    text-align: left;
}

.next-steps p {
    margin: 0;
    color: var(--fg);
    line-height: 1.8;
}

.next-steps strong {
    display: block;
    margin-bottom: 0.75rem;
    color: var(--evergreen);
    font-size: 1.0625rem;
}

.sent-actions {
    margin-top: 2rem;
}

/* ============================================
   DASHBOARD
   ============================================ */
.inline-form{
    display: inline;
    margin: 0;
}

.dash-head{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.dash-panel{
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.dash-panel h2{
    margin-top: 0;
}

/* The label column is as wide as its label, not a fixed 200px: at 320px a
   fixed column pushed the address off the screen (found in HH-S16). A long
   address wraps anywhere rather than widening the page. */
.dash-dl{
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0.75rem;
    margin: 1rem 0 0;
}

.dash-dl dt{
    font-weight: 600;
    color: var(--muted);
}

.dash-dl dd{
    margin: 0;
    overflow-wrap: anywhere;
}

/* The Cookies page (HH-S19): one heading and one .dash-dl per cookie. The
   names are cookie names, so they are set in the utility face. */
.cookies h2{
    margin: 1.75rem 0 0;
    font-size: 18px;
    color: var(--fg);
}

.cookies code{
    font-family: var(--font-mono);
    font-size: 0.95em;
    overflow-wrap: anywhere;
}

.dash-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.dash-tile{
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 1.5rem;
}

.dash-tile h3{
    margin-top: 0;
    color: var(--evergreen);
}

.dash-tile p{
    margin-bottom: 1rem;
}

/* A change of address waiting for its link (HH-S16). Moss on the
   panel, as secondary text everywhere else. */
.dash-pending{
    margin: 1rem 0 0;
    color: var(--moss);
    overflow-wrap: anywhere;
}

/* The login page's "verify your email" box and its resend button. */
.verify-box{
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--paper);
}

.verify-box p{
    margin: 0 0 0.75rem;
}


/* ============================================
   FOOTER
   ============================================ */
/* The footer is an Evergreen band like the header: Cream text, Mint links
   turning Cream on hover. Its top edge is a Cream hairline at 20%, which is
   what divides it from the home page's closing Evergreen band. */
.footer{
    margin-top: 26px;
    border-top: 1px solid color-mix(in srgb, var(--cream) 20%, transparent);
    background: var(--evergreen);
    color: var(--cream);
}

.footer-inner{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.footer-brand{
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-line{
    margin: 0;
    color: var(--cream);
    font-size: 14px;
}

.footer small{
    color: var(--cream);
}

.footer-copy{
    flex-basis: 100%;
    font-size: 13px;
}

.footer-links{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.footer a,
.footer .footer-link{
    color: var(--mint);
}

.footer .footer-link{
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    background: none;
    font-family: inherit;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}

.footer a:hover,
.footer .footer-link:hover{
    color: var(--cream);
    text-decoration: underline;
}

@media (max-width: 767px) {
    .footer-inner{
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-brand{
        align-items: flex-start;
    }
}

/* ============================================
   UTILITIES
   ============================================ */
.hidden {
    display: none !important;
}

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

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

/* ============================================
   ACCESSIBILITY
   ============================================ */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--clay);
    outline-offset: 3px;
}

/* Clay is too close to Evergreen to ring anything on the bands; there the
   ring is Cream, 11.43:1. */
.top :focus-visible,
.footer :focus-visible,
.band-deep :focus-visible{
    outline-color: var(--cream);
}

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

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
    .review-section dl {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .review-section dt {
        margin-top: 0.75rem;
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .review-section dd {
        margin-bottom: 0.5rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border);
    }

    .review-section dd:last-of-type {
        border-bottom: none;
    }

    .review-actions {
        flex-direction: column;
    }

    .btn,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }

    fieldset {
        padding: 1rem;
    }

    .terms-scroll {
        max-height: 300px;
        padding: 1rem;
    }
}

@media (max-width: 540px){
    .wrap{ padding: 14px; }
    /* The menu panel keeps to the narrower gutter, under the button. */
    .menu-panel{ right: 14px; max-width: calc(100vw - 28px); }
    .card{ padding: 18px; }
    .logo{ height: 28px; }

    .success-icon {
        font-size: 3rem;
    }

    .sent-message {
        font-size: 1rem;
    }

    .next-steps {
        padding: 1rem;
    }

    .terms-scroll h2 {
        font-size: 1.25rem;
    }

    .terms-scroll h3 {
        font-size: 1rem;
    }
}
/* HH-S27: the tenant dashboard's tables scroll inside the card rather than
   widen the page, like the calendar. The license, Zelle and booking ID
   panels reuse .dash-panel. */
.table-scroll{
    overflow-x: auto;
    margin-bottom: 2rem;
}

.admin-table{
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.admin-table th,
.admin-table td{
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--border);
}

.admin-table th{
    color: var(--muted);
    font-weight: 600;
}

.admin-list{
    padding-left: 1.25rem;
    margin-bottom: 2rem;
}

.admin-list li{
    margin-bottom: 0.5rem;
    overflow-wrap: anywhere;
}

.zelle-memo{
    font-weight: 600;
}

/* HH-S39: Heidi's operations pages. The links along the top wrap on a
   phone; a form row puts two short fields side by side on a wide screen
   and stacks them on a narrow one; a turnover that needs her eye is in
   the error red, which is text-safe on Paper. */
.ops-nav{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1rem 0 1.5rem;
}

.ops-today{
    color: var(--muted);
}

.form-row{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0 1rem;
}

.turnover-flag{
    color: var(--error);
}

.invite-link input{
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

.unit-link-form select{
    max-width: 16rem;
}

/* HH-S39b: "Forgot your password?" under the login form's password. */
.forgot-link{
    margin: -0.25rem 0 1rem;
    font-size: 0.95rem;
}