/* ============================================================
   Design tokens
   ============================================================ */
:root {
    /* Brand green: bright fill vs. AA-safe text.
       #71b002 as a *fill* (with dark ink text) passes AA; as *text* on a light
       background it fails (2.65:1), so links/labels use the deepened --color-primary-ink. */
    --color-primary:        #71b002;   /* fills, accent rules, marks (with dark text) */
    --color-primary-hover:  #5e9600;   /* primary fill hover */
    --color-primary-ink:    #3f6a0f;   /* green as TEXT / links — AA on BOTH light grounds
                                          (5.6:1 on --color-bg, 5.1:1 on --color-bg-warm) */
    --color-secondary:      #865628;   /* warm brown */
    --color-text:           #4a4845;   /* body copy */
    --color-muted:          #6f6a60;   /* hints, captions — AA (5.0:1) */
    --color-heading:        #1e1c1a;   /* headings, primary-button text */
    --color-bg:             #faf8f4;   /* page background (warm off-white) */
    --color-bg-warm:        #f0ebe1;   /* section tint */
    --color-footer-bg:      #1a1714;   /* dark footer */
    --color-line:           rgba(30, 28, 26, 0.12); /* hairline borders */

    /* Semantic (alerts, validation, status) */
    --color-ok:    #3f6a0f;  --color-ok-bg:   rgba(113, 176, 2, 0.12);
    --color-warn:  #8a5a00;  --color-warn-bg: rgba(214, 158, 46, 0.16);
    --color-err:   #b3341a;  --color-err-bg:  rgba(179, 52, 26, 0.09);
    --color-info:  #6f4a1f;  --color-info-bg: rgba(134, 86, 40, 0.10);

    --font-body:    'Roboto', sans-serif;
    --font-heading: 'Playfair Display', Georgia, serif;

    /* Shape & motion */
    --radius-sm:    2px;   /* buttons, inputs — editorial = sharp */
    --radius-card:  3px;
    --radius-modal: 6px;
    --transition:   160ms ease;

    --max-width:  1200px;
    --header-h:   72px;
}

/* Honour reduced-motion for all transitions/animations below. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
    /* !important so this wins over the later base `html { scroll-behavior: smooth }` (equal
       specificity, defined afterwards) — otherwise reduced-motion users still get smooth scroll. */
    html { scroll-behavior: auto !important; }
}

/* ============================================================
   Self-hosted fonts — files must be present in /fonts/
   Download Roboto (400, 700) and Playfair Display (400, 700)
   from fonts.google.com and place .woff2 files here.
   ============================================================ */
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Roboto';
    src: url('/fonts/roboto-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-display-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Playfair Display';
    src: url('/fonts/playfair-display-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ============================================================
   Reset & base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; }

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-bg);
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color: var(--color-heading);
    line-height: 1.2;
}

/* Link reset via :where() (zero specificity) so component classes (.btn, .nav, footer,
   calendar cells) always win their own colour without a specificity fight. Green as *text*
   uses the AA-safe --color-primary-ink, not the bright fill green. */
:where(a) { color: var(--color-primary-ink); text-decoration: none; }
:where(a:hover) { color: var(--color-primary-hover); }

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

/* ============================================================
   Layout utilities
   ============================================================ */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 480px) {
    .container { padding: 0 1.5rem; }
}

@media (min-width: 1024px) {
    .container { padding: 0 2rem; }
}

.section {
    padding: 3rem 0;
}

@media (min-width: 1024px) {
    .section { padding: 4.5rem 0; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn, .btn-outline, .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8rem 1.6rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
    border: 1.5px solid transparent;
    text-align: center;
}

/* Primary: bright brand-green FILL with dark ink text (6.5:1 — AA). White-on-green fails
   contrast and must never be used. */
.btn {
    background-color: var(--color-primary);
    color: var(--color-heading);
    border-color: var(--color-primary);
}
.btn:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-heading);
}
.btn:disabled, .btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

.btn-outline {
    background-color: transparent;
    color: var(--color-heading);
    border-color: var(--color-heading);
}
.btn-outline:hover {
    background-color: var(--color-heading);
    color: #fff;
}

/* Ghost: plain text button in AA-safe green. (The hero/CTA underline treatment is scoped
   to those sections so admin/calendar ghost buttons stay plain.) */
.btn-ghost {
    background-color: transparent;
    color: var(--color-primary-ink);
    border-color: transparent;
}
.btn-ghost:hover {
    color: var(--color-primary-hover);
}

/* Visible keyboard focus on all interactive elements (NFR-21). */
a:focus-visible, button:focus-visible,
.btn:focus-visible, .btn-outline:focus-visible, .btn-ghost:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--color-primary-ink);
    outline-offset: 3px;
}

/* FocusOnNavigate (Routes.razor) moves focus to the page <h1> after each navigation — good for
   screen-reader/keyboard users. But it makes the heading programmatically focusable (tabindex=-1),
   which otherwise paints a focus ring (a "box" around the title on load). A keyboard user cannot
   tab to a tabindex=-1 element, so suppressing its ring is safe and removes the visual artefact. */
[tabindex="-1"]:focus { outline: none; }

/* ============================================================
   Header — solid sticky bar (direction A "Editorial lugn")
   Always solid on the off-white ground; the dark-stroke logo is
   always shown, so the old transparent/scroll/logo-swap logic is
   retired. Mobile nav is a CSS-only checkbox toggle (no JS — works
   under Static SSR).
   ============================================================ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
}

.site-header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--header-h);
}

.site-header__logo { display: flex; align-items: center; }
.site-header__logo .logo { height: 55px; width: auto; }

/* The toggle checkbox is kept off-screen but operable (keyboard-focusable). */
.site-header__toggle {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.site-header__burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    cursor: pointer;
}

.site-header__burger span {
    display: block;
    height: 2px;
    background-color: var(--color-heading);
    border-radius: 2px;
}

.site-header__toggle:focus-visible ~ .site-header__burger {
    outline: 2px solid var(--color-primary-ink);
    outline-offset: 2px;
}

/* Collapsed by default; opens as a dropdown panel below the sticky header. */
.site-header__nav {
    display: none;
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 1.5rem 1.25rem;
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
}

.site-header__toggle:checked ~ .site-header__nav {
    display: flex;
}

/* Text nav links (the CTA is a .btn and is excluded so it keeps its button styles). */
.site-header__nav a:not(.site-header__cta) {
    color: var(--color-heading);
    font-weight: 500;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-line);
}
.site-header__nav a:not(.site-header__cta):hover { color: var(--color-primary-ink); }
.site-header__nav a.active { color: var(--color-primary-ink); }

.site-header__cta { margin-top: 0.85rem; }

/* --- Desktop: inline horizontal nav, no hamburger --- */
@media (min-width: 1024px) {
    .site-header__burger { display: none; }

    .site-header__nav {
        display: flex;
        position: static;
        flex-direction: row;
        gap: 1.75rem;
        align-items: center;
        padding: 0;
        background-color: transparent;
        border-bottom: none;
        box-shadow: none;
    }

    .site-header__nav a:not(.site-header__cta) {
        position: relative;
        padding: 0.25rem 0;
        border-bottom: none;
        font-weight: 400;
    }

    /* Current-page indicator: a thin green underline under the active link. */
    .site-header__nav a.active::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -0.4rem;
        height: 2px;
        background: var(--color-primary);
    }

    .site-header__cta { margin-top: 0; margin-left: 1.25rem; }
}

/* ============================================================
   Home page (direction A "Editorial lugn")
   ============================================================ */

/* Eyebrow / kicker label — reusable */
.eyebrow {
    display: block;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-primary-ink);
    margin-bottom: 1rem;
}

/* Photo placeholder caption (real photos swapped at go-live) */
.photo-tag {
    position: absolute;
    bottom: 0.6rem;
    right: 0.75rem;
    z-index: 2;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    padding: 0.2rem 0.6rem;
    border-radius: 1rem;
    /* Near-opaque so white text passes AA even where axe composites the chip over the
       light page background (it can't read the gradient beneath). */
    background: rgba(26, 23, 20, 0.9);
    color: #fff;
}

/* --- Hero: split text + photo --- */
.hero { background-color: var(--color-bg); }

.hero__grid { display: grid; grid-template-columns: 1fr; }

.hero__photo {
    position: relative;
    min-height: 15rem;
    order: -1; /* photo above text on mobile */
    background: linear-gradient(180deg, #cdd7d0 0%, #bcc7bd 32%, #9fae95 58%, #7e8f6a 82%, #6d7f5a 100%);
}
.hero__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 70% at 72% 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%);
}

.hero__text { padding: 3rem 1rem 2.5rem; }

.hero h1 {
    font-weight: 400;
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--color-heading);
    margin: 0;
}

.hero__rule { width: 3.5rem; height: 2px; background: var(--color-primary); margin: 1.5rem 0; }

.hero__sub { font-size: 1.125rem; color: var(--color-text); margin: 0 0 2rem; max-width: 44ch; }

.hero__cta { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }

@media (min-width: 480px) {
    .hero__text { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
    .hero__grid { grid-template-columns: 1fr 1fr; align-items: stretch; }
    .hero__photo { order: 0; min-height: 34rem; }
    .hero__text { align-self: center; padding: 5rem 0; }
    /* Snap hero copy to the site container's left edge: a half-container box flush to the
       centre, with the container gutter (2rem) as inner padding — so the headline lines up
       with the header, nav and trust strip instead of poking out full-bleed. */
    .hero__text-inner {
        max-width: calc(var(--max-width) / 2);
        margin-left: auto;
        padding-left: 2rem;
        padding-right: 3rem;
    }
}

/* Secondary CTA underline treatment — scoped to hero + closing band only */
.hero__cta .btn-ghost,
.cta-band__actions .btn-ghost {
    color: var(--color-heading);
    border-bottom: 1.5px solid var(--color-heading);
    border-radius: 0;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
.hero__cta .btn-ghost:hover,
.cta-band__actions .btn-ghost:hover {
    color: var(--color-primary-ink);
    border-color: var(--color-primary-ink);
}

/* --- Trust strip --- */
.trust-strip {
    background: var(--color-bg-warm);
    border-top: 1px solid var(--color-line);
    border-bottom: 1px solid var(--color-line);
}
.trust-strip__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
.trust-strip__item { padding: 1.25rem 1rem; }
.trust-strip__item + .trust-strip__item { border-left: 1px solid var(--color-line); }
.trust-strip__item:nth-child(3) { border-left: none; }
.trust-strip__num { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-heading); line-height: 1; }
.trust-strip__label { font-size: 0.8rem; color: var(--color-text); margin-top: 0.35rem; }
@media (min-width: 1024px) {
    .trust-strip__grid { grid-template-columns: repeat(4, 1fr); }
    .trust-strip__item { padding: 1.5rem 2rem; }
    .trust-strip__item:nth-child(3) { border-left: 1px solid var(--color-line); }
}

/* --- Section heading block --- */
.section--warm { background: var(--color-bg-warm); }
.section__head { max-width: 60ch; margin-bottom: 2.5rem; }
.section__head h2 {
    font-weight: 400;
    font-size: clamp(1.75rem, 3.6vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0;
}
.section__head p { font-size: 1.0625rem; color: var(--color-text); margin: 1rem 0 0; }

/* --- "Vad ni kan göra här" cards --- */
.usecards { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.usecard { border-top: 2px solid var(--color-primary); padding-top: 1.35rem; }
.usecard h3 { font-weight: 700; font-size: 1.35rem; margin: 0 0 0.6rem; }
.usecard p { margin: 0; color: var(--color-text); }
@media (min-width: 768px) { .usecards { grid-template-columns: repeat(3, 1fr); } }

/* --- Facilities teaser (asymmetric) --- */
.teaser { display: grid; grid-template-columns: 1fr; gap: 1.75rem; align-items: center; }
.teaser__photo {
    position: relative;
    min-height: 15rem;
    border-radius: var(--radius-card);
    overflow: hidden;
    background: linear-gradient(160deg, #d3d9cf 0%, #b3bfa4 45%, #8a9a72 100%);
}
.teaser__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 60% at 30% 20%, rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0) 60%);
}
.teaser h2 { font-weight: 400; font-size: clamp(1.75rem, 3.4vw, 2.375rem); line-height: 1.1; margin: 0 0 1rem; }
.teaser p { font-size: 1.0625rem; color: var(--color-text); margin: 0 0 1.5rem; max-width: 46ch; }
.link-arrow { color: var(--color-primary-ink); font-weight: 700; border-bottom: 1.5px solid transparent; }
.link-arrow:hover { border-color: var(--color-primary-ink); }
@media (min-width: 1024px) {
    .teaser { grid-template-columns: 0.9fr 1.1fr; gap: 3.5rem; }
    .teaser__photo { min-height: 24rem; }
}

/* --- "Så går det till" — genuine 3-step sequence (numbers carry order) --- */
.steps { display: grid; grid-template-columns: 1fr; gap: 2rem; }
.step__n { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 700; color: var(--color-primary-ink); letter-spacing: 0.1em; }
.step h3 { font-weight: 700; font-size: 1.25rem; margin: 0.75rem 0 0.5rem; }
.step p { margin: 0; color: var(--color-text); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* --- Closing CTA band --- */
.cta-band {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, #5a6b48, #3f4d31);
}
.cta-band::before { content: ""; position: absolute; inset: 0; background: rgba(20, 24, 14, 0.42); }
.cta-band .container { position: relative; }
.cta-band h2 { color: #fff; font-weight: 400; font-size: clamp(1.875rem, 3.8vw, 2.625rem); margin: 0 0 1rem; }
.cta-band p { font-size: 1.125rem; margin: 0 auto 2rem; max-width: 48ch; color: rgba(255, 255, 255, 0.92); }
.cta-band__actions { display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; justify-content: center; }
.cta-band__actions .btn-ghost { color: #fff; border-color: #fff; }
.cta-band__actions .btn-ghost:hover { color: #fff; border-color: #fff; opacity: 0.85; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
    background-color: var(--color-footer-bg);
    color: #a8a49c;
    padding: 4rem 0 2.5rem;
}

.site-footer__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
}
@media (min-width: 1024px) {
    .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; }
}

.site-footer__brand { font-family: var(--font-heading); font-size: 1.25rem; color: #fff; margin: 0 0 0.85rem; letter-spacing: 0.03em; }
.site-footer p { margin: 0 0 0.4rem; font-size: 0.875rem; color: #a8a49c; }

.site-footer h2 { /* column headings */
    font-family: var(--font-body);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #8f8a80;
    font-weight: 700;
    margin: 0 0 0.85rem;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer ul li { margin: 0.5rem 0; }
.site-footer a { color: #cbc7bf; font-size: 0.875rem; }
.site-footer a:hover { color: #fff; }

.site-footer__bar {
    margin-top: 3rem;
    padding-top: 1.35rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.6rem;
    font-size: 0.8125rem;
    color: #8f8a80;
}

/* ============================================================
   Forms
   ============================================================ */
.form-row { display: grid; gap: 1rem; }
@media (min-width: 480px) { .form-row { grid-template-columns: 1fr 1fr; } }

.form-group { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.05rem; }
.form-group label { font-weight: 700; font-size: 0.9rem; color: var(--color-heading); }

.form-group input:not([type="checkbox"]):not([type="radio"]),
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    border: 1.5px solid #cfc9bd;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--color-heading);
    background-color: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.form-group input:not([type="checkbox"]):not([type="radio"]):focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary-ink);
    box-shadow: 0 0 0 3px rgba(63, 106, 15, 0.18);
}
.form-group textarea { min-height: 5.5rem; resize: vertical; }

/* Branded native checkboxes / radios */
.form-group input[type="checkbox"], .form-group input[type="radio"], .checkbox-row input {
    accent-color: var(--color-primary);
    width: 1.1rem;
    height: 1.1rem;
}

/* Checkbox groups (facilities / cleaning) */
fieldset.form-group { border: 0; padding: 0; }
fieldset.form-group legend { font-weight: 700; font-size: 0.9rem; color: var(--color-heading); padding: 0; margin-bottom: 0.5rem; }

/* Single-checkbox rows (privacy, organisation) */
.form-group--checkbox { flex-direction: row; align-items: flex-start; gap: 0.6rem; }
.form-group--checkbox label { font-weight: 400; color: var(--color-text); font-size: 0.95rem; display: flex; gap: 0.6rem; align-items: flex-start; }

/* Validation */
.validation-message, .form-error { color: var(--color-err); font-size: 0.85rem; font-weight: 600; }
.form-error { margin-bottom: 1rem; }

/* Grouped form sections (inquiry) */
.form-section { padding: 1.6rem 0; border-top: 1px solid var(--color-line); }
.form-section:first-of-type { padding-top: 0; border-top: 0; }
.form-section > h2 { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; color: var(--color-heading); margin: 0 0 0.9rem; }
.form-section .sec-note { font-size: 0.85rem; color: var(--color-muted); margin: -0.4rem 0 0.9rem; }
.field-opt { color: var(--color-muted); font-weight: 400; }
.form-hint { font-size: 0.8rem; color: var(--color-muted); margin: 0.35rem 0 0; }

/* "Från kalender" prefill chip */
.prefill { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: #37600d; background: rgba(113, 176, 2, 0.14); padding: 0.12rem 0.5rem; border-radius: 1rem; margin-left: 0.4rem; vertical-align: middle; }

/* Segmented two-track toggle (CSS-only, SSR-safe) */
.track-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.segmented { display: inline-flex; border: 1.5px solid var(--color-line); border-radius: 4px; overflow: hidden; background: #fff; margin-bottom: 1.75rem; }
.segmented__btn { font-weight: 700; font-size: 0.9rem; padding: 0.7rem 1.4rem; color: var(--color-text); cursor: pointer; user-select: none; }
.segmented__btn + .segmented__btn { border-left: 1.5px solid var(--color-line); }
#track-stay:checked ~ .segmented .segmented__btn[for="track-stay"],
#track-general:checked ~ .segmented .segmented__btn[for="track-general"] { background: var(--color-primary); color: var(--color-heading); }
.track-radio:focus-visible ~ .segmented { outline: 2px solid var(--color-primary-ink); outline-offset: 2px; }
.track { display: none; }
#track-stay:checked ~ .track--stay { display: block; }
#track-general:checked ~ .track--general { display: block; }

/* Progressive-disclosure panel (organisation fields) */
.reveal-panel { background: var(--color-bg-warm); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 1.1rem 1.25rem; margin-top: 0.75rem; }
.reveal-panel .form-group:last-child { margin-bottom: 0; }

/* Reassurance banner + submit row */
.reassure { margin-bottom: 1.6rem; }
.submit-row { margin-top: 1.75rem; display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap; }

/* Acknowledgement (Tack) */
.tack { text-align: center; padding: 3.5rem 0; max-width: 40rem; margin: 0 auto; }
.tack__badge { width: 4rem; height: 4rem; border-radius: 50%; background: rgba(113, 176, 2, 0.16); color: #37600d; display: inline-flex; align-items: center; justify-content: center; font-size: 1.9rem; margin-bottom: 0.5rem; }
.tack h1 { font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.2rem); margin: 0.75rem 0; }
.tack p { color: var(--color-text); font-size: 1.0625rem; margin: 0 0 1.6rem; }

/* ============================================================
   Guest completion form (/slutfor) — Phase 6 slice 5
   ============================================================ */
/* Reusable compact input (completion meal selects live outside .form-group) */
.inp {
    width: 100%;
    padding: 0.6rem 0.7rem;
    border: 1.5px solid #cfc9bd;
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-heading);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.inp:focus { outline: none; border-color: var(--color-primary-ink); box-shadow: 0 0 0 3px rgba(63, 106, 15, 0.18); }
select.inp {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234a4845' stroke-width='1.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    padding-right: 1.9rem;
}

/* Booking summary strip */
.booking-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: #fff;
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    overflow: hidden;
    margin: 1.4rem 0 0.5rem;
}
.booking-summary > div { padding: 0.9rem 1.25rem; flex: 1; min-width: 9rem; }
.booking-summary > div + div { border-left: 1px solid var(--color-line); }
.booking-summary dt { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); font-weight: 700; margin: 0; }
.booking-summary dd { margin: 0.25rem 0 0; font-family: var(--font-heading); font-size: 1.15rem; color: var(--color-heading); }

/* Live progress (hidden until JS reveals it) */
.completion-progress { display: flex; align-items: center; gap: 0.65rem; font-size: 0.85rem; color: var(--color-muted); margin: 1.5rem 0 0.5rem; }
.completion-progress[hidden] { display: none; }
.completion-progress .bar { flex: 1; height: 6px; border-radius: 3px; background: var(--color-bg-warm); overflow: hidden; }
.completion-progress .bar i { display: block; height: 100%; width: 0; background: var(--color-primary); transition: width var(--transition); }

/* Participant / day-guest card */
.pcard { border: 1px solid var(--color-line); border-radius: var(--radius-card); margin: 0 0 1.15rem; overflow: hidden; background: #fff; }
.pcard__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 1.25rem; background: var(--color-bg-warm); border-bottom: 1px solid var(--color-line); }
.pcard__badge { width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--color-primary); color: var(--color-heading); font-family: var(--font-body); font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pcard__badge--day { background: var(--color-secondary); color: #fff; font-size: 0.72rem; }
.pcard__title { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-heading); }
.pcard__body { padding: 1.25rem; }
.pcard__actions { display: flex; justify-content: flex-end; padding: 0 1.25rem 1rem; }

/* Full-board / organisation toggle row */
.fbrow { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0.9rem; background: var(--color-bg); border: 1px solid var(--color-line); border-radius: var(--radius-card); margin: 0.25rem 0 1rem; }
.fbrow input { accent-color: var(--color-primary); width: 1.15rem; height: 1.15rem; flex: none; }
.fbrow label { font-weight: 700; font-size: 0.92rem; color: var(--color-heading); margin: 0; }

/* Meals block */
.field-label { display: block; font-weight: 700; font-size: 0.85rem; color: var(--color-heading); margin-bottom: 0.4rem; }
.meals { border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; margin: 0.4rem 0 1rem; }
.meals__title { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; color: var(--color-heading); margin: 0; padding: 0.8rem 1rem; border-bottom: 1px solid var(--color-line); }
.meals__same { background: rgba(113, 176, 2, 0.08); border-bottom: 1px solid var(--color-line); padding: 0.9rem 1rem; }
.meals__same .same-hint { font-size: 0.8rem; color: var(--color-muted); margin: 0 0 0.65rem; }
.meals__same-grid, .day__meals { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 480px) { .meals__same-grid, .day__meals { grid-template-columns: 1fr 1fr; } }
.meals__same label, .day__meals label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted); margin-bottom: 0.3rem; }
.day { padding: 0.85rem 1rem; border-bottom: 1px solid var(--color-line); }
.day:last-child { border-bottom: 0; }
.day__date { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary-ink); margin: 0 0 0.65rem; }

/* Dietary chips (:has drives the checked look — no JS) */
.diet { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.diet label { display: inline-flex; align-items: center; gap: 0.45rem; border: 1.5px solid var(--color-line); border-radius: 20px; padding: 0.35rem 0.8rem; font-size: 0.85rem; color: var(--color-text); cursor: pointer; }
.diet label:has(input:checked) { border-color: var(--color-primary); background: rgba(113, 176, 2, 0.08); color: var(--color-heading); }
.diet input { accent-color: var(--color-primary); }

/* Submit bar (kept in flow at the end — a sticky bar would float over a long form's fields) */
.completion-submit { border-top: 1px solid var(--color-line); padding: 1.25rem 0 0; margin-top: 1.5rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.completion-submit .hint { font-size: 0.8rem; color: var(--color-muted); }

/* Access-state badge (reuses .utility from the trust pages) */
.utility__badge { width: 3.75rem; height: 3.75rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; margin-bottom: 0.4rem; }
.utility__badge--ok { background: rgba(113, 176, 2, 0.16); color: #37600d; }
.utility__badge--warn { background: rgba(214, 158, 46, 0.18); color: #6f4900; }

/* ---- Completion at scale: group defaults + collapsible participant rows ---- */
.required-mark { color: var(--color-err); }

/* "Standard för hela gruppen" panel */
.group-default { background: rgba(113, 176, 2, 0.09); border: 1.5px solid rgba(113, 176, 2, 0.4); border-radius: var(--radius-card); padding: 1.1rem 1.25rem; margin: 0.5rem 0 1.5rem; }
.group-default h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.25rem; color: var(--color-heading); }
.group-default > p { font-size: 0.8rem; color: var(--color-muted); margin: 0 0 0.9rem; }
.group-default .fbrow { margin: 0 0 0.9rem; }
.group-default__hint { font-size: 0.8rem; color: var(--color-muted); margin: 0.2rem 0 0.6rem; }
.group-default__days { background: var(--color-bg); }

.completion-rowcount { font-size: 0.85rem; color: var(--color-muted); margin: 0 0 0.6rem; }

/* Collapsible participant row */
.prow { border: 1px solid var(--color-line); border-radius: var(--radius-card); background: #fff; margin-bottom: 0.5rem; overflow: hidden; }
.prow__toggle-cb { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.prow__head { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem 0.85rem; flex-wrap: wrap; }
.prow__badge { width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--color-primary); color: var(--color-heading); font-weight: 700; font-size: 0.8rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.prow__name { flex: 1 1 11rem; }
.prow__age { flex: 0 0 8.5rem; }
.prow__toggle { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; background: transparent; border: 1px solid var(--color-line); border-radius: 20px; padding: 0.4rem 0.8rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; color: var(--color-muted); cursor: pointer; white-space: nowrap; }
.prow__toggle .chev { transition: transform var(--transition); }
.prow__body { display: none; border-top: 1px solid var(--color-line); padding: 1rem 0.85rem; background: var(--color-bg); }
.prow__toggle-cb:checked ~ .prow__body { display: block; }
.prow__toggle-cb:checked ~ .prow__head .prow__toggle { color: var(--color-primary-ink); border-color: var(--color-primary-ink); }
.prow__toggle-cb:checked ~ .prow__head .prow__toggle .chev { transform: rotate(90deg); }
.prow__toggle-cb:focus-visible ~ .prow__head .prow__toggle { outline: 2px solid var(--color-primary-ink); outline-offset: 2px; }
@media (max-width: 560px) { .prow__age { flex: 1 1 8rem; } .prow__toggle { margin-left: 0; } }

/* A meal with only one option is shown as text (no pointless dropdown) */
.meal-fixed .mf-label { display: block; font-size: 0.72rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; margin-bottom: 0.3rem; }
.meal-fixed .mf-val { display: flex; align-items: center; gap: 0.4rem; font-size: 0.95rem; color: var(--color-heading); }
.meal-fixed .mf-val::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--color-primary); flex: none; }
.meal-fixed .mf-note { color: var(--color-muted); font-size: 0.85rem; }

/* ============================================================
   Admin — productivity register (Phase 6 slice 6)
   Reuses the direction-A tokens/fonts with a denser, status-forward
   discipline: grouped sidebar, sticky topbar, data tables, status
   badges, a booking-detail action rail. NOT the public persuasion look.
   ============================================================ */
:root { --admin-nav-bg: #26221d; --admin-nav-fg: rgba(255, 255, 255, 0.72); }

.admin-shell { display: grid; grid-template-columns: 236px 1fr; }

/* ── Sidebar ─────────────────────────────────────────────── */
.admin-nav {
    background: var(--admin-nav-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 1.1rem 0.75rem 1rem;
    /* Stay in view while a long page (e.g. the expanded Byggnader tree) scrolls. Pinned to the top
       and capped at the viewport height, with its own scroll if the nav itself is taller. */
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow-y: auto;
}
/* Top bar of the sidebar: brand + (mobile-only) hamburger. Carries the divider under the logo. */
.admin-nav__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    padding: 0.25rem 0.5rem 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
    margin-bottom: 0.6rem;
}
.admin-nav__brand { display: flex; align-items: center; gap: 0.55rem; padding: 0; }
.admin-nav__brand .logo { height: 55px; width: auto; }

/* CSS-only hamburger (the layout is static SSR — no circuit for an @onclick). The checkbox is kept
   off-screen but keyboard-operable; the label is the visible control. */
.admin-nav__checkbox { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* Hamburger toggle (a <label>) — hidden on desktop (the links are the always-on sidebar); shown ≤860px. */
.admin-nav__toggle {
    display: none; align-items: center; gap: 0.5rem;
    background: none; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff;
    border-radius: var(--radius-sm); padding: 0.45rem 0.7rem;
    font-size: 0.85rem; cursor: pointer;
}
.admin-nav__toggle:hover { background: rgba(255, 255, 255, 0.08); }
.admin-nav__checkbox:focus-visible ~ .admin-nav__bar .admin-nav__toggle { outline: 2px solid #fff; outline-offset: 2px; }
.admin-nav__toggle-icon { position: relative; display: inline-block; width: 18px; height: 2px; background: currentColor; }
.admin-nav__toggle-icon::before,
.admin-nav__toggle-icon::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor;
}
.admin-nav__toggle-icon::before { top: -6px; }
.admin-nav__toggle-icon::after { top: 6px; }

/* Link groups + foot. Desktop: fills the sidebar so the logout foot sits at the bottom. */
.admin-nav__links { display: flex; flex-direction: column; flex: 1; }
.admin-nav__group {
    font-size: 0.64rem; letter-spacing: 0.13em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55); /* AA on the dark sidebar (~5.8:1) */
    padding: 0.9rem 0.6rem 0.35rem;
}
.admin-nav ul { list-style: none; display: flex; flex-direction: column; gap: 1px; margin: 0; padding: 0; }
.admin-nav a {
    display: flex; align-items: center; gap: 0.55rem;
    color: var(--admin-nav-fg);
    padding: 0.44rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color var(--transition), color var(--transition);
}
.admin-nav a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.admin-nav a.active {
    background: rgba(113, 176, 2, 0.16);
    color: #fff;
    box-shadow: inset 2px 0 0 var(--color-primary);
}
.admin-nav a .count {
    margin-left: auto;
    background: var(--color-primary); color: var(--color-heading);
    font-size: 0.72rem; font-weight: 700;
    border-radius: 9px; padding: 0 0.42rem; line-height: 1.35;
}
.admin-nav__foot { margin-top: auto; padding-top: 0.8rem; border-top: 1px solid rgba(255, 255, 255, 0.09); }
.admin-nav__user { font-size: 0.78rem; color: rgba(255, 255, 255, 0.62); padding: 0.3rem 0.6rem 0.5rem; word-break: break-all; }
.admin-nav__foot form { margin: 0; }
.admin-nav__foot button {
    background: none; border: 0; color: rgba(255, 255, 255, 0.7);
    font: inherit; font-size: 0.85rem;
    padding: 0.35rem 0.6rem; width: 100%; text-align: left;
    border-radius: var(--radius-sm); cursor: pointer;
}
.admin-nav__foot button:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ── Main column: sticky topbar + body ───────────────────── */
.admin-main { min-width: 0; min-height: 100vh; display: flex; flex-direction: column; }
.admin-topbar {
    position: sticky; top: 0; z-index: 8;
    display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap;
    padding: 1.05rem 2rem 0.9rem;
    border-bottom: 1px solid var(--color-line);
    background: var(--color-bg);
}
.admin-topbar h1 { font-size: 1.5rem; font-weight: 400; }
.admin-topbar .spacer { flex: 1; }
.admin-topbar .crumb { font-size: 0.82rem; color: var(--color-muted); letter-spacing: 0.02em; }
/* Underline the breadcrumb link so it is distinguishable from the surrounding crumb text by more
   than colour alone (WCAG 1.4.1 / axe link-in-text-block). */
.admin-topbar .crumb a { text-decoration: underline; }
.admin-body { padding: 1.5rem 2rem 3rem; max-width: 1160px; }

/* ── Status badges (all 8 booking states) ────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.75rem; font-weight: 700;
    padding: 0.15rem 0.55rem; border-radius: 999px; line-height: 1.5;
    white-space: nowrap;
}
.badge::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; }
.badge--pending   { color: var(--color-warn); background: var(--color-warn-bg); }
.badge--approved  { color: var(--color-ok);   background: var(--color-ok-bg); }
.badge--complete  { color: var(--color-info); background: var(--color-info-bg); }
.badge--active    { color: #2c4708; background: rgba(113, 176, 2, 0.22); }
.badge--done,
.badge--neutral   { color: var(--color-muted); background: rgba(30, 28, 26, 0.07); }
.badge--denied,
.badge--cancelled { color: var(--color-err); background: var(--color-err-bg); }
.chip {
    display: inline-block; font-size: 0.72rem; color: var(--color-muted);
    background: var(--color-bg-warm); border: 1px solid var(--color-line);
    border-radius: 999px; padding: 0.05rem 0.55rem;
}

/* Admin button modifiers */
.btn-sm { padding: 0.32rem 0.7rem; font-size: 0.8rem; }
.btn-outline.btn-danger { color: var(--color-err); border-color: rgba(179, 52, 26, 0.4); }
.btn-outline.btn-danger:hover { border-color: var(--color-err); background: var(--color-err-bg); }

/* ── Modal / confirmation dialog ─────────────────────────── */
.modal-overlay {
    /* Above .form-status (1000) and .admin-panel (1001): a confirmation dialog is a true blocking
       modal and must always render on top of whatever triggered it, panel or plain page alike. */
    position: fixed; inset: 0; z-index: 1002;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
    background: rgba(26, 23, 20, 0.45);
}
.modal {
    background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-modal);
    width: 100%; max-width: 26rem; padding: 1.4rem 1.5rem;
    box-shadow: 0 10px 40px rgba(26, 23, 20, 0.22);
}
.modal__title {
    font-family: var(--font-heading); font-size: 1.25rem;
    color: var(--color-heading); margin: 0 0 0.5rem;
}
.modal__body { margin: 0 0 1.2rem; color: var(--color-text); font-size: 0.925rem; line-height: 1.5; }
.modal__actions { display: flex; justify-content: flex-end; gap: 0.6rem; }

/* ── Cards / panels ──────────────────────────────────────── */
.card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 1.1rem 1.2rem; }
.card__head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.card__head h2 {
    font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
    letter-spacing: 0.01em; color: var(--color-heading); margin: 0;
}
.card__head .n { background: var(--color-warn-bg); color: var(--color-warn); font-size: 0.75rem; font-weight: 700; border-radius: 999px; padding: 0 0.5rem; }
.card__head .link { margin-left: auto; font-size: 0.8rem; font-weight: 600; }

/* Dashboard (Översikt) top row: one column on mobile, two side-by-side from 720px up. */
.dash-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1rem; }
@media (min-width: 720px) { .dash-grid { grid-template-columns: 1fr 1fr; } }

/* ── Admin data table (dense, scannable, status-forward) ─── */
.admin-table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.card .admin-table-wrap { border: 0; background: none; }
table.admin-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
table.admin-table th {
    text-align: left; font-weight: 700; font-size: 0.72rem;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted);
    padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--color-line);
    white-space: nowrap; background: var(--color-bg);
}
table.admin-table td { padding: 0.62rem 0.8rem; border-bottom: 1px solid var(--color-line); vertical-align: middle; color: var(--color-text); }
table.admin-table tr:last-child td { border-bottom: 0; }
table.admin-table tbody tr:hover { background: var(--color-bg-warm); }
table.admin-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-table .mono { font-variant-numeric: tabular-nums; }
.admin-table .rowlink { font-weight: 600; color: var(--color-heading); text-decoration: none; }
/* Only a real <a> (Bookings/Dashboard/AdminCalendar, genuine navigation to booking detail) gets
   the link-hover-underline. The <span class="rowlink"> used on reference-data pages (Buildings,
   MealOptions, Facilities, PriceRules, CleaningZones) is plain label text — those rows already
   open edit on a click anywhere in the row plus an explicit Redigera button, so underlining the
   title on hover falsely implied only that text was clickable. */
.admin-table a.rowlink:hover { color: var(--color-primary-ink); text-decoration: underline; }
.admin-table .sub { display: block; font-size: 0.78rem; color: var(--color-muted); }
.admin-table .rowactions { text-align: right; white-space: nowrap; }
.admin-table .rowactions .btn-ghost { padding: 0.2rem 0.5rem; }
.admin-empty { color: var(--color-muted); font-size: 0.9rem; padding: 0.4rem 0; }

/* ── Mobile card counterpart to .admin-table (below 640px) ───
   Every list page renders both the table and this card list; the media query at the bottom of
   this file shows exactly one of the two. Cards mirror the table's columns as a title/badge head,
   an optional secondary line, and label/value field rows — no sideways scrolling. */
.data-cards { display: none; flex-direction: column; gap: 0.6rem; }
.data-card { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 0.75rem 0.85rem; }
.data-card--clickable { cursor: pointer; }
.data-card--clickable:hover { background: var(--color-bg-warm); }
.data-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.data-card__title { font-weight: 600; font-size: 0.9rem; color: var(--color-heading); line-height: 1.3; }
.data-card__sub { font-size: 0.78rem; color: var(--color-muted); margin-top: 0.15rem; }
.data-card__fields { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.8rem; margin: 0.55rem 0 0; }
.data-card__fields > div { display: flex; justify-content: space-between; gap: 0.6rem; }
.data-card__fields dt { color: var(--color-muted); }
.data-card__fields dd { margin: 0; color: var(--color-text); font-weight: 500; text-align: right; }
.data-card__actions { display: flex; justify-content: flex-end; gap: 0.4rem; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--color-line); }

/* Reference-CRUD add/edit panel (below the list) */
.admin-editcard { margin-top: 1.5rem; max-width: 640px; }
.admin-editcard h2, .admin-editcard h3 { font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; margin: 0 0 1rem; }
.admin-editcard .form-group:last-of-type { margin-bottom: 1.2rem; }
.admin-subsection { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; margin: 2rem 0 1rem; }

/* ── Byggnader hierarchy tree (PhysicalBuilding → Building → Room, Phase 11) ─
   Replaces the old two-page flat-table pattern with one indented tree + a slide-in edit
   panel. "bldg-" prefixed since .tree/.row/.panel are too generic for this shared stylesheet. */
.bldg-tree { border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; background: #fff; }
.bldg-tree__toolbar { display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--color-line); background: var(--color-bg-warm); }
.bldg-tree__toolbar .cols { display: flex; gap: 2.1rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-muted); margin-left: auto; padding-right: 6.5rem; }
.bldg-tree__expandall { font-size: 0.78rem; color: var(--color-primary-ink); background: none; border: 0; cursor: pointer; font-weight: 700; padding: 0.2rem 0.3rem; }
.bldg-tree__expandall:hover { text-decoration: underline; }

.bldg-row {
    display: grid; grid-template-columns: 1fr auto; grid-template-areas: "main stats"; align-items: center;
    padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--color-line); gap: 0.75rem; cursor: pointer;
}
.bldg-row:last-child { border-bottom: 0; }
.bldg-row:hover { background: var(--color-bg-warm); }
.bldg-row.is-selected { box-shadow: inset 3px 0 0 var(--color-primary); background: var(--color-ok-bg); }
.bldg-row--l0 { background: #fff; font-weight: 700; }
.bldg-row--l1 { background: #fbf9f6; }
.bldg-row--l2 { background: #f6f3ee; font-size: 0.88rem; }

.bldg-row__main { grid-area: main; display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.bldg-row--l1 .bldg-row__main { padding-left: 1.6rem; }
.bldg-row--l2 .bldg-row__main { padding-left: 3.2rem; }

.bldg-twist {
    width: 1.1rem; height: 1.1rem; flex: none; display: inline-flex; align-items: center; justify-content: center;
    background: none; border: 0; color: var(--color-muted); cursor: pointer; padding: 0; transition: transform var(--transition);
}
.bldg-twist svg { width: 0.6rem; height: 0.6rem; }
.bldg-row.is-open > .bldg-row__main > .bldg-twist { transform: rotate(90deg); }
.bldg-twist--spacer { visibility: hidden; }

.bldg-row__name {
    color: var(--color-heading); background: none; border: 0; padding: 0; text-align: left; font: inherit;
    cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bldg-row--l0 .bldg-row__name { font-family: var(--font-heading); font-size: 1.02rem; font-weight: 400; }
.bldg-row__meta { color: var(--color-muted); font-size: 0.78rem; font-weight: 400; white-space: nowrap; }
.bldg-row__summary { display: none; color: var(--color-muted); font-size: 0.78rem; font-variant-numeric: tabular-nums; }

.bldg-row__stats { grid-area: stats; display: flex; align-items: center; gap: 1.6rem; font-size: 0.82rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
.bldg-row__stats .num { min-width: 3.2rem; text-align: right; }
.bldg-row__actions { display: flex; gap: 0.15rem; }

.bldg-children { display: none; }
.bldg-children.is-open { display: block; }

.bldg-addrow {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 0.9rem 0.5rem 3.2rem; font-size: 0.82rem; color: var(--color-primary-ink);
    background: #f6f3ee; border-bottom: 1px solid var(--color-line); cursor: pointer; font-weight: 700;
}
.bldg-addrow:hover { text-decoration: underline; }
.bldg-addrow--l1 { padding-left: 1.6rem; background: #fbf9f6; }
.bldg-addrow--l2 { padding-left: 3.2rem; background: #f6f3ee; }
.bldg-addrow--l0 { padding-left: 0.9rem; background: #fff; border-bottom: 0; border-top: 1px solid var(--color-line); }

.bldg-emptychild { padding: 0.55rem 0.9rem 0.7rem 3.2rem; font-size: 0.82rem; color: var(--color-muted); font-style: italic; background: #fbf9f6; border-bottom: 1px solid var(--color-line); }

/* Shared slide-in edit panel (AdminPanel.razor) — used by every reference-data CRUD page
   (Buildings, MealOptions, Facilities, PriceRules, CleaningZones, Blocks) for its create/edit
   form, replacing the old below-the-table admin-editcard everywhere. One shared surface means
   one place to fix spacing/behaviour instead of N near-identical copies. */
.admin-scrim {
    position: fixed; inset: 0; background: rgba(20, 18, 16, 0.28); opacity: 0; pointer-events: none;
    transition: opacity var(--transition); z-index: 40;
}
.admin-scrim.is-open { opacity: 1; pointer-events: auto; }

.admin-panel {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(380px, 92vw);
    background: var(--color-bg); border-left: 1px solid var(--color-line);
    box-shadow: 0 12px 40px rgba(26, 23, 20, 0.16);
    transform: translateX(100%); transition: transform 220ms ease;
    /* Stacking order (highest wins): .modal-overlay 1002 > .admin-panel 1001 > .form-status 1000.
       This panel sits above the toast (also fixed bottom-right) so its own Spara/Ta bort buttons
       don't end up under a lingering toast and unclickable — the panel is an active surface the
       admin is mid-task in, so it should win over a passive notification. But ConfirmDialog's
       .modal-overlay must win over THIS panel, since "Ta bort" inside the panel opens a
       ConfirmDialog on top of it — if you touch either z-index, keep this order intact. */
    z-index: 1001;
    display: flex; flex-direction: column;
}
.admin-panel.is-open { transform: translateX(0); }
.admin-panel > form { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* the EditForm's rendered <form> must flex its body/foot children */
.admin-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; padding: 1.1rem 1.3rem 0.9rem; border-bottom: 1px solid var(--color-line); }
.admin-panel__kicker { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); font-weight: 700; margin-bottom: 0.25rem; }
.admin-panel__title { font-size: 1.2rem; font-weight: 400; }
.admin-panel__close { background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--color-muted); cursor: pointer; padding: 0.15rem 0.3rem; }
.admin-panel__close:hover { color: var(--color-heading); }
.admin-panel__body { padding: 1.1rem 1.3rem; overflow-y: auto; flex: 1; }
.admin-panel__body .form-group:last-of-type { margin-bottom: 1.2rem; }
/* flex-wrap as a defensive fallback at any width (not just below the mobile breakpoint) — three
   buttons (Spara/Aktivera-Inaktivera/Ta bort) in the fixed 380px desktop drawer is already tight;
   wrapping to a second line beats overflowing or squeezing each label onto two lines. */
.admin-panel__foot { padding: 1rem 1.3rem 1.3rem; border-top: 1px solid var(--color-line); display: flex; flex-wrap: wrap; gap: 0.6rem; }

.admin-crumbtrail { display: flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--color-muted); flex-wrap: wrap; }
.admin-crumbtrail b { color: var(--color-heading); font-weight: 700; }

/* Mobile (≤640px): rows stack, the two numeric columns fold into one summary line, the whole
   row becomes a forgiving tap target, and the edit panel goes full-screen (NFR-17 admin-mobile,
   extended here beyond the "tables may stay horizontally scrollable" floor since this admin
   works mostly from a phone). */
@media (max-width: 640px) {
    .bldg-tree__toolbar .cols { display: none; }

    .bldg-row {
        grid-template-columns: 1fr; grid-template-areas: "main" "stats";
        row-gap: 0.3rem; padding: 0.7rem 0.85rem;
    }
    .bldg-row--l1 .bldg-row__main { padding-left: 0.85rem; }
    .bldg-row--l2 .bldg-row__main { padding-left: 1.7rem; }
    .bldg-row__main { flex-wrap: wrap; row-gap: 0.15rem; }
    .bldg-row__meta { display: none; } /* folded into .bldg-row__summary to avoid repeating the same info twice */
    .bldg-row__summary { display: block; flex-basis: 100%; padding-left: 1.65rem; }
    .bldg-row--l1 .bldg-row__summary { padding-left: 2.5rem; }
    .bldg-row--l2 .bldg-row__summary { padding-left: 3.35rem; }

    .bldg-row__stats { justify-content: flex-start; padding-left: 1.65rem; }
    .bldg-row--l1 .bldg-row__stats { padding-left: 2.5rem; }
    .bldg-row--l2 .bldg-row__stats { padding-left: 3.35rem; }
    .bldg-row__stats .num { display: none; }
    .bldg-row__actions { display: none; } /* the whole row already opens edit — no need for a second button */

    /* Touch target: keep the visual chevron small but grow its hit area to ~44px (WCAG 2.5.5). */
    .bldg-twist { width: 2.6rem; height: 2.6rem; margin: -0.75rem 0 -0.75rem -0.85rem; }

    .bldg-addrow--l0 { padding-left: 0.85rem; }
    .bldg-addrow--l1 { padding-left: 2.5rem; }
    .bldg-addrow--l2 { padding-left: 3.35rem; }
    .bldg-emptychild { padding-left: 1.7rem; }

    /* Shared with every other reference-data page — not Buildings-specific, unlike the rules above. */
    .admin-panel { width: 100%; }
    .admin-panel__foot { flex-direction: column; }
    .admin-panel__foot .btn, .admin-panel__foot .btn-outline { width: 100%; }
}

/* ── Filters + toolbar row ───────────────────────────────── */
.admin-toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1.1rem; }
.admin-filters { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: end; margin-bottom: 1.1rem; }
.admin-filters .form-group { margin-bottom: 0; gap: 0.25rem; }
.admin-filters .form-group label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-muted); }

/* ── Booking detail: main column + sticky action rail ────── */
.admin-detail-head { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; margin-bottom: 1.3rem; }
.admin-detail-head h1 { font-size: 1.6rem; font-weight: 400; margin: 0; }
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: 1.4rem; align-items: start; }
.detail-rail { position: sticky; top: calc(var(--header-h) + 0.5rem); max-height: calc(100vh - var(--header-h) - 1rem); overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; }
/* Booking detail sections (Kontaktuppgifter, Vistelse, Deltagare, ...) are each a native
   <details class="detail-acc">, not a plain <div> — collapsing what's already been reviewed is
   what keeps a many-participant booking from becoming one long scroll. `open` is left as a
   static/unbound attribute in the Razor so the browser owns collapsed/expanded state across
   Blazor re-renders (e.g. after saving one participant) instead of resetting on every save. */
.detail-acc { margin-bottom: 0.8rem; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card); }
.detail-acc__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.8rem;
    padding: 0.75rem 1rem; cursor: pointer; list-style: none;
}
.detail-acc__head::-webkit-details-marker { display: none; }
.detail-acc__head::marker { content: ""; }
/* A real <h2> (not a <span>) so the section title still shows up in screen-reader heading
   navigation despite living inside a <summary> — <details>'s content model allows one heading
   element followed by phrasing content, so this doesn't change the disclosure semantics. */
.detail-acc__title {
    font-family: var(--font-body); font-weight: 700; font-size: 0.8rem;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-muted);
    margin: 0;
}
.detail-acc__meta { font-size: 0.82rem; color: var(--color-text); text-align: right; }
.detail-acc__chev { color: var(--color-muted); font-size: 0.7rem; flex: none; transition: transform var(--transition); }
.detail-acc[open] > .detail-acc__head { border-bottom: 1px solid var(--color-line); }
.detail-acc[open] > .detail-acc__head .detail-acc__chev { transform: rotate(180deg); }
.detail-acc__body { padding: 1rem; }
.detail-acc__body > h3:first-child { margin-top: 0; }
.detail-acc__body > h3 { font-family: var(--font-body); font-weight: 700; font-size: 0.9rem; color: var(--color-heading); margin: 1.1rem 0 0.5rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem; font-size: 0.9rem; max-width: 480px; }
.kv dt { color: var(--color-muted); }
.kv dd { color: var(--color-heading); margin: 0; }
.rail-actions { display: flex; flex-direction: column; gap: 0.5rem; }
.rail-actions .btn, .rail-actions .btn-outline { justify-content: center; }
.action-note { font-size: 0.85rem; color: var(--color-muted); margin: 0.7rem 0 0; }
.paycheck { display: flex; gap: 0.5rem; align-items: center; font-size: 0.875rem; color: var(--color-text); margin-bottom: 0.35rem; }
.paycheck:last-child { margin-bottom: 0; }
.detail-rail .card textarea {
    width: 100%; font: inherit; font-size: 0.875rem; padding: 0.45rem 0.55rem;
    border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: #fff; resize: vertical;
}
.detail-rail .card textarea:focus { outline: 2px solid var(--color-primary-ink); outline-offset: 1px; border-color: transparent; }

/* Participant editor cards (booking detail) */
fieldset.participant {
    border: 1px solid var(--color-line); border-radius: var(--radius-card);
    padding: 1rem 1.1rem; margin-bottom: 0.9rem; background: #fff;
}
fieldset.participant legend {
    font-weight: 700; font-size: 0.85rem; color: var(--color-heading);
    padding: 0 0.4rem; margin-left: -0.4rem;
}

/* Participant read view — the default. A completed booking's admin/edit form only opens per
   person on request (the "Redigera" pencil), so visiting a many-guest booking to look something
   up doesn't load every field for every guest as live inputs. */
.participant-view__row { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.participant-view__name { font-weight: 600; color: var(--color-heading); }
.participant-view__meta { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.2rem; }
.participant-view__diet { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.edit-pencil {
    font-size: 0.78rem; font-weight: 700; color: var(--color-primary-ink);
    background: none; border: 0; cursor: pointer; padding: 0.2rem 0.3rem; flex: none;
}
.edit-pencil:hover { text-decoration: underline; }

/* ── Login / password pages ──────────────────────────────── */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--color-bg-warm); padding: 3rem 1rem; }
.login-card { width: 100%; max-width: 400px; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 2.25rem 2rem; }
.login-card__logo { display: flex; justify-content: center; margin-bottom: 1.25rem; }
.login-card__logo .logo { height: 55px; width: auto; }
.login-card h1 { text-align: center; font-weight: 400; font-size: 1.5rem; margin-bottom: 0.35rem; }
.login-card .login-sub { text-align: center; color: var(--color-muted); font-size: 0.85rem; margin-bottom: 1.5rem; }
.login-card .btn { width: 100%; justify-content: center; }
.login-card .login-alt { text-align: center; margin-top: 1rem; font-size: 0.9rem; }

/* ── Responsive: collapse the sidebar to a top bar under 860px ─ */
@media (max-width: 860px) {
    .admin-shell { grid-template-columns: 1fr; }
    /* Collapses to a top bar here — drop the desktop full-height sizing but keep it pinned to the
       top so the hamburger stays reachable while the page scrolls. z-index sits above page content
       but below the slide-in panel / dialog (1000+). */
    .admin-nav { padding: 0.55rem 0.9rem; height: auto; overflow-y: visible; top: 0; z-index: 20; }
    .admin-nav__bar { border: 0; margin: 0; padding: 0; }
    .admin-nav__toggle { display: inline-flex; }
    /* Collapsible menu: hidden until the hamburger checkbox is checked; then drops down as full-width rows. */
    .admin-nav__links { display: none; flex: initial; padding-top: 0.6rem; }
    .admin-nav__checkbox:checked ~ .admin-nav__links { display: flex; }
    .admin-nav a { padding: 0.7rem 0.6rem; }
    .admin-nav__foot { margin-top: 0.6rem; }
    .admin-topbar, .admin-body { padding-left: 1rem; padding-right: 1rem; }
    .detail-grid { grid-template-columns: 1fr; }
    .detail-rail { position: static; max-height: none; overflow-y: visible; }
}

/* ── Responsive: swap .admin-table for .data-cards under 640px ─
   Narrower than the 860px sidebar breakpoint above — a collapsed sidebar still leaves enough
   width for a table down to about 640px; below that, columns get too cramped to read without
   sideways scrolling, so the card list takes over instead. */
@media (max-width: 640px) {
    .admin-table-wrap { display: none; }
    .data-cards { display: flex; }
}

/* ============================================================
   Public content pages — generic text defaults
   (Used by the still-functional funnel/completion pages until their
   slices; the trust pages below use scoped direction-A components.)
   ============================================================ */
.section h1 {
    margin-bottom: 1.5rem;
}

.section h2 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.section p {
    margin-bottom: 1rem;
}

.section dl {
    margin: 1rem 0;
}

.section dt {
    font-weight: 700;
    color: var(--color-heading);
    margin-top: 1rem;
}

/* ============================================================
   Interior trust pages (direction A, Phase 6 slice 3)
   "chapter opener" header · om-oss · faciliteter · mat & priser
   · kontakt · utility (not-found / error)
   ============================================================ */

/* Chapter-opener page header (interior pages have no hero) */
.page-head {
    background: var(--color-bg-warm);
    border-bottom: 1px solid var(--color-line);
}
.page-head .container { padding-top: 3.5rem; padding-bottom: 3rem; }
.page-head h1 {
    font-weight: 400;
    font-size: clamp(1.9rem, 4.2vw, 2.9rem);
    line-height: 1.05;
    letter-spacing: -0.015em;
    margin: 0;
}
.page-head__rule { width: 3.5rem; height: 2px; background: var(--color-primary); margin: 1.25rem 0 0; }
.page-head__intro { font-size: 1.125rem; color: var(--color-text); margin: 1.25rem 0 0; max-width: 56ch; }

/* Readable prose column */
.prose { max-width: 65ch; }
.prose p { font-size: 1.0625rem; color: var(--color-text); margin: 0 0 1.2rem; }
.prose p:last-child { margin-bottom: 0; }

/* Inline links inside running text are underlined so they're distinguishable without relying on
   colour (WCAG 1.4.1 — axe "link-in-text-block"). Nav/footer/cards/buttons are excluded: they're
   set apart by layout, not sitting inside a sentence. */
.prose a, .section p a, .menu-note a { text-decoration: underline; text-underline-offset: 0.15em; }

/* Section eyebrow + subhead on content pages */
.subhead {
    font-family: var(--font-heading);
    color: var(--color-heading);
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 1rem;
}

/* Om oss */
.about-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; }
.about-photo {
    min-height: 15rem;
    border-radius: var(--radius-card);
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #d3d9cf, #8a9a72);
}
.facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--color-line);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    overflow: hidden;
    margin-top: 2rem;
}
.facts > div { background: var(--color-bg); padding: 1.1rem 1.25rem; }
.facts__num { font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-heading); line-height: 1; }
.facts__label { font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.25rem; }
@media (min-width: 1024px) {
    .about-grid { grid-template-columns: 1.1fr 0.9fr; gap: 3rem; }
    .about-photo { min-height: 21rem; }
}

/* Facilities grid */
.fac-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.fac-card { border: 1px solid var(--color-line); border-radius: var(--radius-card); overflow: hidden; background: #fff; }
.fac-card__img {
    aspect-ratio: 4 / 3;
    position: relative;
    background: linear-gradient(160deg, #d3d9cf, #8a9a72);
}
.fac-card__img img { width: 100%; height: 100%; object-fit: cover; }
.fac-card__body { padding: 1.1rem 1.25rem; }
.fac-card h2 { font-size: 1.2rem; font-weight: 700; margin: 0 0 0.4rem; }
.fac-card p { margin: 0; font-size: 0.95rem; color: var(--color-text); }
@media (min-width: 480px) { .fac-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fac-grid { grid-template-columns: repeat(3, 1fr); } }

/* Menu (part of Mat & priser) */
.menu-cols { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .menu-cols { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.menu-col h2 {
    font-weight: 700;
    font-size: 1.25rem;
    margin: 0 0 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--color-primary);
}
.dish { padding: 0.9rem 0; border-bottom: 1px solid var(--color-line); }
.dish:last-child { border-bottom: 0; }
.dish__top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.dish h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1rem; margin: 0; }
.dish p { margin: 0.3rem 0 0; font-size: 0.9rem; color: var(--color-muted); }
.meal-veg {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-ok);
    background: var(--color-ok-bg);
    padding: 0.15rem 0.5rem;
    border-radius: 1rem;
}
.menu-note { font-size: 0.875rem; color: var(--color-muted); font-style: italic; margin: 1.2rem 0 0; }

/* Data table (prices, cleaning zones) */
.data-table-wrap {
    overflow-x: auto;
    background: var(--color-bg);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
}
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th {
    text-align: left;
    font-family: var(--font-body);
    font-weight: 700;
    color: var(--color-heading);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.7rem 0.9rem;
    border-bottom: 2px solid var(--color-line);
}
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--color-line); color: var(--color-text); vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table__label { color: var(--color-heading); font-weight: 600; }
.data-table__sub { display: block; font-size: 0.8125rem; color: var(--color-muted); margin-top: 0.2rem; }
.data-table__season { color: var(--color-secondary); font-size: 0.85rem; white-space: nowrap; }
.price-note { font-size: 0.875rem; color: var(--color-muted); margin: 0 0 1.25rem; }
.price-block + .price-block { margin-top: 2.5rem; }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; }
@media (min-width: 768px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; } }
.contact-dl { margin: 0; }
.contact-dl dt { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); font-weight: 700; margin-top: 1.25rem; }
.contact-dl dt:first-child { margin-top: 0; }
.contact-dl dd { margin: 0.25rem 0 0; font-size: 1.0625rem; color: var(--color-heading); }
.cta-card { background: var(--color-bg-warm); border: 1px solid var(--color-line); border-radius: var(--radius-card); padding: 1.75rem; }
.cta-card h2 { font-weight: 400; font-size: 1.5rem; margin: 0 0 0.5rem; }
.cta-card p { font-size: 0.95rem; color: var(--color-text); margin: 0 0 1.25rem; }

/* Reassurance note next to a CTA */
.cta-note { font-size: 0.9rem; color: var(--color-muted); }

/* Utility pages (not found / error) */
.utility { text-align: center; padding: 5rem 0; }
.utility__code { font-family: var(--font-heading); font-size: clamp(3rem, 8vw, 4rem); color: var(--color-primary); line-height: 1; margin: 0; }
.utility h1 { font-weight: 400; font-size: clamp(1.6rem, 4vw, 2rem); margin: 0.75rem 0 0.6rem; }
.utility p { color: var(--color-text); margin: 0 0 1.6rem; }
.utility__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; align-items: center; }

/* ── Phase 3: inquiry form, admin booking mgmt, availability calendar ───────── */

.checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.3rem 0;
    font-size: 0.95rem;
    color: var(--color-text);
    cursor: pointer;
}

/* Alert / message box (reassurance banner, form feedback) */
.alert {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border-radius: var(--radius-card);
    font-size: 0.95rem;
    border: 1px solid transparent;
}
/* Round badge so the glyph reads as an info/error indicator, not stray punctuation (a bare bold
   "i" was mistaken for an upside-down exclamation mark). Italic "i" = the conventional info mark. */
.alert__ic {
    flex: none;
    align-self: start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 700;
    font-style: italic;
    line-height: 1;
}
.alert b { color: var(--color-heading); }
.alert--info { background: var(--color-info-bg); border-color: rgba(134, 86, 40, 0.3); color: #5a3d1f; }
.alert--info .alert__ic { background: #5a3d1f; color: var(--color-info-bg); }
.alert--error { background: var(--color-err-bg); border-color: rgba(179, 52, 26, 0.32); color: #8f2915; }
.alert--error .alert__ic { background: #8f2915; color: var(--color-err-bg); }
.alert--warn { background: var(--color-warn-bg); border-color: rgba(214, 158, 46, 0.4); color: #7a4c00; }
.alert--warn .alert__ic { background: #8a5a00; color: #fff; font-style: normal; }
/* Bulleted items inside an alert (e.g. multiple approval warnings) */
.alert__list { margin: 0.35rem 0 0; padding-left: 1.1rem; }
.alert__list li { margin-bottom: 0.25rem; }
.alert__list li:last-child { margin-bottom: 0; }

/* Admin save/action feedback. Rendered as a fixed toast (bottom-right) so it is always in the
   viewport regardless of scroll position — previously it sat at the top of the page and a save
   made far down (e.g. payment status) gave feedback the admin had to scroll up to see. Kept
   neutral (not green) because the same _message carries both success and error text. */
.form-status {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    max-width: min(30rem, calc(100vw - 2rem));
    margin: 0;
    padding: 0.85rem 1.1rem;
    color: var(--color-heading);
    font-weight: 600;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-line);
    border-left: 4px solid var(--color-primary);
    border-radius: var(--radius-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    animation: form-status-in 0.28s ease-out;
}
@keyframes form-status-in {
    from { opacity: 0; transform: translateY(0.6rem); }
    to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .form-status { animation: none; } }

.action-panel {
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 1rem;
    margin: 1rem 0;
    background: var(--color-bg-warm);
}
.action-panel h3 { font-family: var(--font-body); font-weight: 700; font-size: 0.95rem; margin: 0 0 0.6rem; }
.action-panel label { display: block; font-weight: 700; font-size: 0.82rem; color: var(--color-heading); margin-bottom: 0.3rem; }
.action-panel textarea, .action-panel input, .action-panel select {
    width: 100%; font: inherit; font-size: 0.875rem;
    padding: 0.45rem 0.55rem; margin-bottom: 0.7rem;
    border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: #fff;
}
.action-panel textarea { min-height: 4rem; resize: vertical; }
.action-panel textarea:focus, .action-panel input:focus, .action-panel select:focus {
    outline: 2px solid var(--color-primary-ink); outline-offset: 1px; border-color: transparent;
}

/* Availability calendar (direction A) */
.cal-legend { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 0 0 1.4rem; font-size: 0.875rem; color: var(--color-text); }
.cal-legend > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.cal-swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.08); }
.cal-free { background: #dcecc4; }
.cal-partial { background: #f6e2a8; }
.cal-full { background: #eccdc7; }

.cal-selection {
    position: sticky;
    top: var(--header-h);
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-card);
    padding: 0.9rem 1.1rem;
    margin-bottom: 1.5rem;
}
.cal-selection[hidden] { display: none; }

.cal-months { display: grid; grid-template-columns: 1fr; gap: 2rem 2.5rem; }
@media (min-width: 720px) { .cal-months { grid-template-columns: 1fr 1fr; } }
.cal-month { margin: 0; }
.cal-month h2 { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.75rem; }

.cal-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.cal-grid th {
    text-align: center;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-muted);
    font-weight: 700;
    padding: 0.35rem 0;
}

.cal-day, .cal-empty {
    height: 2.75rem;
    text-align: center;
    vertical-align: middle;
    border: 2px solid var(--color-bg);
    border-radius: 4px;
    font-size: 0.9rem;
}
.cal-day { color: var(--color-heading); }
.cal-day.cal-partial { color: #6b5310; }
.cal-day.cal-full { color: #6b3229; } /* darker than the pink bg for AA contrast */
.cal-past { background: var(--color-bg-warm); color: #6b665c; } /* darkened from #bdb7ac (1.7:1) to ~4.8:1 for AA */

.cal-day a { display: block; line-height: 2.75rem; margin: -2px; border-radius: 4px; color: inherit; text-decoration: none; }
.cal-day a:hover { box-shadow: inset 0 0 0 2px var(--color-primary-ink); }

/* Selected range (JS adds .cal-selected to the day <td>). */
.cal-day.cal-selected { background: var(--color-primary); }
.cal-day.cal-selected a { color: var(--color-heading); font-weight: 700; }