/* ═══════════════════════════════════════════════════════
   Pine Tree Mules — Shared Stylesheet
   styles.css · deployed to Firebase Hosting public/
   All apps link this file. App-specific styles go in
   per-file <style> blocks.
═══════════════════════════════════════════════════════ */

/* ── GOOGLE FONTS (Classic theme baseline)
   Other themes injected dynamically by applyTheme()  ── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Libre+Baskerville:wght@400;700&display=swap');

/* ══════════════════════════════════════════════════════
   1 · RESET
══════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 17px;
  -webkit-text-size-adjust: 100%;
}
button { font-family: inherit; }

/* ══════════════════════════════════════════════════════
   2 · CSS VARIABLES — Classic theme defaults
   applyTheme() overwrites --serif, --mono, and
   optionally --green, --gold, --bg at runtime.
══════════════════════════════════════════════════════ */
:root {
  /* Fonts */
  --serif:    'Libre Baskerville', Georgia, serif;
  --mono:     'DM Mono', 'Courier New', monospace;

  /* Surfaces */
  --bg:       #f7f4ee;   /* page background — warm off-white */
  --surface:  #ffffff;   /* card / panel surface */
  --surface2: #f0ece3;   /* slightly tinted surface for nested areas */

  /* Text */
  --text:     #1a1a14;   /* primary text */
  --muted:    #6b6352;   /* secondary / hint text */

  /* Borders */
  --border:   #d8d0bc;   /* default border */
  --border2:  #c4b99a;   /* stronger border, selected states */
  --rule:     #e8e2d8;   /* hairline dividers */

  /* Brand — Green */
  --green:    #1e4d2b;   /* primary: header, buttons */
  --green2:   #2d6b3e;   /* hover / active states */
  --green3:   #e8f3eb;   /* light green tint for backgrounds */

  /* Brand — Gold */
  --gold:     #8a6c2a;   /* dark gold: text on light bg */
  --gold2:    #c9a84c;   /* light gold: accents on dark bg */
  --goldbg:   #fdf6e3;   /* gold tint background */

  /* Semantic */
  --red:      #922b2b;
  --redbg:    #fdf0f0;
  --orange:   #b85c1a;
  --blue:     #1a4a7a;

  /* Layout */
  --hdr-h:    64px;
  --tab-h:    56px;

  /* Toast positioning — tabbed apps override this one variable:
     :root { --toast-bottom: calc(var(--tab-h) + 12px); }        */
  --toast-bottom: 1.5rem;
}

/* ══════════════════════════════════════════════════════
   3 · BASE
══════════════════════════════════════════════════════ */
body {
  font-family:  var(--mono);
  background:   var(--bg);
  color:        var(--text);
  min-height:   100vh;
  min-height:   100dvh;
  overflow-x:   hidden;
}

/* ══════════════════════════════════════════════════════
   4 · APP SHELL — header + tab bar + screen container
   Used by: index.html, golf-admin.html, golf-players.html, golf-setup.html
   Header: left stack [course / group], center refresh, right stack [player / date].
   Left and right stacks share equal flex width so refresh stays centered.
   index.html uses the right stack; other apps leave .hdr-right empty.
══════════════════════════════════════════════════════ */
#app-header {
  position:        fixed;
  top: 0; left: 0; right: 0;
  height:          var(--hdr-h);
  background:      var(--green);
  color:           #fff;
  display:         flex;
  align-items:     center;
  padding:         0 1rem;
  border-bottom:   2px solid var(--gold2);
  z-index:         200;
  box-shadow:      0 2px 12px rgba(0,0,0,.2);
  gap:             .5rem;
}
/* Left stack — course on top, group below. flex:1 so it takes equal space
   with .hdr-right, keeping the centered refresh truly centered. */
.hdr-left {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             .22rem;
  min-width:       0;
  overflow:        hidden;
}
#hdr-course-name {
  font-family:  var(--serif);
  font-size:    1.14rem;
  font-weight:  700;
  color:        var(--gold2);
  line-height:  1;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow:ellipsis;
}
#hdr-group-name {
  font-family:  var(--serif);
  font-size:    1.14rem;
  font-weight:  700;
  color:        #f0ede4;
  line-height:  1;
  white-space:  nowrap;
  overflow:     hidden;
  text-overflow:ellipsis;
}
/* .hdr-title is kept as a no-op wrapper so the HTML span structure still
   works for golf-admin and golf-players (they use the same spans).
   The visual styling is now on the individual span ids above. */
.hdr-title { display: contents; }
.hdr-title #hdr-course-name { color: var(--gold2); }
.hdr-title #hdr-group-name  { color: #f0ede4; }
/* Right stack — player name on top, round date below. Mirrors .hdr-left
   sizing so refresh stays centered. Text right-aligned. */
.hdr-right {
  flex:            0 0 auto;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-end;
  gap:             .22rem;
  flex-shrink:     0;
}
#hdr-player-name {
  font-family:  var(--serif);
  font-size:    1.14rem;
  font-weight:  700;
  color:        #f0ede4;
  line-height:  1;
  white-space:  nowrap;
  cursor:       pointer;   /* tappable — triggers openNotMeMenu for Dev */
}
.hdr-meta {
  font-family:    var(--serif);
  font-size:      1.14rem;
  font-weight:    700;
  color:          var(--gold2);
  line-height:    1;
  white-space:    nowrap;
  letter-spacing: .01em;
}

/* Admin pill — shown when admin is identified */
.hdr-admin-pill {
  display:        none;
  align-items:    center;
  gap:            .28rem;
  background:     rgba(201,168,76,.18);
  border:         1px solid rgba(201,168,76,.35);
  border-radius:  12px;
  padding:        .22rem .65rem;
  font-size:      .6rem;
  color:          var(--gold2);
  letter-spacing: .04em;
  cursor:         pointer;
  transition:     background .15s;
}
.hdr-admin-pill:hover   { background: rgba(201,168,76,.28); }
.hdr-admin-pill.visible { display: flex; }

/* Player chip — shown for identified non-admin player */
.hdr-player-chip {
  display:       none;
  align-items:   center;
  gap:           .4rem;
  padding:       .25rem .65rem;
  background:    rgba(255,255,255,.15);
  border-radius: 20px;
  font-family:   var(--mono);
  font-size:     .62rem;
  cursor:        pointer;
  transition:    background .15s;
}
.hdr-player-chip:hover   { background: rgba(255,255,255,.25); }
.hdr-player-chip.visible { display: flex; }

/* Refresh pill — centered button in universal header.
   Used by index.html and golf-players.html (and golf-admin.html when migrated).
   Behavior: calls forceCleanReload() — cache-buster + URL cleanup. */
#refresh-pill {
  -webkit-appearance: none;
  appearance:         none;
  outline:            none;
  box-shadow:         none;
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  padding:        .25rem .65rem;
  border-radius:  20px;
  background:     rgba(255,255,255,.12);
  border:         1px solid rgba(255,255,255,.22);
  font-family:    var(--mono);
  font-size:      1.5rem;
  font-weight:    400;
  color:          #e8f3eb;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background .15s;
  flex-shrink:    0;
  line-height:    1;
}
#refresh-pill:hover  { background: rgba(255,255,255,.20); }
#refresh-pill:active { background: rgba(255,255,255,.28); }

/* Score pill — peer of #refresh-pill in the universal header center.
   Returns user to the scoring app (/). Same visual treatment so the
   two buttons read as matching peers. */
#score-pill {
  -webkit-appearance: none;
  appearance:         none;
  outline:            none;
  box-shadow:         none;
  display:        inline-flex;
  align-items:    center;
  justify-content:center;
  padding:        .42rem .82rem;
  border-radius:  20px;
  background:     rgba(255,255,255,.12);
  border:         1px solid rgba(255,255,255,.22);
  font-family:    var(--mono);
  font-size:      .82rem;
  font-weight:    600;
  letter-spacing: .04em;
  color:          #e8f3eb;
  cursor:         pointer;
  white-space:    nowrap;
  transition:     background .15s;
  flex-shrink:    0;
  line-height:    1;
  text-decoration:none;
}
#score-pill:hover  { background: rgba(255,255,255,.20); }
#score-pill:active { background: rgba(255,255,255,.28); }

/* Container for the two center buttons when both are present. */
.hdr-center-stack {
  display:        inline-flex;
  align-items:    center;
  gap:            .5rem;
  flex-shrink:    0;
}

/* ============================================================
   BOTTOM NAVIGATION - universal across v2 apps
   Used by: golf-admin-v2.html, golf-players.html, (future) index v2.
   Buttons are text-sized (not equal-width). The .nav-right modifier
   pushes a button to the far right via margin-left:auto - used for
   "Scores" exit-to-scoring buttons that should anchor consistently
   regardless of how many other buttons are present.
============================================================ */
.bottom-nav {
  position:    fixed;
  bottom: 0; left: 0; right: 0;
  height:      60px;
  background:  var(--green);
  border-top:  2px solid var(--gold);
  display:     flex;
  align-items: stretch;
  justify-content: space-between;
  z-index:     50;
  padding:     0 1rem;
}
.nav-btn {
  -webkit-appearance: none; appearance: none;
  background:  none;
  border:      none;
  color:       rgba(232,243,235,.85);
  font-family: var(--mono);
  font-size:   .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  border-top:  2px solid transparent;
  margin-top:  -2px;
  padding:     0 0.6rem;
}
.nav-btn:hover:not(.active) { color: rgba(232,243,235,1); }
.nav-btn.active             { color: #fff; border-top: 2px solid var(--gold2); }
.nav-btn[hidden]            { display: none; }

/* Tab bar */
#tab-bar {
  position:   fixed;
  bottom: 0; left: 0; right: 0;
  height:     var(--tab-h);
  background: var(--surface);
  border-top: 1.5px solid var(--border);
  display:    flex;
  z-index:    200;
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.tab-btn {
  flex:            1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             .2rem;
  border:          none;
  background:      transparent;
  cursor:          pointer;
  font-family:     var(--mono);
  font-size:       .58rem;
  color:           var(--muted);
  letter-spacing:  .05em;
  text-transform:  uppercase;
  transition:      color .15s;
  padding:         .4rem;
  -webkit-tap-highlight-color: transparent;
}
.tab-btn svg        { transition: transform .15s; }
.tab-btn.active     { color: var(--green); }
.tab-btn.active svg { transform: scale(1.1); }
.tab-btn.hidden     { display: none; }
.tab-indicator {
  position:      absolute;
  top:           0;
  height:        2.5px;
  background:    var(--green);
  border-radius: 0 0 2px 2px;
  transition:    left  .25s cubic-bezier(.4,0,.2,1),
                 width .25s cubic-bezier(.4,0,.2,1);
}

/* Screen container */
#screens {
  position: fixed;
  top:      var(--hdr-h);
  bottom:   var(--tab-h);
  left: 0; right: 0;
  overflow: hidden;
}

/* ── Dev-banner offset ──────────────────────────────────────────────────────
   The dev banner (JS-injected on pine-tree-mules-dev only) is a fixed 22px
   bar at top:0. body.dev-banner-on is added by that same JS. These rules push
   the fixed header — and index's #screens shell — down below the banner.
   Flowing-body apps (golf-admin, golf-players) ALSO need their body padding
   increased; they carry .dev-flow-body so index (which uses the #screens
   shell, not body flow) opts out of that part. Prod never gets these classes.
   --dev-banner-h is the single source of truth for the banner height. */
:root { --dev-banner-h: 22px; }
body.dev-banner-on #app-header { top: var(--dev-banner-h); }
body.dev-banner-on #screens    { top: calc(var(--hdr-h) + var(--dev-banner-h)); }
body.dev-banner-on.dev-flow-body { padding-top: calc(var(--hdr-h) + var(--dev-banner-h)); }
.screen {
  position:   absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding:    1rem 1rem 1.5rem;
  transition: transform .28s cubic-bezier(.4,0,.2,1),
              opacity   .28s;
  will-change: transform;
}
.screen.active { transform: translateX(0);     opacity: 1;  pointer-events: auto; }
.screen.left   { transform: translateX(-100%); opacity: .4; pointer-events: none; }
.screen.right  { transform: translateX(100%);  opacity: .4; pointer-events: none; }

/* ══════════════════════════════════════════════════════
   5 · LOADING OVERLAY
══════════════════════════════════════════════════════ */
#loading-overlay {
  position:        fixed;
  inset:           0;
  background:      var(--bg);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             .75rem;
  z-index:         999;
  font-family:     var(--mono);
  font-size:       .85rem;
  color:           var(--muted);
}
#loading-overlay .lo-icon { font-size: 2.2rem; }
#loading-overlay.hidden   { display: none; }

/* ══════════════════════════════════════════════════════
   6 · TOAST
══════════════════════════════════════════════════════ */
.toast {
  position:       fixed;
  bottom:         var(--toast-bottom);
  left:           50%;
  transform:      translateX(-50%) translateY(20px);
  background:     var(--text);
  color:          #fff;
  font-family:    var(--mono);
  font-size:      .75rem;
  padding:        .5rem 1.2rem;
  border-radius:  6px;
  border-left:    3px solid var(--gold2);
  opacity:        0;
  pointer-events: none;
  transition:     all .22s;
  z-index:        9999;
  white-space:    nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err  { background: var(--red);    border-left-color: #ff9898; }
.toast.warn { background: var(--orange); border-left-color: #ffd080; }

/* ══════════════════════════════════════════════════════
   7 · BUTTONS
══════════════════════════════════════════════════════ */
.btn-primary {
  font-family:    var(--mono);
  font-size:      .82rem;
  font-weight:    500;
  letter-spacing: .03em;
  padding:        .7rem 1.8rem;
  border-radius:  7px;
  border:         2px solid var(--green);
  background:     var(--green);
  color:          #fff;
  cursor:         pointer;
  transition:     opacity .15s;
}
.btn-primary:hover    { opacity: .88; }
.btn-primary:disabled {
  background:   var(--border);
  border-color: var(--border);
  color:        var(--muted);
  cursor:       not-allowed;
  opacity:      1;
}

.btn-secondary {
  font-family:   var(--mono);
  font-size:     .78rem;
  padding:       .58rem 1.1rem;
  border-radius: 7px;
  border:        1.5px solid var(--border2);
  background:    transparent;
  color:         var(--muted);
  cursor:        pointer;
  transition:    all .15s;
}
.btn-secondary:hover { border-color: var(--text); color: var(--text); }

.btn-danger {
  font-family:   var(--mono);
  font-size:     .78rem;
  padding:       .58rem 1.1rem;
  border-radius: 7px;
  border:        1.5px solid rgba(146,43,43,.35);
  background:    var(--redbg);
  color:         var(--red);
  cursor:        pointer;
  transition:    all .15s;
}
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

.btn-full { width: 100%; }

/* ══════════════════════════════════════════════════════
   8 · FORM ELEMENTS
══════════════════════════════════════════════════════ */
.field {
  display:        flex;
  flex-direction: column;
  gap:            .3rem;
  margin-bottom:  .75rem;
}
.field label {
  font-size:      .58rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--muted);
  font-weight:    500;
}
.field input,
.field select {
  padding:       .5rem .75rem;
  font-family:   var(--mono);
  font-size:     .8rem;
  border:        1.5px solid var(--border2);
  border-radius: 7px;
  background:    var(--bg);
  color:         var(--text);
  outline:       none;
  transition:    border-color .15s, box-shadow .15s;
}
.field input:focus,
.field select:focus {
  border-color: var(--green2);
  box-shadow:   0 0 0 3px rgba(45,107,62,.1);
}

/* ══════════════════════════════════════════════════════
   9 · ATOMS
══════════════════════════════════════════════════════ */

/* Tee color dot */
.tee-dot {
  display:       inline-block;
  width:         9px;
  height:        9px;
  border-radius: 50%;
  border:        1.5px solid rgba(0,0,0,.18);
  flex-shrink:   0;
}

/* Admin badge — inline text label */
.badge-admin {
  display:        inline-flex;
  align-items:    center;
  gap:            .22rem;
  background:     var(--goldbg);
  color:          var(--gold);
  border:         1px solid rgba(138,108,42,.3);
  border-radius:  4px;
  padding:        .14rem .42rem;
  font-size:      .6rem;
  font-weight:    600;
  letter-spacing: .04em;
}

/* Section label — sits above lists and grids */
.section-label {
  font-size:      .58rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--muted);
  border-bottom:  1px solid var(--rule);
  padding-bottom: .35rem;
  margin-bottom:  .9rem;
  margin-top:     1rem;
}
.section-label:first-child { margin-top: 0; }

/* ══════════════════════════════════════════════════════
   10 · SCORE RESULT PILLS
   Used in scoring screen and leaderboard
══════════════════════════════════════════════════════ */
.result-pill {
  display:        inline-block;
  padding:        .18rem .55rem;
  border-radius:  20px;
  font-size:      .62rem;
  font-weight:    500;
  letter-spacing: .04em;
  min-width:      54px;
  text-align:     center;
}
.r-unset  { background: var(--rule);               color: var(--muted);  }
.r-eagle  { background: rgba(201,168,76,.22);       color: var(--gold);   }
.r-birdie { background: rgba(201,168,76,.13);       color: var(--gold);   }
.r-par    { background: rgba(30,107,47,.1);         color: var(--green2); }
.r-bogey  { background: rgba(184,92,26,.1);         color: var(--orange); }
.r-double { background: rgba(146,43,43,.1);         color: var(--red);    }

.vs-pos   { color: var(--green2); }
.vs-neg   { color: var(--red);    }
.vs-even  { color: var(--muted);  }

/* ══════════════════════════════════════════════════════
   11 · STATUS BADGES & PILLS
══════════════════════════════════════════════════════ */

/* Small inline pill */
.status-pill {
  display:        inline-block;
  padding:        .2rem .65rem;
  border-radius:  20px;
  font-size:      .56rem;
  font-weight:    500;
  letter-spacing: .06em;
}
.sp-scheduled  { background: rgba(26,74,122,.1);   color: var(--blue);   }
.sp-active     { background: rgba(45,107,62,.15);  color: var(--green2); }
.sp-inprogress { background: rgba(201,168,76,.22); color: var(--gold2);  }
.sp-completed  { background: rgba(45,107,62,.22);  color: var(--green2); }
.sp-washout    { background: rgba(146,43,43,.15);  color: var(--red);    }
.sp-9hole      { background: rgba(26,74,122,.12);  color: var(--blue);   }
.sp-finalized  { background: rgba(0,0,0,.05);      color: var(--muted);  }

/* Larger badge used on round cards */
.status-badge {
  display:     inline-flex;
  align-items: center;
  gap:         .4rem;
  padding:     .3rem .75rem;
  border-radius: 16px;
  font-size:   .65rem;
  font-weight: 500;
}
.status-badge.scheduled  { background: rgba(26,74,122,.08);  color: var(--blue);   border: 1px solid rgba(26,74,122,.2);   }
.status-badge.active     { background: rgba(45,107,62,.1);   color: var(--green2); border: 1px solid rgba(45,107,62,.2);   }
.status-badge.inprogress { background: rgba(201,168,76,.15); color: var(--gold);   border: 1px solid rgba(201,168,76,.3);  }
.status-badge.completed  { background: rgba(45,107,62,.15);  color: var(--green2); border: 1px solid rgba(45,107,62,.25);  }
.status-badge.finalized  { background: rgba(0,0,0,.05);      color: var(--muted);  border: 1px solid var(--border);        }
.status-badge.washout    { background: rgba(146,43,43,.08);  color: var(--red);    border: 1px solid rgba(146,43,43,.2);   }

/* ══════════════════════════════════════════════════════
   12 · ROUND CARDS
   Used in signup screens and setup app
══════════════════════════════════════════════════════ */
.round-card {
  border:        1.5px solid var(--border2);
  border-radius: 10px;
  overflow:      hidden;
  margin-bottom: .7rem;
  background:    var(--surface);
  box-shadow:    0 2px 8px rgba(0,0,0,.05);
}
.round-card-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         .65rem .9rem;
  background:      var(--surface2);
  border-bottom:   1px solid var(--rule);
}
.round-card-date { font-family: var(--serif); font-size: .95rem; font-weight: 700; }
.round-card-meta { font-size: .6rem; color: var(--muted); margin-top: .08rem; }
.round-card-body { padding: .6rem .9rem; }

/* ══════════════════════════════════════════════════════
   13 · BUBBLES
   Player name tags — used in group display and round cards
══════════════════════════════════════════════════════ */
.bubbles { display: flex; flex-wrap: wrap; gap: .3rem; }
.bubble {
  display:       inline-flex;
  align-items:   center;
  gap:           .3rem;
  height:        28px;
  padding:       0 .55rem;
  border-radius: 14px;
  background:    var(--goldbg);
  border:        1px solid rgba(201,168,76,.35);
  font-family:   var(--serif);
  font-size:     .72rem;
  font-weight:   700;
  white-space:   nowrap;
}
.bubble.me    { background: var(--green); border-color: var(--green); color: #fff; }
.bubble.empty {
  font-size:    .65rem;
  color:        var(--muted);
  font-style:   italic;
  background:   transparent;
  border-color: transparent;
}

/* ══════════════════════════════════════════════════════
   14 · PLAYER ROW
   Tappable player list item — identity picker,
   leaderboard, group formation
══════════════════════════════════════════════════════ */
.player-row {
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  padding:       .85rem 1rem;
  border:        1.5px solid var(--border);
  border-radius: 10px;
  background:    var(--surface);
  cursor:        pointer;
  transition:    all .12s;
}
.player-row:hover    { border-color: var(--gold2);  background: var(--goldbg); }
.player-row.selected { border-color: var(--green2); background: var(--green3); }
.player-row-name     { font-family: var(--serif); font-size: 1rem; font-weight: 700; flex: 1; }
.player-row-sub      { font-size: .6rem; color: var(--muted); margin-top: .1rem; }

/* ══════════════════════════════════════════════════════
   15 · MODAL SHEET
   Bottom sheet for contextual actions and options
══════════════════════════════════════════════════════ */
.modal-backdrop {
  display:         none;
  position:        fixed;
  inset:           0;
  background:      rgba(10,20,12,.55);
  backdrop-filter: blur(3px);
  z-index:         500;
  align-items:     flex-end;
  justify-content: center;
}
.modal-backdrop.open { display: flex; }
.modal-sheet {
  background:    var(--surface);
  border:        1.5px solid var(--border2);
  border-radius: 16px 16px 10px 10px;
  width:         100%;
  max-width:     480px;
  box-shadow:    0 -8px 40px rgba(0,0,0,.18);
  animation:     sheetIn .22s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
@keyframes sheetIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.modal-handle {
  width:         36px;
  height:        4px;
  background:    var(--border2);
  border-radius: 2px;
  margin:        .65rem auto .1rem;
}
.modal-header-bar {
  padding:         .7rem 1.1rem .5rem;
  border-bottom:   1px solid var(--rule);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}
.modal-header-bar h3 {
  font-family: var(--serif);
  font-size:   1.1rem;
  font-weight: 700;
}
.modal-close {
  background: none;
  border:     none;
  font-size:  1.3rem;
  cursor:     pointer;
  color:      var(--muted);
  padding:    .1rem .3rem;
}
.modal-body { padding: .9rem 1.1rem 1.2rem; }
.modal-option-btn {
  display:       flex;
  align-items:   flex-start;
  gap:           .75rem;
  width:         100%;
  padding:       .8rem .9rem;
  margin-bottom: .5rem;
  border:        1.5px solid var(--border);
  border-radius: 9px;
  background:    var(--surface);
  cursor:        pointer;
  text-align:    left;
  transition:    all .15s;
}
.modal-option-btn:hover { border-color: var(--gold2); background: var(--goldbg); }
.modal-option-icon      { font-size: 1.3rem; flex-shrink: 0; margin-top: .05rem; }
.modal-option-title     { font-family: var(--serif); font-size: .92rem; font-weight: 700; color: var(--text); }
.modal-option-desc      { font-size: .62rem; color: var(--muted); margin-top: .18rem; line-height: 1.5; }

/* ══════════════════════════════════════════════════════
   16 · FORM VOCABULARY — admin v2 cards
   ──────────────────────────────────────────────────────
   Shared building blocks for v2 admin accordion cards
   (Game Bets, future Side Bets, etc). Class names match
   v1 admin's local <style> block by intent; v1 retains
   its own local definitions until v1 is deleted. When v1
   is retired, these become the single source of truth.
══════════════════════════════════════════════════════ */

/* ── form structure ── */
.body-section          { margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.body-section:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.body-row              { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.body-lbl              { font-size: .72rem; font-weight: 500; }
.body-hint             { font-size: .62rem; color: var(--muted); margin-top: .18rem; }
.body-sub-label        { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
                         font-weight: 600; margin-bottom: .6rem; padding-bottom: .4rem; border-bottom: 1px solid var(--border); }

/* ── segmented buttons ── */
.seg-btns              { display: flex; border: 1.5px solid var(--border2); border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.seg-btn               { padding: .32rem .75rem; font-family: var(--mono); font-size: .67rem; background: var(--bg);
                         color: var(--muted); border: none; cursor: pointer; transition: all .12s; white-space: nowrap; }
.seg-btn.sm            { padding: .28rem .6rem; font-size: .62rem; }
.seg-btn:not(:last-child) { border-right: 1.5px solid var(--border2); }
.seg-btn.active        { background: var(--green); color: #e8f0ea; }

/* ── numeric / text input controls ── */
.field-group           { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-bottom: 1rem; }
.field-label           { font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
                         margin-bottom: .38rem; font-weight: 500; }
input.ctrl-input,
select.ctrl-input      { width: 100%; padding: .5rem .6rem; text-align: center; font-family: var(--serif);
                         font-size: 1.25rem; font-weight: 700; color: var(--green); border: 2px solid var(--border2);
                         border-radius: 7px; background: var(--bg); outline: none; -moz-appearance: textfield; transition: border-color .15s; }
input.ctrl-input::-webkit-outer-spin-button,
input.ctrl-input::-webkit-inner-spin-button { -webkit-appearance: none; }
input.ctrl-input:focus,
select.ctrl-input:focus { border-color: var(--green2); }
.ctrl-unit             { font-size: .57rem; color: var(--muted); text-align: center; margin-top: .22rem; }

/* ── points game grid ── */
.pts-grid              { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-bottom: .6rem; }
.pts-card              { background: var(--surface2); border-radius: 8px; padding: .55rem .5rem; text-align: center; }
.pts-card.pts-eagle    { background: #f0f8f0; border: 1px solid #b8dbc0; }
.pts-card.pts-birdie   { background: #f5f8f0; }
.pts-card.pts-bogey    { background: #fdf5f0; }
.pts-card.pts-double   { background: #fdf0f0; }
.pts-score-name        { font-size: .55rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; }
.pts-diff              { font-size: .58rem; color: var(--green2); margin-bottom: .3rem; }
.pts-input             { width: 100%; text-align: center; font-family: var(--serif); font-size: 1rem; font-weight: 700;
                         color: var(--green); border: 1.5px solid var(--border2); border-radius: 5px; padding: .25rem;
                         background: var(--bg); outline: none; -moz-appearance: textfield; }
.pts-input::-webkit-outer-spin-button,
.pts-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pts-summary           { font-size: .62rem; color: var(--muted); text-align: center; padding: .4rem 0; }

/* ── formula preview box ── */
.formula-box           { background: var(--surface2); border-radius: 8px; padding: .75rem 1rem; font-size: .67rem; margin-top: .75rem; }
.formula-label         { font-size: .55rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .4rem; }
.formula-line          { margin-bottom: .25rem; line-height: 1.5; }
.formula-line:last-child { margin-bottom: 0; }
.f-kw                  { color: var(--green2); font-weight: 500; }
.f-val                 { color: var(--green); font-weight: 600; }
.f-muted               { color: var(--muted); }

/* ── pot distribution ── */
.pot-range             { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
                         padding: .8rem .9rem; margin-bottom: .5rem; }
.pot-range-header      { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.pot-range-label       { font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); min-width: 4rem; }
.pot-range-bounds      { display: flex; align-items: center; gap: .35rem; flex: 1; }
.pot-bound-input       { width: 52px; padding: .3rem .4rem; text-align: center; font-family: var(--mono); font-size: .8rem;
                         border: 1.5px solid var(--border2); border-radius: 5px; background: var(--bg); outline: none; }
.pot-bound-input.unbounded { color: var(--muted); background: var(--surface2); }
.pot-bound-sep         { font-size: .75rem; color: var(--muted); }
.pot-del-btn           { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border2);
                         background: transparent; color: var(--muted); cursor: pointer; font-size: .65rem;
                         display: flex; align-items: center; justify-content: center; }
.pot-del-btn:hover:not([disabled]) { border-color: var(--red); color: var(--red); }
.pot-places-row,
.pot-pct-row           { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; }
.pot-places-lbl,
.pot-pct-lbl           { font-size: .58rem; color: var(--muted); min-width: 5.5rem; }
.pot-place-btns        { display: flex; gap: .3rem; }
.pot-place-btn         { width: 26px; height: 22px; border-radius: 4px; border: 1.5px solid var(--border2); background: var(--bg);
                         font-size: .67rem; cursor: pointer; transition: all .1s; }
.pot-place-btn.active  { background: var(--green); border-color: var(--green); color: #fff; }
.pot-pct-fields        { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.pot-pct-group         { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.pot-pct-place-lbl     { font-size: .5rem; color: var(--muted); }
.pot-pct-input         { width: 52px; padding: .32rem .3rem; text-align: center; font-family: var(--serif);
                         font-size: .95rem; font-weight: 700; border: 2px solid var(--border2); border-radius: 6px;
                         background: var(--surface); outline: none; -moz-appearance: textfield; color: var(--green); }
.pot-pct-input::-webkit-outer-spin-button,
.pot-pct-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pot-pct-input.last-place { color: var(--muted); background: var(--surface2); }
.pot-pct-sum           { font-size: .62rem; font-weight: 600; padding: .28rem .5rem; border-radius: 5px;
                         background: var(--green3); color: var(--green2); white-space: nowrap; }
.pot-pct-sum.bad       { background: #fdf0f0; color: var(--red); }
.pot-add-row           { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; padding-top: .75rem; border-top: 1px dashed var(--border); }
.pot-add-btn           { padding: .38rem 1rem; font-family: var(--mono); font-size: .68rem; font-weight: 500;
                         background: transparent; border: 1.5px solid var(--green2); border-radius: 6px; color: var(--green2); cursor: pointer; }
.pot-add-hint          { font-size: .58rem; color: var(--muted); }
.pot-warning           { background: #fdf0f0; border: 1px solid #e8b0b0; border-radius: 6px;
                         padding: .55rem .75rem; font-size: .65rem; color: var(--red); margin-bottom: .6rem; line-height: 1.5; }
.btn-pot-reset         { padding: .52rem 1rem; font-family: var(--mono); font-size: .68rem; background: transparent;
                         color: var(--muted); border: 1.5px solid var(--border2); border-radius: 7px; cursor: pointer; margin-right: auto; }
.btn-pot-reset:hover   { border-color: var(--red); color: var(--red); }

/* ── bet panel (Game Bets card — v2-specific structure) ── */
.bet-panel             { background: var(--surface); border: 1.5px solid var(--border); border-radius: 9px;
                         padding: .9rem 1rem; margin-bottom: .9rem; transition: opacity .15s; }
.bet-panel.off         { opacity: .55; }
.bet-panel-header      { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.bet-panel.off .bet-panel-header { margin-bottom: 0; }
.bet-panel-body        { display: block; }
.bet-panel.off .bet-panel-body { display: none; }

/* =====================================================================
   GROUP FORMATION (admin v2 Rounds tab, Group Formation card body)
   Ported from v1 admin's pill-group-formation. All rules use vars
   already defined above. Pending-guest pill is a v2 addition: shown
   for visibility but not selectable until tee/goal are set.
   ASCII delimiters only — Unicode box-drawing chars have broken the
   CSS parser silently in the past (see May 25 handoff).
===================================================================== */
.pgf-wrap                { margin-top: .25rem; }
.pgf-pending-group       { background: var(--green3); border: 1.5px solid #b8dbc0; border-radius: 8px;
                           padding: .65rem .8rem; margin-bottom: .65rem; min-height: 52px; }
.pgf-pending-label       { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em;
                           color: var(--green2); font-weight: 600; margin-bottom: .45rem; }
.pgf-pending-pills       { display: flex; flex-wrap: wrap; gap: .35rem; min-height: 28px; }
.pgf-unassigned-label    { font-size: .58rem; text-transform: uppercase; letter-spacing: .08em;
                           color: var(--muted); font-weight: 600; margin-bottom: .45rem; }
.pgf-pills               { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .75rem; }
.pgf-pill                { padding: .32rem .7rem; border-radius: 20px; font-family: var(--mono);
                           font-size: .72rem; cursor: pointer; border: 1.5px solid var(--border2);
                           background: var(--surface); color: var(--text);
                           transition: all .12s; user-select: none; white-space: nowrap; }
.pgf-pill:hover          { border-color: var(--green2); color: var(--green2); }
.pgf-pill.selected       { background: var(--green2); border-color: var(--green2); color: #fff; }
.pgf-pill.in-pending     { background: var(--green); border-color: var(--green); color: #fff; }
/* Pending guest — visible in unassigned pool but not selectable. */
.pgf-pill.guest-pending  { font-style: italic; color: var(--muted); border-style: dashed; cursor: not-allowed; }
.pgf-pill.guest-pending:hover { border-color: var(--border2); color: var(--muted); }
.pgf-form-btn            { padding: .55rem 1.4rem; font-family: var(--mono); font-size: .78rem;
                           font-weight: 600; background: var(--green); color: #e8f3ea;
                           border: none; border-radius: 8px; cursor: pointer; transition: background .15s; }
.pgf-form-btn:hover      { background: var(--green2); }
.pgf-form-btn:disabled   { opacity: .4; cursor: default; }
.pgf-action-row          { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.pgf-all-done            { font-size: .72rem; color: var(--green2); font-weight: 600; padding: .5rem 0; }

/* Existing group cards (formed groups display). */
.pgf-group-card          { background: var(--surface); border: 1.5px solid var(--border2);
                           border-radius: 8px; padding: .6rem .75rem; margin-bottom: .5rem; }
.pgf-group-label         { font-size: .6rem; text-transform: uppercase; letter-spacing: .08em;
                           color: var(--muted); font-weight: 600; margin-bottom: .4rem; }
.pgf-group-pills         { display: flex; flex-wrap: wrap; gap: .3rem; }
.pgf-group-pill          { padding: .22rem .55rem; border-radius: 14px; font-family: var(--mono);
                           font-size: .68rem; background: var(--green3); border: 1px solid #b8dbc0;
                           color: var(--green2); white-space: nowrap; }
.pgf-group-del-btn       { float: right; background: transparent; border: none;
                           color: var(--muted); cursor: pointer; font-size: .75rem; }
.pgf-group-del-btn:hover { color: var(--red, #b04040); }