/* ================================================================
   CampSuite Global Styles
   Grandma-first: large text, generous touch targets, high contrast
   ================================================================ */

/* Base font: 16px everywhere - never smaller than the browser default */
html {
    font-size: 16px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    -webkit-text-size-adjust: 100%;
    /* UI typeface - Source Sans 3, the CampSuite interface face, with the
       native system stack as a fast fallback until it loads. Sora carries
       the brand voice on display headings. */
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Headings: slightly tighter tracking reads more "designed" without
   hurting legibility. Weights stay bold so hierarchy is obvious. */
h1, h2, h3, h4 {
    letter-spacing: -0.01em;
}

/* ── Craft details - the small things templates never bother with ──
   Selected text takes the sky-and-deep-blue brand pairing, tapping on a
   phone doesn't flash a grey rectangle, scrollbars are thin and warm
   instead of stock chrome, and every column of figures lines up like
   a ledger (tabular numerals in tables and stat numbers). */
::selection { background: #d7e6f4; color: #0f213f; }

html { -webkit-tap-highlight-color: transparent; }

table,
.cs-m-summary-number {
    font-variant-numeric: tabular-nums;
}

@media (min-width: 768px) {
    * { scrollbar-width: thin; scrollbar-color: #d6d0c4 transparent; }
    *::-webkit-scrollbar { width: 10px; height: 10px; }
    *::-webkit-scrollbar-track { background: transparent; }
    *::-webkit-scrollbar-thumb {
        background: #d6d0c4;
        border-radius: 5px;
        border: 2px solid transparent;
        background-clip: content-box;
    }
    *::-webkit-scrollbar-thumb:hover { background-color: #a8a092; }
}

/* Display face - Sora, the CampSuite brand headline face. Used for page
   titles and hero moments only; body copy stays in Source Sans 3. */
.cs-font-display {
    font-family: "Sora", "Segoe UI", system-ui, sans-serif;
    letter-spacing: -0.01em;
    font-optical-sizing: auto;
}

/* ── Focus styles ── visible, high-contrast ring for keyboard users.
   Brand blue so it matches the rest of the UI. */
:focus-visible {
    outline: 3px solid #22568c;
    outline-offset: 2px;
}

/* ── Form inputs ── bigger touch targets, clearer text */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="search"],
select,
textarea {
    font-size: 1rem;
    min-height: 48px;
}

@media (min-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    input[type="search"],
    select,
    textarea {
        min-height: 44px;
    }
}

/* ── Checkboxes & radio buttons ── larger touch targets */
input[type="checkbox"],
input[type="radio"] {
    min-width: 20px;
    min-height: 20px;
}

/* ── Buttons ── generous touch targets (44px minimum on mobile) */
button,
[type="submit"],
a.inline-flex {
    min-height: 44px;
}

/* ── Smooth transitions for interactive elements ── */
input, select, textarea, button, a {
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

/* ── Icons ── one consistent, lighter line weight everywhere. The stock 2px
   heroicon stroke is the generic-template look; 1.7px reads drawn-for-us.
   Only touches icons that declare the stock weight on the <svg> itself, so
   deliberate heavier strokes (chevrons at 2.5) and SVG artwork with per-shape
   widths (the site-map drawings) are untouched. */
svg[stroke-width="2"] {
    stroke-width: 1.7;
}

/* ── Mobile drawer animation ──
   visibility toggles with the slide so the closed drawer is out of the tab
   order and invisible to screen readers (transform alone hides neither). */
#cs-mobile {
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    -webkit-overflow-scrolling: touch;
}

#cs-mobile.cs-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.25s ease, visibility 0s linear 0s;
}

#cs-overlay {
    opacity: 0;
    transition: opacity 0.25s ease;
}

#cs-overlay.cs-open {
    opacity: 1;
}

/* ── Table responsive helpers ── */
@media (max-width: 767px) {
    .cs-table-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .cs-table-mobile {
        display: none !important;
    }
}

/* ── Validation messages ── make errors prominent and readable */
.field-validation-error {
    font-size: 0.9375rem;
    font-weight: 500;
}

/* Hide the validation summary container when there are no errors */
.validation-summary-valid {
    display: none;
}

/* ── Contact search results dropdown ── */
.cs-search-results {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border: 1.5px solid #e8e4db;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    z-index: 110;
    max-height: 220px;
    overflow-y: auto;
    margin-top: 4px;
}

.cs-search-results.cs-visible {
    display: block;
}

.cs-search-item {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid #faf9f6;
    transition: background 0.1s;
}

.cs-search-item:hover {
    background: #eef4fa;
}

.cs-search-item:last-child {
    border-bottom: none;
}

.cs-search-item-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1b1813;
}

.cs-search-item-detail {
    font-size: 0.8125rem;
    color: #797163;
    margin-top: 2px;
}

/* A blocked guest is flagged in the results, so nobody picks one by mistake. */
.cs-search-item-blocked {
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 9999px;
    background: #fee2e2;
    color: #b42318;
    font-size: 0.6875rem;
    font-weight: 700;
}

/* ── Match banner (duplicate detection) ── */
.cs-match-banner {
    display: none;
    padding: 12px 16px;
    border-radius: 10px;
    background: #f2f6f9;
    border: 1.5px solid #c2d4e3;
    margin-top: 12px;
    font-size: 0.875rem;
    align-items: center;
    gap: 10px;
}

.cs-match-banner.cs-visible {
    display: flex;
}

.cs-match-banner-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #3a5f7e;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.cs-match-banner-info {
    flex: 1;
    min-width: 0;
}

.cs-match-banner-name {
    font-weight: 700;
    color: #2b4255;
}

.cs-match-banner-detail {
    font-size: 0.8125rem;
    color: #4b7699;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cs-match-use {
    padding: 6px 14px;
    border-radius: 10px;
    border: none;
    background: #3a5f7e;
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    min-height: 36px;
}

.cs-match-use:hover {
    background: #324f68;
}

/* ── Linked guest banner ── */
.cs-linked-guest {
    display: none;
    padding: 12px 16px;
    border-radius: 10px;
    background: #eef4fa;
    border: 1.5px solid #b4d0e9;
    font-size: 0.875rem;
    align-items: center;
    gap: 10px;
}

.cs-linked-guest.cs-visible {
    display: flex;
}

.cs-linked-guest-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #22568c;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.cs-linked-guest-info {
    flex: 1;
}

.cs-linked-guest-name {
    font-weight: 700;
    color: #1b4472;
}

.cs-linked-guest-detail {
    font-size: 0.8125rem;
    color: #22568c;
    margin-top: 2px;
}

.cs-linked-clear {
    padding: 6px 14px;
    border-radius: 10px;
    border: 1.5px solid #b4d0e9;
    background: #fff;
    color: #22568c;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    min-height: 36px;
}

.cs-linked-clear:hover {
    background: #eef4fa;
}

/* ── Stepper (+ / - buttons for party size) ── */
.cs-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    border: 1.5px solid #e8e4db;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.cs-stepper-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #faf9f6;
    border: none;
    cursor: pointer;
    color: #575147;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.cs-stepper-btn:hover {
    background: #e8e4db;
    color: #1b1813;
}

.cs-stepper-btn:active {
    background: #d6d0c4;
}

.cs-stepper-value {
    width: 48px !important;
    min-height: 48px !important;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: #1b1813;
    border: none !important;
    border-left: 1.5px solid #e8e4db !important;
    border-right: 1.5px solid #e8e4db !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background: #fff;
    -moz-appearance: textfield;
}

.cs-stepper-value::-webkit-inner-spin-button,
.cs-stepper-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ── iOS Safari modal fixes ──
   On iOS, position:fixed + keyboard causes viewport issues.
   Using overflow-y:auto on the overlay with overscroll-contain
   lets the modal scroll naturally when the keyboard opens. */
@supports (-webkit-touch-callout: none) {
    .fixed.overflow-y-auto {
        -webkit-overflow-scrolling: touch;
    }
}

/* ── Pricing table mobile layout ── */
@media (max-width: 767px) {
    .cs-pricing-table {
        display: block;
    }

    .cs-pricing-table thead {
        display: none;
    }

    .cs-pricing-table tbody {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .cs-pricing-table tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem;
        border: 1px solid #e8e4db;
        border-radius: 0.625rem;
        background: #fff;
    }

    .cs-pricing-table td:first-child {
        flex: 0 0 100%;
        padding: 0;
        font-weight: 600;
        font-size: 0.9375rem;
        margin-bottom: 0.25rem;
    }

    .cs-pricing-table td {
        flex: 1 1 0;
        min-width: 0;
        padding: 0;
    }

    .cs-pricing-table td input {
        width: 100% !important;
    }

    .cs-pricing-season-label {
        display: block;
        font-size: 0.75rem;
        font-weight: 500;
        color: #797163;
        margin-bottom: 2px;
    }
}

@media (min-width: 768px) {
    .cs-pricing-season-label {
        display: none;
    }
}

/* ─── Audience toggle (Settings → Extras) ─────────────────────────
   Three big tappable cards for "where should we show this extra".
   Visual checkbox: the native input is hidden but still receives focus,
   and the card lifts + paints emerald when the box is ticked.
   ──────────────────────────────────────────────────────────────── */
.audience-toggle {
    position: relative;
    display: block;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.audience-toggle-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.audience-toggle-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 16px 14px;
    border-radius: 10px;
    border: 2px solid #e8e4db;
    background: #ffffff;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 120ms ease;
    height: 100%;
}

.audience-toggle:hover .audience-toggle-card {
    border-color: #a8a092;
    background: #faf9f6;
}

.audience-toggle-input:focus-visible + .audience-toggle-card {
    outline: 3px solid #22568c;
    outline-offset: 2px;
}

.audience-toggle-input:checked + .audience-toggle-card {
    border-color: #22568c;
    background: linear-gradient(180deg, #eef4fa 0%, #ffffff 100%);
    box-shadow: 0 1px 0 #d7e6f4, 0 6px 16px rgba(15, 33, 63, 0.12);
    transform: translateY(-1px);
}

.audience-toggle-input:checked + .audience-toggle-card::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 12px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #22568c;
    color: #ffffff;
    font-weight: 800;
    font-size: 14px;
    line-height: 26px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(15, 33, 63, 0.35);
}

.audience-toggle-emoji {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 2px;
}

.audience-toggle-title {
    font-size: 16px;
    font-weight: 700;
    color: #1b1813;
    line-height: 1.25;
}

.audience-toggle-sub {
    font-size: 13px;
    color: #797163;
    line-height: 1.35;
}

/* ──────────────────────────────────────────────────────────────
   Rich HTML email editor (Quill) - styled to match the Tailwind UI
   ────────────────────────────────────────────────────────────── */
.cs-editor-wrap .ql-toolbar.ql-snow {
    border: 1px solid #d6d0c4;
    border-bottom: none;
    border-radius: 0.75rem 0.75rem 0 0;
    background: #faf9f6;
    padding: 8px 10px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
}

/* Toolbar groups, separated by a soft divider so related controls read as a set.
   Tailwind's CDN preflight resets <button>/<svg>, which strips Quill's own toolbar
   styling - so we restyle the buttons and pickers from scratch here. */
.cs-editor-wrap .ql-toolbar.ql-snow .ql-formats {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding-right: 8px;
    border-right: 1px solid #e8e4db;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-formats:last-child {
    border-right: none;
    padding-right: 0;
}

/* Each toolbar control is a proper, tappable, rounded button. */
.cs-editor-wrap .ql-toolbar.ql-snow button {
    width: 32px;
    height: 32px;
    padding: 5px;
    border: none;
    border-radius: 8px;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    float: none;
    transition: background-color .12s ease;
}

.cs-editor-wrap .ql-toolbar.ql-snow button svg {
    width: 18px;
    height: 18px;
}

.cs-editor-wrap .ql-toolbar.ql-snow button:hover,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label:hover {
    background: #e8e4db;
}

.cs-editor-wrap .ql-toolbar.ql-snow button .ql-stroke,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label .ql-stroke {
    stroke: #575147;
}

.cs-editor-wrap .ql-toolbar.ql-snow button .ql-fill,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label .ql-fill {
    fill: #575147;
}

/* Active / hovered controls pick up the brand blue. */
.cs-editor-wrap .ql-toolbar.ql-snow button.ql-active,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label.ql-active {
    background: #eef4fa;
}

.cs-editor-wrap .ql-toolbar.ql-snow button.ql-active .ql-stroke,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke,
.cs-editor-wrap .ql-toolbar.ql-snow button:hover .ql-stroke,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke {
    stroke: #1b4472;
}

.cs-editor-wrap .ql-toolbar.ql-snow button.ql-active .ql-fill,
.cs-editor-wrap .ql-toolbar.ql-snow button:hover .ql-fill {
    fill: #1b4472;
}

/* Dropdown pickers (heading level, text colour). */
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker {
    height: 32px;
    display: inline-flex;
    align-items: center;
    color: #575147;
    font-size: 14px;
    font-weight: 500;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label {
    border: none;
    border-radius: 8px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-label::before {
    line-height: 32px;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-options {
    border-radius: 10px;
    border: 1px solid #e8e4db;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
    padding: 6px;
}

.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-item:hover,
.cs-editor-wrap .ql-toolbar.ql-snow .ql-picker-item.ql-selected {
    color: #1b4472;
}

.cs-editor-wrap .ql-container.ql-snow {
    border: 1px solid #d6d0c4;
    border-radius: 0 0 0.75rem 0.75rem;
    font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    background: #ffffff;
}

.cs-editor-wrap .ql-editor {
    min-height: 240px;
    line-height: 1.6;
    color: #1b1813;
}

.cs-editor-wrap .ql-editor.ql-blank::before {
    color: #a8a092;
    font-style: normal;
}

/* Brand-blue focus ring to match the rest of the app. */
.cs-editor-wrap:focus-within .ql-toolbar.ql-snow,
.cs-editor-wrap:focus-within .ql-container.ql-snow {
    border-color: #2f6faf;
}

/* Friendly blockquote = the "info card" used in templates. */
.cs-editor-wrap .ql-editor blockquote {
    border-left: 4px solid #22568c;
    background: #faf9f6;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 0 0 12px;
    color: #423d35;
}

/* Raw HTML source view. */
.cs-html-source {
    width: 100%;
    min-height: 280px;
    border: 1px solid #d6d0c4;
    border-radius: 0.625rem;
    padding: 12px 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.55;
    color: #1b1813;
    background: #ffffff;
}

.cs-html-source:focus {
    outline: none;
    border-color: #2f6faf;
    box-shadow: 0 0 0 1px #2f6faf;
}

.cs-source-toggle.cs-source-active {
    background: #eef4fa;
    border-color: #2f6faf;
    color: #1b4472;
}

/* Attachment chips (selected files on the send / template forms). */
.cs-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #eef4fa;
    border: 1px solid #b4d0e9;
    color: #0f213f;
    border-radius: 9999px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
}

/* ════════════════════════════════════════════════════════════════
   CampSuite Design System - reusable components
   ----------------------------------------------------------------
   The single source of truth for buttons, inputs, cards, page
   headers and the Save/action bar. Use these class names on new and
   updated screens so every page looks and behaves the same way.
   See DESIGN.md for the full pattern guide.
   ════════════════════════════════════════════════════════════════ */

/* ── Buttons ─────────────────────────────────────────────────────
   .cs-btn is the base; add a variant. Big tap targets, clear focus. */
.cs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.75rem 1.5rem;
    border-radius: 0.625rem;            /* 14px - soft, modern */
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1.5px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: background-color .15s ease, border-color .15s ease,
                box-shadow .15s ease, transform .08s ease;
    -webkit-tap-highlight-color: transparent;
}

.cs-btn:active { transform: translateY(1px); }

.cs-btn:focus-visible {
    outline: 3px solid #22568c;
    outline-offset: 2px;
}

/* Primary = the main "do it" action (Save, Confirm, Take a booking).
   Sunset Orange with deep-blue ink - loud, confident and the same pairing as
   the logo. This is the one consistent colour for the main action on every
   screen, so nobody has to hunt for the button. */
.cs-btn-primary {
    background: #f06436;
    color: #0f213f;
    box-shadow: 0 1px 2px rgba(240, 100, 54, .28);
}
.cs-btn-primary:hover { background: #e0561f; }

/* Brand = booking-led CTAs. Same Sunset Orange as primary so the main action
   reads identically wherever it appears (top bar, dashboard, forms). */
.cs-btn-brand {
    background: #f06436;
    color: #0f213f;
    box-shadow: 0 1px 2px rgba(240, 100, 54, .28);
}
.cs-btn-brand:hover { background: #e0561f; }

/* Secondary = the blue alternative / cancel / back. A deep-blue outline:
   clearly on-brand, quieter than the orange primary, never competing with it. */
.cs-btn-secondary {
    background: #fff;
    color: #22568c;
    border-color: #b4d0e9;
    box-shadow: 0 1px 2px rgba(15, 33, 63, .04);
}
.cs-btn-secondary:hover { background: #eef4fa; border-color: #22568c; }

/* Danger = destructive (Delete). Quiet until hovered. */
.cs-btn-danger {
    background: #fff;
    color: #b42318;
    border-color: #f4c9c4;
}
.cs-btn-danger:hover { background: #fef3f2; border-color: #e8a59d; }

.cs-btn-block { width: 100%; }

/* Small = compact toolbar / modal-header buttons. Still a comfortable tap
   target (40px) but tighter than the full-size action button. */
.cs-btn-sm {
    min-height: 40px;
    padding: 0.4rem 0.85rem;
    font-size: 0.9375rem;
    border-radius: 0.5rem;
    gap: 0.35rem;
}

/* ── Segmented chip (radio "pills") ──────────────────────────────
   A branded, grandma-proof way to pick one of a few options (priority,
   frequency). Big tap target, clear selected state in brand blue. Wrap a
   hidden radio input and a label span; the whole chip is the tap target. */
.cs-segchip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 44px;
    padding: 0.5rem 0.5rem;
    border-radius: 0.5rem;
    border: 1.5px solid #e5e0d5;
    background: #fff;
    color: #575147;
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.1;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease, box-shadow .12s ease;
    -webkit-tap-highlight-color: transparent;
}
.cs-segchip:hover { border-color: #c9c2b4; }
.cs-segchip:has(input:checked) {
    background: #22568c;
    border-color: #22568c;
    color: #fff;
    box-shadow: 0 1px 2px rgba(34, 86, 140, .25);
}
.cs-segchip:has(input:focus-visible) { outline: 3px solid rgba(34, 86, 140, .4); outline-offset: 1px; }

/* ── Form fields ─────────────────────────────────────────────────
   .cs-input works for input / select / textarea. */
.cs-input {
    width: 100%;
    border-radius: 0.625rem;
    border: 1.5px solid #d6d0c4;
    background: #fff;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: #1b1813;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-input::placeholder { color: #a8a092; }
.cs-input:focus {
    outline: none;
    border-color: #22568c;
    box-shadow: 0 0 0 4px rgba(34, 86, 140, .15);
}

.cs-label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #2a2722;
    margin-bottom: 0.375rem;
}
.cs-hint { font-size: 0.875rem; color: #797163; margin-top: 0.375rem; }

/* ── Cards ───────────────────────────────────────────────────────
   The standard container for content & form sections. */
.cs-card {
    border-radius: 0.75rem;                /* 12px - calm, ledger-like */
    border: 1px solid #eae6dd;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
    overflow: hidden;
}
.cs-card-header {
    border-bottom: 1px solid #f0ede6;
    background: #fbfaf7;
    padding: 1rem 1.25rem;
}
.cs-card-title { font-size: 1.125rem; font-weight: 700; color: #1b1813; }
.cs-card-sub   { font-size: 0.9375rem; color: #797163; margin-top: 0.125rem; }
.cs-card-body  { padding: 1.25rem; }

/* A soft panel INSIDE a card or a modal, for one self-contained rule that needs
   setting apart from the fields around it (the default dog policy, the booking
   cut-off). Not a card - it never nests a second white box on white; it is the
   warm paper tone with a hairline, so the eye reads it as one decision. */
.cs-subpanel {
    border-radius: 0.75rem;
    border: 1px solid #eae6dd;
    background: #fbfaf7;
    padding: 1rem;
}

/* Interactive cards (list rows that link somewhere) lift on hover. */
.cs-card-link { transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.cs-card-link:hover {
    border-color: #d6d0c4;
    box-shadow: 0 10px 24px -10px rgba(28, 26, 22, .18);
    transform: translateY(-1px);
}

/* ── Channel logos ───────────────────────────────────────────────
   A sales channel is recognised by its own logo, not by our styling of
   its name, so the Channels screens show each brand's real artwork at
   one consistent height. Never recolour or crop them; they sit on our
   warm paper surfaces as supplied. Rendered through the shared
   _ChannelLogo partial - don't hand-roll an <img> next to a name. */
.cs-channel-logo {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;                       /* card size */
    max-width: 11rem;
}
.cs-channel-logo img {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}
/* A stacked lockup (mark above the name, e.g. Pitchup) is mostly picture, so
   at a wordmark's height its name is unreadable. Give it roughly double so the
   two sit at the same optical weight side by side. */
.cs-channel-logo-stacked { height: 3.25rem; }

/* The channel's own screen, where the logo stands in for the page title. */
.cs-channel-logo-lg { height: 2.5rem; max-width: 15rem; }
.cs-channel-logo-lg.cs-channel-logo-stacked { height: 4.5rem; }

/* Channels with no artwork of their own (a plain iCal link) still need
   something to recognise, so they get a warm wordmark chip instead. */
.cs-channel-wordmark {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 0.625rem;
    border-radius: 0.5rem;
    background: #f3e9d9;                   /* Sand */
    color: #1b1813;
    font-weight: 700;
    font-size: 0.9375rem;
    letter-spacing: -0.01em;
    white-space: nowrap;                   /* a chip is one line, never a wrapped block */
}
.cs-channel-wordmark.cs-channel-logo-lg { height: 2.5rem; font-size: 1.125rem; padding: 0 0.875rem; }

/* ── Settings hub (/settings) ────────────────────────────────────
   A calm, scannable launcher: one branded icon per destination so an
   owner recognises where to go at a glance. Grandma-proof - big tap
   targets, 16px+ copy, and ONE consistent icon treatment (brand blue
   on a pale brand tint), never a rainbow of chips. The icon "d" paths
   live in Code/SettingsMenu.cs, shared with the sidebar accordion. */
.cs-settings-search { position: relative; margin-top: 1.25rem; }
/* The field itself is a standard .cs-input (radius, border, focus ring and all);
   this only adds clearance for the leading magnifier. */
.cs-settings-search input { padding-left: 3rem; }
.cs-settings-search svg {
    position: absolute;
    left: 1rem; top: 50%; transform: translateY(-50%);
    height: 1.25rem; width: 1.25rem;
    color: #a8a092; pointer-events: none;
}

.cs-settings-group { margin-top: 2rem; }
.cs-settings-heading {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #797163;
}

.cs-settings-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
    margin-top: 0.875rem;
}
@media (min-width: 640px)  { .cs-settings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cs-settings-grid { grid-template-columns: repeat(3, 1fr); } }

/* Composed as `cs-card cs-card-link cs-settings-card` in the markup, so the
   border, shadow, hover lift and the global keyboard focus ring all come from
   the shared card components; this class adds the icon/body/chevron row and the
   menu-style way-finding accent. */
.cs-settings-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    width: 100%;
    padding: 1.0625rem 1.125rem 1.0625rem 1.5rem;
    text-align: left;
}
/* Sunset Orange way-finding bar - the SAME accent the active sidebar item uses
   (.cs-nav-link-active::before), so the hub reads as one system with the menu. */
.cs-settings-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.8125rem;
    bottom: 0.8125rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #f06436;
}
/* On hover the whole card lights up like a menu item coming active: brand tint
   plus brand-blue icon and title. */
.cs-settings-card:hover { background: #eef4fa; }
/* The search filter toggles Tailwind's .hidden; site.css loads after the
   Tailwind layer, so this 2-class rule must win over the flex display above or
   matched-out cards would stay visible. */
.cs-settings-card.hidden { display: none; }

/* The icon matches the sidebar menu icons: no chip, drawn in the same warm ink
   (currentColor), so the hub and the nav render the icon identically. */
.cs-settings-ico {
    flex: none;
    display: grid; place-items: start center;
    height: 1.75rem; width: 1.75rem;
    margin-top: 0.0625rem;
    color: #423d35;
    transition: color .15s ease;
}
.cs-settings-ico svg { height: 1.5rem; width: 1.5rem; }
.cs-settings-card:hover .cs-settings-ico,
.cs-settings-card:hover .cs-settings-title { color: #16365a; }

.cs-settings-body { min-width: 0; flex: 1 1 auto; }
.cs-settings-title {
    display: block;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #1b1813;
    line-height: 1.3;
}
.cs-settings-desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 1rem;
    color: #575147;
    line-height: 1.45;
}

.cs-settings-go {
    flex: none; align-self: center;
    height: 1.25rem; width: 1.25rem;
    color: #d6d0c4;
    transition: color .15s ease, transform .15s ease;
}
.cs-settings-card:hover .cs-settings-go { color: #22568c; transform: translateX(2px); }

/* "Nothing matches that search" panel. */
.cs-settings-empty {
    margin-top: 2.5rem;
    border-radius: 0.75rem;
    border: 1px dashed #d6d0c4;
    background: #fff;
    padding: 2rem;
    text-align: center;
}

/* ── Page header ─────────────────────────────────────────────────
   Consistent title block at the top of every screen. */
.cs-page-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
@media (min-width: 640px) {
    .cs-page-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}
.cs-page-title {
    font-family: "Sora", "Segoe UI", system-ui, sans-serif;
    font-optical-sizing: auto;
    font-size: 1.875rem;
    font-weight: 600;
    color: #1b1813;
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.cs-page-sub   { margin-top: 0.25rem; color: #575147; }

/* ── Action bar ──────────────────────────────────────────────────
   THE home for Save / Cancel on every form.
   Desktop: right-aligned footer (primary on the right).
   Mobile : sticks to the bottom of the screen so Save is always
            reachable with a thumb - no hunting, grandma-proof. */
.cs-actionbar {
    display: flex;
    flex-direction: column-reverse;
    gap: 0.75rem;
    margin-top: 1.5rem;
}
.cs-actionbar .cs-btn { width: 100%; }

@media (min-width: 640px) {
    .cs-actionbar {
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
    }
    .cs-actionbar .cs-btn { width: auto; }
    /* When there's a destructive action it sits far left, away from Save. */
    .cs-actionbar .cs-actionbar-spacer { margin-right: auto; }
}

/* On small screens, pin the action bar to the bottom so the primary
   action is always one thumb-tap away. Opt in with .cs-actionbar-sticky. */
@media (max-width: 639px) {
    .cs-actionbar-sticky {
        position: sticky;
        bottom: 0;
        z-index: 20;
        margin-top: 1.5rem;
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom));
        background: rgba(250, 249, 246, .92);
        backdrop-filter: blur(8px);
        border-top: 1px solid #e8e4db;
    }
}

/* ── Status pills / badges ───────────────────────────────────────── */
.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.2;
}
.cs-badge-brand   { background: #eef4fa; color: #1b4472; }
.cs-badge-neutral { background: #f3f1ec; color: #575147; }
.cs-badge-amber   { background: #fef3c7; color: #92600a; }
.cs-badge-rose    { background: #fee2e2; color: #b42318; }
.cs-badge-sky     { background: #e6eff8; color: #2f5d86; }

/* ── Note timeline (guests and bookings) ────────────────────────────
   The running record on a guest or a booking: who wrote what, and when,
   newest at the top. Entries are never edited, so the list reads as a
   history rather than a notepad. A quiet blue spine ties the entries
   together; Delete only appears for owners and admins and stays low-key
   so nobody reaches for it by accident. Markup: Pages/Shared/_NoteTimeline.cshtml */
.cs-note-add { padding-bottom: 1.25rem; border-bottom: 1px solid #f3f1ec; }
.cs-note-empty {
    padding-top: 1.25rem;
    color: #797163;
    font-size: 1rem;
}

.cs-timeline {
    list-style: none;
    margin: 0;
    padding: 1.25rem 0 0;
}
.cs-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0 0 1.25rem 1.125rem;
}
/* The spine. It stops at the last entry so the list doesn't trail off. */
.cs-timeline-item::before {
    content: "";
    position: absolute;
    left: 0.3125rem;
    top: 0.75rem;
    bottom: -0.25rem;
    width: 2px;
    background: #e8e4db;
}
.cs-timeline-item:last-child { padding-bottom: 0; }
.cs-timeline-item:last-child::before { display: none; }
.cs-timeline-dot {
    position: absolute;
    left: 0;
    top: 0.4375rem;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 9999px;
    background: #fff;
    border: 2px solid #4c8dcb;
}
.cs-timeline-body { flex: 1 1 auto; min-width: 0; }
.cs-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem;
    font-size: 0.9375rem;
}
.cs-timeline-author { font-weight: 700; color: #1b1813; }
.cs-timeline-when { color: #797163; }
.cs-timeline-text {
    margin-top: 0.25rem;
    font-size: 1rem;
    line-height: 1.55;
    color: #423d35;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.cs-timeline-actions { flex: 0 0 auto; }
.cs-timeline-delete {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: none;
    border-radius: 0.5rem;
    background: transparent;
    color: #a8a092;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.cs-timeline-delete svg { width: 1.25rem; height: 1.25rem; }
.cs-timeline-delete:hover { background: #fff1f2; color: #b42318; }

/* ── Inventory cards (pitches / accommodation grid) ──────────────────
   A bespoke, branded tile - deliberately NOT a stock Tailwind
   `rounded-2xl border bg-white shadow` box. A quiet Sand header carries
   the code + status, the pitch-type colour is the one flash of accent as
   a hairline down the left edge, the name uses the Sora display face, and
   the footer separates a calm Edit from a low-key Delete. Everything sizes
   from the brand tokens so re-tuning the theme restyles these too. */
.cs-inv-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1rem;
}
@media (min-width: 640px)  { .cs-inv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cs-inv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.cs-inv-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 0.75rem;
    border: 1px solid #eae6dd;
    background: #fff;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .04);
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.cs-inv-card:hover {
    border-color: #d6d0c4;
    box-shadow: 0 14px 30px -16px rgba(15, 33, 63, .28);
    transform: translateY(-2px);
}
/* The pitch/accommodation type colour reads as a quiet spine, not a big block. */
.cs-inv-card__accent {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    background: #a8a092;
}

/* Photo, or a warm branded placeholder when there isn't one. */
.cs-inv-card__media {
    height: 8.5rem;
    background: #f3e9d9;
    object-fit: cover;
    width: 100%;
    display: block;
}
.cs-inv-card__media--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(76, 141, 203, .12), transparent 60%),
        linear-gradient(160deg, #f6efe1 0%, #efe6d4 100%);
    color: #b8ad98;
}
.cs-inv-card__media--empty svg { width: 2.25rem; height: 2.25rem; }

.cs-inv-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.1rem 0.6rem 1.1rem;
}
.cs-inv-card__code {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a8172;
}
.cs-inv-card__body { padding: 0 1.1rem 1rem 1.1rem; flex: 1 1 auto; }
.cs-inv-card__title {
    font-family: "Sora", "Source Sans 3", system-ui, sans-serif;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #0f213f;
    line-height: 1.25;
}
.cs-inv-card__meta {
    margin-top: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.95rem;
    color: #797163;
}
.cs-inv-card__price {
    margin-top: 0.65rem;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}
.cs-inv-card__price-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f213f;
    font-variant-numeric: tabular-nums;
}
.cs-inv-card__price-unit { font-size: 0.9rem; color: #908778; }
.cs-inv-card__tags {
    margin-top: 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.cs-inv-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem 0.6rem 1.1rem;
    border-top: 1px solid #f0ede6;
    background: #fbfaf7;
}
.cs-inv-card__edit {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    font-weight: 600;
    color: #22568c;
    text-decoration: none;
}
.cs-inv-card__edit:hover { background: #eef4fa; }
.cs-inv-card__del {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0.4rem 0.75rem;
    border-radius: 0.5rem;
    font-weight: 600;
    color: #9a8f7d;
    background: transparent;
    border: 0;
    cursor: pointer;
}
.cs-inv-card__del:hover { background: #fbecec; color: #b42318; }

/* ════════════════════════════════════════════════════════════════
   App chrome polish - sidebar, header, nav
   ════════════════════════════════════════════════════════════════ */

/* Warm, subtle paper backdrop behind the whole app. */
body.cs-app {
    background:
        radial-gradient(1200px 600px at 100% -5%, rgba(34, 86, 140, .05), transparent 60%),
        #f6f4ef;
}

/* Sidebar gets a hairline brand edge + soft depth so it feels intentional. */
.cs-sidebar {
    background: #fff;
    border-right: 1px solid #e8e4db;
    box-shadow: 1px 0 0 rgba(28, 26, 22, .02);
}

/* Sticky header lifts a touch once you scroll. */
.cs-header {
    background: rgba(255, 255, 255, .85);
    backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid #e8e4db;
}

/* Active nav item: brand tint + a left accent bar so the current
   section is unmistakable (helps non-tech users stay oriented). */
.cs-nav-link {
    position: relative;
    transition: background-color .15s ease, color .15s ease;
}
.cs-nav-link-active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 0.5rem;
    bottom: 0.5rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #f06436;   /* Sunset Orange - the active way-finding indicator */
}

/* ════════════════════════════════════════════════════════════════
   Horizontal top navigation (Ui:Navigation = "Horizontal")
   ----------------------------------------------------------------
   The branded app bar: a deep-blue canopy with the ridgeline
   from the CampSuite mark echoed as a whisper-quiet texture. Grouped
   drop-down menus (Xero/FreeAgent style), a context-aware "create"
   action and a global quick-create menu. Same destinations as the
   sidebar - only the chrome changes.
   ════════════════════════════════════════════════════════════════ */

.cs-topnav {
    position: sticky;
    top: 0;
    z-index: 30;
    color: #eef4fa;
    background:
        /* the brand ridgeline, barely-there, anchored to the bar's floor */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='64' viewBox='0 0 480 64' fill='none'%3E%3Cpath d='M-8 50 L48 22 L84 42 L138 12 L196 50 L240 32 L288 50 L336 16 L384 40 L432 26 L488 50' stroke='%23eef4fa' stroke-opacity='0.045' stroke-width='2'/%3E%3C/svg%3E") repeat-x bottom left,
        linear-gradient(168deg, #183253 0%, #12253f 52%, #0f213f 100%);
    box-shadow:
        inset 0 -1px 0 rgba(238, 244, 250, .07),
        0 12px 32px -20px rgba(10, 24, 48, .65);
}

/* Full-height nav item wrapper so the active underline can sit on the
   bar's bottom edge, exactly where the eye expects it. */
.cs-topnav-item {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
.cs-topnav-item.is-active::after {
    content: "";
    position: absolute;
    left: 0.625rem;
    right: 0.625rem;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: #f06436;
}

.cs-topnav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0 0.8125rem;
    border-radius: 0.625rem;
    border: none;
    background: transparent;
    font-size: 1rem;
    font-weight: 600;
    color: rgba(238, 244, 250, .82);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.cs-topnav-link:hover { color: #fff; background: rgba(238, 244, 250, .09); }
.cs-topnav-link[aria-expanded="true"] { color: #fff; background: rgba(238, 244, 250, .13); }
.cs-topnav-item.is-active .cs-topnav-link { color: #fff; }
.cs-topnav-link:focus-visible {
    outline: 3px solid #f06436;
    outline-offset: -3px;
}
.cs-topnav-caret { transition: transform .18s ease; opacity: .7; }
.cs-topnav-link[aria-expanded="true"] .cs-topnav-caret { transform: rotate(180deg); }

/* Park switcher - a quiet glass pill on the canopy. */
.cs-topnav-park {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 1 auto;
    min-width: 6rem;   /* the park name may truncate but never vanishes */
    min-height: 2.75rem;
    max-width: 15rem;
    padding: 0.25rem 0.75rem;
    border-radius: 0.625rem;
    border: 1px solid rgba(238, 244, 250, .16);
    background: rgba(238, 244, 250, .06);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.cs-topnav-park:hover { background: rgba(238, 244, 250, .13); border-color: rgba(238, 244, 250, .28); }
.cs-topnav-park:focus-visible { outline: 3px solid #f06436; outline-offset: 2px; }
.cs-topnav-park-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The one always-there action - Take a booking - in Sunset Orange with
   deep-blue ink for contrast. Same label, same spot, on every page. */
.cs-topnav-cta {
    display: none;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.75rem;
    padding: 0 1.125rem;
    border-radius: 0.625rem;
    background: #f06436;
    color: #0f213f;
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 2px 12px rgba(240, 100, 54, .35);
    transition: background-color .15s ease, transform .08s ease;
}
.cs-topnav-cta:hover { background: #e0561f; }
.cs-topnav-cta:active { transform: translateY(1px); }
.cs-topnav-cta:focus-visible { outline: 3px solid #eef4fa; outline-offset: 2px; }

@media (min-width: 768px) {
    .cs-topnav-cta { display: inline-flex; }
}

/* Drawer footer account block: a single quiet row that discloses the
   account actions on tap. Native details/summary - no JS to go wrong. */
.cs-drawer-account summary { list-style: none; }
.cs-drawer-account summary::-webkit-details-marker { display: none; }
.cs-drawer-account-row {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.4rem 0.5rem; border-radius: 0.625rem; cursor: pointer;
}
.cs-drawer-account-row:hover { background: #f3f1ec; }
.cs-drawer-account-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    height: 2.1rem; width: 2.1rem; flex-shrink: 0; border-radius: 9999px;
    background: #eef4fa; color: #1b4472; font-size: 0.9rem; font-weight: 700;
}
.cs-drawer-account-caret { transition: transform .15s ease; }
.cs-drawer-account[open] .cs-drawer-account-caret { transform: rotate(180deg); }

/* The create button opens the booking-type chooser; the wrapper just
   anchors the drop-down panel. */
.cs-topnav-ctagroup { position: relative; display: flex; align-items: stretch; }
.cs-topnav-cta { border: none; cursor: pointer; }
.cs-topnav-ctagroup .cs-topnav-panel { top: calc(100% + 8px); }

/* Icon buttons on the bar (quick create, mobile menu). */
.cs-topnav-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    border-radius: 0.625rem;
    border: 1px solid rgba(238, 244, 250, .16);
    background: rgba(238, 244, 250, .06);
    color: #eef4fa;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.cs-topnav-iconbtn:hover { background: rgba(238, 244, 250, .13); border-color: rgba(238, 244, 250, .28); }
.cs-topnav-iconbtn:focus-visible { outline: 3px solid #f06436; outline-offset: 2px; }
.cs-topnav-iconbtn[aria-expanded="true"] { background: rgba(238, 244, 250, .16); }

/* Avatar (user menu trigger). Solid brand blue, light ring - no gradient. */
.cs-topnav-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    width: 2.75rem;
    flex-shrink: 0;
    border-radius: 9999px;
    border: none;
    background: #22568c;
    box-shadow: 0 0 0 2px rgba(238, 244, 250, .28);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: box-shadow .15s ease;
}

/* The user menu lives in the bar on desktop; the drawer footer covers phones. */
.cs-topnav-user { display: none; }
@media (min-width: 1024px) {
    .cs-topnav-user { display: flex; align-items: center; }
}
.cs-topnav-avatar:hover,
.cs-topnav-avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(238, 244, 250, .45); }
.cs-topnav-avatar:focus-visible { outline: 3px solid #f06436; outline-offset: 2px; }

/* Drop-down panels. Anchored to the item; springy but quick. */
.cs-topnav-panel {
    position: absolute;
    top: calc(100% - 6px);
    left: 0;
    z-index: 45;
    min-width: 16.5rem;
    max-width: min(34rem, calc(100vw - 1.5rem));
    padding: 0.5rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid rgba(27, 24, 19, .08);
    box-shadow: 0 24px 48px -12px rgba(10, 24, 48, .3), 0 3px 10px rgba(10, 24, 48, .12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.98);
    transform-origin: top left;
    transition: opacity .16s cubic-bezier(.16, 1, .3, 1),
                transform .16s cubic-bezier(.16, 1, .3, 1),
                visibility .16s;
}
.cs-menu-open > .cs-topnav-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.cs-topnav-panel-right { left: auto; right: 0; transform-origin: top right; }

/* Panels attached to the right-cluster buttons (quick create, user menu)
   hang just below their trigger rather than off the bar's floor. */
.cs-topnav-panel-below { top: calc(100% + 8px); }

.cs-topnav-brand { border-radius: 0.5rem; }
.cs-topnav-brand:focus-visible { outline: 3px solid #f06436; outline-offset: 3px; }

/* Brand lockup: the full CampSuite wordmark at every size on the top bar,
   including desktop. The links tighten (see below) rather than the logo
   dropping to the mark, so the brand name is always spelled out. */
.cs-topnav-logo-full { display: block; }
.cs-topnav-logo-mark { display: none; }

/* Narrow desktops (lg → xl): a gentle tighten so seven destinations, the
   park name and Take a booking fit without anything disappearing. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .cs-topnav-link { padding: 0 0.5rem; font-size: 0.9375rem; }
    .cs-topnav-item.is-active::after { left: 0.5rem; right: 0.5rem; }
    .cs-topnav-park { min-width: 4.5rem; max-width: 9rem; padding: 0.25rem 0.5rem; }
    .cs-topnav-cta { padding: 0 0.875rem; font-size: 0.875rem; }
}
@media (min-width: 1280px) and (max-width: 1599.98px) {
    .cs-topnav-park { max-width: 12rem; }
}

/* Panel entries - big targets, plain-English labels. */
.cs-menu-heading {
    display: block;
    padding: 0.625rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #797163;   /* ≥4.5:1 on white - headings stay readable, not decorative */
}
.cs-menu-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #2a2722;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .12s ease, color .12s ease;
}
.cs-menu-item svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; color: #a8a092; transition: color .12s ease; }
.cs-menu-item:hover { background: #f3f1ec; color: #1b1813; }
.cs-menu-item:hover svg { color: #575147; }
.cs-menu-item.is-active { background: #eef4fa; color: #1b4472; }
.cs-menu-item.is-active svg { color: #22568c; }
.cs-menu-item:focus-visible { outline: 3px solid #22568c; outline-offset: -3px; }
.cs-menu-divider { height: 1px; margin: 0.5rem 0.25rem; background: #f3f1ec; }

/* Dark brand panel for page heroes - the same deep-blue canopy and quiet
   ridgeline as the top bar, so the motif repeats instead of resorting to
   decorative gradient blobs. */
.cs-hero-canopy {
    color: #eef4fa;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='64' viewBox='0 0 480 64' fill='none'%3E%3Cpath d='M-8 50 L48 22 L84 42 L138 12 L196 50 L240 32 L288 50 L336 16 L384 40 L432 26 L488 50' stroke='%23eef4fa' stroke-opacity='0.045' stroke-width='2'/%3E%3C/svg%3E") repeat-x bottom left,
        linear-gradient(168deg, #183253 0%, #12253f 52%, #0f213f 100%);
    box-shadow: inset 0 -1px 0 rgba(238, 244, 250, .07), 0 14px 32px -18px rgba(10, 24, 48, .5);
}

/* Content in horizontal mode is centred with a comfortable reading width. */
body.cs-chrome-top main {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 96rem;
}

/* ════════════════════════════════════════════════════════════════
   Inventory list - view toggle, filter pills, grid + bulk edit
   ----------------------------------------------------------------
   Shared by the Pitches and Accommodation list screens. Card view is
   the friendly browse mode; grid view is the dense, spreadsheet-style
   mode for setting up and bulk-editing big parks (200+ pitches).
   Everything here is built mobile-first and stays grandma-proof: big
   tap targets, clear labels, the same patterns on phone and desktop.
   ════════════════════════════════════════════════════════════════ */

/* ── Segmented view toggle (Cards | Grid) ──────────────────────── */
/* ── Segmented control ───────────────────────────────────────────
   The one connected "pick a view" toggle: Cards / Grid, Today / Week /
   People. Active tab lifts onto a white card in brand blue. Scrolls
   sideways rather than wrapping when it runs out of room on a phone. */
.cs-segment {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background: #efece4;
    border: 1px solid #e2ddd2;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cs-segment::-webkit-scrollbar { display: none; }
.cs-segment-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #6b6355;
    background: transparent;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cs-segment-btn:hover { color: #22568c; }
.cs-segment-btn.is-active {
    background: #fff;
    color: #22568c;
    box-shadow: 0 1px 2px rgba(28, 26, 22, .1);
}
.cs-segment-btn svg { width: 1.15rem; height: 1.15rem; flex-shrink: 0; }

/* ── Quick-filter pills (by type) ──────────────────────────────── */
.cs-pills {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 0.25rem;
    /* let the row bleed to the card edges so pills can scroll fully on mobile */
    margin: 0 -0.25rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
}
@media (min-width: 768px) {
    .cs-pills { flex-wrap: wrap; overflow-x: visible; }
}
.cs-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 40px;
    padding: 0.4rem 0.9rem;
    border-radius: 9999px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #423d35;
    background: #fff;
    border: 1.5px solid #e2ddd2;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    flex-shrink: 0;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.cs-pill:hover { border-color: #c7bfb0; background: #faf9f6; }
.cs-pill.is-active {
    background: #eef4fa;
    border-color: #22568c;
    color: #1b4472;
}
.cs-pill-dot {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 9999px;
    background: #a8a092;
    flex-shrink: 0;
}
.cs-pill-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    padding: 0 0.35rem;
    height: 1.4rem;
    border-radius: 9999px;
    background: rgba(27, 24, 19, .07);
    font-size: 0.8125rem;
    font-weight: 700;
    color: inherit;
}
.cs-pill.is-active .cs-pill-count { background: rgba(34, 86, 140, .14); }

/* ── Inventory grid (dense table that collapses to cards on phones) ─ */
.cs-itable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.95rem;
}
.cs-itable thead th {
    position: sticky;
    /* Stick to the top of the table's own scroll wrapper, NOT 4rem down. The
       table sits inside an `overflow-x-auto` wrapper, and setting overflow on one
       axis makes the other compute to `auto` too, so that wrapper - not the page -
       is the sticky scroll container. A `top: 4rem` here was measured against the
       wrapper and shoved the header 4rem DOWN into the tbody, hiding the first
       pitch on desktop (mobile hides thead entirely, so it only showed there). */
    top: 0;
    z-index: 5;
    background: #faf9f6;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #797163;
    padding: 0.65rem 0.75rem;
    border-bottom: 1px solid #e8e4db;
    white-space: nowrap;
}
.cs-itable tbody td {
    padding: 0.7rem 0.75rem;
    border-bottom: 1px solid #f1eee7;
    color: #2a2722;
    vertical-align: middle;
}
.cs-itable tbody tr.is-selected td { background: #eef4fa; }
.cs-itable tbody tr:hover td { background: #faf9f6; }
.cs-itable tbody tr.is-selected:hover td { background: #e4eef8; }
.cs-itable-check { width: 3rem; text-align: center; padding-left: 0.25rem; padding-right: 0.25rem; }
/* The visible box stays tidy, but the wrapping label gives a comfortable 44px+
   tap target so it's easy to tick on a phone (grandma-proof). */
.cs-itable-checkwrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.cs-itable-check input[type="checkbox"] {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    accent-color: #22568c;
    cursor: pointer;
}
.cs-itable-code {
    font-weight: 700;
    color: #1b1813;
}
.cs-itable-name { color: #575147; }
.cs-itable-edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0.35rem 0.9rem;
    border-radius: 0.5rem;
    font-weight: 600;
    color: #1b1813;
    text-decoration: none;
}
.cs-itable-edit:hover { background: #efece4; }

/* Phone layout: each row becomes a tappable card. The checkbox stays a
   big target up top-left, the rest of the fields wrap underneath with
   their column name as a small label so nothing is mysterious. */
@media (max-width: 767px) {
    .cs-itable, .cs-itable tbody, .cs-itable tr, .cs-itable td { display: block; width: 100%; }
    .cs-itable thead { display: none; }
    .cs-itable tbody tr {
        position: relative;
        border: 1.5px solid #e8e4db;
        border-radius: 0.75rem;
        background: #fff;
        padding: 0.85rem 0.95rem 0.85rem 3.75rem;
        margin-bottom: 0.75rem;
    }
    .cs-itable tbody tr.is-selected {
        border-color: #22568c;
        box-shadow: 0 0 0 1px #22568c inset;
    }
    .cs-itable tbody td {
        border: none;
        padding: 0.15rem 0;
        display: flex;
        gap: 0.5rem;
        align-items: baseline;
    }
    .cs-itable tbody tr.is-selected td { background: transparent; }
    .cs-itable tbody tr:hover td { background: transparent; }
    .cs-itable td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 6.5rem;
        font-size: 0.8125rem;
        font-weight: 600;
        color: #908778;
    }
    /* checkbox floats into the reserved left gutter with a big tap target */
    .cs-itable td.cs-itable-check {
        position: absolute;
        left: 0.35rem;
        top: 0.5rem;
        width: auto;
        padding: 0;
    }
    .cs-itable td.cs-itable-check::before { content: none; }
    .cs-itable td.cs-itable-check input[type="checkbox"] { width: 26px; height: 26px; }
    .cs-itable-checkwrap { min-width: 48px; min-height: 48px; }
    /* the "Pitch" name cell reads as the card title */
    .cs-itable td.cs-itable-title { padding-bottom: 0.35rem; }
    .cs-itable td.cs-itable-title::before { content: none; }
    .cs-itable td.cs-itable-actions { padding-top: 0.5rem; }
    .cs-itable td.cs-itable-actions::before { content: none; }
    .cs-itable-edit { padding-left: 0; padding-right: 0; }
}

/* A grid with no row ticks. The phone layout reserves a left gutter for the
   checkbox, so a list you only ever read (bookings) would otherwise sit in a
   card with an inch of nothing down one side. */
@media (max-width: 767px) {
    .cs-itable-nopick tbody tr { padding-left: 0.95rem; }
}

/* Figures line up under each other and never wrap mid-number. The heading needs
   its own rule: `.cs-itable thead th` sets text-align on its own and outranks a
   single class, so without this the column heading sits left of its own column. */
.cs-itable-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-itable thead th.cs-itable-num { text-align: right; }
@media (max-width: 767px) {
    /* Folded into a card, a figure is a labelled value like any other. */
    .cs-itable-num { text-align: left; }
}

/* ── Section headings inside a list (cs-itable) ────────────────────
   When a list is grouped ("A", "Stayed last year", "Been once"), the heading is a
   row of the table rather than a block above it, so the columns underneath stay
   lined up. On a phone, where the rows fold into cards, it goes back to being a
   plain heading above the cards it belongs to. */
.cs-itable tbody tr.cs-itable-group td {
    background: #f6f3ec;
    border-bottom: 1px solid #e8e4db;
    padding: 0.5rem 0.75rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1b1813;
}
.cs-itable tbody tr.cs-itable-group:hover td { background: #f6f3ec; }
@media (max-width: 767px) {
    .cs-itable tbody tr.cs-itable-group {
        border: none;
        background: transparent;
        padding: 0.75rem 0.15rem 0.15rem;
        margin-bottom: 0;
    }
    .cs-itable tbody tr.cs-itable-group td {
        background: transparent;
        border: none;
        padding: 0;
        font-size: 1rem;
    }
    .cs-itable tbody tr.cs-itable-group td::before { content: none; }
}

/* ── Initials avatar ───────────────────────────────────────────────
   The little round monogram beside a person's name. The tint comes from a utility
   class alongside it, following the state map in DESIGN section 8: blue for most
   people, amber for somebody special, rose for somebody blocked. The badges beside
   the name say the same thing in words, so the colour is never the only signal. */
.cs-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
@media (max-width: 767px) {
    .cs-initials { width: 2.5rem; height: 2.5rem; font-size: 0.875rem; }
}

/* ── A link inside a row ───────────────────────────────────────────
   An email address or a phone number in a list. It reads as text until you want
   it; on a phone it is one tap to ring the guest back, so it gets a real target. */
.cs-rowlink { color: #575147; text-decoration: none; }
.cs-rowlink:hover { color: #22568c; text-decoration: underline; }
.cs-rowlink:focus-visible { outline: 3px solid #22568c; outline-offset: 2px; border-radius: 0.25rem; }
@media (max-width: 767px) {
    .cs-rowlink { display: flex; align-items: center; min-height: 40px; }
}

/* ── Sort menu (phones) ────────────────────────────────────────────
   Column headings do the sorting on a laptop, and a phone hides the headings, so
   this is how a phone sorts: a native <details> holding the same links. No script
   behind it, so it works wherever the headings do. */
.cs-sortmenu { position: relative; }
.cs-sortmenu > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 48px;
    padding: 0.5rem 0.9rem;
    border: 1.5px solid #d9d3c6;
    border-radius: 0.625rem;
    background: #fff;
    color: #1b1813;
    font-size: 0.9375rem;
    cursor: pointer;
    list-style: none;
}
.cs-sortmenu > summary::-webkit-details-marker { display: none; }
.cs-sortmenu > summary:focus-visible { outline: 3px solid #22568c; outline-offset: 2px; }
.cs-sortmenu-label { font-weight: 600; color: #797163; white-space: nowrap; }
.cs-sortmenu-value { font-weight: 600; white-space: nowrap; }
.cs-sortmenu-caret { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform .15s ease; }
.cs-sortmenu[open] .cs-sortmenu-caret { transform: rotate(180deg); }
.cs-sortmenu-panel {
    position: absolute;
    z-index: 20;
    left: 0;
    margin-top: 0.35rem;
    min-width: 16rem;
    background: #fff;
    border: 1px solid #e5e0d5;
    border-radius: 0.625rem;
    box-shadow: 0 12px 28px rgba(28, 26, 22, .14);
    overflow: hidden;
}
.cs-sortmenu-item {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0.5rem 0.95rem;
    color: #1b1813;
    text-decoration: none;
}
.cs-sortmenu-item + .cs-sortmenu-item { border-top: 1px solid #f1eee7; }
.cs-sortmenu-item:hover { background: #faf9f6; }
.cs-sortmenu-item.is-active { background: #f4f7fb; color: #1b4472; font-weight: 700; }

/* ── Sortable column headings (cs-itable and the admin cs-dtable both) ──
   Clicking a heading sorts; clicking again turns it round. It is a link, not
   script, so sorting works with JavaScript off and a sorted view can be pasted
   to somebody. The arrow only appears on hover or on the column in play, so a
   wide grid isn't a row of arrows. */
.cs-itable th .cs-sort {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    min-height: 40px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}
.cs-itable th .cs-sort:hover { color: #22568c; }
.cs-itable th .cs-sort:focus-visible {
    outline: 3px solid #22568c;
    outline-offset: 2px;
    border-radius: 0.25rem;
}
.cs-itable th .cs-sort-arrow { width: 0.85rem; height: 0.85rem; opacity: 0; flex-shrink: 0; }
.cs-itable th .cs-sort:hover .cs-sort-arrow { opacity: .45; }
.cs-itable th.is-sorted { color: #1b4472; background: #f4f7fb; }
.cs-itable th.is-sorted .cs-sort-arrow { opacity: 1; }

/* ── Search type-ahead ─────────────────────────────────────────────
   The dropdown under a search box (bookings, guests). Sits on cs-search-results /
   cs-search-item, the same pair the contact pickers use, so a match looks the
   same wherever you are searching from. */
.cs-typeahead { position: relative; }
.cs-typeahead .cs-search-results {
    position: absolute;
    top: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    max-height: 22rem;
    overflow-y: auto;
    background: #fff;
    border: 1.5px solid #e2ddd2;
    border-radius: 0.75rem;
    box-shadow: 0 10px 30px rgba(28, 26, 22, .12);
}
.cs-typeahead .cs-search-results.cs-visible { display: block; }
.cs-typeahead .cs-search-item { cursor: pointer; }
.cs-typeahead .cs-search-item.is-active { background: #eef4fa; }

/* ── Year planner (a year of blocked-out dates, at a glance) ──────
   Twelve small wall-calendar months in a row-wrapping grid, each day a
   square that is either open, part of the site closed, or the whole site
   closed. Built for /closures, where a park with two seasons of history
   has a list nobody can read and needs to be able to point at a month and
   say "we're shut then".

   The amber is deliberately the SAME amber the diary paints a blocked
   night with (.cs-cell-blocked), so the planner and the grid are visibly
   describing one thing. Orange stays the booking CTA; this is the amber
   status accent from §1, one step darker for "the whole site". */
.cs-yearcal {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.25rem 1.5rem;
}
.cs-yearcal-month { min-width: 0; }
.cs-yearcal-name {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #1b1813;
    margin-bottom: 0.4rem;
}
.cs-yearcal-name .cs-yearcal-year { font-weight: 600; color: #a8a092; font-size: 0.8125rem; }
.cs-yearcal-name .cs-yearcal-count { font-weight: 600; color: #9a3412; font-size: 0.8125rem; }
.cs-yearcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cs-yearcal-dow {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #a8a092;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 0.15rem;
}
.cs-yearcal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    min-height: 28px;
    border-radius: 0.3125rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #575147;
    background: #faf9f6;
    border: 1px solid #efece4;
}
.cs-yearcal-day.is-blank { background: transparent; border-color: transparent; }
.cs-yearcal-day.is-weekend { background: #f3f1ec; }
.cs-yearcal-day.is-past { opacity: 0.45; }
/* Part of the site closed - a type, a single pitch, all the accommodation.
   HATCHED, and hatched with the diary's own hatch: colour must not be the only
   signal (§8), and the texture doubles as the visual link to the grid. */
.cs-yearcal-day.is-part {
    background: repeating-linear-gradient(-45deg, #fff7ed, #fff7ed 4px, #ffedd5 4px, #ffedd5 8px);
    border-color: #fcd9ae;
    color: #9a3412;
}
/* The whole site closed. SOLID against the hatch, because "nothing at all can
   be booked" is a different fact and has to look like one from across the room
   without anybody having to tell two ambers apart. */
.cs-yearcal-day.is-whole {
    background: #fdba74;
    border-color: #f4a259;
    color: #7c2d12;
    font-weight: 700;
}
.cs-yearcal-day.is-today {
    outline: 2px solid #22568c;
    outline-offset: -1px;
    color: #1b4472;
}
.cs-yearcal-day.is-today.is-part, .cs-yearcal-day.is-today.is-whole { color: #7c2d12; }

.cs-yearcal-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.9375rem;
    color: #575147;
}
.cs-yearcal-key { display: inline-flex; align-items: center; gap: 0.5rem; }
.cs-yearcal-key i {
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 0.3125rem;
    flex-shrink: 0;
    background: #faf9f6;
    border: 1px solid #efece4;
}
.cs-yearcal-key.is-part i {
    background: repeating-linear-gradient(-45deg, #fff7ed, #fff7ed 4px, #ffedd5 4px, #ffedd5 8px);
    border-color: #fcd9ae;
}
.cs-yearcal-key.is-whole i { background: #fdba74; border-color: #f4a259; }

@media (max-width: 400px) {
    .cs-yearcal { grid-template-columns: 1fr; }
}

/* ── Floating bulk-edit bar ────────────────────────────────────── */
.cs-bulkbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    transform: translateY(120%);
    transition: transform .22s ease;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    pointer-events: none;
}
.cs-bulkbar.is-active { transform: translateY(0); pointer-events: auto; }
.cs-bulkbar-inner {
    max-width: 64rem;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    background: #1b1813;
    color: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 12px 32px -8px rgba(0, 0, 0, .45);
    padding: 0.7rem 0.85rem;
}
.cs-bulkbar-count {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
    font-size: 1rem;
    padding-left: 0.25rem;
    white-space: nowrap;
}
.cs-bulkbar-count .cs-bulkbar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8rem;
    height: 1.8rem;
    padding: 0 0.45rem;
    border-radius: 9999px;
    background: #22568c;
    font-size: 0.9375rem;
}
.cs-bulkbar select,
.cs-bulkbar input[type="text"] {
    min-height: 44px;
    border-radius: 0.5rem;
    border: 1.5px solid #3a352e;
    background: #2a2722;
    color: #fff;
    padding: 0.45rem 0.75rem;
    font-size: 0.95rem;
}
.cs-bulkbar select:focus,
.cs-bulkbar input[type="text"]:focus {
    outline: none;
    border-color: #22568c;
    box-shadow: 0 0 0 3px rgba(34, 86, 140, .35);
}
.cs-bulkbar-field { flex: 1 1 22rem; min-width: 0; display: flex; gap: 0.5rem; align-items: center; }
.cs-bulkbar-field > [data-bulk-field] { flex: 0 1 auto; }
.cs-bulkbar-field [data-bulk-control] { flex: 1 1 auto; min-width: 0; display: inline-flex; }
.cs-bulkbar-field [data-bulk-control] > * { width: 100%; }
.cs-bulkbar-spacer { flex: 1 1 auto; }
.cs-bulkbar-apply {
    min-height: 44px;
    padding: 0.45rem 1.1rem;
    border-radius: 0.5rem;
    background: #22568c;
    color: #fff;
    font-weight: 700;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.cs-bulkbar-apply:hover { background: #1b4472; }
.cs-bulkbar-apply:disabled { opacity: .5; cursor: not-allowed; }
.cs-bulkbar-clear {
    min-height: 44px;
    padding: 0.45rem 0.85rem;
    border-radius: 0.5rem;
    background: transparent;
    color: #d6d0c4;
    font-weight: 600;
    border: 1.5px solid #3a352e;
    cursor: pointer;
    white-space: nowrap;
}
.cs-bulkbar-clear:hover { background: #2a2722; color: #fff; }

@media (max-width: 639px) {
    .cs-bulkbar-inner { flex-direction: column; align-items: stretch; }
    .cs-bulkbar-field { flex-direction: column; align-items: stretch; }
    .cs-bulkbar-field > [data-bulk-field],
    .cs-bulkbar-field [data-bulk-control] { width: 100%; }
    .cs-bulkbar-row { display: flex; gap: 0.5rem; }
    .cs-bulkbar-row > * { flex: 1 1 0; }
    .cs-bulkbar-spacer { display: none; }
}


/* ================================================================
   Mobile bottom navigation (phones and small tablets, below lg)
   ----------------------------------------------------------------
   App-style bar for staff out on the park: Today, Diary, a raised
   "New" button (quick-action sheet), Guests and More (opens the
   existing full-menu drawer). Labels always visible, 48px+ targets,
   iPhone safe-area padding. Desktop is untouched: everything here
   is display:none at lg and up.
   ================================================================ */
.cs-bottomnav, .cs-sheet, .cs-sheet-backdrop { display: none; }

@media (max-width: 1023.98px) {
    .cs-bottomnav {
        display: flex;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 39;   /* under the drawer overlay (40) and drawer (50) */
        align-items: stretch;
        background: rgba(255, 255, 255, .97);
        border-top: 1px solid #e8e4db;
        padding: 0.375rem 0.375rem calc(0.375rem + env(safe-area-inset-bottom));
        box-shadow: 0 -10px 28px -22px rgba(28, 26, 22, .5);
    }
    .cs-bottomnav-item,
    .cs-bottomnav-slot { flex: 1 1 0; min-width: 0; }
    .cs-bottomnav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.125rem;
        min-height: 3.25rem;
        padding: 0.25rem 0;
        border: none;
        background: transparent;
        border-radius: 0.625rem;
        font-size: 0.6875rem;
        font-weight: 600;
        color: #575147;
        text-decoration: none;
        cursor: pointer;
    }
    .cs-bottomnav-item svg { width: 1.5rem; height: 1.5rem; }
    .cs-bottomnav-item.is-active { color: #f06436; }
    .cs-bottomnav-item:focus-visible { outline: 3px solid #22568c; outline-offset: -3px; }

    .cs-bottomnav-slot {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
    .cs-bottomnav-new {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 3.25rem;
        height: 3.25rem;
        margin-top: -1.375rem;
        border: none;
        border-radius: 9999px;
        background: #f06436;   /* Sunset Orange - the booking/create action */
        color: #fff;
        cursor: pointer;
        box-shadow: 0 6px 16px rgba(240, 100, 54, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
    }
    .cs-bottomnav-new svg { width: 1.625rem; height: 1.625rem; }
    .cs-bottomnav-new:active { transform: translateY(1px); }
    .cs-bottomnav-new:focus-visible { outline: 3px solid #f06436; outline-offset: 2px; }
    .cs-bottomnav-newlabel {
        font-size: 0.6875rem;
        font-weight: 600;
        color: #575147;
        margin-top: 0.125rem;
    }

    /* Quick-action sheet */
    .cs-sheet-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 44;
        background: rgba(27, 24, 19, .45);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }
    .cs-sheet-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity .2s ease; }
    .cs-sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 45;
        background: #fff;
        border-radius: 1rem 1rem 0 0;
        padding: 0.5rem 0.75rem calc(0.75rem + env(safe-area-inset-bottom));
        box-shadow: 0 -18px 44px -20px rgba(28, 26, 22, .45);
        transform: translateY(105%);
        visibility: hidden;
        transition: transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s;
    }
    .cs-sheet.is-open {
        transform: translateY(0);
        visibility: visible;
        transition: transform .22s cubic-bezier(.16, 1, .3, 1);
    }
    .cs-sheet-grip {
        width: 2.5rem;
        height: 0.3125rem;
        border-radius: 9999px;
        background: #e8e4db;
        margin: 0.25rem auto 0.5rem;
    }
    .cs-sheet-item {
        display: flex;
        align-items: center;
        gap: 0.875rem;
        min-height: 3.25rem;
        padding: 0.5rem 0.75rem;
        border-radius: 0.625rem;
        font-size: 1.0625rem;
        font-weight: 600;
        color: #1b1813;
        text-decoration: none;
    }
    .cs-sheet-item svg { width: 1.5rem; height: 1.5rem; color: #22568c; flex-shrink: 0; }
    .cs-sheet-item:active { background: #f3f1ec; }
    .cs-sheet-item:focus-visible { outline: 3px solid #22568c; outline-offset: -3px; }
    .cs-sheet-form { padding: 0.25rem 0.75rem 0.5rem; }
    .cs-sheet-form .cs-label { font-size: 1.0625rem; }
    .cs-sheet-cancel {
        display: block;
        width: 100%;
        min-height: 3rem;
        margin-top: 0.375rem;
        border: none;
        border-radius: 0.625rem;
        background: #f3f1ec;
        color: #423d35;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
    }

    /* The top bar's quick-create button duplicates the bottom "New" button
       on phones; keep just the one, and give the park name the extra room. */
    .cs-topnav [aria-label="Create new"] { display: none; }

    /* The help launcher must never cover a dialog, sheet or drawer. */
    .cs-app:has(.cs-modal-overlay.cs-open) .csh-launcher,
    .cs-app:has(#cs-mobile.cs-open) .csh-launcher,
    .cs-app:has(.cs-sheet.is-open) .csh-launcher,
    .cs-app:has(#cs-jobmodal:not(.hidden)) .csh-launcher,
    .cs-app:has(#cs-parks-modal:not(.hidden)) .csh-launcher {
        display: none;
    }

    /* Compact, icon-only launcher on phones so it covers less content. */
    .cs-app .csh-launcher {
        height: 52px;
        min-width: 52px;
        width: 52px;
        padding: 0;
        justify-content: center;
    }
    .cs-app .csh-launcher .csh-launcher-label { display: none; }

    /* Keep existing fixed and sticky elements clear of the bar. */
    body.cs-app main { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
    .cs-actionbar-sticky { bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
    .cs-bulkbar { bottom: calc(4.25rem + env(safe-area-inset-bottom)); }
    .cs-app .csh-launcher { bottom: calc(5rem + env(safe-area-inset-bottom)); }
    .cs-app .csh-panel { bottom: calc(9.75rem + env(safe-area-inset-bottom)); }
    .cs-app .cs-selection-hint { bottom: calc(6rem + env(safe-area-inset-bottom)); }
}

/* ── Print: strip the app chrome so reports & invoices print clean ── */
@media (max-width: 639.98px) {
    .cs-app:has(.cs-actionbar-sticky) .csh-launcher { display: none; }
}

@media print {
    aside,
    header,
    #cs-overlay,
    #cs-mobile,
    .cs-bottomnav,
    .cs-sheet,
    .cs-sheet-backdrop,
    .no-print {
        display: none !important;
    }

    body { background: #ffffff !important; }
    main, #main { padding: 0 !important; }
    .print-full { max-width: none !important; }
    a[href]:after { content: ""; } /* don't append URLs */
}

/* ================================================================
   Booking quick view - the shared modal component
   (Pages/Shared/_BookingQuickView.cshtml + cs-booking-quickview.js).
   These rules mirror the Diary's page-local modal styles so the
   component renders identically on any page; the Diary still carries
   its own copies for its create/blocked/out-of-season modals - keep
   the two in step if either changes.
   ================================================================ */

    .cs-badge-confirmed  { background: #d7e6f4; color: #1b4472; }
    .cs-badge-checkedin  { background: #dbe7ef; color: #324f68; }
    .cs-badge-draft      { background: #fef9c3; color: #a16207; }
    .cs-badge-cancelled  { background: #fee2e2; color: #dc2626; }
    .cs-badge-checkedout { background: #f3f1ec; color: #575147; }

    .cs-modal-overlay {
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, .45); backdrop-filter: blur(4px);
        z-index: 100; display: flex; align-items: center; justify-content: center;
        opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
    }
    .cs-modal-overlay.cs-open { opacity: 1; pointer-events: all; }
    .cs-modal {
        background: #fff; border-radius: 16px;
        box-shadow: 0 24px 48px rgba(0,0,0,.18);
        width: 100%; max-height: 90vh; overflow-y: auto;
        transform: translateY(12px) scale(.97); transition: transform 0.2s ease; margin: 16px;
    }
    .cs-modal-overlay.cs-open .cs-modal { transform: translateY(0) scale(1); }
    .cs-modal-head {
        display: flex; align-items: center; justify-content: space-between;
        padding: 20px 24px 16px; border-bottom: 1px solid #f3f1ec;
    }
    .cs-modal-head h2 { font-size: 18px; font-weight: 700; color: #1b1813; margin: 0; }
    .cs-modal-body { padding: 20px 24px 24px; }
    .cs-modal-close {
        width: 36px; height: 36px; border-radius: 10px; border: none;
        background: #f3f1ec; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        color: #797163; font-size: 18px; transition: background 0.15s;
    }
    .cs-modal-close:hover { background: #e8e4db; }

    /* ── Form ──────────────────────────────────────────────────── */

    .cs-detail-row {
        display: flex; justify-content: space-between; padding: 10px 0;
        border-bottom: 1px solid #f3f1ec; font-size: 14px;
    }
    .cs-detail-row:last-child { border-bottom: none; }
    .cs-detail-label { color: #797163; font-weight: 500; }
    .cs-detail-value { color: #1b1813; font-weight: 600; text-align: right; }

    /* ── Blocked guest alert ────────────────────────────────────
       The one way "this guest is blocked" is said, wherever a booking is
       taken or opened: diary create modal, booking quick view, booking
       screen. Big words, rose tint, an icon as well as the colour. ── */
    .cs-blocked-alert {
        display: flex; align-items: flex-start; gap: 12px;
        padding: 14px 16px; margin-bottom: 16px;
        border-radius: 12px; border: 1.5px solid #fecdd3; background: #fff1f2;
        color: #9f1239;
    }
    .cs-blocked-alert-icon { width: 26px; height: 26px; flex-shrink: 0; }
    .cs-blocked-alert-title { font-size: 17px; font-weight: 700; line-height: 1.25; }
    .cs-blocked-alert-body { margin-top: 3px; font-size: 15px; line-height: 1.4; }
    .cs-blocked-alert-reason { margin-top: 6px; font-size: 15px; line-height: 1.4; }
    .cs-blocked-alert-reason span { font-weight: 700; }

    /* ── Selection toast ───────────────────────────────────────── */
    .cs-selection-hint {
        position: fixed; bottom: 24px; left: 50%;
        transform: translateX(-50%) translateY(80px);
        background: #1b1813; color: #fff; padding: 12px 24px; border-radius: 12px;
        font-size: 14px; font-weight: 600;
        box-shadow: 0 8px 24px rgba(0,0,0,.25);
        z-index: 90; transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s;
        opacity: 0; pointer-events: none; white-space: nowrap;
    }
    .cs-selection-hint.cs-visible { transform: translateX(-50%) translateY(0); opacity: 1; pointer-events: all; }

    /* ── Deep-link hint (from the Today screen / mobile quick-action sheet).
       Unlike the selection hint this stays visible on phones, and sits above
       the mobile bottom bar. ── */

    .cs-quick-actions {
        display: flex; gap: 8px; margin-top: 16px; padding-top: 16px;
        border-top: 1px solid #f3f1ec;
    }
    .cs-quick-action {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 10px 12px; border-radius: 10px;
        border: 1.5px solid #e8e4db; background: #fff;
        color: #423d35; font-size: 13px; font-weight: 600;
        cursor: pointer; transition: all 0.15s; text-decoration: none;
    }
    .cs-quick-action:hover { background: #eef4fa; border-color: #22568c; color: #22568c; }
    .cs-quick-action svg { flex-shrink: 0; }
    .cs-quick-action-call { color: #22568c; border-color: #b4d0e9; background: #eef4fa; }
    .cs-quick-action-call:hover { background: #d7e6f4; border-color: #22568c; }
    .cs-quick-action-email { color: #3a5f7e; border-color: #c2d4e3; background: #ecf2f7; }
    .cs-quick-action-email:hover { background: #dbe7ef; border-color: #3a5f7e; }
    .cs-quick-action-text { color: #6d5384; border-color: #d8cde5; background: #f6f4f9; }
    .cs-quick-action-text:hover { background: #ebe6f2; border-color: #6d5384; }
    .cs-quick-action-disabled { opacity: 0.4; pointer-events: none; cursor: not-allowed; }

    /* ── Balance & status actions in view modal ─────────────── */
    .cs-balance-box {
        display: flex; align-items: center; justify-content: space-between;
        padding: 12px 14px; border-radius: 10px; margin-top: 12px;
        font-size: 14px;
    }
    .cs-balance-paid { background: #eef4fa; border: 1.5px solid #b4d0e9; }
    .cs-balance-owed { background: #fffbeb; border: 1.5px solid #fcd34d; }
    .cs-balance-label { font-weight: 600; color: #575147; }
    .cs-balance-amount { font-weight: 800; font-size: 18px; }
    .cs-balance-amount-paid { color: #22568c; }
    .cs-balance-amount-owed { color: #d97706; }
    .cs-balance-detail { font-size: 12px; color: #797163; margin-top: 2px; }

    .cs-status-actions {
        display: flex; gap: 8px; margin-top: 12px;
    }
    .cs-btn-checkin {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 12px 16px; border-radius: 10px; border: none;
        background: #3a5f7e; color: #fff; font-size: 14px; font-weight: 700;
        cursor: pointer; transition: background 0.15s;
    }
    .cs-btn-checkin:hover { background: #324f68; }
    .cs-btn-checkin:disabled { opacity: 0.5; cursor: not-allowed; }
    .cs-btn-checkout {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 12px 16px; border-radius: 10px; border: none;
        background: #6d5384; color: #fff; font-size: 14px; font-weight: 700;
        cursor: pointer; transition: background 0.15s;
    }
    .cs-btn-checkout:hover { background: #5b456d; }
    .cs-btn-checkout:disabled { opacity: 0.5; cursor: not-allowed; }
    .cs-btn-extendstay {
        flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
        padding: 12px 16px; border-radius: 10px; border: 1px solid #b4d0e9;
        background: #eef4fa; color: #1b4472; font-size: 14px; font-weight: 700;
        cursor: pointer; transition: background 0.15s;
    }
    .cs-btn-extendstay:hover { background: #d7e6f4; }

    /* ── Guest info pill in view modal ─────────────────────── */

    /* ── Extend-a-stay panel (quick view modal) ────────────────── */
    .cs-extend-stepper {
        display: flex; align-items: center; justify-content: space-between;
        gap: 12px; margin-top: 4px;
    }
    .cs-extend-stepbtn {
        width: 52px; height: 52px; flex-shrink: 0;
        border-radius: 10px; border: 1px solid #d6d0c4; background: #fff;
        font-size: 26px; font-weight: 600; color: #22568c; cursor: pointer;
        transition: background-color .15s ease;
    }
    .cs-extend-stepbtn:hover { background: #eef4fa; }
    .cs-extend-stepbtn:disabled { color: #c8c2b6; cursor: default; background: #fff; }
    .cs-extend-count { font-size: 17px; font-weight: 700; color: #1b1813; text-align: center; }
    .cs-extend-newdate { margin-top: 10px; font-size: 14px; font-weight: 600; color: #52493c; text-align: center; }
    .cs-extend-note {
        margin-top: 12px; padding: 10px 14px; border-radius: 10px;
        font-size: 14px; font-weight: 600;
    }
    .cs-extend-note-ok { background: #eef4fa; border: 1px solid #b4d0e9; color: #1b4472; }
    .cs-extend-note-bad { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }
    .cs-extend-note-wait { background: #faf7f2; border: 1px solid #e7e1d5; color: #797163; }

    /* Section heading inside the quick view modal. It lived only in the Diary
       page's inline styles, so the same shared modal came out unstyled on the
       Today dashboard. It belongs with the component it labels. */
    .cs-section {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.08em; color: #a8a092;
        padding-bottom: 6px; border-bottom: 1px solid #f3f1ec;
        margin-top: 20px; margin-bottom: 12px;
    }
    .cs-section:first-child { margin-top: 0; }

    /* ── Alter-booking menu (quick view modal) ─────────────────────
       The everyday desk changes - extend, change the party, take money,
       give money back - as one tidy pair of columns under the booking.
       Add a new action by adding a button, not a new layout. */
    .cs-alter-grid {
        display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px;
    }
    .cs-alter-btn {
        display: flex; align-items: center; justify-content: flex-start; gap: 8px;
        padding: 12px 14px; border-radius: 10px; border: 1px solid #e7e1d5;
        background: #fff; color: #2a2722; font-size: 14px; font-weight: 700;
        text-align: left; cursor: pointer; transition: background .15s ease, border-color .15s ease;
    }
    .cs-alter-btn:hover { background: #faf7f2; border-color: #d6d0c4; }
    .cs-alter-btn svg { width: 18px; height: 18px; flex-shrink: 0; color: #22568c; }

    /* One row per counter in "Change guests": label left, stepper right. */
    .cs-alter-rows { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
    .cs-alter-row {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
    }
    .cs-alter-row-label { font-size: 15px; font-weight: 600; color: #2a2722; }

    @media (max-width: 420px) {
        .cs-alter-grid { grid-template-columns: 1fr; }
    }

@media (max-width: 767px) {
    .cs-modal { margin: 8px; border-radius: 14px; max-height: 95vh; }
    .cs-modal-head { padding: 16px 18px 12px; }
    .cs-modal-body { padding: 16px 18px 20px; }
}

/* ================================================================
   Day tip (`cs-daytip`) - "tell me everything about this square"
   ----------------------------------------------------------------
   The one detail panel for a dense board: the diary's pitch nights,
   booking bars, date columns and row labels. On a desktop it opens
   under the pointer (or keyboard focus) as a small card that never
   eats a click; on a phone the identical markup slides up as a
   bottom sheet with a close button, because a phone has no hover.

   Driven by wwwroot/js/cs-daytip.js. The host page owns the words
   (it knows the domain), this owns the look. Never hand-roll a
   second hover panel - extend this one.
   ================================================================ */
.cs-daytip {
    position: fixed;
    top: 0; left: 0;
    z-index: 95;              /* over sticky grid headers, under modals (100) */
    width: 360px;
    max-width: calc(100vw - 20px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity .12s ease, transform .12s ease, visibility 0s linear .12s;
    pointer-events: none;     /* the board underneath stays clickable */
}
.cs-daytip.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity .12s ease, transform .12s ease;
}
.cs-daytip-panel {
    position: relative;
    padding: 12px 14px;
    border: 1px solid #e8e4db;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(28, 26, 22, .06), 0 14px 34px -12px rgba(28, 26, 22, .32);
    color: #1b1813;
    font-size: 16px;
    line-height: 1.4;
    text-align: left;
    /* On a short laptop window a full booking can be taller than the screen.
       Cap it so the guest's name is never the bit that gets pushed off. */
    box-sizing: border-box;
    max-height: calc(100vh - 20px);
    overflow: hidden;
}

/* The pointer, pinned under the square the tip belongs to. */
.cs-daytip-panel::after {
    content: '';
    position: absolute;
    left: var(--cs-daytip-arrow, 50%);
    width: 10px; height: 10px;
    margin-left: -5px;
    background: #fff;
    border: 1px solid #e8e4db;
    transform: rotate(45deg);
}
.cs-daytip-below .cs-daytip-panel::after { top: -6px; border-right: 0; border-bottom: 0; }
.cs-daytip-above .cs-daytip-panel::after { bottom: -6px; border-left: 0; border-top: 0; }
/* Squeezed against a screen edge the panel is no longer touching its square,
   so the pointer would be aiming at nothing. */
.cs-daytip-noarrow .cs-daytip-panel::after { display: none; }

/* ── Head: what am I looking at ─────────────────────────────────── */
.cs-daytip-head { display: flex; align-items: flex-start; gap: 9px; }
.cs-daytip-swatch {
    width: 10px; height: 10px; margin-top: 6px;
    border-radius: 3px; flex-shrink: 0;
}
.cs-daytip-heading { display: block; flex: 1; min-width: 0; }
.cs-daytip-title {
    display: block;
    font-size: 18px; font-weight: 700; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cs-daytip-sub { display: block; margin-top: 2px; font-size: 15px; color: #797163; }
.cs-daytip-head .cs-badge { flex-shrink: 0; margin-top: 1px; }

/* ── Headline: the one-line answer, tinted by state (§8 map) ────── */
.cs-daytip-headline {
    display: flex; align-items: center; gap: 8px;
    margin-top: 10px; padding: 9px 11px;
    border-radius: 9px;
    font-size: 17px; font-weight: 700;
}
.cs-daytip-headline svg { width: 20px; height: 20px; flex-shrink: 0; }
.cs-daytip-free { background: #eef4fa; border: 1px solid #b4d0e9; color: #1b4472; }
.cs-daytip-busy { background: #f7f5f0; border: 1px solid #e8e4db; color: #423d35; }
.cs-daytip-warn { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.cs-daytip-stop { background: #fff1f2; border: 1px solid #fecdd3; color: #9f1239; }

/* ── Facts: the shared detail rows, tightened for a small panel ── */
.cs-daytip-rows { margin-top: 8px; }
.cs-daytip-rows .cs-detail-row {
    gap: 14px; padding: 6px 0; font-size: 16px;
    align-items: baseline;
}
.cs-daytip-rows .cs-detail-label { white-space: nowrap; }
.cs-daytip-rows .cs-detail-value { font-weight: 700; }

/* ── How full: a plain bar, because a number alone hides the shape ── */
.cs-daytip-meter {
    height: 8px; margin-top: 10px;
    border-radius: 9999px; background: #f3f1ec; overflow: hidden;
}
.cs-daytip-meter > span {
    display: block; height: 100%;
    border-radius: 9999px; background: #22568c;
}

/* ── Chips: the unit's own facts (hookup, occupancy, dogs, size) ── */
.cs-daytip-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.cs-daytip-chip {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 9999px;
    border: 1px solid #e8e4db; background: #faf9f6;
    font-size: 14px; font-weight: 600; color: #575147;
}
.cs-daytip-chip-off { color: #a8a092; background: #fff; }

/* ── Note: a warning or an aside, same tints as the headline ────── */
.cs-daytip-note {
    margin-top: 9px; padding: 8px 11px;
    border-radius: 9px; font-size: 15px; font-weight: 600;
}

/* ── Foot: what happens if you click ───────────────────────────── */
.cs-daytip-foot {
    display: flex; align-items: center; gap: 6px;
    margin-top: 11px; padding-top: 9px;
    border-top: 1px solid #f3f1ec;
    font-size: 15px; font-weight: 600; color: #22568c;
}
.cs-daytip-foot svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Sheet mode (phones and any touch-only screen) ───────────────
   Same content, but it comes up from the bottom, takes taps and
   closes with a real 48px button instead of by moving the mouse. */
.cs-daytip-backdrop {
    position: fixed; inset: 0; z-index: 94;
    background: rgba(27, 24, 19, .45);
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
}
.cs-daytip-backdrop.is-open {
    opacity: 1; visibility: visible;
    transition: opacity .2s ease;
}
.cs-daytip.is-sheet {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; max-width: none;
    transform: translateY(105%);
    pointer-events: auto;
    transition: transform .22s cubic-bezier(.16, 1, .3, 1), visibility 0s linear .25s;
}
.cs-daytip.is-sheet.is-open {
    opacity: 1; transform: translateY(0);
    transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}
.cs-daytip.is-sheet .cs-daytip-panel {
    max-height: 82vh; overflow-y: auto;
    padding: 6px 18px calc(16px + env(safe-area-inset-bottom));
    border: 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 -18px 44px -20px rgba(28, 26, 22, .45);
    font-size: 16px;
}
.cs-daytip.is-sheet .cs-daytip-panel::after { display: none; }
.cs-daytip.is-sheet .cs-daytip-title { font-size: 20px; white-space: normal; }
.cs-daytip.is-sheet .cs-daytip-sub { font-size: 16px; }
.cs-daytip.is-sheet .cs-daytip-headline { font-size: 18px; padding: 11px 13px; }
.cs-daytip.is-sheet .cs-daytip-rows .cs-detail-row { padding: 9px 0; font-size: 17px; }
.cs-daytip.is-sheet .cs-daytip-chip { font-size: 15px; padding: 5px 11px; }
.cs-daytip.is-sheet .cs-daytip-note,
.cs-daytip.is-sheet .cs-daytip-foot { font-size: 16px; }
.cs-daytip-grip { display: none; }
.cs-daytip.is-sheet .cs-daytip-grip {
    display: block;
    width: 2.5rem; height: 0.3125rem;
    margin: 4px auto 10px;
    border-radius: 9999px; background: #e8e4db;
}
.cs-daytip-done {
    display: none; width: 100%; min-height: 48px;
    margin-top: 14px; border: 0; border-radius: 10px;
    background: #f3f1ec; color: #423d35;
    font-size: 16px; font-weight: 600; cursor: pointer;
}
.cs-daytip.is-sheet .cs-daytip-done { display: block; }

/* Nothing should sit on top of an open sheet. */
.cs-app:has(.cs-daytip.is-sheet.is-open) .csh-launcher { display: none; }

@media print { .cs-daytip, .cs-daytip-backdrop { display: none !important; } }

/* ── Space colour swatch (Spaces form) ─────────────────────────────────
   One-tap colour picker so each field gets its own colour on the diary
   instead of every space painting the same default blue. */
.space-swatch {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 2px solid transparent;
    box-shadow: inset 0 0 0 1px rgba(27, 24, 19, .12);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease;
}

.space-swatch:hover { transform: translateY(-1px); }

.space-swatch:focus-visible {
    outline: 3px solid rgba(34, 86, 140, .4);
    outline-offset: 2px;
}

.space-swatch.is-selected {
    border-color: #1b1813;
    box-shadow: inset 0 0 0 2px #fff, 0 2px 8px rgba(27, 24, 19, .18);
}

/* The icon picker reuses cs-segchip, which keys off a checked input it does
   not have here, so the selected state is driven by a class instead. */
.space-icon-option.is-selected {
    border-color: #22568c;
    background: #eef4fa;
    color: #1b4472;
}

/* ================================================================
   Brand chooser (`cs-themecard`, `cs-colourchip`, `cs-verdict`)
   ----------------------------------------------------------------
   The Settings > Booking page colour picker: ready-made theme cards
   that preview themselves, a colour swatch paired with a hex box,
   and the live readability verdict that gates Save.

   Lives here rather than in the page so a second screen that lets
   somebody choose colours reaches for the same parts instead of
   growing its own. See DESIGN.md section 3.
   ================================================================ */
    /* The colour chooser. Built from the same tokens as the shared components
       (warm borders, brand blue focus, orange only as the active indicator).
       Page-local while this is the one screen that chooses colours; move it to
       site.css as cs-themecard / cs-colourchip / cs-verdict the moment a second
       screen needs it. */
    .cs-themecard {
        display: block;
        padding: 10px;
        border-radius: 0.625rem;
        border: 1.5px solid #e5e0d5;
        background: #fff;
        cursor: pointer;
        transition: border-color .12s ease, box-shadow .12s ease;
    }
    .cs-themecard:hover { border-color: #c9c2b4; }
    .cs-themecard:has(input:checked) { border-color: #f06436; box-shadow: 0 0 0 2px rgba(240, 100, 54, .35); }
    .cs-themecard:has(input:focus-visible) { outline: 3px solid rgba(34, 86, 140, .4); outline-offset: 1px; }

    .cs-themecard-mini {
        display: block;
        padding: 10px;
        border-radius: 0.5rem;
        border: 1px solid rgba(28, 26, 22, .08);
    }
    .cs-themecard-h { display: block; font-weight: 700; font-size: 0.9375rem; line-height: 1.25; }
    .cs-themecard-t { display: block; font-size: 0.8125rem; line-height: 1.35; margin-top: 3px; }
    .cs-themecard-b {
        display: inline-block;
        margin-top: 9px;
        padding: 5px 11px;
        border-radius: 0.5rem;
        font-size: 0.75rem;
        font-weight: 700;
    }
    .cs-themecard-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-top: 9px;
        font-weight: 600;
        color: #1b1813;
    }
    .cs-themecard-chosen { display: none; font-size: 0.75rem; font-weight: 700; color: #f06436; }
    .cs-themecard:has(input:checked) .cs-themecard-chosen { display: inline; }
    .cs-themecard-suits { display: block; font-size: 0.8125rem; color: #797163; }

    /* The colour picker sits next to its hex box and matches the field height. */
    .cs-colourchip {
        flex: none;
        height: 48px;
        width: 56px;
        padding: 3px;
        border-radius: 0.625rem;
        border: 1.5px solid #d6d0c4;
        background: #fff;
        cursor: pointer;
    }
    .cs-colourchip:focus-visible { outline: 3px solid #22568c; outline-offset: 2px; }

    /* One readability verdict line: an icon, then plain words. Colour is never the only signal. */
    .cs-verdict { display: flex; align-items: flex-start; gap: 8px; font-size: 1rem; line-height: 1.4; }
    .cs-verdict svg { height: 1.25rem; width: 1.25rem; flex: none; margin-top: 1px; }
    .cs-verdict-ok { color: #1b4472; }
    .cs-verdict-bad { color: #b42318; }

    /* A Save that is off has to look off. This belongs in site.css beside .cs-btn. */
    .cs-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

    .cs-swatch-dot {
        display: inline-block;
        height: 0.875rem;
        width: 0.875rem;
        border-radius: 0.25rem;
        border: 1px solid rgba(28, 26, 22, .15);
    }