/* ============================================================
   NETWORKING GOLF — LIGHT THEME
   Loaded after site.css and programs.css. Everything real in this
   category — club sites, Volo, GolfNow, every local league — is
   white, photographic and short. Dark reads as a concept deck.

   The trick that makes this a layer rather than a rewrite: site.css
   uses --paper as the FOREGROUND on dark (usually via
   color-mix(--paper N%, transparent)) and --pine-* as backgrounds.
   Redefining --paper to ink and --pine-* to white therefore
   inverts every text rule in both stylesheets for free. What's
   left is the handful of components that hardcoded a light tint
   as a surface — those are overridden explicitly below.
   ============================================================ */

:root {
  /* --paper is now the ink. Every color-mix(--paper N%) in site.css
     and programs.css becomes grey text on white, correctly. */
  --paper:     #16201e;
  --paper-dim: #3a4642;
  --paper-dark:#55605a;

  /* --pine-* are now the page and its surfaces. */
  --pine-950: #ffffff;
  --pine-900: #f6f8f4;
  --pine-850: #f1f4ee;
  --pine-800: #e9ede5;
  --pine-700: #dde3d8;

  /* --ink stays dark: it is the text on light cards. */
  --ink:      #16201e;
  --ink-soft: #55605a;

  --surface:  #f5f7f2;   /* tinted band */
  --line:     rgba(22,32,30,.13);
  --line-firm:rgba(22,32,30,.22);

  --brass:     #8a6d28;  /* darkened so it passes on white */
  --brass-soft:#6f571f;
  --flag:      #8c2f39;
  --flag-deep: #6e232b;
  --pencil:    #2f6096;
  --fairway:   #4e7a56;
  --fairway-bright: #3f6b48;

  --shadow: 0 1px 2px rgba(22,32,30,.05), 0 8px 28px rgba(22,32,30,.07);
}

body {
  background: var(--pine-950);
  color: var(--ink);
}
::selection { background: var(--flag); color: #fff; }
:focus-visible { outline: 2px solid var(--pencil); }

/* ---------- type ---------- */
.kicker, .panel .kicker { color: var(--flag); }
.h2 em, .hero-h1 em, .home-h1 em, .final-h2 em, .prog-hero h1 em { color: var(--flag); }
.lede, .section-sub { color: var(--ink-soft); }
.mono-inline { color: var(--brass-soft); }
.eyebrow {
  color: var(--ink-soft);
  border-color: var(--line-firm);
  background: var(--pine-900);
}
.eyebrow-dot { background: var(--flag); }
.breadcrumb, .breadcrumb a { color: var(--ink-soft); }

/* ---------- buttons ----------
   The gold fill was the loudest thing on the page and read as a
   template CTA. Primary is now the slate — quiet, high contrast,
   what a real business uses. Claret is kept for accents. */
.btn-solid {
  background: #1b2422; color: #fff;
  box-shadow: 0 1px 2px rgba(22,32,30,.16);
}
.btn-solid:hover { background: #2b3733; box-shadow: 0 4px 14px rgba(22,32,30,.2); }
.btn-ghost {
  color: var(--ink); background: #fff;
  border: 1px solid var(--line-firm);
}
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--pine-900); }
.btn-line { color: var(--ink); border: 1.5px solid var(--line-firm); background: #fff; }
.btn-line:hover { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- nav ---------- */
.nav {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid var(--line);
}
.nav-links a, .nav-back { color: var(--ink-soft); }
.nav-links a:hover, .nav-back:hover { color: var(--flag); }
.nav-word, .foot-word { color: var(--ink); }
.nav-word em, .foot-word em { color: var(--flag); }
.mark-ground { stroke: var(--line-firm); stroke-width: 2; stroke-linecap: round; }
.mark-pole { stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; }
.mark-flag { fill: var(--flag); }
.mark-ball { fill: var(--ink); }
.nav-burger span { background: var(--ink); }
.nav-sheet { background: #fff; border-bottom: 1px solid var(--line); }
.nav-sheet a { color: var(--ink); border-color: var(--line); }
.skip-link { background: var(--ink); color: #fff; }

/* ---------- surfaces that hardcoded a light tint on dark ----------
   These were "white at 3–5%" on the board. On white that is nothing,
   so each becomes a real card: white, hairline, soft shadow. */
.avatar-card, .sig-card, .tm-card, .feed-row, .dest-card,
.pcats article, .pcard, .gets article, .dropin, .applybox,
.course-card, .div-card, .faq-item, .modal-card, .cm-fallback {
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.avatar-card, .sig-card, .tm-card, .dest-card, .pcard,
.gets article, .course-card, .div-card { box-shadow: var(--shadow); }

.feed-row { box-shadow: 0 1px 2px rgba(22,32,30,.04); }
.feed-row:hover { border-color: var(--line-firm); }
.feed-date { border-right-color: var(--line); }
.feed-course { color: var(--ink); }
.feed-meta, .t-counties, .dest-venue, .avatar-line, .dropin-fine,
.foot-note, .hero-facts, .final-fine, .disclosure, .terr caption,
.sc-note, .sc-per, .pc-per, .cc-city, .cc-note, .div-fine, .course-footnote {
  color: var(--ink-soft);
}
.feed-mon { color: var(--flag); }
.feed-day { color: var(--ink); }
.feed-price { color: var(--brass-soft); }

/* dashed "pending / empty" boxes */
.feed-empty, .pending, .refer, .corporate, .page-cta {
  background: var(--pine-900);
  border-color: var(--line-firm);
  color: var(--ink);
}
.feed-empty p, .pending p, .refer p, .corporate p { color: var(--ink-soft); }

/* ---------- the tinted band (was the light island on dark) ---------- */
.panel {
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  border: 1px solid var(--line);
}
.why-item { border-top-color: var(--ink); }
.why-item p, .season-line p { color: var(--ink-soft); }
.why-stat { color: var(--ink); }
.why-stat span { color: var(--brass-soft); }
.season-line li { border-left-color: var(--line-firm); }
.sl-when { color: var(--flag); }

/* ---------- how-it-works ---------- */
.how-step { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.how-step p { color: var(--ink-soft); }
.tee-num { color: var(--flag); }

/* ---------- courses ---------- */
.cc-plate { background: var(--pine-800); }
.cc-contours path { stroke: rgba(22,32,30,.14); }
.cc-mono { color: rgba(22,32,30,.22); }
.cc-geo { color: var(--ink-soft); }
.cc-fee { color: var(--ink); }
.cc-holes { color: var(--ink-soft); }
.tag-north { background: rgba(138,109,40,.12); color: var(--brass-soft); border-color: rgba(138,109,40,.34); }
.tag-south { background: rgba(78,122,86,.14); color: var(--fairway-bright); border-color: rgba(78,122,86,.36); }
.cf-btn { color: var(--ink-soft); border-color: var(--line-firm); }
.cf-btn.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ---------- pricing ---------- */
.scorecard { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.sc-row { border-color: var(--line); }
.sc-featured { background: var(--pine-900); }
.sc-brand, .sc-tier, .sc-price, .pc-tier, .pc-price { color: var(--ink); }
.sc-brand em { color: var(--flag); }
.dot { background: var(--fairway); }
.pc { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.pc-featured { border-color: var(--ink); }
.pc-flag, .sc-flag-note { background: var(--flag); color: #fff; }
.pc-list li { color: var(--ink-soft); border-color: var(--line); }
.pc-muted { color: var(--ink-soft); }
.dropin-amount { color: var(--ink); }
.dropin-per { color: var(--ink-soft); }
.dropin { background: var(--pine-900); border-color: var(--line-firm); }
.dropin-price { border-left-color: var(--line); }
@media (max-width: 860px) { .dropin-price { border-top-color: var(--line); } }

/* ---------- FAQ ---------- */
.faq-item[open] { background: var(--pine-900); border-color: var(--line-firm); }
.faq-item summary { color: var(--ink); }
.faq-item summary::after { color: var(--flag); }
.faq-item p { color: var(--ink-soft); }

/* ---------- status chips ---------- */
.chip-prov { background: rgba(47,96,150,.1); color: var(--pencil); border-color: rgba(47,96,150,.36); }
.sig-holes { background: rgba(138,109,40,.12); color: var(--brass-soft); border-color: rgba(138,109,40,.34); }
.avatar-tag { background: rgba(140,47,57,.09); color: var(--flag); border-color: rgba(140,47,57,.3); }
.t-live  { background: rgba(78,122,86,.13); color: var(--fairway-bright); border-color: rgba(78,122,86,.36); }
.t-open  { background: rgba(140,47,57,.09); color: var(--flag); border-color: rgba(140,47,57,.32); }
.t-queue { background: var(--pine-800); color: var(--ink-soft); border-color: var(--line-firm); }
.dest-meta li { background: var(--pine-800); color: var(--ink-soft); border-color: var(--line); }

/* ---------- territory table ---------- */
.terr th { color: var(--flag); border-bottom-color: var(--line-firm); }
.terr td { border-bottom-color: var(--line); }
.terr .t-market { color: var(--ink); }

/* ---------- champion / partner pages ---------- */
.ladder li { border-top-color: var(--line-firm); }
.ladder p, .gets p, .pcats p, .pcard p, .applybox p, .avatar-card p,
.sig-card p, .dest-body > p { color: var(--ink-soft); }
.pcats h3 { color: var(--brass-soft); }
.sig-note { color: var(--brass-soft); border-top-color: var(--line); }
.applybox { background: var(--pine-900); border-color: var(--line-firm); }
.applybox ul li { color: var(--ink-soft); border-bottom-color: var(--line); }
.applybox ul li::before { color: var(--flag); }

/* ---------- waitlist + final ---------- */
.panel-waitlist { background: var(--surface); }
.wl-states li { background: #fff; border-color: var(--line-firm); color: var(--ink-soft); }
.wl-yours { background: var(--flag) !important; color: #fff !important; border-color: var(--flag) !important; }
.wl-fallback { color: var(--ink); }
.wl-fallback p { color: var(--ink-soft); }
.final { background: var(--surface); border-top: 1px solid var(--line); }
.final-eyebrow { color: var(--flag); }
.final-h2 { color: var(--ink); }
.final-sub { color: var(--ink-soft); }

/* ---------- footer: the one dark surface left, as an anchor ---------- */
.footer { background: #16201e; color: #e7ebe3; border-top: 0; }
.footer .foot-word { color: #fff; }
.footer .foot-tag, .footer .foot-note, .foot-legal p { color: rgba(231,235,227,.68); }
.foot-head { color: #b99a4a; }
.foot-col a { color: rgba(231,235,227,.86); }
.foot-col a:hover { color: #fff; }
.footer .mark-pole { stroke: #fff; }
.footer .mark-ball { fill: #fff; }
.footer .mark-ground { stroke: rgba(255,255,255,.35); }

/* ---------- modal + sticky bar ---------- */
.modal-scrim { background: rgba(22,32,30,.5); }
.modal-card { box-shadow: 0 30px 80px rgba(22,32,30,.28); }
.modal-close { color: var(--ink); }
.cm-choice { background: var(--pine-900); border-color: var(--line-firm); }
.cm-choice:hover { border-color: var(--ink); }
.cmc-meta { color: var(--ink-soft); }
.cm-eyebrow { color: var(--flag); }
.cm-price-line { border-top-color: var(--line); color: var(--ink-soft); }
.division-bar { background: #16201e; color: #fff; border-top: 0; }
.division-bar .db-counties { color: rgba(231,235,227,.7); }
.division-bar .db-switch { color: rgba(231,235,227,.8); }

/* ---------- utah division map ---------- */
.udiv-card { background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); }
.map-title { color: var(--ink); }
.map-sub { color: var(--ink-soft); }
.ucounty-mute { fill: var(--pine-800); stroke: #fff; }
.ucounty-north { fill: #b99a4a; stroke: #fff; }
.ucounty-south { fill: #6f9a76; stroke: #fff; }
.ulabel-pill { fill: rgba(22,32,30,.9); stroke: none; }
.ulabel-name { fill: #fff; }
.udl { background: var(--pine-900); border-color: var(--line-firm); color: var(--ink); }
.udl:hover { border-color: var(--ink); }
.udl em { color: var(--ink-soft); }
.udl-north .udl-dot { background: #b99a4a; }
.udl-south .udl-dot { background: #6f9a76; }

/* ---------- national map (home) ---------- */
body.home { background: var(--pine-950); }
body.home .state { fill: #eef1ea; stroke: #fff; }
body.home .state:hover { fill: #cfd8c8; }
/* a state with markets sits a step darker than an empty one, so the spread
   of the launch reads before you hover a single pin */
body.home .state-launching { fill: #dde4d7; }
body.home .state-launching:hover { fill: #cfd8c8; }
body.home .state-utah { fill: #6f9a76; filter: none; }
body.home .state-utah:hover { fill: #5d8664; }
/* pins need a darker brass on paper than they do on the dark map */
body.home .mkt-dot { fill: #8f6f28; stroke: #fff; stroke-width: .9; }
body.home .mkt-pin-open .mkt-dot { fill: #fff; stroke: #8f6f28; stroke-width: 1.3; }
body.home .mkt-pin:hover .mkt-dot,
body.home .mkt-pin:focus-visible .mkt-dot { fill: var(--flag); stroke: #fff; }
.lg { color: var(--ink-soft); }
.lg-mkt::before { background: #8f6f28; box-shadow: 0 0 0 3px rgba(143,111,40,.16); }
.lg-open::before { background: #fff; border: 1.5px solid #8f6f28; }
.lg-ghost::before { border-color: var(--line-firm); }
.home-foot { border-top: 1px solid var(--line); }
.home-foot a, .home-foot p { color: var(--ink-soft); }
.home-status-line { color: var(--ink); }
.home-status-line span { color: var(--ink-soft); }
.map-tip { background: var(--ink); color: #fff; }
.home-wl-link { color: var(--ink-soft); }
.home-wl-link:hover { color: var(--flag); }
.map-enter-chip { background: var(--ink); color: #fff; }

/* ---------- interior pages ---------- */
.page p, .page li { color: var(--ink-soft); }
.page a:not(.btn) { color: var(--flag); }
.page h1, .page h2 { color: var(--ink); }
.portrait { border-color: var(--line); box-shadow: var(--shadow); }
.portrait figcaption { background: var(--pine-900); color: var(--ink-soft); }

/* ---------- gallery + band ---------- */
.shot-cap { color: #fff; }
.gallery-head .section-sub { color: var(--ink-soft); }
.band::after { background: linear-gradient(180deg, transparent 40%, rgba(22,32,30,.82)); }
.band-quote p { color: #fff; }
.band-quote cite { color: rgba(255,255,255,.75); }

/* ---------- hero, now photographic ---------- */
.hero-sign { color: var(--ink-soft); }
.hero-sign::before { color: var(--flag); }
.hero-sub { color: var(--ink-soft); }

/* ============================================================
   SPECIFICITY FIXES
   A few rules in site.css are more specific than a bare class,
   so they survive the inversion and land light-on-light.
   ============================================================ */

/* The step marker is a filled disc in site.css, so setting only the
   text colour left claret on brass. Make it the slate disc. */
.tee-num {
  background: #1b2422;
  color: #fff;
  box-shadow: none;
}
/* the champion-page ladder reuses the class as a plain label, not a disc */
.ladder .tee-num { background: none; color: var(--flag); }

/* .cc-division .tag-* is two classes deep and was tuned for the board. */
.cc-division .tag-north {
  background: rgba(138,109,40,.14); color: var(--brass-soft);
  border-color: rgba(138,109,40,.4);
}
.cc-division .tag-south {
  background: rgba(78,122,86,.16); color: var(--fairway-bright);
  border-color: rgba(78,122,86,.4);
}

/* Gallery captions sit over photographs with a scrim — keep them white
   and make sure the scrim is actually there on a light page. */
.shot-cap {
  background: linear-gradient(180deg, transparent, rgba(22,32,30,.78));
  color: #fff;
}
.shot-tag { color: #fff; }

/* Chip text is 10px — AA wants 4.5:1 at that size, and the mid pencil
   only reached 2.8 on the tinted fill. */
.chip-prov { color: #23486f; border-color: rgba(47,96,150,.45); }

/* ============================================================
   FORMS
   ============================================================ */
.ngf-card { max-width: 520px; width: min(520px, calc(100vw - 32px)); padding: clamp(26px, 4vw, 38px); }
.ngf-blurb { color: var(--ink-soft); font-size: 15px; margin: 8px 0 22px; }
.ngf-field { margin-bottom: 14px; }
.ngf-field label {
  display: block; margin-bottom: 6px;
  font-family: var(--f-label); font-weight: 600; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft);
}
.ngf-field label span { color: var(--flag); }
.ngf-field input, .ngf-field select, .ngf-field textarea {
  width: 100%; font: inherit; font-size: 16px;  /* 16px stops iOS zooming on focus */
  color: var(--ink); background: #fff;
  border: 1px solid var(--line-firm); border-radius: 8px;
  padding: 12px 13px;
}
.ngf-field textarea { resize: vertical; min-height: 84px; }
.ngf-field input:focus, .ngf-field select:focus, .ngf-field textarea:focus {
  outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(47,96,150,.14);
}
.ngf-form .btn { margin-top: 8px; }
.ngf-fine {
  margin-top: 12px; text-align: center;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-soft);
}
.ngf-error {
  margin: 4px 0 10px; padding: 10px 12px; border-radius: 8px;
  background: rgba(140,47,57,.08); border: 1px solid rgba(140,47,57,.3);
  color: var(--flag-deep); font-size: 14.5px;
}
.ngf-error a { color: var(--flag-deep); }
/* Off-screen rather than display:none — bots fill hidden inputs, and
   display:none is the one thing they reliably skip. */
.ngf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ngf-done { text-align: center; padding: 10px 0 4px; }
.ngf-tick {
  width: 46px; height: 46px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--fairway); color: #fff;
  font-size: 24px; line-height: 46px;
}
.ngf-done h4 { font-family: var(--f-display); font-weight: 700; font-size: 24px; margin-bottom: 8px; }
.ngf-done p { color: var(--ink-soft); margin-bottom: 20px; }

/* ============================================================
   PARTNER SHELF — open slots
   Shows the shelf's shape without borrowing anyone's trademark.
   ============================================================ */
.pgrid-slots { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: stretch; }
.pslot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px;
  min-height: 168px; padding: 24px 18px;
  background: #fff;
  border: 1px dashed var(--line-firm); border-radius: var(--r);
}
.pslot-mark { width: 40px; height: 40px; opacity: .3; margin-bottom: 4px; }
.pslot-mark svg { width: 100%; height: 100%; }
.pslot-cat {
  font-family: var(--f-label); font-weight: 700; font-size: 13.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink);
}
.pslot-open {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--pencil);
}
.pslot-cta {
  border-style: solid; border-color: var(--ink); background: var(--pine-900);
  justify-content: center; gap: 10px;
}
.pslot-cta h3 { font-family: var(--f-display); font-weight: 700; font-size: 21px; line-height: 1.1; }
.pslot-cta p { font-size: 14px; color: var(--ink-soft); }

/* ============================================================
   AMBASSADORS — internal draft banner
   Loud on purpose: this page is unlaunched, and anyone opening it
   should know that before they read a number.
   ============================================================ */
.amb-draft {
  margin-bottom: clamp(24px, 4vh, 40px);
  padding: 16px 20px; border-radius: var(--r);
  background: rgba(140,47,57,.07);
  border: 1px solid rgba(140,47,57,.32);
  color: var(--ink);
  font-size: 14.5px; line-height: 1.6;
}
.amb-draft strong { color: var(--flag-deep); }
.amb-draft code {
  font-family: var(--f-mono); font-size: 12.5px;
  background: rgba(22,32,30,.06); padding: 1px 5px; border-radius: 4px;
}

/* Referral acknowledgement — shown to someone arriving on an
   ambassador's link. Attribution people can see isn't tracking. */
.ref-banner {
  width: var(--w); margin: 0 auto clamp(16px, 3vh, 26px);
  padding: 12px 18px; border-radius: var(--r);
  background: var(--pine-900); border: 1px solid var(--line-firm);
  font-family: var(--f-mono); font-size: 13px; color: var(--ink-soft);
  text-align: center;
}

/* ---------- ambassador link + dashboard ---------- */
.ngf-code {
  display: block; font-family: var(--f-display); font-weight: 800;
  font-size: 34px; letter-spacing: .04em; color: var(--ink); margin-bottom: 6px;
}
.ngf-link, .applybox p.ngf-link {
  display: block; font-family: var(--f-mono); font-size: 13.5px;
  color: var(--ink); background: var(--pine-900);
  border: 1px solid var(--line-firm); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 14px; word-break: break-all;
}
.ngf-dash { display: block; margin-top: 16px; font-size: 13.5px; color: var(--ink-soft); }
.ngf-dash a { color: var(--flag); }
.amb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 2vw, 20px); }
.amb-stat {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 22px 18px; text-align: center;
}
.amb-stat span { display: block; }
.amb-n {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(30px, 4vw, 44px);
  line-height: 1; color: var(--ink); margin-bottom: 6px;
}
.amb-stat span:last-child {
  font-family: var(--f-label); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft);
}
@media (max-width: 560px) { .amb-stats { grid-template-columns: 1fr; } }

/* ---------- ambassador success: two labelled steps ---------- */
.ngf-step {
  display: block; text-align: left; margin: 22px 0 6px;
  font-family: var(--f-label); font-weight: 700; font-size: 12.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--flag);
}
.ngf-step:first-child { margin-top: 4px; }
.ngf-note {
  display: block; text-align: left; margin-bottom: 10px;
  font-size: 14px; line-height: 1.55; color: var(--ink-soft);
}
.ngf-note strong { color: var(--ink); }
.btn-textlink {
  display: block; width: 100%; margin-top: 8px;
  font-family: var(--f-label); font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-soft);
  text-decoration: underline; text-underline-offset: 3px;
}
.btn-textlink:hover { color: var(--flag); }
.ngf-recover {
  display: block; text-align: left; margin-top: 22px; padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55; color: var(--ink-soft);
}
.ngf-done .btn-block + .btn-block { margin-top: 10px; }