/* =====================================================================
   sabio-public.css -- the public sabiogolf.com pages in the portal's look
   =====================================================================
   James, 12 Nov 2026: "the public sabiogolf.com site does not have the same
   font/look that we decided to use. it needs to look similar to the portal."

   The portal look is sabio-ui.css (UI phases 1-2): Figtree for text,
   Fraunces for headings, warm paper behind white cards with an 18px radius
   and a soft shadow, pill buttons, the navy gradient top bar, and a dark
   mode. This file puts the marketing, legal and help pages in that look.

   Rules of this file
   - Loaded LAST on the public pages only (after styles.css, sabio-ui.css,
     marketing.css and each page's own <style>), so equal specificity
     resolves in its favour. Nothing in here is loaded by an app page.
   - Visual only: colour, type, radius, shadow, spacing. No wording, no
     content, nothing hidden.
   - Every colour is a sabio-ui.css token (--sg-*), so light and dark come
     from one place. Pages without ui.js (help, verify, 404, and the
     marketing pages before marketing.js runs) follow the phone/computer
     setting through the media query below.
   ===================================================================== */

/* ---- tokens ---------------------------------------------------------- */
:root {
  /* Sabio's own navy on the platform; a club's colour on a club site */
  --sp-brand: var(--cg-primary, #162b42);
  --sp-brand-ink: var(--sg-brand-ink, #162b42);
  --sp-bar: linear-gradient(135deg, var(--sp-brand), #0e1b29);
  --sp-link: var(--sp-brand-ink);
}
[data-theme="dark"] {
  /* the same lifted navy the portal uses in dark mode (ui.js cgBrandVars).
     --cg-primary too, for the buttons styles.css draws with it; where ui.js
     runs it sets the club's own dark tone inline, which still wins. */
  --cg-primary: #3e80c7;
  --sp-brand: #3e80c7;
  --sp-brand-ink: #9cc3ea;
  --sp-link: #9cc3ea;
}
/* No theme chosen on this page yet (no ui.js here, or before it runs):
   follow the device, with the same values sabio-ui.css uses for dark. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --sg-paper: #0d161f; --sg-surface: #16222e; --sg-surface-2: #1c2a38;
    --sg-ink: #e8eef4; --sg-ink-2: #c2ccd6; --sg-mute: #9aa8b6;
    --sg-line: #2b3a49; --sg-line-2: #233140;
    --sg-good: #6fd394; --sg-good-soft: #163526;
    --sg-warn: #f0c46a; --sg-warn-soft: #3a2f14;
    --sg-bad: #ff9b8f;  --sg-bad-soft: #3d1d1b;
    --sg-info: #9fb8f2; --sg-info-soft: #1d2a45;
    --sg-shadow: 0 1px 2px rgba(0,0,0,.35);
    --cg-primary: #3e80c7;
    --sp-brand: #3e80c7; --sp-brand-ink: #9cc3ea; --sp-link: #9cc3ea;
    color-scheme: dark;
  }
}
[data-theme="dark"] { color-scheme: dark; }

/* ---- base ------------------------------------------------------------ */
html { background: var(--sg-paper); }
body {
  font-family: var(--sg-font);
  background: var(--sg-paper);
  color: var(--sg-ink);
  -webkit-font-smoothing: antialiased;
}
[data-theme="dark"] body { background: var(--sg-paper); color: var(--sg-ink); }
/* marketing.css pinned the page light under the app's old invert filter */
html.cgDark { background: var(--sg-paper) !important; }
button, input, select, textarea { font-family: inherit; }
a { color: var(--sp-link); }

/* ---- top bar: the portal's navy bar ---------------------------------- */
.sp-nav {
  background: var(--sp-bar);
  border-bottom: 0;
  box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 4px 14px rgba(16,24,40,.10);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.sp-nav-inner { padding: 0.45rem 1rem; min-height: 44px; }
.sp-nav-inner img {
  height: 2rem; width: 2rem; object-fit: contain;
  background: #fff; border-radius: 8px; padding: 2px; box-sizing: border-box;
}
.sp-nav-inner > a strong {
  color: #fff !important; font-family: var(--sg-font); font-weight: 700;
  font-size: 1.02rem !important; letter-spacing: 0;
}
.sp-nav-links { font-weight: 600; font-size: 0.84rem; }
.sp-nav-links a { color: rgba(255,255,255,.82); }
.sp-nav-links a:hover { color: #fff; }
.sp-nav-links a.here { color: #fff; text-decoration-thickness: 2px; }
.sp-nav .sp-signin {
  background: rgba(255,255,255,.14); color: #fff !important;
  border: 1px solid rgba(255,255,255,.32); border-radius: var(--sg-r-pill);
  padding: 0.42rem 1rem; font-weight: 700;
}
.sp-nav .sp-signin:hover { background: rgba(255,255,255,.24); }
.sp-burger span { background: #fff; }
@media (max-width: 760px) {
  .sp-nav-links {
    background: var(--sg-surface); border-bottom: 1px solid var(--sg-line);
    box-shadow: 0 10px 24px rgba(16,24,40,.12);
  }
  .sp-nav-links a { color: var(--sg-ink); border-bottom-color: var(--sg-line-2); }
  .sp-nav-links a:hover, .sp-nav-links a.here { color: var(--sp-brand-ink); }
  .sp-nav .sp-signin {
    background: var(--sp-brand); color: #fff !important; border-color: var(--sp-brand);
  }
}

/* ---- hero ------------------------------------------------------------ */
.hero { padding: 3rem 1rem 2rem; }
.hero h1 {
  font-family: var(--sg-font-display); font-weight: 600; letter-spacing: -0.015em;
  font-size: clamp(1.85rem, 1.15rem + 3vw, 3rem); line-height: 1.12; color: var(--sg-ink);
}
.hero h1 em { color: var(--sp-brand-ink); }
.hero p { color: var(--sg-ink-2); }
.eyebrow {
  font-family: var(--sg-font); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.12em; color: var(--sp-brand-ink); opacity: 1;
}
[data-theme="dark"] .eyebrow { color: var(--sg-gold); }
.hero .cta { background: transparent !important; }

/* ---- buttons: the portal's pill, one height ------------------------- */
.btn-hero {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  min-height: 46px; padding: 0.65rem 1.35rem; box-sizing: border-box;
  border-radius: var(--sg-r-pill); font-family: var(--sg-font); font-size: 0.92rem; font-weight: 700;
  background: var(--sp-brand); color: #fff; border: 1px solid var(--sp-brand);
  box-shadow: var(--sg-shadow); transition: filter .12s ease, border-color .12s ease;
}
.btn-hero:hover { filter: brightness(1.08); }
.btn-hero:focus-visible { outline: 3px solid var(--sg-brand-line); outline-offset: 2px; }
.btn-hero.ghost {
  background: var(--sg-surface); color: var(--sp-brand-ink); border: 1px solid var(--sg-line);
  box-shadow: none;
}
.btn-hero.ghost:hover { filter: none; border-color: var(--sp-brand); }
[data-theme="dark"] .btn-hero.ghost { color: var(--sg-ink); }

/* ---- sections and cards --------------------------------------------- */
.sp-section { padding: 2.2rem 0; }
.sp-section h2 {
  font-family: var(--sg-font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: clamp(1.35rem, 1.05rem + 1.2vw, 1.8rem); line-height: 1.2; color: var(--sg-ink);
}
.sp-lede { color: var(--sg-mute); }

.feature, .door, .plan, .how div, .faq details {
  background: var(--sg-surface); color: var(--sg-ink);
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg);
  box-shadow: var(--sg-shadow);
}
.feature { padding: 1.15rem 1.1rem; }
.feature h3, .door h3, .plan h3 {
  font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-ink);
  letter-spacing: -0.005em;
}
.feature h3 { font-size: 1.02rem; }
.door h3 { font-size: 1.15rem; }
.feature p, .door p { color: var(--sg-mute); }
/* the coloured top accent of a portal card */
.door { border-top: 4px solid var(--sp-brand); padding: 1.25rem 1.15rem; }
.door:hover { border-color: var(--sp-brand); }
.door .go { color: var(--sp-brand-ink); }
.plan { padding: 1.25rem 1.05rem; }
.plan.hot { border: 1px solid var(--sp-brand); border-top-width: 4px; box-shadow: var(--sg-shadow); }
.plan .tag { background: var(--sp-brand); }
.plan .price {
  font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-ink); letter-spacing: -0.01em;
}
.plan .per { color: var(--sg-mute); }
.plan ul { color: var(--sg-ink-2); }
.how div { color: var(--sg-ink-2); padding: 1rem; }
.how b { color: var(--sg-ink); }
.faq details { padding: 0.8rem 1.05rem; }
.faq summary { color: var(--sg-ink); }
.faq p { color: var(--sg-ink-2); }

/* the call-to-action panel: the top bar's gradient */
.contact { background: var(--sp-bar); border-radius: var(--sg-r-lg); color: rgba(255,255,255,.84); }
.sp-section.contact { padding: 1.8rem 1rem; }   /* keep its own gutter (.sp-section above) */
.contact h2 { color: #fff; }
.contact input, .contact select, .contact textarea {
  min-height: 44px; font-size: 16px; border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm);
  background: var(--sg-surface); color: var(--sg-ink);
}
.contact .btn-hero { background: #fff; color: #162b42; border-color: #fff; }

.sp-foot { color: var(--sg-mute); }
.sp-foot a { color: var(--sp-link); }
.sp-foot .social a { background: var(--sp-brand); color: #fff; }

/* the SG chat sample on the home page (inline-styled; colours only) */
[data-theme="dark"] #caddie div[style*="background:#fff"] { background: var(--sg-surface) !important; border-color: var(--sg-line) !important; }
[data-theme="dark"] #caddie div[style*="background:#f1f5f9"] { background: var(--sg-surface-2) !important; color: var(--sg-ink) !important; border-color: var(--sg-line) !important; }
[data-theme="dark"] #caddie div[style*="color:#5f6977"] { color: var(--sg-mute) !important; }
/* the "AI CADDIE" badge: gold with navy text in both themes (dark mode turned the gold dark: 2:1) */
#caddie span[style*="background:var(--cg-accent)"] { background: #bca876 !important; color: #162b42 !important; }

/* ---- legal pages: privacy, terms, delete account --------------------
   These pages ARE the column (body max-width 46rem). The body becomes the
   portal's card on the paper background. */
body.sp-doc {
  background: var(--sg-surface); color: var(--sg-ink);
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow);
  margin: 1.25rem auto 2rem; padding: 1.6rem 1.5rem 1.8rem; box-sizing: border-box;
  border-top: 4px solid var(--sp-brand);
}
@media (max-width: 760px) { body.sp-doc { margin: 0.75rem; padding: 1.2rem 1.05rem 1.4rem; } }
[data-theme="dark"] body.sp-doc { background: var(--sg-surface); }
body.sp-doc h1 {
  font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-ink);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); letter-spacing: -0.01em; line-height: 1.2;
}
body.sp-doc h2 {
  font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-ink); font-size: 1.08rem;
}
body.sp-doc p, body.sp-doc li { color: var(--sg-ink-2); }
body.sp-doc .updated { color: var(--sg-mute); }
body.sp-doc .back { color: var(--sp-link); }
body.sp-doc .card {
  background: var(--sg-surface-2); border: 1px solid var(--sg-line); border-radius: var(--sg-r-md);
}
body.sp-doc .card.warn { background: var(--sg-bad-soft); border-color: color-mix(in srgb, var(--sg-bad) 30%, var(--sg-line)); }
body.sp-doc .lab { color: var(--sg-mute); letter-spacing: 0.1em; }
body.sp-doc input {
  min-height: 44px; box-sizing: border-box; font-size: 16px; color: var(--sg-ink);
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm);
}
body.sp-doc input:focus { outline: none; border-color: var(--sp-brand); box-shadow: 0 0 0 3px var(--sg-brand-tint); }
body.sp-doc button { min-height: 44px; border-radius: var(--sg-r-pill); padding: 0.55rem 1.15rem; font-weight: 700; }
body.sp-doc .danger { background: var(--sg-bad); color: #fff; }
[data-theme="dark"] body.sp-doc .danger { color: #1a0d0c; }
body.sp-doc .ok { color: var(--sg-good); }
body.sp-doc .bad { color: var(--sg-bad); }

/* ---- setup guide (help) --------------------------------------------- */
.help-hero h1 {
  font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-ink);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.3rem); letter-spacing: -0.01em;
}
.help-hero p { color: var(--sg-mute); }
.guide-tabs button {
  min-height: 44px; border-radius: var(--sg-r-pill); border: 1px solid var(--sg-line);
  background: var(--sg-surface); color: var(--sg-ink-2); font-weight: 700; box-shadow: var(--sg-shadow);
}
.guide-tabs button.on { background: var(--sp-brand); border-color: var(--sp-brand); color: #fff; }
.sec {
  background: var(--sg-surface); color: var(--sg-ink);
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow);
  padding: 1.2rem 1.25rem;
}
.sec h2 { font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-ink); }
.sec h3 { color: var(--sp-brand-ink); }
.sec p, .sec li { color: var(--sg-ink-2); }
.tip { background: var(--sg-good-soft); border-left-color: var(--sg-good); color: var(--sg-ink); }
.tip b { color: var(--sg-good); }
.warn { background: var(--sg-warn-soft); border-left-color: var(--sg-warn); color: var(--sg-ink); }
.warn b { color: var(--sg-warn); }
.steps li::before { background: var(--sp-brand); }
.btn-example { background: var(--sp-brand); border-radius: var(--sg-r-pill); padding: 0.4rem 0.9rem; }
.btn-example.ghost { background: var(--sg-surface); color: var(--sp-brand-ink); border: 1px solid var(--sg-line); }
.shot img { border-color: var(--sg-line); border-radius: var(--sg-r-md); }
.shot figcaption { color: var(--sg-mute); }
kbd { background: var(--sg-surface-2); border-color: var(--sg-line); color: var(--sg-ink); }

/* ---- small card pages: verify, 404, welcome -------------------------- */
.vf-card, .nf, .wz-card {
  background: var(--sg-surface); color: var(--sg-ink);
  border: 1px solid var(--sg-line); border-top: 4px solid var(--sp-brand);
  border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow);
}
.nf { padding: 1.6rem 1.4rem; }
.vf-h, .nf h1, .wz-card h1, .wz-card h2 {
  font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-ink); letter-spacing: -0.005em;
}
.vf-sub, .nf p, .wz-card p { color: var(--sg-ink-2); }
.vf-btn, .nf a, .wz-card .btn-hero {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
  border-radius: var(--sg-r-pill); font-weight: 700; box-sizing: border-box;
}
.vf-btn, .nf a.go { background: var(--sp-brand); color: #fff; border: 1px solid var(--sp-brand); }
.vf-btn.ghost, .nf a.alt { background: var(--sg-surface); color: var(--sp-brand-ink); border: 1px solid var(--sg-line); }
[data-theme="dark"] .vf-btn.ghost, [data-theme="dark"] .nf a.alt { color: var(--sg-ink); }
.vf-bad { color: var(--sg-bad); }
.wz-step, .wz-step.on { color: var(--sg-mute); }
.wz-step.on { color: var(--sp-brand-ink); }
.wz-step .dot { background: var(--sg-surface-2); color: var(--sg-mute); border: 1px solid var(--sg-line); }
.wz-step.on .dot { background: var(--sp-brand); color: #fff; border-color: var(--sp-brand); }
.wz-step.done, .wz-tick, .wz-msg.ok { color: var(--sg-good); }
.wz-step.done .dot { background: var(--sg-good); color: #fff; border-color: var(--sg-good); }
.wz-facts { border-color: var(--sg-line); }
.wz-facts td { border-top-color: var(--sg-line-2); }
.wz-facts td:first-child, .wz-lab, .wz-note { color: var(--sg-mute); }
.wz-facts td:last-child { color: var(--sg-ink); }
.wz-in {
  min-height: 44px; background: var(--sg-surface); color: var(--sg-ink);
  border: 1px solid var(--sg-line); border-radius: var(--sg-r-sm);
}
.wz-in:focus { border-color: var(--sp-brand); box-shadow: 0 0 0 3px var(--sg-brand-tint); }
.wz-msg.err { color: var(--sg-bad); }

/* ---- developers and custom-domain guides ----------------------------- */
.dv h1, .dv h2, .cd h2, .cd h3 {
  font-family: var(--sg-font-display); font-weight: 600; color: var(--sg-ink); letter-spacing: -0.005em;
}
.dv p, .cd p, .cd li { color: var(--sg-ink-2); }
.dv p code, .dv li code, .cd code, .cd kbd {
  background: var(--sg-surface-2); color: var(--sg-ink); border: 1px solid var(--sg-line);
}
.dv th, .dv td { border-bottom-color: var(--sg-line); }
.dv th, .cd th { color: var(--sg-mute); }
.cd th { background: var(--sg-surface-2); }
.cd th, .cd td { border-color: var(--sg-line); }
.dv pre { border-radius: var(--sg-r-md); }
.note, .cd .note {
  background: var(--sg-surface); border-left: 4px solid var(--sp-brand); color: var(--sg-ink);
  border-radius: 0 var(--sg-r-md) var(--sg-r-md) 0; box-shadow: var(--sg-shadow);
}
.cd .warn { background: var(--sg-warn-soft); border-left-color: var(--sg-warn); }
.cd .you { background: var(--sg-good-soft); border-left-color: var(--sg-good); }
.cd details {
  background: var(--sg-surface); border: 1px solid var(--sg-line); border-radius: var(--sg-r-md);
}
.cd summary { color: var(--sg-ink); }

/* ---- demos ------------------------------------------------------------ */
.demo-group-head { color: var(--sg-ink); border-bottom-color: var(--sp-brand); }
.demo-group-title { font-family: var(--sg-font-display); font-weight: 600; }
.demo-folder {
  background: var(--sg-surface); border: 1px solid var(--sg-line);
  border-radius: var(--sg-r-lg); box-shadow: var(--sg-shadow);
}
.demo-folder-head { color: var(--sg-ink); }
.demo-folder-n { color: var(--sg-mute); background: var(--sg-surface-2); }
.demo-item + .demo-item { border-top-color: var(--sg-line-2); }
.demo-item-play { background: var(--sp-brand); }
.demo-item-blurb, .demo-caption { color: var(--sg-mute); }

/* ---- dark-mode rules in styles.css written for club pages ------------
   They share class names with these pages (.cd is a countdown chip there,
   the custom-domain column here; .card, .plan). Undo them here, colours only. */
[data-theme="dark"] body[data-page="splash"] .cd {
  background: transparent !important; border-color: transparent !important; color: inherit !important;
}
[data-theme="dark"] body .plan.hot { border-color: var(--sp-brand) !important; }
[data-theme="dark"] body.sp-doc .card { background: var(--sg-surface-2) !important; border-color: var(--sg-line) !important; }
[data-theme="dark"] body.sp-doc .card.warn { background: var(--sg-bad-soft) !important; }