/*
 * The platform's look: one light design system for every page of our own (public pages, sign-in,
 * Home, Your account, the team and lodge pages, Admin, the control panel, error pages).
 *
 * It follows the Lodge of Alliance website (lodgeofalliance.org): a white bar over a cream page,
 * Playfair Display headings in deep blue with gold italic accents, Jost for text, small gold labels
 * with a short gold rule, blue buttons, white cards with soft shadows and 6px corners.
 *
 * Served from this site (no build step, so the error pages can use it too) and linked by
 * layouts/partials/fonts.blade.php. Everything is scoped to `body.ui` or to class names, so a page
 * that doesn't opt in is untouched.
 *
 * The component rules list the older class names beside the `ui-` ones (tp-btn, sp-btn, btn-sm,
 * adm-btn…): those pages share these rules rather than keeping copies of their own.
 *
 * Contrast (WCAG 2.2 AA): body text is ink or slate; small gold text uses --gold-text (5:1), gold
 * italics in large headings --gold-em (3.9:1 on cream); links --link (6:1); form-field edges
 * --field-border (3:1); every focus is a visible 2px ring.
 */

:root {
    /* The Lodge of Alliance website's tokens */
    --blue: #4A6FA5;
    --blue-deep: #2C4480;
    --blue-light: #EEF3FB;
    --blue-mid: #7191C4;
    --gold: #B8942A;
    --gold-lt: #D4AE45;
    --gold-pale: #F6EDD0;
    --cream: #FAFAF7;
    --cream-2: #F2F0EA;
    --ink: #1C2340;
    --slate: #5C6480;
    --slate-lt: #8A92A8;
    --white: #FFFFFF;
    --border: #DDE3F0;
    --radius: 6px;
    --shadow-sm: 0 2px 12px rgba(44, 68, 128, .07);
    --shadow-md: 0 6px 30px rgba(44, 68, 128, .10);

    /* Accessible companions */
    --gold-text: #7D6012;
    --gold-em: #9A7A1E;
    --link: #3F5F94;
    --field-border: #8A92A8;
    --placeholder: #6B7390;
    --line: #EDF0F6;
    --danger: #B42318;
    --danger-bg: #FEF3F2;
    --danger-border: #F2C4BF;
    --success: #17663A;
    --success-bg: #EEF8F1;
    --success-border: #BFE3CC;
    --warn: #6B4E00;
    --warn-bg: #FCF6E3;
    --warn-border: #E8D49A;
    --focus-ring: 0 0 0 3px rgba(74, 111, 165, .28);

    --font-sans: 'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --bar-height: 72px;

    /* Older names some pages still use (the generator pages), mapped onto the light look.
       --cream and --gold keep the website's meaning above; never use --cream for text. */
    --navy: var(--blue-deep);
    --navy-mid: var(--white);
    --navy-light: var(--blue-light);
    --gold-light: var(--gold-lt);
    --text-light: var(--slate);
    --text-muted: var(--slate);
    --text-dim: var(--slate);
    --border-subtle: var(--border);
    --border-gold-soft: var(--border);
}

/* ───────────────────────── Base ───────────────────────── */

body.ui {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
/* Element defaults sit inside :where() so that any class rule (a button, a heading class) wins. */
:where(.ui) *, :where(.ui) *::before, :where(.ui) *::after { box-sizing: border-box; }
:where(.ui) :where(h1, h2, h3, h4) { font-family: var(--font-serif); color: var(--blue-deep); line-height: 1.25; }
:where(.ui) em { font-style: italic; }
:where(.ui) a { color: inherit; text-decoration: none; }
:where(.ui) :where(strong, b) { font-weight: 600; }
:where(.ui) ::selection { background: var(--gold-pale); color: var(--ink); }
:where(.ui) :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
:where(.ui) img { max-width: 100%; }

/* The soft wash at the top of a page, as on the website's page headers. */
.ui-wash {
    background:
        linear-gradient(to bottom, rgba(250, 250, 247, 0) 0, var(--cream) 26rem),
        linear-gradient(150deg, var(--blue-light) 0%, var(--cream) 55%, var(--gold-pale) 100%);
    background-repeat: no-repeat;
    background-size: 100% 26rem, 100% 26rem;
}

.ui-container { max-width: 1100px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 560px) { .ui-container { padding: 0 1rem; } }
.ui-sr-only, .tp-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ───────────────────────── Type ───────────────────────── */

/* The small gold label above a heading */
.ui-label, .tp-eyebrow, .sp-eyebrow, .section-label, .adm-kicker, .err-code {
    display: block;
    margin: 0 0 .8rem;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-text);
}

/* The short gold rule under a heading */
.ui-rule { display: block; width: 48px; height: 2px; margin: 1rem 0 1.5rem; border: 0; background: linear-gradient(to right, var(--gold), transparent); }
.ui-rule-center { margin-left: auto; margin-right: auto; background: linear-gradient(to right, transparent, var(--gold), transparent); }

.ui-title, .tp-title, .sp-title, .heading-lg {
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.005em;
    color: var(--blue-deep);
    margin: 0 0 .5rem;
    overflow-wrap: anywhere;
}
.tp-title::after, .sp-title::after, .ui-title::after {
    content: ''; display: block; width: 48px; height: 2px; margin: 1rem 0 1.1rem;
    background: linear-gradient(to right, var(--gold), transparent);
}
.ui-title em, .tp-title em, .sp-title em, .heading-lg em, .heading-md em, .ui-h2 em, .tp-h2 em, .sp-h2 em {
    font-style: italic; color: var(--gold-em);
}
.ui-h2, .tp-h2, .sp-h2, .heading-md {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--blue-deep);
    margin: 0 0 .6rem;
}
.ui-h3, .sp-h3 { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; color: var(--blue-deep); margin: 0 0 .4rem; }
.ui-lead, .tp-lead, .sp-lead {
    font-size: 1.08rem;
    font-weight: 300;
    line-height: 1.75;
    color: var(--slate);
    max-width: 42rem;
}
.ui-text, .tp-text, .sp-text, .cp-text { color: var(--slate); line-height: 1.7; }
.ui-muted, .ui-small, .tp-muted, .tp-small, .sp-small, .sp-meta, .cp-small, .adm-muted { color: var(--slate); }
.ui-small, .tp-small, .sp-small, .cp-small, .tp-muted { font-size: .88rem; }

/* Links in running text */
.ui-link, .tp-link, .sp-link, .adm-link, .adm-a,
:where(.tp-text, .tp-muted, .tp-small, .sp-text, .sp-small, .sp-prose, .sp-list, .sp-note, .cp-text, .cp-small, .ui-text, .ui-muted, .ui-small, .ui-prose) a:not([class*="btn"]) {
    color: var(--link);
    text-decoration: underline;
    text-decoration-color: rgba(63, 95, 148, .45);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color .2s, text-decoration-color .2s;
}
.ui-link:hover, .tp-link:hover, .sp-link:hover, .adm-link:hover, .adm-a:hover,
:where(.tp-text, .tp-muted, .tp-small, .sp-text, .sp-small, .sp-prose, .sp-list, .sp-note, .cp-text, .cp-small, .ui-text, .ui-muted, .ui-small, .ui-prose) a:not([class*="btn"]):hover {
    color: var(--blue-deep);
    text-decoration-color: currentColor;
}

/* A button that reads as a link (sign out, turn off) */
.ui-link-button, .tp-link-button {
    background: none; border: 0; padding: .5rem 0; min-height: 44px; cursor: pointer;
    font: inherit; color: var(--link); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(63, 95, 148, .45);
}
.ui-link-button:hover, .tp-link-button:hover { color: var(--blue-deep); text-decoration-color: currentColor; }

/* ───────────────────────── Buttons ───────────────────────── */

.ui-btn, .tp-btn, .sp-btn, .btn-sm, .adm-btn, .err-btn, .tf-btn, .btn-gold, .btn-outline, .btn-green, .nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 46px;
    padding: .7rem 1.4rem;
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    font-family: var(--font-sans);
    font-size: .92rem;
    font-weight: 500;
    letter-spacing: .03em;
    line-height: 1.2;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, transform .2s;
    -webkit-tap-highlight-color: transparent;
}
.btn-sm, .adm-btn { min-height: 44px; padding: .5rem 1rem; font-size: .88rem; }
.ui-btn:focus-visible, .tp-btn:focus-visible, .sp-btn:focus-visible, .btn-sm:focus-visible, .adm-btn:focus-visible,
.err-btn:focus-visible, .tf-btn:focus-visible, .btn-gold:focus-visible, .btn-outline:focus-visible, .btn-green:focus-visible, .nav-cta:focus-visible {
    outline: 2px solid var(--blue-deep);
    outline-offset: 2px;
}

/* Primary: blue with white text */
.ui-btn-primary, .tp-btn-gold, .sp-btn-gold, .btn-sm-gold, .adm-btn-primary, .err-btn, .tf-btn, .btn-gold, .nav-cta {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
    box-shadow: 0 4px 16px rgba(74, 111, 165, .22);
}
.ui-btn-primary:hover, .tp-btn-gold:hover, .sp-btn-gold:hover, .btn-sm-gold:hover, .adm-btn-primary:hover, .err-btn:hover, .tf-btn:hover, .btn-gold:hover, .nav-cta:hover {
    background: var(--blue-deep);
    border-color: var(--blue-deep);
    color: var(--white);
    transform: translateY(-1px);
}

/* Outline: white with a blue edge */
.ui-btn-outline, .tp-btn-outline, .sp-btn-outline, .btn-sm-outline, .adm-btn-secondary, .err-btn-outline, .btn-outline {
    background: var(--white);
    border-color: var(--blue-mid);
    color: var(--blue-deep);
    box-shadow: none;
}
.ui-btn-outline:hover, .tp-btn-outline:hover, .sp-btn-outline:hover, .btn-sm-outline:hover, .adm-btn-secondary:hover, .err-btn-outline:hover, .btn-outline:hover {
    background: var(--blue-light);
    border-color: var(--blue);
    color: var(--blue-deep);
    transform: none;
}

/* Quiet: for the third choice on a row */
.ui-btn-quiet, .tp-btn-quiet, .btn-sm-muted {
    background: transparent;
    border-color: var(--slate-lt);
    color: var(--slate);
}
.ui-btn-quiet:hover, .tp-btn-quiet:hover, .btn-sm-muted:hover { background: var(--blue-light); border-color: var(--blue-mid); color: var(--blue-deep); }

/* Danger */
.ui-btn-danger, .tp-btn-danger, .btn-sm-danger {
    background: var(--white);
    border-color: var(--danger);
    color: var(--danger);
}
.ui-btn-danger:hover, .tp-btn-danger:hover, .btn-sm-danger:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }
.ui-btn-danger-solid, .adm-btn-danger { background: var(--danger); border-color: var(--danger); color: var(--white); }
.ui-btn-danger-solid:hover, .adm-btn-danger:hover { background: #912018; border-color: #912018; color: var(--white); }

/* Success and the control panel's teal (preview, download) */
.btn-green { background: #1E7A46; border-color: #1E7A46; color: var(--white); }
.btn-green:hover { background: var(--success); border-color: var(--success); transform: translateY(-1px); }
.btn-sm-teal { background: #EAF6F4; border-color: #4FA59A; color: #0F5F57; }
.btn-sm-teal:hover { background: #D7EFEB; border-color: #0F766E; }

.ui-btn[disabled], .tp-btn[disabled], .sp-btn[disabled], .btn-sm[disabled], .adm-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.ui-btn-block, .tp-btn-block { width: 100%; }
.ui-actions, .tp-actions, .sp-actions, .adm-actions, .action-strip { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.ui-inline-form, .tp-inline-form { display: inline; margin: 0; }

/* ───────────────────────── Cards ───────────────────────── */

.ui-card, .tp-card, .sp-card, .cp-card, .adm-card, .tp-lodge {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    padding: 1.75rem;
}
/* A card that matters most on the page: a gold line along the top */
.ui-card-accent, .tp-card-gold, .sp-card-gold, .planner-cta { border-top: 3px solid var(--gold); box-shadow: var(--shadow-md); }
.ui-card-title, .tp-card-title, .cp-card-title {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    margin: 0 0 1.1rem;
    font-family: var(--font-sans);
    font-size: .72rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
    color: var(--gold-text);
}
.cp-card-title { justify-content: flex-start; }
.cp-card-title svg { color: var(--gold); opacity: 1; flex-shrink: 0; }
.ui-card-danger, .cp-card-danger { border-color: var(--danger-border); }
.ui-card-danger .ui-card-title, .cp-card-danger .cp-card-title { color: var(--danger); }
.cp-card-danger .cp-card-title svg { color: var(--danger); }

/* Count badges */
.ui-count, .tp-count, .tp-card-title .tp-count, .cp-count-badge, .adm-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 1.4rem; height: 1.4rem; padding: 0 .45rem; border-radius: 999px;
    background: var(--gold); color: var(--ink);
    font-family: var(--font-sans); font-size: .74rem; font-weight: 600; letter-spacing: 0; line-height: 1;
}

/* ───────────────────────── Pills and badges ───────────────────────── */

.ui-pill, .tp-pill, .sp-pill {
    display: inline-block; vertical-align: 2px; margin-left: .35rem;
    padding: .15rem .6rem; border-radius: 999px;
    font-family: var(--font-sans); font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    background: var(--gold-pale); color: var(--warn);
}
.ui-pill-muted, .tp-pill-muted, .sp-pill { background: var(--cream-2); color: var(--slate); }
.ui-pill-warn, .tp-pill-warn { background: var(--danger-bg); color: var(--danger); }
.ui-pill-blue, .tm-badge { background: var(--blue-light); color: var(--blue-deep); }

.status-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .25rem .75rem; border-radius: 999px;
    font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.status-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-draft { background: var(--cream-2); color: var(--slate); }
.status-generated { background: var(--blue-light); color: var(--blue-deep); }
.status-live { background: var(--success-bg); color: var(--success); }

/* ───────────────────────── Forms ───────────────────────── */

.ui-label-text, .tp-label, .cp-label, .adm-label, .adm-field label {
    display: block; margin-bottom: .4rem;
    font-size: .9rem; font-weight: 500; color: var(--ink);
}
.ui-input, .ui-select, .ui-textarea, .tp-input, .tp-select, .tp-textarea, .cp-input, .adm-input, .tp-linkbox-field {
    width: 100%;
    min-height: 46px;
    padding: .65rem .9rem;
    background-color: var(--white);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 1rem; /* 16px: no zoom on iPad and iPhone */
    font-weight: 400;
    line-height: 1.4;
    transition: border-color .2s, box-shadow .2s;
}
.ui-input:hover, .ui-select:hover, .ui-textarea:hover, .tp-input:hover, .tp-select:hover, .tp-textarea:hover, .cp-input:hover, .adm-input:hover { border-color: var(--blue-mid); }
.ui-input:focus, .ui-select:focus, .ui-textarea:focus, .tp-input:focus, .tp-select:focus, .tp-textarea:focus, .cp-input:focus, .adm-input:focus, .tp-linkbox-field:focus {
    outline: 2px solid transparent; /* still drawn in Windows high-contrast mode */
    border-color: var(--blue);
    box-shadow: var(--focus-ring);
}
.ui-input::placeholder, .ui-textarea::placeholder, .tp-input::placeholder, .tp-textarea::placeholder, .cp-input::placeholder, .adm-input::placeholder { color: var(--placeholder); opacity: 1; }
.ui-select, .tp-select, select.adm-input {
    appearance: none; -webkit-appearance: none; padding-right: 2.4rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%232C4480' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .9rem center; background-size: 12px 8px;
}
.ui-textarea, .tp-textarea, textarea.adm-input { min-height: 110px; resize: vertical; line-height: 1.55; }
.ui-hint, .tp-hint, .cp-hint { display: block; margin-top: .35rem; font-size: .84rem; color: var(--slate); }
.ui-error, .tp-error, .cp-error, .adm-error { margin: .35rem 0 0; font-size: .86rem; color: var(--danger); }
.ui-field, .tp-field { margin-bottom: 1.1rem; }
:where(.ui) input:where([type="checkbox"], [type="radio"]) { accent-color: var(--blue); }
.ui-check, .cp-check {
    display: flex; align-items: center; gap: .65rem; min-height: 44px; margin-top: .5rem;
    font-size: .92rem; color: var(--ink); cursor: pointer;
}
.ui-check input, .cp-check input { width: 20px; height: 20px; flex-shrink: 0; }

/* ───────────────────────── Alerts and notes ───────────────────────── */

.ui-alert, .alert {
    display: block;
    padding: .85rem 1.1rem;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--radius);
    background: var(--white);
    color: var(--ink);
    font-size: .94rem;
    line-height: 1.55;
}
.ui-alert-success, .alert-success { background: var(--success-bg); border-color: var(--success-border); border-left-color: var(--success); color: var(--success); }
.ui-alert-error, .alert-error { background: var(--danger-bg); border-color: var(--danger-border); border-left-color: var(--danger); color: var(--danger); }
.ui-alert-warn { background: var(--warn-bg); border-color: var(--warn-border); border-left-color: var(--gold); color: var(--warn); }
.ui-alert-info { background: var(--blue-light); border-color: var(--border); border-left-color: var(--blue); color: var(--ink); }
.alert ul, .ui-alert ul { list-style: disc; margin: 0; padding-left: 1.25rem; }

.ui-note, .tp-note {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .9rem 1.1rem; border-radius: var(--radius);
    background: var(--blue-light); border: 1px solid var(--border);
    font-size: .92rem; color: var(--slate);
}
.ui-note svg, .tp-note svg { flex-shrink: 0; margin-top: 2px; color: var(--blue); }

/* ───────────────────────── Tables ───────────────────────── */

.ui-table, .adm-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ui-table th, .adm-table th {
    text-align: left; vertical-align: bottom;
    padding: .7rem .6rem;
    font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--slate);
    border-bottom: 1px solid var(--border);
}
.ui-table td, .adm-table td { padding: .8rem .6rem; border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.ui-table tbody tr:hover, .adm-table tbody tr:hover { background: rgba(238, 243, 251, .55); }

/* ───────────────────────── Tabs ───────────────────────── */

.ui-tabs, .cp-tabs {
    display: flex; gap: .25rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.ui-tab, .cp-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 48px; padding: .75rem 1.1rem; margin-bottom: -1px;
    font-family: var(--font-sans); font-size: .9rem; font-weight: 500; letter-spacing: .01em; text-transform: none;
    color: var(--slate); text-decoration: none; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .2s, border-color .2s, background-color .2s;
}
.ui-tab:hover, .cp-tab:hover { color: var(--blue-deep); background: var(--blue-light); border-radius: var(--radius) var(--radius) 0 0; }
.ui-tab:focus-visible, .cp-tab:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ui-tab[aria-current="page"], .ui-tab.active, .cp-tab.active { color: var(--blue-deep); border-bottom-color: var(--gold); }

/* Pill tabs (Admin's sections) */
.ui-pills, .adm-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.ui-pill-tab, .adm-tab {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: 44px; padding: 0 1rem; border-radius: 999px;
    border: 1px solid var(--border); background: var(--white); color: var(--slate);
    font-family: var(--font-sans); font-size: .88rem; font-weight: 500; text-decoration: none;
    transition: color .2s, border-color .2s, background-color .2s;
}
.ui-pill-tab:hover, .adm-tab:hover { color: var(--blue-deep); border-color: var(--blue-mid); background: var(--blue-light); }
.ui-pill-tab[aria-current="page"], .adm-tab[aria-current="page"] { background: var(--blue); border-color: var(--blue); color: var(--white); }
.adm-tab[aria-current="page"] .adm-count { background: var(--white); color: var(--blue-deep); }
.ui-pill-tab:focus-visible, .adm-tab:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }

/* ───────────────────────── The mark ───────────────────────── */

.ui-mark, .nav-brand-mark, .app-nav-mark, .guest-brand-mark, .err-mark, .footer-mark { display: block; flex-shrink: 0; border-radius: 50%; box-shadow: var(--shadow-sm); }

/* ───────────────────────── The top bar (public, signed-in and Admin shells) ───────────────────────── */

.site-nav, .app-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 100;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    transition: box-shadow .3s;
}
.site-nav.scrolled, .app-nav.scrolled { box-shadow: var(--shadow-md); }
.nav-inner, .app-nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 2rem;
    min-height: var(--bar-height);
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
@media (max-width: 560px) { .nav-inner, .app-nav-inner { padding: 0 1rem; } }
.nav-brand, .app-nav-brand a { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; text-decoration: none; }
.nav-brand-mark, .app-nav-mark { width: 42px; height: 42px; }
.nav-brand-logo, .app-nav-name {
    font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; line-height: 1.1;
    letter-spacing: .01em; color: var(--blue-deep);
}
.nav-brand-text { display: block; font-size: .66rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-top: .2rem; }
.nav-brand-words { display: flex; flex-direction: column; justify-content: center; }

.nav-links, .app-nav-links, .app-nav-right { display: flex; align-items: center; gap: .2rem; list-style: none; margin: 0; padding: 0; }
.nav-links a:not(.nav-cta), .nav-signout button, .app-nav-link {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 .85rem;
    border: 0; border-radius: 4px; background: none;
    font-family: var(--font-sans); font-size: .86rem; font-weight: 400; letter-spacing: .01em; text-transform: none;
    color: var(--slate); text-decoration: none; white-space: nowrap; cursor: pointer;
    transition: color .2s, background-color .2s;
}
.nav-links a:not(.nav-cta):hover, .nav-signout button:hover, .app-nav-link:hover { color: var(--blue-deep); background: var(--blue-light); }
.nav-links a[aria-current="page"], .app-nav-link[aria-current="page"] { color: var(--blue-deep); background: var(--blue-light); font-weight: 500; }
.nav-signout, .app-nav-form { display: inline; margin: 0; }
.nav-cta { min-height: 42px; padding: .5rem 1.2rem; margin-left: .5rem; font-size: .86rem; box-shadow: none; }

/* Menu button (public bar) and the <details> menu (signed-in bar) */
.nav-hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    min-width: 44px; min-height: 44px; padding: .5rem; border: 0; background: none; cursor: pointer; border-radius: 4px;
}
.nav-hamburger span { display: block; width: 22px; height: 2px; margin: 0; border-radius: 2px; background: var(--blue-deep); }
.nav-hamburger:hover { background: var(--blue-light); }
.nav-mobile { display: none; background: var(--white); border-top: 1px solid var(--border); box-shadow: var(--shadow-md); padding: .5rem 1rem 1rem; }
.nav-mobile.open { display: block; }
.nav-mobile a, .nav-mobile .nav-signout button {
    display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 .75rem;
    border: 0; border-radius: 4px; background: none; text-align: left;
    font-family: var(--font-sans); font-size: 1rem; font-weight: 400; letter-spacing: normal; text-transform: none;
    color: var(--ink); text-decoration: none; cursor: pointer;
}
.nav-mobile a:hover, .nav-mobile .nav-signout button:hover { background: var(--blue-light); color: var(--blue-deep); }
.nav-mobile .nav-signout { display: block; }

.app-nav-main { display: flex; align-items: center; gap: 1.5rem; }
.app-nav-menu { display: none; position: static; }
.app-nav-menu > summary {
    list-style: none; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-width: 44px; min-height: 44px; padding: 0 .85rem; cursor: pointer;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--white);
    color: var(--blue-deep); font-size: .9rem; font-weight: 500;
}
.app-nav-menu > summary::-webkit-details-marker { display: none; }
.app-nav-menu[open] > summary { background: var(--blue-light); border-color: var(--blue-mid); }
.app-nav-menu-panel {
    position: absolute; left: 0; right: 0; top: 100%; padding: .5rem 1rem 1rem;
    background: var(--white); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md);
}
.app-nav-menu-panel ul { list-style: none; margin: 0; padding: 0; }
.app-nav-menu-link {
    display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0 .75rem; text-align: left;
    font-family: var(--font-sans); font-size: 1rem; color: var(--ink); text-decoration: none;
    background: none; border: 0; border-radius: 4px; cursor: pointer;
}
.app-nav-menu-link:hover { background: var(--blue-light); color: var(--blue-deep); }
.app-nav-menu-link[aria-current="page"] { color: var(--blue-deep); background: var(--blue-light); font-weight: 500; }
.app-nav-who { margin-top: .5rem; padding: .75rem .75rem .25rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--slate); overflow-wrap: anywhere; }
.app-nav-who strong { display: block; color: var(--ink); font-weight: 500; }
.app-nav-link:focus-visible, .app-nav-menu > summary:focus-visible, .app-nav-menu-link:focus-visible,
.nav-links a:focus-visible, .nav-signout button:focus-visible, .nav-hamburger:focus-visible, .nav-mobile a:focus-visible, .nav-brand:focus-visible, .app-nav-brand a:focus-visible {
    outline: 2px solid var(--blue); outline-offset: 2px;
}

/* "Admin": how you know you're in Admin */
.ui-admin-mark {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .65rem; border-radius: 999px;
    background: var(--blue-deep); color: var(--white);
    font-family: var(--font-sans); font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    white-space: nowrap;
}
.ui-admin-mark::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-lt); }
.theme-admin .app-nav { border-top: 3px solid var(--blue-deep); }

/* ───────────────────────── Footers ───────────────────────── */

/* The public pages: deep blue, as the website's footer */
.site-footer { background: var(--blue-deep); color: rgba(255, 255, 255, .85); margin-top: 5rem; }
.footer-inner { max-width: 1100px; margin: 0 auto; padding: 4rem 2rem 2rem; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 3rem; margin-bottom: 2.5rem; }
.footer-brand { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; }
.footer-mark { width: 40px; height: 40px; box-shadow: none; }
.footer-heading { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 700; color: var(--white); }
.footer-small-heading { font-family: var(--font-serif); font-size: .98rem; font-weight: 600; color: rgba(255, 255, 255, .85); margin-bottom: .75rem; }
.footer-text { font-size: .86rem; line-height: 1.75; color: rgba(255, 255, 255, .85); }
.footer-text a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .5); overflow-wrap: anywhere; }
.footer-text a:hover { text-decoration-color: currentColor; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: .86rem; color: rgba(255, 255, 255, .8); transition: color .2s; }
.footer-links a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1.5rem; text-align: center; }
.footer-bottom p { margin: 0 0 .4rem; font-size: .78rem; line-height: 1.65; color: rgba(255, 255, 255, .72); }
.footer-legal { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem 1.25rem; }
.footer-legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: .84rem; color: rgba(255, 255, 255, .85); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .35); text-underline-offset: 3px; }
.footer-legal a:hover { color: var(--white); text-decoration-color: currentColor; }
.site-footer a:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .footer-inner { padding: 3rem 1.25rem 1.5rem; } }

/* The signed-in, sign-in and error pages: one quiet line */
.app-help, .guest-help {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .6rem;
    font-size: .86rem; color: var(--slate);
}
.app-help { max-width: 1100px; margin: 3rem auto 0; padding: 1rem 1rem 1.5rem; border-top: 1px solid var(--border); }
.guest-help { margin-top: 2rem; max-width: 30rem; text-align: center; }
.app-help span, .app-help a, .guest-help span, .guest-help a { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; }
.app-help a, .guest-help a { color: var(--link); text-decoration: underline; text-decoration-color: rgba(63, 95, 148, .45); text-underline-offset: 3px; overflow-wrap: anywhere; }
.app-help a:hover, .guest-help a:hover { color: var(--blue-deep); text-decoration-color: currentColor; }

/* ───────────────────────── Notices across the top ───────────────────────── */

/* "Test version" (LODGE_TEST_SITE=on) */
.test-note {
    max-width: 920px; margin: 1rem auto 0; padding: .35rem 1rem;
    border: 1px solid var(--warn-border); border-radius: var(--radius);
    background: var(--warn-bg); color: var(--ink);
    font-size: .86rem; text-align: center;
}
.test-note strong { color: var(--warn); font-weight: 600; }
.test-note a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.tsn-thanks { display: inline-block; margin-left: .35rem; font-weight: 600; color: var(--success); }
.tsn-details { display: inline; }
.tsn-details[open] { display: block; }
.tsn-details > summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 40px; cursor: pointer; list-style: none; color: var(--slate); }
.tsn-details > summary::-webkit-details-marker { display: none; }
.tsn-summary { color: var(--link); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.tsn-form { max-width: 36rem; margin: .25rem auto .6rem; display: grid; gap: .5rem; text-align: left; }
.tsn-form label { font-size: .9rem; color: var(--ink); }
.tsn-form textarea {
    width: 100%; min-height: 5.5rem; padding: .6rem .8rem; border-radius: var(--radius);
    border: 1px solid var(--field-border); background: var(--white); color: var(--ink);
    font: inherit; font-size: 1rem;
}
.tsn-form textarea:focus { outline: 2px solid transparent; border-color: var(--blue); box-shadow: var(--focus-ring); }
.tsn-row { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; font-size: .86rem; color: var(--slate); }
.tsn-row a { overflow-wrap: anywhere; }
.tsn-form button {
    min-height: 44px; padding: 0 1.15rem; border: 0; border-radius: var(--radius); cursor: pointer;
    background: var(--blue); color: var(--white); font: inherit; font-weight: 500;
}
.tsn-form button:hover { background: var(--blue-deep); }
.tsn-form button:focus-visible, .tsn-details > summary:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.tsn-error { margin: 0; font-size: .86rem; color: var(--danger); }

/* "Customer view is on" (site support) */
.cv-banner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem 1rem;
    padding: .35rem 1rem; background: var(--gold-pale); border-bottom: 2px solid var(--gold);
    color: var(--ink); font-size: .9rem; text-align: center;
}
.cv-banner p { margin: 0; }
.cv-banner strong { color: var(--warn); font-weight: 600; }
.cv-banner form { margin: 0; }
.cv-banner button {
    min-height: 40px; padding: 0 1rem; border: 1.5px solid var(--blue-mid); border-radius: var(--radius);
    background: var(--white); color: var(--blue-deep); font: inherit; font-weight: 500; cursor: pointer;
}
.cv-banner button:hover { background: var(--blue-light); border-color: var(--blue); }
.cv-banner button:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.cv-switch-form { display: inline; margin: 0; }
.cv-switch { display: inline-flex; align-items: center; min-height: 44px; font: inherit; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
.cv-pill {
    display: inline-flex; align-items: center; padding: .3rem .75rem; border-radius: 999px;
    background: var(--gold); color: var(--ink); font-size: .84rem; font-weight: 600; letter-spacing: .02em;
    text-transform: none; white-space: nowrap;
}
.cv-switch:hover .cv-pill, .cv-switch:focus-visible .cv-pill { background: var(--gold-lt); }
.cv-switch:focus-visible { outline: 2px solid var(--blue-deep); outline-offset: 2px; }
.app-nav-menu-link.cv-switch { display: flex; width: 100%; min-height: 48px; padding: 0 .75rem; font-size: 1rem; color: var(--ink); }
.app-nav-link.cv-switch { padding: 0 .85rem; font-size: .86rem; color: var(--slate); }
.app-nav-link.cv-switch:hover { color: var(--blue-deep); }

/* Browsers too old for the Table Planner (layouts/partials/old-browser) */
.ui-old-browser {
    margin: 0 auto; max-width: 46rem; padding: .85rem 1.1rem;
    border: 1px solid var(--warn-border); border-left: 4px solid var(--gold); border-radius: var(--radius);
    background: var(--warn-bg); color: var(--ink); font-size: .95rem; line-height: 1.55;
}
.ui-old-browser strong { color: var(--warn); font-weight: 600; }

/* ───────────────────────── Back to top ───────────────────────── */

.back-to-top {
    position: fixed; bottom: 2rem; right: 2rem; z-index: 90;
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--white); color: var(--blue-deep); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
    cursor: pointer; opacity: 0; transform: translateY(12px); pointer-events: none;
    transition: opacity .3s, transform .3s, background-color .2s;
}
.back-to-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.back-to-top:hover { background: var(--blue-light); transform: translateY(-2px); }
@media (max-width: 768px) { .back-to-top { bottom: 1.25rem; right: 1.25rem; } }

/* ───────────────────────── Motion and print ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
    :where(.ui) *, :where(.ui) *::before, :where(.ui) *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}
@media print {
    body.ui { background: #fff !important; }
    .site-nav, .app-nav, .site-footer, .back-to-top, .test-note, .cv-banner { display: none !important; }
    .site-main, .app-main { padding-top: 0 !important; background: none !important; }
    .ui-card, .tp-card, .sp-card, .cp-card, .adm-card { box-shadow: none !important; }
}

/* The signed-in bar's layout (layouts/navigation) */
.app-nav-brand { display: flex; align-items: center; gap: .75rem; min-width: 0; }
@media (max-width: 899px) {
    .app-nav-links, .app-nav-right { display: none; }
    .app-nav-menu { display: block; }
}
@media (max-width: 420px) {
    .app-nav-name { font-size: 1.02rem; }
    .app-nav-brand a { gap: .6rem; }
    .app-nav-menu > summary span { display: none; }
}

/* Figures that are data (stats, counts, step numbers) use lining numerals: Playfair's are old-style. */
.stat-num, .mini-stat-num, .sp-plan-price, .sp-steps > li::before, .tf-steps > li::before, .del-step-mark, .adm-stat dd, .ui-figure {
    font-variant-numeric: lining-nums tabular-nums;
}