/* ============================================================
   The Stirling Club — Member app theme  (Soho-light / editorial)
   Loaded by member.html AFTER styles.css; member-scoped (ONLY member.html links it,
   so it can never re-light the dark staff floor or the white KDS).
   ⚠ DO NOT link this file from index.html / kds.html / any other shell — several rules here are
   global (a, .btn, .input, .modal-*, .muted, .empty) and WOULD leak into those shells if shared.
   Direction: research/member_ui_reference/SPEC_MEMBER.md (LOCKED, Josh 2026-06-24):
   Soho light/editorial BASE — cream/off-white surfaces, editorial serif headlines,
   generous whitespace, accented with Stirling gold #C5A55A + black #1A1A1A.
   ============================================================ */

/* Cormorant Garamond display serif. NOTE (Codex MED — ACCEPTED): loaded via the Google Fonts CDN, an
   ONLINE-ONLY enhancement for now — the service worker doesn't precache cross-origin, so offline falls
   back to the Georgia stack (graceful). Self-hosting the woff2 is a tracked go-live follow-up. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap');

/* ---- member-scoped tokens (body[data-theme=light] beats the styles.css scaffold) ---- */
body[data-theme="light"]{
  --paper:#f4f1e9;          /* warm cream page */
  --card:#fffdf8;           /* warm white card surface */
  --ink:#1c1a14;            /* warm near-black (text + the "dark" accent) */
  --cream:#1c1a14;          /* member markup uses var(--cream) for text → make it ink */
  --white:#100f0b;
  --muted:#615d4d;          /* warm grey metadata (AA on cream, ~5.5:1) */
  --muted-2:#6a6555;        /* lighter muted tier — nav-inactive/footer/placeholder/helper, still AA (~4.7:1) */
  --text-2:#4a463c; --text-3:#615d4d;
  --gold:#82641f;           /* AA deep antique gold for TEXT/icons (~4.6:1; small gold text sits on white cards ~4.7:1) */
  --gold-fill:#c5a55a;      /* brand gold #C5A55A for FILLS only (ink text on it = 7.4:1) */
  --gold-deep:#6f561c; --gold-soft:#a8842f;
  --gold-tint:rgba(197,165,90,.12);
  /* AA-safe semantic colors on light — fixes the shared badges (.b-active/.b-pending use these) AND the member.js inline status colors that now resolve to tokens */
  --ok:#157a3f; --ok-bg:#e8f6ee; --warn:#8a5a08; --warn-bg:#fbf0db; --danger:#b03030; --danger-bg:#fbe7e7;
  --line:#e2dbca; --line-soft:#ebe4d4; --sep:#e2dbca;
  --panel:#fffdf8; --panel-2:#f7f3ea;
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --shadow-card:0 1px 2px rgba(28,26,20,.05), 0 10px 30px rgba(120,100,45,.06);
}

/* ---- page + shell (override the inline dark radial-gradient) ---- */
body[data-theme="light"]{ background:var(--paper) !important; color:var(--ink); -webkit-font-smoothing:antialiased; }
.m-wrap{ background:transparent; }

/* ---- header / wordmark ---- */
.m-top{ padding:32px 24px 4px; }
.m-top img{ height:42px; filter:brightness(0) saturate(100%); opacity:.9; }   /* render the SC mark as a crisp black monogram on cream (sc-mark-dark.png is a faint partial gold — unusable) */
.m-top .wm{ font-family:var(--serif); font-size:12.5px; letter-spacing:5px; color:var(--gold); font-weight:600; margin-top:11px; }

/* ---- welcome ---- */
.m-hello{ font-family:var(--serif); font-size:34px; font-weight:600; color:var(--ink); letter-spacing:.2px; margin-top:20px; line-height:1.1; }
.m-tier{ color:var(--muted); font-size:11px; letter-spacing:2.5px; margin-top:7px; }

/* ---- house account — clean light hero, gold eyebrow, serif amount ---- */
.m-balance{ background:var(--card); border:1px solid var(--line-soft); border-radius:18px;
  box-shadow:var(--shadow-card); padding:24px 24px 26px; margin:22px 24px; }
.m-balance .l{ color:var(--gold); font-size:10.5px; letter-spacing:2.5px; font-weight:600; }
.m-balance .v{ font-family:var(--serif); font-size:46px; font-weight:600; color:var(--ink); margin-top:2px; letter-spacing:.5px; }

/* ---- section heads — editorial serif ---- */
.m-sec h3{ font-family:var(--serif); font-size:24px; font-weight:600; color:var(--ink); letter-spacing:.2px; margin:28px 0 12px; }

/* ---- quick-action pills ---- */
.m-pillrow{ gap:11px; }
.qp{ background:var(--card); border:1px solid var(--line-soft); border-radius:16px; padding:16px 8px 14px; box-shadow:var(--shadow-card); }
.qp .ic{ color:var(--gold); font-size:20px; }
.qp .lb{ color:var(--ink); font-size:11px; margin-top:8px; letter-spacing:.2px; }

/* ---- cards / events / line items ---- */
.m-card{ background:var(--card); border:1px solid var(--line-soft); border-radius:16px; box-shadow:var(--shadow-card); padding:18px; }
.m-event .d{ color:var(--gold); }
.m-event .t{ font-family:var(--serif); font-size:21px; color:var(--ink); font-weight:600; }
.m-event .x{ color:var(--muted); }
.m-event .row{ color:var(--muted); }
.le{ border-bottom:1px solid var(--line-soft); color:var(--ink); }

/* ---- connect / member directory ---- */
.dir-intro{ color:var(--muted); }
.dir-card{ background:var(--card); border:1px solid var(--line-soft); border-radius:16px; box-shadow:var(--shadow-card); }
.dir-av{ background:linear-gradient(135deg,#efe7d3,#fffdf8); border:1px solid var(--line-soft); color:var(--gold); }
.dir-nm{ font-family:var(--serif); color:var(--ink); font-size:16px; font-weight:600; }
.dir-sub{ color:var(--muted); }
.dir-tier{ color:var(--gold); }

/* ---- membership card — the ONE deliberate dark/gold accent (Amex-black feel) ---- */
.card-id{ background:linear-gradient(155deg,#23201a 0%,#14120d 100%); border:1px solid var(--gold-deep);
  border-radius:20px; color:#f4f1e9; box-shadow:0 14px 40px rgba(28,24,14,.22);
  /* the ONE dark accent card → RE-LIGHT the inherited tokens so its descendant text (wordmark, name,
     member#, muted lines — some are inline var(--*)) is AA on the dark gradient, not the dark light-theme values */
  --gold:#cda85f; --cream:#f4f1e9; --white:#ffffff; --ink:#f4f1e9;
  --muted:rgba(244,241,233,.84); --muted-2:rgba(244,241,233,.66); }
.card-id .qr{ background:#fff; }

/* ---- photo hero — full-bleed bundled-image card (home "From the Club" feature + event cards) ----
   Bundled Stirling photos live in /img/club/ (repo-hosted, no auth dependency). <img>+object-fit:cover
   over a dark scrim, gold eyebrow + serif title overlaid at the base. min-height reserves space (no CLS). */
.m-hero{ position:relative; overflow:hidden; border-radius:16px; min-height:300px; display:flex;
  flex-direction:column; justify-content:flex-end; border:1px solid var(--line-soft);
  box-shadow:var(--shadow-card); background:#16252a;
  transition:transform 140ms cubic-bezier(.2,.6,.2,1), box-shadow 200ms ease; }
.m-hero > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
/* Two-layer protection: a gentle full-image wash (mood) + a gradient that the text block carries itself
   (hugs its own height) — guarantees legible white text over ANY photo, incl. high-key sunlit shots,
   without over-darkening the vivid top of the image. text-shadow is the final backstop. */
.m-hero .scrim{ position:absolute; inset:0; background:linear-gradient(180deg,
  rgba(14,12,8,0) 38%, rgba(14,12,8,.18) 70%, rgba(14,12,8,.40) 100%); }
.m-hero .hero-body{ position:relative; padding:48px 18px 20px; color:#f4f1e9;
  background:linear-gradient(180deg, rgba(14,12,8,0) 0%, rgba(14,12,8,.5) 34%, rgba(14,12,8,.82) 72%, rgba(14,12,8,.93) 100%); }
.m-hero .hero-eyebrow{ font-size:10.5px; letter-spacing:2.5px; font-weight:600; color:#ecd396;
  text-transform:uppercase; margin-bottom:7px; text-shadow:0 1px 8px rgba(0,0,0,.45); }
.m-hero .hero-title{ font-family:var(--serif); font-size:28px; font-weight:600; line-height:1.04; letter-spacing:.3px;
  text-shadow:0 1px 16px rgba(0,0,0,.5); }
.m-hero .hero-sub{ font-size:12.5px; line-height:1.5; color:rgba(244,241,233,.94); margin-top:6px;
  text-shadow:0 1px 10px rgba(0,0,0,.55); }   /* full body (no clamp) — parity with the old announcement card; the body's own gradient handles any height */
.m-hero .hero-cta{ margin-top:13px; display:inline-block; background:var(--gold-fill); color:#1c1a14;
  font-size:12px; font-weight:600; letter-spacing:.3px; padding:9px 18px; border-radius:999px; }
/* pointer/press/focus only for CLICKABLE heroes (role=button) — decorative event heroes get no false affordance */
.m-hero[role="button"]{ cursor:pointer; }
.m-hero[role="button"]:active{ transform:scale(.985); }
.m-hero[role="button"]:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* compact variant for event cards inside a list */
.m-hero.m-hero-sm{ min-height:194px; margin-bottom:10px; }
.m-hero.m-hero-sm .hero-title{ font-size:21px; }
/* event cards: photo header flush to the rounded card top + a foot strip for meta / RSVP */
.m-card.m-event-photo{ padding:0; overflow:hidden; }
.m-event-photo .m-hero{ border:none; box-shadow:none; border-radius:0; margin:0; }
.m-event-photo .m-event-foot{ padding:14px 16px 16px; }
@media (prefers-reduced-motion: reduce){ .m-hero{ transition:none } .m-hero[role="button"]:active{ transform:none } }

/* ---- bottom nav — light, gold active (Soho-style) ---- */
.mbar{ background:rgba(255,253,248,.94); -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px); border-top:1px solid var(--line-soft); }
.mbar a{ color:var(--muted-2); }
.mbar a.active{ color:var(--gold); }

/* ---- buttons — pills (gold-fill primary, hairline ghost) ---- */
.btn{ border-radius:999px; font-weight:600; letter-spacing:.3px; }
.btn-gold{ background:var(--gold-fill); color:#1c1a14; border:1px solid var(--gold-deep); }
.btn-gold:hover{ background:var(--gold-soft); }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); }

/* ---- login ---- */
.login-m{ padding:78px 30px; }
.login-m .muted{ color:var(--muted); }
body[data-theme="light"] .input, body[data-theme="light"] select, body[data-theme="light"] textarea{ background:var(--card); border:1px solid var(--line); color:var(--ink); border-radius:12px; }
.input::placeholder{ color:var(--muted-2); }

/* ---- modal ---- */
.modal-box{ background:var(--card); color:var(--ink); border:1px solid var(--line-soft); border-radius:18px; }
.modal-head{ font-family:var(--serif); font-size:23px; font-weight:600; color:var(--ink); }
.modal-foot{ border-top:1px solid var(--line-soft); }

/* ---- footer + misc ---- */
.m-foot{ color:var(--muted-2); letter-spacing:1.5px; }
.muted{ color:var(--muted); }
.empty{ color:var(--muted); }
a{ color:var(--gold); }

/* ---- interaction polish (UI/UX review §2/§7): touch targets, cursor, press feedback, focus, reduced-motion ---- */
.mbar a, .qp{ cursor:pointer; }
.mbar a{ padding:12px 0; min-height:48px; justify-content:center; }   /* ≥44pt touch target (padding is reliable; min-height alone didn't grow the flex child past ~39px) */
.qp, .mbar a, .m-card, .dir-card, .btn{ transition:transform 120ms cubic-bezier(.2,.6,.2,1), box-shadow 200ms ease; }
.qp:active, .dir-card:active, .btn:active{ transform:scale(.97); }
.mbar a:active{ transform:scale(.92); }
/* keyboard focus ring — visible once nav/pills/cards get tabindex+role in member.js (flagged coordination item) */
.mbar a:focus-visible, .qp:focus-visible, .m-card:focus-visible, .dir-card:focus-visible, .btn:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  .qp, .mbar a, .m-card, .dir-card, .btn{ transition:none; }
  .qp:active, .mbar a:active, .dir-card:active, .btn:active{ transform:none; }
}

/* ---- Book tab strip (B2 unified booking — Soho horizontal tabs, Stirling taxonomy) ---- */
.bk-tabs{ display:flex; gap:2px; margin:10px 16px 14px; border-bottom:1px solid var(--line); }
.bk-tab{ appearance:none; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  min-height:48px; padding:0 14px; font-family:var(--sans); font-size:12px; font-weight:600;
  letter-spacing:2px; text-transform:uppercase; color:var(--muted-2); }
.bk-tab.on{ color:var(--ink); border-bottom-color:var(--gold-fill); }
.bk-tab:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }

/* ---- live availability slot grid (B2 BEAT-IT: books against the live ledger) ---- */
.br-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; max-height:200px; overflow-y:auto; padding:2px; }
.br-slot{ appearance:none; min-height:44px; border:1px solid var(--line); border-radius:9px; background:#fff;
  font-family:var(--sans); font-size:12.5px; color:var(--ink); cursor:pointer; }
.br-slot.sel{ background:var(--gold-fill); border-color:var(--gold-fill); font-weight:600; }
.br-slot:disabled{ opacity:.35; text-decoration:line-through; cursor:default; }
.br-slot:focus-visible{ outline:2px solid var(--gold); outline-offset:1px; }