/* ==========================================================================
   NO MORE MEMBERS — Guest CRM. Modern Editorial (Hub/Reviews-admin sibling).
   Dark = ink/bone/gold. Light = cream inversion via body[data-mode="light"].
   Fonts: Bodoni Moda (display), Archivo (UI/body).
   Tokens mirror hub-style.css; members adds a legacy-alias layer
   (--text-color / --heading-color / --muted-color / --card-bg / --border-color
   / --input-bg / --ok-text / --bad-text and the old cream/brown/gold names)
   so the stage-1 unconverted templates keep rendering, plus the members
   component vocabulary (.stat, .card, .table, .badge, .pill, .res-card,
   calendar grid, bio cards).
   ========================================================================== */

:root {
    --dark: #141312;          /* surface (cards, sidebar) */
    --ink: #0b0b0a;           /* page background */
    --cream: #ece7dd;         /* bone foreground */
    --gold: #d8b35a;
    --brown: #a3812a;         /* deep antique gold — kept distinct from --gold
                                 because insights.html uses both as adjacent
                                 distribution segments */
    --card-bg: #141312;
    --card-border: rgba(236, 231, 221, 0.12);
    --text-muted: rgba(236, 231, 221, 0.55);
    --text-dim: rgba(236, 231, 221, 0.38);
    --success: #8fbc8f;
    --warning: #d8b35a;
    --danger: #de8080;
    --info: #8fb4c2;
    --sidebar-width: 240px;
    /* legacy aliases used by template inline styles */
    --text: #ece7dd;
    --black: #0b0b0a;
    --border: rgba(236, 231, 221, 0.12);
    --input-bg: #0b0b0a;

    /* hub-specific layer */
    --radius: 4px;            /* controls */
    --radius-lg: 8px;         /* cards */
    --border-soft: rgba(236, 231, 221, 0.07);
    --on-gold: #0b0b0a;       /* text sitting on solid gold */

    /* status hue ramp (dark-tuned pastels) */
    --hue-neutral: rgba(236, 231, 221, 0.55);
    --hue-slate: #8fb4c2;
    --hue-amber: #d8b35a;
    --hue-tan: #c8ab72;
    --hue-orange: #d99463;
    --hue-teal: #88bfae;
    --hue-green: #8fbc8f;
    --hue-sage: #a3b393;

    /* ---- MEMBERS LEGACY ALIASES (used by unconverted templates) ---- */
    --text-color: var(--cream);
    --heading-color: var(--gold);
    --muted-color: var(--text-muted);
    --border-color: var(--card-border);
    --ok-text: var(--success);
    --bad-text: var(--danger);
    /* old token names still referenced in templates / inline styles */
    --cream-2: #1c1a17;                       /* secondary surface */
    --muted: var(--text-muted);
    --muted-2: var(--text-muted);
    --line: var(--card-border);
    --line-2: var(--border-soft);
    --gold-soft: rgba(216, 179, 90, 0.12);
    --gold-line: rgba(216, 179, 90, 0.4);
    --accent: var(--hue-orange);
    --green: var(--success);
    --red: var(--danger);
    --amber: var(--hue-tan);
    --card: var(--card-bg);
    --row-hover: rgba(216, 179, 90, 0.04);
    /* tier tones */
    --tier-bronze: #c8945a;
    --tier-silver: #b3bac1;
    --tier-gold: var(--gold);
}

/* ---------- Reset / base ---------- */

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

body {
    font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--ink);
    color: var(--cream);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    min-height: 100vh;
    overflow-x: hidden;
    overscroll-behavior-x: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
    font-family: 'Bodoni Moda', Georgia, serif;
    font-weight: 400;
    color: var(--cream);
}

a {
    color: var(--cream);
    text-decoration: none;
    transition: color 0.15s;
}
a:hover { color: var(--gold); }

::selection { background: rgba(216, 179, 90, 0.3); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--card-border); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--text-dim); }

/* ---------- Sidebar ---------- */

.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--sidebar-width);
    background: var(--dark);
    border-right: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow-y: auto;
}

.sidebar-brand {
    padding: 28px 24px 18px;
    border-bottom: 1px solid var(--card-border);
    text-align: center;
}
.sidebar-brand h1,
.sidebar-brand .logo {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--cream);
}
.logo-accent { color: var(--gold); }
.sidebar-subtitle,
.logo-sub {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-size: 10px;
    font-style: normal;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--text-muted);
    font-weight: 500;
    margin-top: 4px;
}

.nm-sidebar-crest {
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    object-fit: contain;
}

.sidebar-nav { list-style: none; padding: 12px 0 16px; flex: 1; }

.nav-section-label {
    padding: 20px 26px 8px;
    font-size: 9px;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
}

.sidebar-nav li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 26px;
    color: var(--text-muted);
    font-family: 'Archivo', sans-serif;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    transition: all 0.2s ease;
    border-left: 2px solid transparent;
}
.sidebar-nav li a svg { opacity: 0.5; flex-shrink: 0; transition: opacity 0.2s; }
.sidebar-nav li a:hover { color: var(--cream); background: transparent; }
.sidebar-nav li a:hover svg { opacity: 1; }
.sidebar-nav li.active a {
    color: var(--gold);
    background: transparent;
    border-left-color: var(--gold);
}
.sidebar-nav li.active a svg { opacity: 1; }

.sidebar-footer {
    padding: 16px 24px 20px;
    border-top: 1px solid var(--card-border);
    font-size: 11px;
}
.sidebar-footer-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}
.sidebar-footer-info .label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    font-weight: 600;
}
.sidebar-footer-info .email { color: var(--text-muted); font-size: 11px; letter-spacing: 0.02em; }
.sidebar-footer-info .sync-note { color: var(--text-dim); font-size: 10px; letter-spacing: 0.04em; }
.sidebar-logout {
    color: var(--text-dim);
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.sidebar-logout:hover { color: var(--cream); }

/* ---------- Mobile menu button + overlay (hidden on desktop) ---------- */

.mobile-menu-btn, .sidebar-overlay { display: none; }

/* ---------- Main content ---------- */

.content {
    margin-left: var(--sidebar-width);
    padding: 32px 40px 60px;
    max-width: 1280px;
    min-height: 100vh;
}
/* Defensive: prevent any descendant from breaking horizontal containment */
.content { max-width: 1280px; overflow-x: hidden; }
.content img, .content iframe, .content video { max-width: 100%; height: auto; }
.content a, .content .bio-text, .content textarea, .content pre { word-break: break-word; overflow-wrap: anywhere; }
.content table { table-layout: auto; width: 100%; }

/* ---------- Page header (hub vocabulary) ---------- */

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 28px;
    gap: 20px;
    flex-wrap: wrap;
}
.page-title {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 28px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--cream);
    line-height: 1.2;
}
.page-subtitle {
    font-family: 'Archivo', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 6px;
}
.breadcrumb {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--gold); }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Legacy page header (.page-head h2 + .lede), restyled on the system */
.page-head {
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--card-border);
}
.page-head h2 {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 28px;
    font-weight: 600;
    color: var(--cream);
    line-height: 1.2;
    letter-spacing: 0;
}
.page-head .lede {
    font-family: 'Archivo', sans-serif;
    font-size: 10.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-top: 8px;
}

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

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    font-family: 'Archivo', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    line-height: 1.4;
}
.btn-primary {
    background: var(--gold);
    color: var(--on-gold);
    border-color: var(--gold);
    font-weight: 700;
}
.btn-primary:hover { filter: brightness(1.08); background: var(--gold); color: var(--on-gold); }
.btn-cta {
    background: var(--gold);
    color: var(--on-gold);
    border-color: var(--gold);
    font-weight: 700;
}
.btn-cta:hover { filter: brightness(1.08); background: var(--gold); color: var(--on-gold); }
.btn-secondary {
    background: transparent;
    color: var(--cream);
    border-color: var(--card-border);
}
.btn-secondary:hover { border-color: var(--text-muted); color: var(--cream); background: transparent; }
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}
.btn-ghost:hover { color: var(--cream); background: transparent; }
.btn-danger {
    background: transparent;
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 40%, transparent);
}
.btn-danger:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger); }

/* Members action buttons (reservations queue, bio queue) */
.btn-confirm {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
}
.btn-confirm:hover { background: color-mix(in srgb, var(--success) 22%, transparent); color: var(--success); }
.btn-decline {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--card-border);
}
.btn-decline:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); }
.btn-remove {
    background: transparent;
    color: var(--text-muted);
    border: 1px dashed var(--card-border);
    opacity: 0.8;
}
.btn-remove:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); border-style: solid; opacity: 1; }
.btn-edit {
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}
.btn-edit:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold); }

/* ---------- Pills (members filter-pill semantics + status modifiers) ---------- */

.pill {
    display: inline-block;
    padding: 6px 13px;
    font-family: 'Archivo', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--radius);
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
}
.pill:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: transparent; }
.pill.active {
    background: var(--gold);
    color: var(--on-gold);
    border-color: var(--gold);
}
.pill.active:hover { color: var(--on-gold); }

/* Status pill modifiers (stage-2 vocabulary) */
.pill-success { border-color: color-mix(in srgb, var(--success) 40%, transparent); color: var(--success); }
.pill-warning { border-color: color-mix(in srgb, var(--warning) 40%, transparent); color: var(--warning); }
.pill-danger  { border-color: color-mix(in srgb, var(--danger) 40%, transparent);  color: var(--danger); }
.pill-info    { border-color: color-mix(in srgb, var(--info) 40%, transparent);    color: var(--info); }
.pill-status {
    border-color: color-mix(in srgb, var(--gold) 40%, transparent);
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 7%, transparent);
}

/* Tier filter pills */
.pill.tier-pill { font-weight: 700; }
.pill.tier-pill.bronze.active { background: var(--tier-bronze); color: var(--on-gold); border-color: var(--tier-bronze); }
.pill.tier-pill.silver.active { background: var(--tier-silver); color: var(--on-gold); border-color: var(--tier-silver); }
.pill.tier-pill.gold.active   { background: var(--tier-gold);   color: var(--on-gold); border-color: var(--tier-gold); }

.tag {
    display: inline-block;
    padding: 3px 9px;
    margin-right: 4px;
    font-family: 'Archivo', sans-serif;
    font-size: 8.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
}

/* ---------- Badges (members vocabulary) ---------- */

.badge {
    display: inline-block;
    padding: 2px 9px;
    font-family: 'Archivo', sans-serif;
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 600;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    color: var(--text-muted);
    white-space: nowrap;
}
.badge.gold   { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.badge.brown  { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 50%, transparent); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.badge.regular    { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.badge.new        { color: var(--hue-orange); border-color: color-mix(in srgb, var(--hue-orange) 45%, transparent); }
.badge.lapsed     { color: var(--hue-tan); border-color: color-mix(in srgb, var(--hue-tan) 45%, transparent); }
.badge.cold       { color: var(--text-dim); }
.badge.no-visits  { color: var(--text-dim); opacity: 0.7; }
.badge.occasional { color: var(--text-muted); }

/* Status badges (used as badge-green / badge-warn / badge-gold / badge-red) */
.badge-green { color: var(--success); border-color: color-mix(in srgb, var(--success) 45%, transparent); background: color-mix(in srgb, var(--success) 7%, transparent); }
.badge-warn  { color: var(--hue-tan); border-color: color-mix(in srgb, var(--hue-tan) 45%, transparent); background: color-mix(in srgb, var(--hue-tan) 7%, transparent); }
.badge-gold  { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 7%, transparent); }
.badge-red   { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger) 7%, transparent); }

/* Tier badges (Bronze / Silver / Gold) */
.badge.tier-badge {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    padding: 3px 9px;
}
.badge.tier-badge.bronze { color: var(--tier-bronze); border-color: color-mix(in srgb, var(--tier-bronze) 55%, transparent); background: color-mix(in srgb, var(--tier-bronze) 8%, transparent); }
.badge.tier-badge.silver { color: var(--tier-silver); border-color: color-mix(in srgb, var(--tier-silver) 55%, transparent); background: color-mix(in srgb, var(--tier-silver) 8%, transparent); }
.badge.tier-badge.gold   { color: var(--tier-gold);   border-color: color-mix(in srgb, var(--tier-gold) 55%, transparent);   background: color-mix(in srgb, var(--tier-gold) 10%, transparent); }

/* Compact "M" pill for loyalty membership in the guests table */
.badge.gold-mini {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 50%, transparent);
    padding: 1px 5px;
    font-size: 8px;
    margin-left: 4px;
}

/* ---------- Stat cards ---------- */

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: none;
    transition: border-color 0.2s;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--cream);
}
.stat-card:hover { border-color: rgba(236, 231, 221, 0.4); color: var(--cream); }
.stat-label {
    font-family: 'Archivo', sans-serif;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
    font-weight: 600;
}
.stat-value {
    font-family: 'Bodoni Moda', serif;
    font-size: 36px;
    font-weight: 400;
    color: var(--cream);
    line-height: 1.1;
    margin: 6px 0 4px;
}
.stat-action {
    font-size: 9px;
    color: var(--gold);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
}
.stat-delta { font-size: 11px; letter-spacing: 0.04em; color: var(--text-dim); }
.stat-up { color: var(--success); }
.stat-down { color: var(--danger); }

/* Legacy stat tiles (.stat-grid > .stat .label/.value/.sub) */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.stat {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    transition: border-color 0.2s;
}
.stat:hover { border-color: rgba(236, 231, 221, 0.4); }
.stat .label {
    font-family: 'Archivo', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 6px;
}
.stat .value {
    font-family: 'Bodoni Moda', serif;
    color: var(--cream);
    font-size: 32px;
    font-weight: 400;
    line-height: 1.1;
}
.stat .sub {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.stat.accent .value { color: var(--hue-orange); }
.stat.warn .value { color: var(--hue-tan); }
.stat.brown { background: color-mix(in srgb, var(--gold) 6%, var(--card-bg)); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.stat.brown .value { color: var(--gold); }

/* ---------- Panels & legacy cards ---------- */

.panel {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    overflow: hidden;
    box-shadow: none;
}
.panel-header {
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}
.panel-header h2 {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 19px;
    font-weight: 400;
    color: var(--cream);
}
.panel-sub {
    font-family: 'Archivo', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-dim);
}
.panel-wide { grid-column: 1 / -1; }

/* Legacy .card with h3 section title */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 22px 24px;
    margin-bottom: 20px;
}
.card h3 {
    font-family: 'Archivo', sans-serif;
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

/* Two-column layout */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1024px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Data tables ---------- */

.data-table,
.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.data-table th,
.table th {
    text-align: left;
    padding: 12px 16px;
    font-family: 'Archivo', sans-serif;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-dim);
    font-weight: 600;
    background: transparent;
    border-bottom: 1px solid var(--card-border);
    white-space: nowrap;
}
.data-table td,
.table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--cream);
    vertical-align: middle;
}
.data-table tbody tr:hover,
.table tr:hover td { background: color-mix(in srgb, var(--gold) 3%, transparent); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table td strong, .table td strong { font-weight: 600; }
.data-table td a, .table td a { color: var(--cream); }
.data-table td a:hover, .table td a:hover { color: var(--gold); }

.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table .name { font-weight: 500; }
.table .name a { color: var(--cream); }
.table .name a:hover { color: var(--gold); }
.table .anon { color: var(--text-muted); font-style: italic; }
.table .right { text-align: right; }

/* Names never wrap or break mid-word — wide tables slide instead. (Overrides
   the defensive .content a overflow-wrap:anywhere rule above.) */
.data-table td.name, .table td.name,
.data-table td.name a, .table td.name a {
    white-space: nowrap;
    word-break: normal;
    overflow-wrap: normal;
}

/* On phones, pin the name column while the rest of the table slides under it. */
@media (max-width: 760px) {
    .table-scroll .sortable th:first-child,
    .table-scroll .sortable td.name {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--ink);
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .table-scroll .sortable tbody tr:hover td.name {
        background: color-mix(in srgb, var(--gold) 3%, var(--ink));
    }
    .table-scroll .sortable th:first-child::after,
    .table-scroll .sortable td.name::after {
        content: '';
        position: absolute;
        top: 0; right: -10px; bottom: 0;
        width: 10px;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent);
    }
    body[data-mode="light"] .table-scroll .sortable th:first-child::after,
    body[data-mode="light"] .table-scroll .sortable td.name::after {
        background: linear-gradient(90deg, rgba(0, 0, 0, 0.10), transparent);
    }
}

/* Clickable column headers */
.table.sortable th { padding: 0; }
.sort-link {
    display: block;
    padding: 12px 16px;
    color: var(--text-dim);
    text-decoration: none;
    font-family: 'Archivo', sans-serif;
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
}
.sort-link.num { text-align: right; }
.sort-link:hover { color: var(--gold); background: color-mix(in srgb, var(--gold) 5%, transparent); }
.sort-link.active { color: var(--gold); background: color-mix(in srgb, var(--gold) 5%, transparent); }
.sort-link .arrow { color: var(--gold); font-weight: 700; padding-left: 4px; }

.text-muted { color: var(--text-muted); }
.muted-inline { color: var(--text-muted); }
.muted { color: var(--text-muted); }
.small { font-size: 11px; }

/* ---------- Filter bar / controls ---------- */

.filter-bar,
.controls {
    display: flex;
    gap: 8px;
    margin-bottom: 18px;
    align-items: center;
    flex-wrap: wrap;
}
.filter-bar input:not([type="checkbox"]), .filter-bar select,
.controls input[type=search], .controls select {
    padding: 8px 12px;
    border: 1px solid var(--card-border);
    background: var(--input-bg);
    color: var(--cream);
    border-radius: var(--radius);
    font-size: 12px;
    font-family: 'Archivo', sans-serif;
    min-width: 160px;
}
.filter-bar input:focus, .filter-bar select:focus,
.controls input[type=search]:focus, .controls select:focus {
    outline: none;
    border-color: var(--gold);
}
.filter-bar input[type="search"],
.controls input[type=search] { flex: 1; min-width: 260px; }
.filter-bar select, .controls select { cursor: pointer; }
.controls .filter-pills { display: flex; gap: 4px; flex-wrap: wrap; }
.filter-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    padding: 0 6px;
    letter-spacing: 0.02em;
}
.filter-check input[type="checkbox"] { accent-color: var(--gold); width: 14px; height: 14px; min-width: 0; }

/* ---------- Pagination ---------- */

.pager { display: flex; gap: 8px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.pager a, .pager span {
    padding: 7px 13px;
    font-size: 11px;
    font-family: 'Archivo', sans-serif;
    letter-spacing: 0.08em;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: transparent;
    color: var(--cream);
}
.pager a:hover { border-color: var(--gold); color: var(--gold); }
.pager span { color: var(--text-muted); border-color: transparent; background: transparent; }

/* ---------- Forms ---------- */

input[type="text"], input[type="email"], input[type="number"], input[type="search"],
input[type="password"], input[type="url"], input[type="date"], input[type="time"],
input[type="tel"], select, textarea {
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    color: var(--cream);
    font-family: 'Archivo', sans-serif;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: var(--radius);
    transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: none;
}
select { cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--text-dim); }

.form-group { display: flex; flex-direction: column; gap: 5px; }
.form-group-wide { grid-column: 1 / -1; }
.form-group label {
    font-family: 'Archivo', sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: var(--text-muted);
}
.form-group input, .form-group select, .form-group textarea { width: 100%; }
.form-hint {
    text-transform: none;
    letter-spacing: 0.02em;
    font-weight: 400;
    color: var(--text-dim);
    font-size: 10px;
    font-style: italic;
}
.form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border-soft);
    padding-top: 16px;
    margin-top: 8px;
}

/* Legacy notes form */
.notes-form textarea {
    width: 100%;
    border: 1px solid var(--card-border);
    background: var(--input-bg);
    padding: 10px 12px;
    font-family: 'Archivo', sans-serif;
    font-size: 13px;
    color: var(--cream);
    border-radius: var(--radius);
    resize: vertical;
    min-height: 70px;
}
.notes-form textarea:focus { outline: none; border-color: var(--gold); }
.notes-form button {
    margin-top: 8px;
    padding: 9px 18px;
    background: var(--gold);
    color: var(--on-gold);
    border: 1px solid var(--gold);
    border-radius: var(--radius);
    font-family: 'Archivo', sans-serif;
    font-size: 10px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.15s;
}
.notes-form button:hover { filter: brightness(1.08); }
.notes-form .row + .row { margin-top: 16px; }

/* ---------- Flash messages ---------- */

.flash {
    padding: 12px 16px;
    margin-bottom: 10px;
    font-size: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--card-border);
    color: var(--cream);
    background: var(--card-bg);
}
.flash-success {
    background: color-mix(in srgb, var(--success) 9%, transparent);
    color: var(--success);
    border-color: color-mix(in srgb, var(--success) 35%, transparent);
}
.flash-info {
    background: color-mix(in srgb, var(--info) 9%, transparent);
    color: var(--info);
    border-color: color-mix(in srgb, var(--info) 35%, transparent);
}
.flash-error {
    background: color-mix(in srgb, var(--danger) 9%, transparent);
    color: var(--danger);
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

/* ---------- Empty states ---------- */

.empty-state,
.empty {
    padding: 36px 24px;
    color: var(--text-dim);
    text-align: center;
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 15px;
}
.empty-state-inline {
    padding: 14px 24px 20px;
    color: var(--text-dim);
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 14px;
}

/* ---------- Guest hero (guest_detail) ---------- */

.guest-hero {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 26px 28px;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: start;
}
.guest-hero h1 {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    color: var(--cream);
    font-size: 32px;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.15;
}
.guest-hero .meta {
    color: var(--text-muted);
    font-size: 13px;
    margin-top: 8px;
    letter-spacing: 0.02em;
}
.guest-hero .meta span + span::before { content: " · "; color: var(--gold); padding: 0 4px; }
.guest-hero .stats { text-align: right; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.guest-hero .stats .num {
    font-family: 'Bodoni Moda', serif;
    color: var(--cream);
    font-size: 26px;
    line-height: 1;
}
.guest-hero .stats .lbl {
    font-family: 'Archivo', sans-serif;
    font-size: 8.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
    font-weight: 600;
    margin-top: 3px;
}
@media (max-width: 700px) {
    .guest-hero { grid-template-columns: 1fr; }
    .guest-hero .stats { flex-direction: row; flex-wrap: wrap; align-items: flex-start; text-align: left; gap: 20px; }
    .guest-hero .stats > div { text-align: left; }
}

/* ---------- Distribution bar (insights) ---------- */

.dist-bar {
    display: flex;
    height: 24px;
    border: 1px solid var(--card-border);
    border-radius: var(--radius);
    background: var(--ink);
    overflow: hidden;
}
.dist-bar .seg { height: 100%; transition: flex-basis 0.3s; }
.dist-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    font-size: 11.5px;
    color: var(--text-muted);
}
.dist-legend .swatch {
    display: inline-block;
    width: 10px; height: 10px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 2px;
}

/* ==========================================================================
   MEMBERS-SPECIFIC COMPONENTS
   System-styled equivalents for the page-level vocabulary that the
   unconverted templates currently style inline. Stage 2: drop the inline
   <style> blocks and these take over under the same class names.
   ========================================================================== */

/* Section headings inside pages */
.section-head {
    font-family: 'Archivo', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 28px 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-soft);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}

/* Reservation cards */
.res-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border: 1px solid var(--card-border);
    background: var(--card-bg);
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
}
.res-card.res-pending { border-left: 2px solid var(--hue-tan); }
.res-card.res-confirmed { border-left: 2px solid var(--success); }
.res-card.res-past { opacity: 0.65; }
.res-main { flex: 1; min-width: 0; }
.res-name {
    font-weight: 600;
    color: var(--cream);
    font-size: 14px;
}
.res-name-link { color: var(--cream); }
.res-name-link:hover { color: var(--gold); }
.res-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.res-date {
    font-family: 'Archivo', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}
.res-occasion { font-size: 12px; color: var(--text-muted); font-style: italic; }
.res-notes { font-size: 12.5px; color: var(--text-muted); margin-top: 4px; }
.res-contact { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.res-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.res-list { display: flex; flex-direction: column; gap: 0; }
.res-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--gold);
    margin-right: 6px;
    vertical-align: middle;
}

/* Needs-name accent card (gold left border) */
.needs-name,
.visitor-card.needs-name {
    border-left: 3px solid var(--gold);
    background: color-mix(in srgb, var(--gold) 4%, var(--card-bg));
}

/* Visitor cards (today page) */
.visitor-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 16px 18px;
    margin-bottom: 10px;
}

/* Calendar (reservations month view) */
.cal-shell {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-soft);
}
.cal-nav-title {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--cream);
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow {
    padding: 8px 6px;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-size: 8.5px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 600;
    border-bottom: 1px solid var(--card-border);
}
.cal-cell {
    min-height: 56px;
    padding: 6px;
    border-right: 1px solid var(--border-soft);
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer;
    position: relative;
    transition: background 0.15s;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-cell.empty { cursor: default; opacity: 0.3; }
.cal-cell.has-event { background: color-mix(in srgb, var(--gold) 6%, transparent); }
.cal-cell.has-event:hover { background: color-mix(in srgb, var(--gold) 11%, transparent); }
.cal-cell.selected { background: color-mix(in srgb, var(--gold) 9%, transparent); }
.cal-cell:not(.empty):hover { background: color-mix(in srgb, var(--gold) 5%, transparent); }
.cal-day-num { font-size: 12px; color: var(--cream); font-variant-numeric: tabular-nums; }
.cal-dots { display: flex; gap: 3px; margin-top: 4px; flex-wrap: wrap; }
.cal-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
}
.cal-event-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: 8px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--info) 14%, transparent);
    color: var(--info);
}
.cal-detail {
    border-top: 1px solid var(--card-border);
    padding: 16px 18px;
    display: none;
}
.cal-detail.open { display: block; }
.cal-detail-title {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 17px;
    color: var(--cream);
    margin-bottom: 12px;
}
.cal-detail-empty { color: var(--text-muted); font-size: 13px; font-style: italic; }

/* Inline note rows (today page quick notes) */
.note-row { margin-top: 11px; display: flex; flex-direction: column; gap: 8px; }
.note-row textarea {
    width: 100%;
    background: var(--input-bg);
    border: 1px solid var(--card-border);
    color: var(--cream);
    padding: 8px 10px;
    font-family: 'Archivo', sans-serif;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    min-height: 52px;
    border-radius: var(--radius);
}
.note-row textarea:focus { outline: none; border-color: var(--gold); }
.note-row .actions { display: flex; align-items: center; gap: 11px; justify-content: flex-end; }
.note-row .saved {
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--success);
    opacity: 0;
    transition: opacity 0.2s;
    font-weight: 600;
}
.note-row .saved.show { opacity: 1; }
.note-row button, .name-row button.dismiss {
    padding: 7px 14px;
    font-family: 'Archivo', sans-serif;
    font-size: 9px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-weight: 700;
    background: color-mix(in srgb, var(--gold) 10%, transparent);
    color: var(--gold);
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
    cursor: pointer;
    border-radius: var(--radius);
}
.note-row button:hover, .name-row button.dismiss:hover { background: color-mix(in srgb, var(--gold) 18%, transparent); }
.note-row button:disabled, .name-row button.dismiss:disabled { opacity: 0.5; cursor: wait; }
.note-row button.clear, .name-row button.dismiss {
    background: transparent;
    color: var(--text-muted);
    border-color: var(--card-border);
    font-weight: 600;
}
.note-row button.clear:hover, .name-row button.dismiss:hover { background: transparent; color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }

/* Note timeline entries (guest detail) */
.note-timeline { display: flex; flex-direction: column; gap: 0; }
.note-entry {
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--cream);
}
.note-entry:last-child { border-bottom: none; }
.note-date {
    font-family: 'Archivo', sans-serif;
    font-size: 9.5px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

/* Bio candidate cards / queue rows */
.bio-row {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 14px 18px;
    margin-bottom: 10px;
    display: block;
    color: var(--cream);
    transition: border-color 0.15s;
}
.bio-row:hover { border-color: rgba(236, 231, 221, 0.35); color: var(--cream); }
.bio-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bio-row-name { font-weight: 600; font-size: 14px; color: var(--cream); }
.bio-row-meta { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.bio-row-chevron { color: var(--text-dim); }
.bio-preview {
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 13.5px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.55;
}
.bio-empty, .empty-bio {
    padding: 36px 24px;
    color: var(--text-dim);
    text-align: center;
    font-family: 'Bodoni Moda', serif;
    font-style: italic;
    font-size: 15px;
}
.research-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-lg);
    padding: 18px 20px;
    margin-bottom: 14px;
}
.confidence-pill, .conf-pill {
    display: inline-block;
    padding: 2px 9px;
    font-family: 'Archivo', sans-serif;
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: 999px;
    border: 1px solid var(--card-border);
    color: var(--text-muted);
}

/* ---------- Theme toggle (per-mode skin over nm-theme-toggle.css) ---------- */

body[data-mode="dark"] .nm-theme-toggle {
    background: rgba(11, 11, 10, 0.85);
    color: var(--cream);
    border-color: var(--card-border);
}
body[data-mode="light"] .nm-theme-toggle {
    background: rgba(248, 247, 244, 0.85);
    color: #2c2420;
    border-color: rgba(95, 48, 13, 0.18);
}

/* ---------- Bottom tab bar palette (markup styled by nm-bottom-nav.css) ---------- */

.mobile-tab-bar {
    --nm-tab-bg: rgba(248, 247, 244, 0.92);
    --nm-tab-text: rgba(44, 36, 32, 0.55);
    --nm-tab-active: #a3812a;
    --nm-tab-border: rgba(95, 48, 13, 0.14);
}
body[data-mode="dark"] .mobile-tab-bar, html.dark .mobile-tab-bar {
    --nm-tab-bg: rgba(11, 11, 10, 0.9);
    --nm-tab-text: rgba(236, 231, 221, 0.5);
    --nm-tab-active: #d8b35a;
    --nm-tab-border: rgba(236, 231, 221, 0.12);
}
.mobile-tab span { font-family: 'Archivo', sans-serif; letter-spacing: 0.08em; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
    .mobile-menu-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 16px; left: 16px;
        z-index: 101;
        background: var(--dark);
        border: 1px solid var(--card-border);
        border-radius: var(--radius);
        padding: 8px;
        color: var(--cream);
        cursor: pointer;
        box-shadow: none;
    }
    .sidebar { transform: translateX(-100%); transition: transform 0.25s; }
    body.sidebar-open .sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 99;
    }
    .content { margin-left: 0; padding: 64px 16px 96px; }
    .data-table th, .data-table td,
    .table th, .table td { padding: 10px 12px; }
    .page-title, .page-head h2 { font-size: 24px; }
    .res-card { flex-direction: column; }
}

@media (max-width: 640px) {
    .grid-cards { grid-template-columns: repeat(2, 1fr); }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   LIGHT MODE — cream inversion of the same language
   ========================================================================== */

body[data-mode="light"] {
    --dark: #ffffff;                       /* surfaces */
    --ink: #F8F7F4;                        /* page background */
    --cream: #2c2420;                      /* warm near-black foreground */
    --gold: #a3812a;                       /* gold adjusted for light contrast */
    --brown: #5f4312;                      /* deep bronze, distinct from gold */
    --card-bg: #ffffff;
    --card-border: rgba(95, 48, 13, 0.12);
    --text-muted: rgba(44, 36, 32, 0.66);
    --text-dim: rgba(44, 36, 32, 0.48);
    --success: #41764e;
    --warning: #9a7b22;
    --danger: #a8453a;
    --info: #3f6e83;
    --text: #2c2420;
    --black: #2c2420;
    --border: rgba(95, 48, 13, 0.12);
    --input-bg: #ffffff;

    --border-soft: rgba(95, 48, 13, 0.07);
    --on-gold: #fffdf8;

    --hue-neutral: rgba(44, 36, 32, 0.6);
    --hue-slate: #4f5d74;
    --hue-amber: #8a5d1f;
    --hue-tan: #7f6135;
    --hue-orange: #8f4f1d;
    --hue-teal: #2f5f5d;
    --hue-green: #2d5d2d;
    --hue-sage: #52614a;

    /* ---- MEMBERS LEGACY ALIASES, light values ---- */
    --text-color: var(--cream);
    --heading-color: var(--gold);
    --muted-color: var(--text-muted);
    --border-color: var(--card-border);
    --ok-text: var(--success);
    --bad-text: var(--danger);
    --cream-2: #EFEBE3;
    --muted: var(--text-muted);
    --muted-2: var(--text-muted);
    --line: var(--card-border);
    --line-2: var(--border-soft);
    --gold-soft: rgba(163, 129, 42, 0.14);
    --gold-line: rgba(163, 129, 42, 0.4);
    --accent: var(--hue-orange);
    --green: var(--success);
    --red: var(--danger);
    --amber: var(--hue-tan);
    --card: var(--card-bg);
    --row-hover: rgba(163, 129, 42, 0.05);
    --tier-bronze: #8a5a28;
    --tier-silver: #6f7780;
    --tier-gold: var(--gold);

    background: var(--ink);
    color: var(--cream);
}

/* Targeted light-mode fixes (things variables alone don't cover) */
body[data-mode="light"] ::selection { background: rgba(163, 129, 42, 0.25); }
body[data-mode="light"] ::-webkit-scrollbar-track { background: var(--ink); }

body[data-mode="light"] .stat-card:hover,
body[data-mode="light"] .stat:hover,
body[data-mode="light"] .bio-row:hover { border-color: rgba(44, 36, 32, 0.4); }

body[data-mode="light"] .data-table tbody tr:hover,
body[data-mode="light"] .table tr:hover td { background: rgba(163, 129, 42, 0.05); }

body[data-mode="light"] .dist-bar { background: var(--cream-2); }
body[data-mode="light"] .stat.brown { background: rgba(163, 129, 42, 0.07); }
body[data-mode="light"] .needs-name,
body[data-mode="light"] .visitor-card.needs-name { background: rgba(163, 129, 42, 0.05); }

/* Body copy at near-full ink, no washed grey */
body[data-mode="light"] p,
body[data-mode="light"] .res-name,
body[data-mode="light"] .note-entry { color: #2c2420; }
body[data-mode="light"] .page-subtitle,
body[data-mode="light"] .page-head .lede,
body[data-mode="light"] .panel-sub,
body[data-mode="light"] .text-muted,
body[data-mode="light"] .muted,
body[data-mode="light"] .muted-inline { color: rgba(44, 36, 32, 0.62); }