/* ── Tier gate overlay ───────────────────────── */
  .tier-gate {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--bg);
    text-align: center; padding: 60px 24px;
    min-height: 50vh;
  }
  .tier-gate-icon {
    font-size: 32px; margin-bottom: 16px; opacity: 0.5;
  }
  .tier-gate h3 {
    font-family: var(--body-font); font-size: 22px;
    color: var(--green-deep); margin-bottom: 8px;
  }
  .tier-gate p {
    font-family: var(--body-font); font-size: 14px;
    color: var(--ink-muted); font-style: italic; max-width: 400px; margin-bottom: 24px;
  }
  .tier-gate-options {
    display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px;
  }
  .tier-gate-option {
    font-family: var(--body-font); border: 1.5px solid var(--green-deep);
    border-radius: 10px; padding: 18px 20px; min-width: 150px; cursor: pointer;
    background: white; transition: all .15s; text-align: center;
  }
  .tier-gate-option:hover { border-color: var(--green-accent); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
  .tier-gate-option.featured { border-color: var(--gold); background: rgba(138,111,58,0.04); }
  .tier-gate-option-price {
    font-size: 22px; font-weight: 700; color: var(--green-deep); margin-bottom: 4px;
  }
  .tier-gate-option-label {
    font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 2px;
  }
  .tier-gate-option-detail {
    font-size: 9px; color: var(--ink-muted); letter-spacing: 0.06em;
  }
  .tier-gate-option-save {
    font-size: 9px; color: var(--gold); font-weight: 600; letter-spacing: 0.06em; margin-top: 4px;
  }
  .tier-gate-link {
    margin-top: 12px; font-family: var(--body-font); font-size: 9px;
    color: var(--ink-muted); letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; text-decoration: underline;
  }
  .tab-panel { position: relative; }
  /* Signed-out header badge */
  .header-tier-pill {
    font-family: var(--body-font); font-size: 8px; letter-spacing: 0.14em;
    text-transform: uppercase; padding: 4px 10px; border-radius: 20px;
    border: 1px solid rgba(26,51,32,0.2); color: var(--ink-muted); margin-left: 4px;
  }
  .header-tier-pill.paid { border-color: var(--gold); color: var(--gold); }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  
  body { background: var(--bg); font-family: var(--body-font); font-weight: 300; color: var(--ink); }
  body::before {
    content: ''; position: fixed; inset: 0; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none; opacity: 0.5;
  }

  /* ── Loading spinner ── */
  #page-loader {
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:60px 0; color:var(--ink-muted);
    font-family:var(--mono-font); font-size:11px; letter-spacing:0.06em;
  }
  #page-loader .spin {
    width:18px; height:18px; border:2px solid var(--rule);
    border-top-color:var(--green-accent); border-radius:50%;
    animation:spin .7s linear infinite;
  }
  @keyframes spin { to { transform:rotate(360deg); } }

  /* ── Header ── */
  #header {
    position: sticky; top: 0; z-index: 100;
    background: var(--green-deep); height: var(--header-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  }
  .header-left { display: flex; align-items: center; gap: 16px; }
  .back-btn {
    display: flex; align-items: center; gap: 5px;
    font-family: var(--body-font); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255,255,255,0.6);
    text-decoration: none; transition: color .15s;
    background: none; border: none; cursor: pointer; padding: 0;
  }
  .back-btn:hover { color: rgba(255,255,255,0.95); }
  .header-brand {
    font-family: var(--body-font); font-size: 14px; font-weight: 600;
    color: white; letter-spacing: 0.08em; font-style: normal;
  }
  .header-brand em { font-style: normal; }
  .course-type-badge {
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.14em;
    text-transform: uppercase; padding: 3px 9px; border-radius: 20px;
  }

  /* ── Hero ── */
  /* Top padding accounts for the fixed #header (--header-h = 52px) so the
     h1 isn't clipped behind it. */
  #course-hero {
    background: var(--green-deep);
    padding: calc(var(--header-h) + 24px) 32px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative; overflow: hidden;
  }
  #course-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(45deg,
      rgba(255,255,255,0.015) 0px,rgba(255,255,255,0.015) 1px,
      transparent 1px, transparent 12px);
  }
  .hero-eyebrow {
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.22em;
    text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 5px;
    position: relative;
  }
  .hero-name {
    font-family: var(--body-font); font-size: 28px; font-weight: 600;
    color: var(--white); line-height: 1.1; margin: 0 0 16px 0; position: relative;
    /* Reserve a stable two-line slot so long course names that wrap don't shift
       the tab bar below the hero when the title text and font swap settle.
       margin: 0 0 16px 0 explicitly because this element is now an <h1>; the
       browser default `margin-top: 0.67em` would push the hero ~19px down. */
    min-height: calc(28px * 1.1 * 1);
  }
  .hero-stats {
    display: flex; align-items: center; gap: 0; flex-wrap: wrap; position: relative;
  }
  .hero-stat { padding: 0 20px 0 0; }
  .hero-stat:first-child { padding-left: 0; }
  .hero-stat-val {
    font-family: var(--body-font); font-size: 18px; font-weight: 600;
    color: var(--white); line-height: 1;
  }
  .hero-stat-lbl {
    font-family: var(--body-font); font-size: 8px; letter-spacing: 0.14em;
    text-transform: uppercase; color: rgba(255,255,255,0.4); margin-top: 3px;
  }
  .hero-divider { width: 1px; height: 32px; background: rgba(255,255,255,0.12); margin-right: 20px; }

  /* ── Tabs ── */
  #tab-bar {
    position: sticky; top: 0; z-index: 90;
    background: var(--white); border-bottom: 1px solid var(--rule);
    display: flex; height: var(--tab-h);
    box-shadow: 0 2px 8px rgba(26,51,32,0.06);
  }
  .tab-btn {
    flex: 1; max-width: 200px; border: none; background: none; cursor: pointer;
    font-family: var(--body-font); font-size: 10px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-muted);
    display: flex; align-items: center; justify-content: center; gap: 7px;
    border-bottom: 2px solid transparent; transition: all .15s;
  }
  .tab-btn:hover { color: var(--green-mid); }
  .tab-btn.active { color: var(--green-deep); border-bottom-color: var(--green-accent); }
  /* Hide mobile-only elements on desktop */
  .tab-more-wrap { display: none; }
  .tab-btn-play-live { display: none; }

  /* ── Tab panels ── */
  .tab-panel { display: none; }
  .tab-panel.active { display: block; }

  /* ════════════════════════════════
     SCORECARD TAB
  ════════════════════════════════ */
  #scorecard-panel { max-width: 1200px; margin: 0 auto; padding: 28px 32px; }

  .scorecard-wrap { overflow-x: auto; margin-bottom: 24px; }
  .sc-table {
    width: 100%; border-collapse: collapse;
    font-family: var(--body-font); font-size: 11px;
    background: var(--white); border-radius: 10px; overflow: hidden;
    border: 1px solid var(--rule); min-width: 700px;
  }
  .sc-table td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--rule); }
  .sc-table td.sc-label {
    text-align: left; padding-left: 14px; font-weight: 500;
    color: var(--ink-mid); white-space: nowrap;
  }
  .sc-table .sc-section-hdr td { background: var(--green-deep); color: rgba(255,255,255,0.85); font-weight: 600; }
  .sc-table .sc-section-hdr td.sc-label { color: rgba(255,255,255,0.7); }
  .sc-hole-hdr { cursor: pointer; transition: background .12s; }
  .sc-hole-hdr:hover { background: rgba(255,255,255,0.15) !important; }
  .sc-hole-hdr.active-hole { background: var(--green-accent) !important; color: white !important; font-weight: 700 !important; }
  .sc-table .sc-total-hdr { background: rgba(255,255,255,0.12); font-weight: 700; letter-spacing: 0.08em; }
  .sc-table .sc-total-val { font-weight: 700; color: var(--ink); border-left: 1px solid var(--rule); }
  .sc-table .sc-par-row td { background: rgba(245,220,140,0.18); }
  .sc-table .sc-hdcp-row td { color: var(--ink-muted); font-size: 10px; }
  /* Scorecard handicap men/women toggle pill (CSP Phase E.2: replaces
     inline style with border + color ternary on YGBState.hdcpGender). */
  .hdcp-gender-toggle {
    cursor: pointer; font-size: 8px; padding: 2px 6px;
    border-radius: 4px; border: 1px solid; margin-left: 4px;
    font-weight: 600; letter-spacing: 0.04em;
  }
  .hdcp-gender-toggle.women { border-color: var(--gold);          color: var(--gold); }
  .hdcp-gender-toggle.men   { border-color: var(--green-accent);  color: var(--green-accent); }
  .sc-table .sc-tee-row.active-tee-row td { background: var(--green-pale); }
  .tee-swatch { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: middle; }

  /* Tee rating cards */
  /* Target Score Banner */
  .target-banner {
    background: var(--green-deep); border-radius: 12px; padding: 20px 28px;
    margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 16px; position: relative; overflow: hidden;
  }
  .target-banner::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg,
      rgba(255,255,255,0.018) 0px,rgba(255,255,255,0.018) 1px,
      transparent 1px,transparent 10px);
  }
  .target-banner-left { position: relative; }
  .target-banner-eyebrow {
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.2em;
    text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 4px;
  }
  .target-banner-score { display: flex; align-items: baseline; gap: 10px; }
  .target-banner-num { font-family: var(--body-font); font-size: 52px; font-weight: 700; color: var(--white); line-height: 1; }
  .target-banner-rel { font-family: var(--body-font); font-size: 22px; color: rgba(255,255,255,0.6); font-style: italic; }
  .target-banner-right { display: flex; gap: 28px; position: relative; flex-wrap: wrap; }
  .target-stat-val { font-family: var(--body-font); font-size: 20px; font-weight: 600; color: var(--white); line-height: 1; }
  .target-stat-lbl { font-family: var(--body-font); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-top: 3px; }
  .target-stat-divider { width: 1px; background: rgba(255,255,255,0.12); }
  .no-handicap-banner {
    background: var(--gold-pale); border: 1px solid rgba(138,111,58,0.2);
    border-radius: 10px; padding: 14px 20px; margin-bottom: 20px;
    display: flex; align-items: center; gap: 12px;
    font-family: var(--body-font); font-size: 15px; color: var(--gold);
  }
  .no-handicap-banner a { color: var(--green-accent); text-decoration: underline; cursor: pointer; }
  .sc-table .sc-target-row td { background: var(--green-deep); color: rgba(255,255,255,0.9); font-weight: 500; }
  .sc-table .sc-target-row td.sc-label { color: rgba(255,255,255,0.7); }
  .sc-table .sc-target-row td.sc-total-val { color: var(--white); font-weight: 600; border-left-color: rgba(255,255,255,0.15); }
  .sc-table .sc-target-row .stroke-dot {
    display: inline-block; width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,0.5); vertical-align: super; margin-left: 2px; position: relative; top: -3px;
  }

  /* Tee rating cards */
  .tee-rating-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 24px; }
  .tee-rating-card {
    background: var(--white); border: 1px solid var(--rule);
    border-radius: 10px; padding: 14px 16px; border-top: 3px solid transparent;
    cursor: pointer; transition: box-shadow .15s, transform .12s;
  }
  .tee-rating-card:hover { box-shadow: 0 4px 14px rgba(26,51,32,0.1); transform: translateY(-2px); }
  .tee-rating-card.active-tee { border-top-color: var(--green-accent); background: #f8fbf8; }
  .tee-rating-card.active-tee:hover { transform: none; box-shadow: none; }
  .tee-name-row {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--body-font); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ink-mid); margin-bottom: 10px;
  }
  .tee-swatch-lg { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
  .tee-stat-pair { display: flex; gap: 12px; }
  .tee-stat { flex: 1; }
  .tee-stat-val { font-family: var(--body-font); font-size: 18px; font-weight: 600; color: var(--ink); line-height: 1; }
  .tee-stat-lbl { font-family: var(--body-font); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); margin-top: 3px; }

  /* ════════════════════════════════
     YARDAGE BOOK TAB
  ════════════════════════════════ */
  #tab-yardage { background: #eef1ec; }
  #yardage-panel { max-width: 1400px; margin: 0 auto; padding: 12px 16px; }
  .yardage-layout {
    display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: start;
    max-height: calc(100vh - var(--tab-h) - 24px);
  }
  .yb-main-container {
    display: grid; grid-template-columns: 260px 1fr 260px; grid-template-rows: auto 1fr auto; gap: 0;
    background: var(--white); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
    height: calc(100vh - var(--tab-h) - 24px);
    min-height: 500px;
  }
  /* Ensure columns fill the middle row */
  .yb-main-container > .yb-info-col { grid-row: 2; min-height: 0; }
  .yb-main-container > .yb-book { grid-row: 2; min-height: 0; }
  .yb-main-container > .yb-right-panel { grid-row: 2; min-height: 0; }

  /* Sidebar */
  .hole-list {
    background: transparent; border: none; border-radius: 0;
    overflow-y: auto; padding: 6px 4px;
    max-height: calc(100vh - var(--tab-h) - 24px);
  }
  .hole-list-header {
    padding: 4px 6px 8px; position: sticky; top: 0; z-index: 1; background: var(--white);
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-muted); text-align: center;
  }
  .hole-list-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  }
  .hole-list-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 42px; height: 42px; margin: 0 auto;
    border-radius: 50%; cursor: pointer; transition: all .15s;
    border: 1.5px solid var(--rule-mid); background: var(--white);
  }
  .hole-list-item:hover { background: var(--green-pale); border-color: var(--green-accent); }
  .hole-list-item.active { background: var(--green-deep); border-color: var(--green-deep); }
  .hli-left { display: flex; flex-direction: column; align-items: center; gap: 0; }
  .hli-num { font-family: var(--body-font); font-size: 15px; font-weight: 600; color: var(--green-deep); width: auto; line-height: 1; }
  .hole-list-item.active .hli-num { color: var(--white); }
  .hli-par { font-family: var(--body-font); font-size: 7px; letter-spacing: 0.04em; color: var(--ink-muted); text-transform: uppercase; line-height: 1; }
  .hole-list-item.active .hli-par { color: rgba(255,255,255,0.55); }
  .hli-dist { font-family: var(--body-font); font-size: 7px; color: var(--ink-muted); line-height: 1; }
  .hole-list-item.active .hli-dist { color: rgba(255,255,255,0.75); }
  .hole-group-label {
    padding: 4px 0 2px; font-family: var(--body-font); font-size: 7px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-mid); text-align: center; font-weight: 600;
  }

  /* Club bag panel (right side) */
  .club-bag-panel {
    background: var(--white); border: 1px solid var(--rule); border-radius: 10px;
    overflow: hidden; max-height: calc(100vh - var(--tab-h) - 24px);
    display: flex; flex-direction: column; width: 120px; transition: width .2s;
  }
  .club-bag-panel.collapsed { width: 40px; border-color: var(--green-deep); }
  .club-bag-panel.collapsed .club-bag-body,
  .club-bag-panel.collapsed .club-bag-save { display: none; }
  .club-bag-header {
    padding: 6px 8px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--rule); cursor: pointer; user-select: none;
  }
  .club-bag-header:hover { background: var(--green-pale); }
  .club-bag-title {
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--ink-muted); white-space: nowrap;
  }
  /* Collapsed pill: brand-styled to be obviously clickable (matches CTA buttons) */
  .club-bag-panel.collapsed .club-bag-header {
    flex-direction: column; padding: 14px 0; gap: 8px; min-height: 110px;
    background: var(--green-deep); border-bottom: none;
  }
  .club-bag-panel.collapsed .club-bag-header:hover { background: var(--green-mid); }
  .club-bag-panel.collapsed .club-bag-title {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: 9px; color: #fff; font-weight: 500;
  }
  .club-bag-panel.collapsed #club-bag-arrow { color: rgba(255,255,255,0.7) !important; }
  .club-bag-body { overflow-y: auto; flex: 1; padding: 4px 0; }
  .club-bag-row {
    display: flex; align-items: center; gap: 4px; padding: 2px 8px;
    font-family: var(--mono-font); font-size: 9px; color: var(--ink-mid);
  }
  .club-bag-row input {
    width: 42px; padding: 2px 4px; border: 1px solid var(--rule);
    border-radius: 4px; font-family: var(--mono-font); font-size: 9px;
    text-align: right; color: var(--ink); background: var(--bg);
  }
  .club-bag-row input:focus { border-color: var(--green-accent); outline: none; }
  .club-bag-label { width: 28px; font-weight: 500; color: var(--green-deep); flex-shrink: 0; }
  .club-bag-save {
    padding: 6px 8px; border-top: 1px solid var(--rule);
  }
  @media (max-width: 768px) {
    .club-bag-panel { display: none !important; }
  }

  /* Desktop toggle buttons + inline strategy */
  .yb-desktop-toggles { display: block; }
  .yb-toggle-btn {
    /* CSP Phase E.4: flex:1 was inline style on every instance — promoted. */
    flex: 1;
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.04em;
    padding: 4px 8px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--rule); background: var(--bg); color: var(--ink-muted);
    transition: all .15s; text-transform: uppercase;
  }
  .yb-toggle-btn:hover { border-color: rgba(58,122,74,0.3); background: var(--green-pale); }
  .yb-toggle-btn.active { background: var(--green-deep); border-color: var(--green-deep); color: #fff; font-weight: 500; }
  .yb-strategy-panel-inline { display: block; }
  @media (max-width: 768px) {
    .yb-desktop-toggles { display: none !important; }
    .yb-strategy-panel-inline { display: none !important; }
  }
  @media (min-width: 769px) {
    .yb-svg-toggles { display: none; }
    .yb-svg-tee-btns { display: none; }
    .yb-green-col { display: none; }
  }

  /* Middle info column (green map, elevation, key distances) — desktop only */
  .yb-info-col {
    background: var(--white); border: none; border-right: 1px solid var(--rule);
    overflow-y: auto; overflow-x: hidden;
    max-height: calc(100vh - var(--tab-h) - 24px);
    display: flex; flex-direction: column;
  }
  .yb-info-col .yb-panel { padding: 8px 10px; border-bottom: 1px solid var(--rule); }
  @media (min-width: 769px) {
    .yb-info-col .yb-panel { padding: 6px 10px; border-bottom: 1px solid var(--rule); }
    .yb-info-col #yb-panel-greenmap { flex: 1; display: flex; flex-direction: column; min-height: 0; }
    .yb-info-col #yb-panel-elev { padding: 6px 10px; }
    .yb-info-col #yb-panel-elev svg { width: 100%; }
  }
  .yb-tee-selector-desktop { }
  .yb-tee-selector-desktop .yb-tee-btn-row { display: flex; flex-wrap: wrap; gap: 3px; }
  .yb-tee-sel-btn {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--rule); background: var(--bg);
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.04em;
    color: var(--ink-muted); transition: all .15s; text-transform: uppercase;
  }
  .yb-tee-sel-btn:hover { border-color: rgba(58,122,74,0.3); background: var(--green-pale); }
  .yb-tee-sel-btn.active { background: var(--green-deep); border-color: var(--green-deep); color: #fff; font-weight: 600; }
  .yb-tee-sel-swatch { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.15); }
  .yb-tee-sel-yds { margin-left: 2px; font-size: 9px; opacity: 0.7; }
  @media (max-width: 768px) {
    .yb-tee-selector-desktop { display: none !important; }
  }
  .yb-info-col .yb-panel:last-child { border-bottom: none; flex: 1; }
  .yb-info-col .yb-green-svg-area { overflow: hidden; padding: 0; flex: 1; }
  .yb-info-col #green-svg { width: 100%; height: 100%; }
  .yb-info-col #elev-svg { width: 100%; height: auto; display: block; }
  .yb-info-col .yb-panel { padding: 6px 10px; }
  .yb-info-col .yb-panel-title { margin-bottom: 6px; }

  /* Right panel (tee shot, outcomes, strategy — desktop only) */
  .yb-right-panel {
    border-left: 1px solid var(--rule); overflow-y: auto;
    max-height: calc(100vh - var(--tab-h) - 24px);
    display: flex; flex-direction: column;
  }
  .yb-right-panel .yb-panel { padding: 8px 12px; border-bottom: 1px solid var(--rule); }
  @media (max-width: 768px) {
    .yb-right-panel { display: none !important; }
  }

  /* Main yardage book page */
  .yb-book {
    background: var(--white); border: none;
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 100%;
  }

  /* Embed-mode overrides for iframe embedding (CSP Phase E.3: replaces
     3 .style.cssText calls in js/pages/course.js boot when ?embed=1).
     Applied via body.classList.add('embed-mode'). */
  body.embed-mode .yardage-layout     { display: block; }
  body.embed-mode .yb-main-container  { display: block; border: none; background: transparent; }
  body.embed-mode .yb-book            { background: transparent; border: none; overflow: visible; opacity: 1; }

  /* Book header */
  .yb-book-header {
    background: var(--green-deep); padding: 8px 18px;
    display: flex; align-items: center; gap: 20px;
  }
  .yb-hdr-hole { font-family: var(--body-font); font-size: 22px; font-weight: 700; color: var(--white); line-height: 1; }
  .yb-hdr-name { display: none; }
  .yb-hdr-center { display: flex; align-items: center; gap: 4px; }
  .yb-hdr-par-lbl { font-family: var(--body-font); font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
  .yb-hdr-par { font-family: var(--body-font); font-size: 18px; font-weight: 600; color: rgba(255,255,255,0.8); line-height: 1; }
  .yb-hdr-right { display: flex; align-items: center; gap: 12px; margin-left: auto; }
  .yb-hdr-hdcp { font-family: var(--body-font); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
  .yb-hdr-hdcp span { color: rgba(255,255,255,0.85); font-size: 12px; }
  .yb-hdr-target { font-family: var(--body-font); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.45); }
  .yb-hdr-target span { color: rgba(255,255,255,0.9); font-size: 13px; font-family: var(--body-font); font-weight: 600; }

  /* Two-col body (mobile), single-col on desktop (data col moved out) */
  .yb-body { display: grid; grid-template-columns: 1fr 300px; }
  @media (min-width: 769px) {
    .yb-body, .yb-body.gps-full { grid-template-columns: 1fr !important; flex: 1; min-height: 0; }
    .yb-data-col { display: none !important; } /* moved to main container 3rd column by JS */
    .yb-map-col { border-right: none; }
  }
  .yb-map-col { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .yb-map-label {
    padding: 10px 18px 8px; font-family: var(--body-font); font-size: 8px; letter-spacing: 0.18em;
    text-transform: uppercase; color: var(--ink-muted); border-bottom: 1px solid var(--rule);
    display: flex; justify-content: space-between; align-items: center;
  }
  .yb-map-shape-tag {
    background: var(--green-pale); color: var(--green-mid); font-size: 8px; letter-spacing: 0.1em;
    padding: 2px 7px; border-radius: 20px; border: 1px solid rgba(58,122,74,0.2);
  }
  .yb-map-area { flex: 1; background: #e8eedf; display: flex; flex-direction: column; justify-content: center; align-items: stretch; padding: 0; min-height: 0; overflow: hidden; }
  #hole-svg { width: 100%; height: 100%; display: block; }
  /* GPS mode — map gets more space, data col stays visible but narrower */
  .yb-body.gps-full { grid-template-columns: 3fr 1fr; }
  .yb-body.gps-full .yb-map-area {
    background: #f4f2ec; padding: 4px;
    min-height: 0; flex-direction: column;
  }
  .yb-body.gps-full #hole-svg {
    max-width: none; width: 100%; height: auto;
    display: block;
  }
  #elev-svg {
    width: 100%; height: auto; display: block;
  }
  /* GPS bottom row: notes only, no wind */
  .gps-green-col {
    border-top: 1px solid var(--rule);
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  }
  .gps-green-col .yb-green-map-wrap { border-right: 1px solid var(--rule); }
  .gps-green-col .yb-notes-wrap { padding: 14px 18px; }

  /* Shot dispersion arc animations */
  @keyframes shotArcDraw {
    0%   { stroke-dashoffset: var(--arc-len); opacity: 0.6; }
    70%  { stroke-dashoffset: 0; opacity: 0.4; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }
  @keyframes shotDotAppear {
    0%   { r: 0; opacity: 0; }
    60%  { r: 2.4; opacity: 0.8; }
    100% { r: 2.0; opacity: 0.75; }
  }
  .shot-arc {
    fill: none; stroke-width: 1; stroke-linecap: round;
    /* CSP Phase E.2: animation-duration + animation-delay set per-shot
       via CSS custom properties (--adu, --ad) which JS writes via
       setProperty in the post-render pass. Defaults match the old
       hardcoded values. */
    animation: shotArcDraw var(--adu, 0.4s) ease-out var(--ad, 0s) forwards;
  }
  .shot-dot {
    animation: shotDotAppear 0.2s ease-out var(--ad, 0s) forwards;
  }
  .shank-dot {
    animation: shotDotAppear 0.25s ease-out var(--ad, 0s) forwards;
  }
  /* CSP Phase E.2: was inline style="pointer-events:all;cursor:crosshair" */
  .disp-dot { pointer-events: all; cursor: crosshair; }

  /* Club toggle buttons */
  .yb-mode-btn {
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.04em;
    padding: 4px 10px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--rule); background: var(--bg); color: var(--ink-muted);
    transition: all .15s; text-transform: uppercase;
  }
  .yb-mode-btn:hover { border-color: rgba(58,122,74,0.3); background: var(--green-pale); }
  .yb-mode-btn.active {
    background: var(--green-deep); border-color: var(--green-deep);
    color: #fff; font-weight: 500;
  }
  .yb-club-btn {
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.04em;
    padding: 5px 10px; border-radius: 5px; cursor: pointer;
    border: 1px solid var(--rule); background: var(--bg); color: var(--ink-muted);
    transition: all .15s;
    /* CSP Phase E.2: was applied per-instance via inline `style="${btnH}"`
       in diagram-helpers.js — promoted to the base rule. */
    min-height: 44px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
  }
  #yb-pick-club-btn { width: 100%; }
  /* SVG <g> for the dispersion-dot group. .is-hidden hides it; the
     unhidden default state inherits SVG's implicit display. */
  .disp-dots-group.is-hidden { display: none; }
  .yb-club-btn:hover { border-color: rgba(58,122,74,0.3); background: var(--green-pale); }
  .yb-club-btn.active {
    background: var(--green-pale); border-color: rgba(58,122,74,0.4);
    color: var(--green-mid); font-weight: 500;
  }
  .yb-club-btn .club-rank {
    font-size: 7px; opacity: 0.5; margin-right: 2px;
  }
  /* Outcome bars */
  .yb-outcome-headline {
    font-family: var(--body-font); font-size: 13px; font-weight: 400;
    color: var(--ink); line-height: 1.4; margin-bottom: 10px; text-align: center;
  }
  .yb-outcome-headline strong { font-weight: 700; color: var(--green-accent); }
  .yb-outcome-row {
    display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
  }
  .yb-outcome-label {
    font-family: var(--body-font); font-size: 10px; letter-spacing: 0.03em;
    color: var(--ink-mid); min-width: 52px; text-align: right;
  }
  .yb-outcome-bar-bg {
    flex: 1; height: 14px; background: var(--bg); border-radius: 4px;
    border: 1px solid var(--rule); overflow: hidden;
  }
  .yb-outcome-bar {
    height: 100%; border-radius: 3px; transition: width .4s ease-out;
  }
  /* Per-outcome bar fill colors (CSP Phase E.2). Width is set in JS
     via setProperty (data-w attribute). Categories match the outcomes
     array in diagram-helpers.js — keep in sync. */
  .yb-outcome-bar.outcome-green   { background: #5a9a5a; }
  .yb-outcome-bar.outcome-fairway { background: #7ab87a; }
  .yb-outcome-bar.outcome-rough   { background: #a8c896; }
  .yb-outcome-bar.outcome-sand    { background: #d4b84a; }
  .yb-outcome-bar.outcome-desert  { background: #c9a961; }
  .yb-outcome-bar.outcome-trees   { background: #6b4226; }
  .yb-outcome-bar.outcome-water   { background: #3a7ec8; }
  .yb-outcome-bar.outcome-ob      { background: #c85050; }
  .yb-outcome-pct {
    font-family: var(--body-font); font-size: 11px; font-weight: 600;
    color: var(--ink); min-width: 28px;
  }

  /* Score-distribution stacked bar (CSP Phase E.2). Categories match
     the segments array in updateScoreDistViz() — keep in sync. */
  .score-dist-bar { display: flex; height: 20px; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); }
  .score-dist-seg {
    transition: width .4s ease-out;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
  }
  .score-dist-seg.seg-eagle   { background: #c8a84a; }
  .score-dist-seg.seg-birdie  { background: #3a7a4a; }
  .score-dist-seg.seg-par     { background: #7ab87a; }
  .score-dist-seg.seg-bogey   { background: #d4a44a; }
  .score-dist-seg.seg-dblplus { background: #c85050; }
  .score-dist-seg-pct {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 8px; color: #fff; font-weight: 600;
    letter-spacing: 0.02em; text-shadow: 0 0 2px rgba(0,0,0,0.3);
  }
  .score-dist-legend {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; justify-content: center;
  }
  .score-dist-legend-item {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 9px; color: var(--ink-mid);
    display: flex; align-items: center; gap: 3px;
  }
  .score-dist-legend-swatch {
    width: 7px; height: 7px; border-radius: 2px; display: inline-block;
  }
  .score-dist-legend-swatch.seg-eagle   { background: #c8a84a; }
  .score-dist-legend-swatch.seg-birdie  { background: #3a7a4a; }
  .score-dist-legend-swatch.seg-par     { background: #7ab87a; }
  .score-dist-legend-swatch.seg-bogey   { background: #d4a44a; }
  .score-dist-legend-swatch.seg-dblplus { background: #c85050; }

  /* Yardage-book cart row "type" pill (CSP Phase E.2: replaces inline
     style="background:${typeBg};color:${typeColor}" in pdf-builder.js). */
  .yb-cart-type-pill {
    font-family: 'Space Grotesk', sans-serif; font-size: 9px;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 2px 6px; border-radius: 3px;
  }
  .yb-cart-type-pill.standard     { background: var(--green-pale); color: var(--green-mid); }
  .yb-cart-type-pill.personalized { background: var(--gold-pale);  color: var(--gold); }

  /* Print tee selector buttons (CSP Phase E.2: replaces inline style
     with active/inactive border/background/color ternaries). Tee
     color dots use the global .tee-color-${name} palette in base.css. */
  .print-tee-btn {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 6px;
    border: 1.5px solid rgba(28,37,48,0.15);
    background: white; color: var(--green-deep);
    font-family: 'Space Grotesk', sans-serif; font-size: 11px;
    cursor: pointer; transition: all .15s;
  }
  .print-tee-btn.is-active {
    border-color: var(--green-deep); background: var(--green-deep); color: white;
  }
  .print-tee-dot {
    display: inline-block; width: 10px; height: 10px;
    border-radius: 50%; border: 1px solid rgba(0,0,0,0.15);
  }
  /* Yardage-book cart row layout (CSP Phase E.3: replaces
     row.style.cssText in pdf-builder.js). */
  .yb-cart-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-bottom: 1px solid var(--rule);
    background: var(--white);
  }
  .yb-cart-row:last-child { border-bottom: none; }
  /* Boot-failure error banner (CSP Phase E.3: replaces errDiv.style.cssText
     in js/pages/course.js boot catch handler). */
  .boot-error-banner {
    background: #cc3333; color: white;
    padding: 12px 20px; margin-top: 12px; border-radius: 6px;
    font-family: var(--mono-font); font-size: 11px;
  }

  /* Shot hover tooltip */
  .shot-hover-group { pointer-events: none; }
  .disp-dot:hover { r: 5 !important; stroke-width: 1.5 !important; stroke: rgba(0,0,0,0.5) !important; }

  /* Right data col */
  .yb-data-col { display: flex; flex-direction: column; }
  .yb-panel { padding: 14px 18px; border-bottom: 1px solid var(--rule); }
  .yb-panel:last-child { flex: 1; }
  .yb-panel-title { font-family: var(--body-font); font-size: 9px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mid); margin-bottom: 10px; }
  .yb-tee-shot-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
  .yb-tee-shot-header .yb-panel-title { margin-bottom: 0; }

  /* Tee rows */
  .yb-tee-rows { display: flex; flex-direction: column; gap: 3px; }
  .yb-tee-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 8px; border-radius: 6px; background: var(--bg); border: 1px solid transparent;
    cursor: pointer; transition: background .12s, border-color .12s;
  }
  .yb-tee-row:hover { background: var(--green-pale); border-color: rgba(58,122,74,0.2); }
  .yb-tee-row.active-tee { background: var(--green-pale); border-color: rgba(58,122,74,0.3); }
  .yb-tee-left { display: flex; align-items: center; gap: 6px; }
  .yb-tee-swatch { width: 8px; height: 8px; border-radius: 50%; }
  .yb-tee-name { font-family: var(--body-font); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
  .yb-tee-row.active-tee .yb-tee-name { color: var(--green-mid); }
  .yb-tee-yds { font-family: var(--body-font); font-size: 14px; font-weight: 600; color: var(--ink); }
  .yb-tee-unit { font-family: var(--body-font); font-size: 9px; color: var(--ink-muted); margin-left: 2px; }

  /* Key distances */
  .yb-distances-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
  .yb-dist-item { background: var(--bg); border-radius: 7px; padding: 8px 10px; border: 1px solid var(--rule); }
  .yb-dist-lbl { font-family: var(--body-font); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 3px; }
  .yb-dist-val { font-family: var(--body-font); font-size: 18px; font-weight: 600; color: var(--ink); }
  .yb-dist-val small { font-family: var(--body-font); font-size: 9px; color: var(--ink-muted); font-weight: 400; }
  .yb-distances-compact { gap: 3px; }
  .yb-distances-compact .yb-dist-item { padding: 4px 8px; }
  .yb-distances-compact .yb-dist-lbl { font-size: 7px; margin-bottom: 1px; }
  .yb-distances-compact .yb-dist-val { font-size: 14px; }

  /* Bottom row */
  .yb-green-col { border-top: 1px solid var(--rule); display: grid; grid-template-columns: 1fr 1fr; }
  .yb-green-map-wrap { border-right: 1px solid var(--rule); padding: 14px 18px; }
  .yb-strategy-full.gps-strategy { grid-column: 1 / -1; border-right: none; }
  .yb-green-svg-area { background: none; border-radius: 8px; display: flex; justify-content: center; align-items: center; padding: 2px; }
  #green-svg { width: 100%; height: auto; display: block; margin: 0 auto; }
  .yb-right-col { display: flex; flex-direction: column; }
  .yb-wind-wrap { padding: 14px 18px; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; align-items: center; gap: 8px; }
  #wind-compass { width: 80px; height: 80px; }
  .yb-notes-wrap { padding: 14px 18px; flex: 1; }
  .yb-notes-input {
    width: 100%; min-height: 80px; resize: vertical;
    font-family: var(--body-font); font-size: 14px; color: var(--ink);
    background: var(--bg); border: 1px solid var(--rule); border-radius: 7px;
    padding: 8px 10px; line-height: 1.5; outline: none; transition: border-color .15s;
  }
  .yb-notes-input:focus { border-color: var(--green-accent); }
  .yb-notes-input::placeholder { color: var(--ink-muted); font-style: italic; }

  /* Strategy */
  .yb-strategy-wrap {
    padding: 12px 18px; background: var(--green-pale); border-top: 1px solid rgba(58,122,74,0.15);
    display: flex; gap: 10px; align-items: flex-start;
  }
  .yb-strategy-icon { flex-shrink: 0; margin-top: 1px; color: var(--green-accent); }
  .yb-strategy-text { font-family: var(--body-font); font-size: 14px; color: var(--green-deep); line-height: 1.5; font-style: italic; }

  /* Nav */
  .yb-nav {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 20px; border-top: 1px solid var(--rule); background: var(--white);
  }
  @media (min-width: 769px) {
    .yb-nav { padding: 4px 16px; }
    .yb-nav-btn { padding: 3px 10px; font-size: 9px; }
    .yb-nav-center { font-size: 9px; }
  }
  .yb-nav-btn {
    font-family: var(--body-font); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
    cursor: pointer; background: none; border: 1.5px solid var(--rule); border-radius: 6px;
    padding: 7px 14px; color: var(--ink-muted); transition: all .15s;
    display: flex; align-items: center; gap: 6px;
  }
  .yb-nav-btn:hover { border-color: var(--green-accent); color: var(--green-mid); }
  .yb-nav-btn:disabled { opacity: 0.3; cursor: default; pointer-events: none; }
  .yb-nav-center { font-family: var(--body-font); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }

  /* Mobile hole dot selector — hidden on desktop */
  .hole-dots {
    display: none;
    gap: 6px; flex-wrap: wrap; justify-content: center;
    padding: 12px 12px 8px; background: var(--white);
    border-bottom: 1px solid var(--rule);
  }
  .hole-dot {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--body-font); font-size: 11px; font-weight: 600;
    color: var(--green-deep); background: var(--bg);
    border: 1.5px solid var(--rule); cursor: pointer;
    transition: background .1s, color .1s, border-color .1s;
  }
  .hole-dot:hover { background: var(--green-pale); }
  .hole-dot.active {
    background: var(--green-deep); color: var(--white);
    border-color: var(--green-deep);
  }

  /* ════════════════════════════════
     RESPONSIVE — TABLET / LARGE PHONE
  ════════════════════════════════ */
  @media (max-width: 768px) {
    /* ── General ── */
    html { overflow-x: hidden; }
    body { overflow-x: hidden; font-size: 14px; }
    input, select, textarea { font-size: 16px !important; /* prevent iOS zoom */ }
    button { min-height: 44px; }

    /* ── Header ── */
    #header { padding: 0 12px; }
    .header-brand {
      white-space: nowrap;
    }

    /* ── Hero ── */
    #course-hero { padding: calc(var(--header-h) + 20px) 16px 20px; }
    .hero-name {
      font-size: 22px;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .hero-stats {
      display: grid; grid-template-columns: repeat(3, 1fr);
      gap: 10px 12px;
    }
    .hero-stat { padding: 0; }
    .hero-divider { display: none; }
    .hero-stat-val { font-size: 16px; }
    .hero-stat-lbl { font-size: 7.5px; }

    /* ── Tab bar ── */
    #tab-bar {
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      scroll-snap-type: x mandatory;
      flex-wrap: nowrap;
      scrollbar-width: none; /* Firefox */
    }
    #tab-bar::-webkit-scrollbar { display: none; }
    /* On mobile: hide extra tabs, show "More" */
    .tab-btn[data-tab="distribution"],
    .tab-btn[data-tab="notimportant"],
    .tab-btn[data-tab="print"] { }
    @media (max-width: 767px) {
      #tab-bar { overflow: visible !important; }
      .tab-btn[data-tab="distribution"],
      .tab-btn[data-tab="notimportant"],
      .tab-btn[data-tab="print"],
      .tab-btn-hide-mobile { display: none !important; }
      /* .tab-btn-play-live removed — live play disabled */
      .tab-more-wrap { display: block; position: relative; flex-shrink: 0; }
      .tab-more-btn {
        display: flex !important; align-items: center; gap: 5px;
        min-height: 44px; padding: 0 14px;
        font-family: var(--body-font); font-size: 10px;
        letter-spacing: 0.14em; text-transform: uppercase;
        color: var(--ink-muted); background: none; border: none;
        border-bottom: 2px solid transparent; cursor: pointer;
        white-space: nowrap;
      }
      .tab-more-btn.active { color: var(--green-deep); border-bottom-color: var(--green-accent); }
      .tab-more-menu {
        display: none; position: absolute; top: 100%; right: 0;
        background: var(--white); border: 1px solid var(--rule);
        border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,0.12);
        min-width: 180px; z-index: 500; padding: 4px 0;
      }
      .tab-more-menu.open { display: block; }
      .tab-more-item {
        display: block; width: 100%; text-align: left;
        padding: 12px 16px; border: none; background: none;
        font-family: var(--body-font); font-size: 12px;
        letter-spacing: 0.08em; text-transform: uppercase;
        color: var(--ink-mid); cursor: pointer;
        border-bottom: 1px solid var(--rule);
      }
      .tab-more-item:last-child { border-bottom: none; }
      .tab-more-item:hover { background: var(--bg); color: var(--green-mid); }
      .tab-more-item.active { color: var(--green-deep); font-weight: 600; }
    }
    .tab-btn {
      flex: 0 0 auto; min-width: max-content;
      min-height: 44px; padding: 0 14px;
      scroll-snap-align: start;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      max-width: none;
    }

    /* ── Scorecard tab ── */
    #scorecard-panel { padding: 16px 12px; }
    .scorecard-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .sc-table td.sc-label {
      position: sticky; left: 0; z-index: 2;
      background: var(--white);
    }
    .sc-table .sc-section-hdr td.sc-label {
      position: sticky; left: 0; z-index: 2;
      background: var(--green-deep);
    }
    .sc-table .sc-par-row td.sc-label {
      background: rgba(245,220,140,0.18);
    }
    .sc-table .sc-target-row td.sc-label {
      background: var(--green-deep);
    }
    .target-banner { padding: 16px; gap: 12px; }
    .target-banner-num { font-size: 40px; }
    .target-banner-right { gap: 16px; }
    .tee-rating-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }

    /* ── Yardage book tab ── */
    .yardage-layout { grid-template-columns: 1fr; }
    .hole-list { display: none; }
    .hole-dots { display: flex; }
    .hole-dot { width: 36px; height: 36px; font-size: 12px; }
    #yardage-panel { padding: 0; }
    .yb-book { border-radius: 0; border-left: none; border-right: none; max-height: none; }
    .yb-body { grid-template-columns: 1fr; }
    .yb-body.gps-full { grid-template-columns: 1fr; }
    .yb-map-col { border-right: none; }
    .yb-map-area { min-height: 220px; padding: 12px; }
    #hole-svg { max-width: 100%; height: auto; }
    /* Mobile: single column stacked layout */
    .yardage-layout { grid-template-columns: 1fr !important; }
    .yb-info-col { display: none !important; }
    .yb-main-container { display: contents; } /* flatten on mobile */
    .yb-book { display: block; }
    .yb-body { display: block; }
    .yb-body.gps-full { display: block; }
    .yb-map-col { border-right: none; }
    .yb-data-col { border-top: 1px solid var(--rule); }
    .yb-green-col { display: block; grid-template-columns: 1fr; }
    .yb-green-col .yb-right-col { display: none; } /* hide wind on mobile */
    /* Key distances: 4 per row, compact */
    .yb-distances-grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4px; }
    .yb-distances-compact .yb-dist-item { padding: 3px 5px; }
    .yb-distances-compact .yb-dist-lbl { font-size: 6px; letter-spacing: 0.06em; margin-bottom: 1px; }
    .yb-distances-compact .yb-dist-val { font-size: 12px; }
    .yb-distances-compact .yb-dist-val small { font-size: 7px; }
    .yb-nav { order: 4; }
    .yb-panel { padding: 12px 14px; }
    .yb-green-map-wrap { border-right: none; border-bottom: 1px solid var(--rule); }
    .yb-strategy-wrap { padding: 12px 14px; }
    .yb-strategy-text { font-size: 14px; }
    .gps-green-col { grid-template-columns: 1fr; }
    .gps-green-col .yb-green-map-wrap { border-right: none; border-bottom: 1px solid var(--rule); }
    .yb-nav { padding: 10px 12px; }
    .yb-nav-btn {
      min-height: 44px; padding: 10px 16px; flex: 1;
      justify-content: center;
    }
    .yb-nav-center { font-size: 9px; padding: 0 6px; }
    .yb-book-header { padding: 14px 16px; gap: 10px; }
    .yb-hdr-hole { font-size: 26px; }
    .yb-hdr-par { font-size: 22px; }
    .yb-distances-grid { grid-template-columns: 1fr 1fr; }
    .yb-club-btn { min-height: 36px; padding: 6px 10px; }
    .yb-mode-btn { min-height: 36px; padding: 6px 12px; }

    /* ── Distribution tab ── */
    #dist-panel { padding: 20px 14px; }
    .dist-header h2 { font-size: 22px; }
    .dist-stats { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dist-chart-card { padding: 16px 14px 14px; border-radius: 10px; }
    .dist-chart-title { font-size: 15px; }
    .dist-legend { gap: 12px; }
    .dist-method { padding: 14px 16px; font-size: 13px; }

    /* ── Build yardage book tab ── */
    #tab-print [style*="max-width:520px"] { padding: 0 14px !important; }

    /* ── Tier gates (paywall) ── */
    .tier-gate { padding: 40px 16px; min-height: 40vh; }
    .tier-gate h3 { font-size: 20px; }
    .tier-gate p { font-size: 13px; }
    .tier-gate-options { flex-direction: column; align-items: stretch; gap: 10px; }
    .tier-gate-option { min-width: unset; width: 100%; }

    /* ── Course map tab ── */
    #ni-panel { padding: 20px 14px; }
    .ni-header h2 { font-size: 22px; }
    .ni-legend { gap: 10px; flex-wrap: wrap; padding: 10px 0 4px; font-size: 9px; }

    /* ── Footer ── */
    .site-footer { padding: 32px 16px 28px; }
    .footer-links { gap: 14px; }
  }

  /* ════════════════════════════════
     RESPONSIVE — SMALL PHONE
  ════════════════════════════════ */
  @media (max-width: 480px) {
    /* ── Header ── */
    .header-brand { font-size: 12px; white-space: nowrap; }
    .back-btn { font-size: 9px; gap: 3px; }

    /* ── Hero ── */
    #course-hero { padding: calc(var(--header-h) + 16px) 12px 16px; }
    .hero-name { font-size: 19px; }
    .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 8px 10px; }
    .hero-stat-val { font-size: 15px; }

    /* ── Tab bar ── */
    .tab-btn { padding: 0 10px; font-size: 9px; letter-spacing: 0.1em; }

    /* ── Scorecard ── */
    #scorecard-panel { padding: 12px 8px; }
    .sc-table { font-size: 10px; }
    .sc-table td { padding: 6px 4px; }
    .sc-table td.sc-label { padding-left: 8px; font-size: 9px; }
    .target-banner { padding: 12px; flex-direction: column; align-items: flex-start; }
    .target-banner-num { font-size: 36px; }
    .target-banner-right { gap: 12px; width: 100%; }
    .tee-rating-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .tee-rating-card { padding: 10px 12px; }
    .no-handicap-banner { font-size: 13px; padding: 12px 14px; gap: 8px; }

    /* ── Yardage book ── */
    .hole-dot { width: 36px; height: 36px; }
    .hole-dots { gap: 5px; padding: 10px 10px 6px; }
    .yb-book-header {
      grid-template-columns: 1fr auto 1fr;
      padding: 12px 12px; gap: 6px;
    }
    .yb-hdr-hole { font-size: 22px; }
    .yb-hdr-par { font-size: 20px; }
    .yb-hdr-hdcp { font-size: 8px; }
    .yb-hdr-target { font-size: 8px; }
    .yb-map-area { min-height: 200px; padding: 8px; }
    .yb-panel { padding: 10px 12px; }
    .yb-panel-title { font-size: 8px; margin-bottom: 8px; }
    .yb-tee-name { font-size: 9px; }
    .yb-tee-yds { font-size: 15px; }
    .yb-distances-compact .yb-dist-val { font-size: 13px; }
    .yb-strategy-text { font-size: 13px; }
    .yb-nav-btn { font-size: 9px; padding: 8px 10px; }

    /* ── Distribution ── */
    #dist-panel { padding: 16px 10px; }
    .dist-header h2 { font-size: 20px; }
    .dist-header p { font-size: 13px; }
    .dist-tee-btn { font-size: 9px; padding: 5px 10px; }
    .dist-stat { padding: 10px 12px; }
    .dist-stat-val { font-size: 20px; }
    .dist-stat-lbl { font-size: 7.5px; }
    .dist-chart-card { padding: 14px 10px 12px; }
    .dist-chart-title { font-size: 14px; margin-bottom: 14px; }
    .dist-legend { gap: 8px; font-size: 8px; }
    .dist-legend-item { font-size: 8px; gap: 4px; }
    .dist-method { padding: 12px 14px; font-size: 12px; }

    /* ── Tier gates (paywall) feature preview cards ── */
    .tier-gate { padding: 28px 12px; }
    .tier-gate-option { padding: 14px 16px; }
    .tier-gate-option-price { font-size: 20px; }

    /* ── Course map ── */
    #ni-panel { padding: 16px 10px; }
    .ni-header h2 { font-size: 20px; }
    .ni-header p { font-size: 13px; }
    .ni-toolbar { font-size: 10px; gap: 6px; padding: 8px 10px; }
    .ni-toolbar button { font-size: 10px; padding: 4px 10px; min-height: 36px; }

    /* ── Footer ── */
    .site-footer { padding: 24px 12px 20px; }
    .footer-links { gap: 10px; }
    .footer-links a { font-size: 10px; }
  }

  /* ── Tier gate feature preview cards — stack on mobile ── */
  @media (max-width: 768px) {
    #gate-yardage [style*="grid-template-columns:1fr 1fr"],
    #gate-distribution [style*="grid-template-columns:1fr 1fr"] {
      grid-template-columns: 1fr !important;
      gap: 10px !important;
      padding: 0 8px;
    }
  }

  /* ── Course map full-height on mobile ── */
  @media (max-width: 768px) {
    #tab-notimportant .ni-wrap {
      min-height: calc(100vh - var(--header-h) - var(--tab-h) - 120px);
    }
    #tab-notimportant #ni-svg {
      min-height: calc(100vh - var(--header-h) - var(--tab-h) - 160px);
    }
  }
  /* ════════════════════════════════
     DISTRIBUTION TAB
  ════════════════════════════════ */
  #tab-distribution { background: var(--bg); }
  #dist-panel { max-width: 960px; margin: 0 auto; padding: 32px 32px; }

  .dist-header { margin-bottom: 20px; }
  .dist-header h2 {
    font-family: var(--body-font); font-size: 26px; font-weight: 600;
    color: var(--ink); margin-bottom: 6px;
  }
  .dist-header p {
    font-family: var(--body-font); font-size: 15px;
    color: var(--ink-muted); line-height: 1.6;
  }
  .dist-header p strong { color: var(--ink-mid); font-style: normal; font-weight: 500; }


  /* Tee selector bar */
  .dist-tee-bar {
    display: flex; gap: 10px; flex-wrap: wrap;
    margin-bottom: 22px; align-items: center;
  }
  .dist-tee-bar-label {
    font-family: var(--body-font); font-size: 9px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-muted); margin-right: 4px;
  }
  .dist-tee-btn {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--body-font); font-size: 10px; letter-spacing: 0.08em;
    text-transform: uppercase; padding: 6px 14px; border-radius: 20px;
    border: 1.5px solid var(--rule); background: var(--white);
    cursor: pointer; transition: all .15s; color: var(--ink-mid);
  }
  .dist-tee-btn:hover { border-color: var(--green-accent); color: var(--green-deep); }
  .dist-tee-btn.active {
    background: var(--green-deep); color: white; border-color: var(--green-deep);
  }
  .dist-tee-dot {
    width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.3);
  }
  .dist-subtitle-tee-dot {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.15);
    vertical-align: middle; margin: 0 3px;
  }

  /* Tee row + dot used in the hero stats. CSP Phase E.2: replaces
     inline style="display:inline-flex;..." on the outer span and
     style="background:${hex}" on the dot. */
  .hero-tee-row { display: inline-flex; align-items: center; gap: 6px; }
  .hero-tee-dot {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
    border: 1px solid rgba(255,255,255,0.3);
  }

  /* Status colors for the score-distribution legend swatches.
     CSP Phase E.2: classes replace dynamic style="background:${color}". */
  .dist-color-beat   { background: #4488cc; opacity: 0.7; }
  .dist-color-target { background: #e8965f; opacity: 0.9; }
  .dist-color-miss   { background: #cc4433; opacity: 0.65; }
  .dist-color-med    { background: #3a7a4a; }

  /* Distribution-summary table row styling. CSP Phase E.2: classes
     replace inline style="${bg}" computed in JS. */
  .dist-row-divider  { border-top: 2px solid #2c5046; }
  .dist-row-alt      { background: #ecebe3; }

  /* Stats strip */
  .dist-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px; margin-bottom: 24px;
  }
  .dist-stat {
    background: var(--white); border: 1px solid var(--rule);
    border-radius: 10px; padding: 14px 16px;
    border-top: 3px solid var(--green-accent);
  }
  .dist-stat.gold { border-top-color: var(--gold); background: var(--gold-pale); }
  .dist-stat-lbl {
    font-family: var(--body-font); font-size: 8px; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--ink-muted); margin-bottom: 5px;
  }
  .dist-stat-val {
    font-family: var(--body-font); font-size: 24px; font-weight: 600;
    color: var(--green-deep); line-height: 1;
  }
  .dist-stat.gold .dist-stat-val { color: var(--gold); }
  .dist-stat-sub {
    font-family: var(--body-font); font-size: 12px;
    color: var(--ink-muted); font-style: italic; margin-top: 3px;
  }

  /* Chart card */
  .dist-chart-card {
    background: var(--white); border: 1px solid var(--rule);
    border-radius: 14px; padding: 28px 28px 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 16px rgba(26,51,32,0.04);
  }
  .dist-chart-title {
    font-family: var(--body-font); font-size: 17px; font-weight: 600;
    color: var(--green-deep); margin-bottom: 20px;
  }
  #dist-svg { width: 100%; overflow: visible; display: block; }

  /* Legend */
  .dist-legend {
    display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px;
    padding-top: 14px; border-top: 1px solid var(--rule);
  }
  .dist-legend-item {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--body-font); font-size: 9px;
    color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.12em;
  }
  .dist-legend-swatch { width: 20px; height: 4px; border-radius: 2px; flex-shrink: 0; }
  .dist-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }

  /* Methodology note */
  .dist-method {
    background: var(--green-pale); border: 1px solid rgba(58,122,74,0.15);
    border-radius: 10px; padding: 16px 20px;
    font-family: var(--body-font); font-size: 14px;
    color: var(--ink-mid); line-height: 1.65;
  }
  .dist-method strong {
    font-family: var(--body-font); font-size: 8.5px;
    text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--green-accent); display: block; margin-bottom: 5px;
  }

  /* ════════════════════════════════
     NOT IMPORTANT (COURSE MAP) TAB
  ════════════════════════════════ */
  #tab-notimportant { background: var(--bg); }
  #ni-panel { max-width: 960px; margin: 0 auto; padding: 32px 32px; }
  #ni-admin-panel { margin-top: 16px; }
  .ni-header { margin-bottom: 16px; }
  .ni-header h2 {
    font-family: var(--body-font); font-size: 26px; font-weight: 600;
    color: var(--ink); margin-bottom: 6px;
  }
  .ni-header p {
    font-family: var(--body-font); font-size: 15px;
    color: var(--ink-muted); line-height: 1.6;
  }
  .ni-wrap {
    background: #f4f2ec; border-radius: 12px; border: 1px solid var(--rule);
    overflow: hidden; position: relative;
  }
  #ni-svg { width: 100%; display: block; position: relative; z-index: 1; }
  #ni-sat-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; display: none; }
  .ni-wrap.satellite #ni-sat-canvas { display: block; }
  .ni-wrap.satellite #ni-svg { background: transparent; }
  .ni-sat-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    font-family: var(--body-font); font-size: 10px; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--ink-muted);
    border: 1px solid var(--rule-mid); border-radius: 6px; padding: 5px 12px;
    background: var(--white); cursor: pointer; transition: all .2s;
    margin-left: 12px;
  }
  .ni-sat-toggle:hover { border-color: var(--green-accent); color: var(--green-mid); }
  .ni-sat-toggle.active { background: var(--green-deep); color: var(--white); border-color: var(--green-deep); }
  .ni-legend {
    display: flex; gap: 20px; justify-content: center; padding: 14px 0 4px;
    font-family: var(--body-font); font-size: 10px; color: var(--ink-muted);
    letter-spacing: 0.06em;
  }
  .ni-legend-item { display: flex; align-items: center; gap: 5px; }
  .ni-legend-swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.12); }
  /* Color variants for course-map legend (CSP Phase E.2: replaces
     inline style="background:${color}" in js/course-map.js). Hex
     values match the corresponding palette vars in that file. */
  .ni-legend-swatch-fairway { background: #c8d9b0; }
  .ni-legend-swatch-green   { background: #8dbb74; }
  .ni-legend-swatch-bunker  { background: #e8dfc0; }
  .ni-legend-swatch-water   { background: #b3d4e8; }
  .ni-legend-swatch-trees   { background: hsla(140,35%,30%,0.45); }
  .ni-legend-swatch-rough   { background: rgba(180,195,150,0.3); }
  /* Admin tagging tool */
  .ni-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px;
    background: rgba(26,51,32,0.06); border-radius: 8px; margin-bottom: 12px;
    font-family: var(--body-font); font-size: 11px;
  }
  .ni-toolbar button {
    padding: 5px 12px; border-radius: 5px; border: 1px solid rgba(26,51,32,0.25);
    background: white; cursor: pointer; font-family: var(--body-font); font-size: 11px;
    transition: all 0.15s;
  }
  .ni-toolbar button.active { background: var(--green-deep); color: white; border-color: var(--green-deep); }
  .ni-toolbar button:hover:not(.active) { background: rgba(26,51,32,0.08); }
  .ni-toolbar .ni-status { color: var(--ink-muted); flex: 1; }
  .ni-toolbar select {
    padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(26,51,32,0.25);
    font-family: var(--body-font); font-size: 11px; background: white;
  }
  .ni-tag-list {
    margin-top: 10px; font-family: var(--body-font); font-size: 10px;
    max-height: 60vh; overflow-y: auto; padding: 8px 12px;
    background: rgba(26,51,32,0.03); border-radius: 6px;
  }
  .ni-tag-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; border-bottom: 1px solid rgba(0,0,0,0.05); }
  .ni-tag-row .tag-delete { cursor: pointer; color: #c85050; font-weight: bold; }
  .ni-save-btn {
    padding: 8px 20px; border-radius: 6px; border: none;
    background: var(--green-deep); color: white; cursor: pointer;
    font-family: var(--body-font); font-size: 12px; font-weight: 600;
    margin-top: 10px;
  }
  .ni-save-btn:hover { background: var(--green-mid); }

    .site-footer{background:var(--bg-warm);border-top:1px solid var(--rule);padding:48px 24px 36px;text-align:center}
    .footer-links{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-bottom:16px}
    .footer-links a{font-family:var(--body-font);font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-muted);text-decoration:none;transition:color 0.2s}
    .footer-links a:hover{color:var(--green-mid)}
    .footer-copy,.footer-attr{font-family:var(--mono-font);font-size:11px;color:var(--ink-muted);margin-bottom:6px}
    .footer-attr a{color:var(--ink-muted);text-decoration:none}
    .footer-attr a:hover{text-decoration:underline}
    .footer-email a{font-family:var(--mono-font);font-size:11px;color:var(--gold);text-decoration:none}
    .footer-email a:hover{text-decoration:underline}

  /* ── First-visit onboarding tip ── */
  .yb-onboarding {
    max-width: 680px; margin: 0 auto 12px; padding: 0 16px;
  }
  .yb-onboarding-inner {
    background: var(--green-deep); border-radius: 10px; padding: 16px 20px;
    display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
    box-shadow: 0 2px 12px rgba(26,51,32,0.15);
  }
  .yb-onboarding-steps {
    display: flex; gap: 20px; flex: 1; flex-wrap: wrap;
  }
  .yb-onboarding-step {
    display: flex; align-items: center; gap: 6px;
    font-family: var(--body-font); font-size: 12px;
    color: rgba(255,255,255,0.8); line-height: 1.3;
  }
  .yb-onboarding-step strong { color: white; font-weight: 600; }
  .yb-onboarding-icon { font-size: 14px; flex-shrink: 0; }
  .yb-onboarding-dismiss {
    font-family: var(--mono-font); font-size: 9px; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--green-accent); background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.2); border-radius: 6px;
    padding: 8px 16px; cursor: pointer; white-space: nowrap; transition: all .15s;
  }
  .yb-onboarding-dismiss:hover { background: rgba(255,255,255,0.2); color: white; }
  @media (max-width: 768px) {
    .yb-onboarding { padding: 0 10px; }
    .yb-onboarding-inner { padding: 12px 14px; gap: 12px; }
    .yb-onboarding-steps { gap: 8px; flex-direction: column; }
    .yb-onboarding-step { font-size: 11px; }
  }

  /* ── Sticky mobile hole nav ── */
  .yb-sticky-nav {
    display: none;
  }
  @media (max-width: 768px) {
    .yb-sticky-nav {
      display: flex;
      position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
      background: var(--white);
      border-top: 1px solid var(--rule);
      box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
      padding: 8px 12px;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .yb-sticky-btn {
      display: flex; align-items: center; gap: 4px;
      font-family: var(--body-font); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
      color: var(--green-deep); background: var(--green-pale);
      border: 1px solid rgba(58,122,74,0.2); border-radius: 6px;
      padding: 10px 16px; cursor: pointer;
      min-height: 44px; min-width: 80px; justify-content: center;
      transition: all .15s;
    }
    .yb-sticky-btn:hover { background: var(--green-accent); color: white; }
    .yb-sticky-btn:disabled { opacity: 0.3; pointer-events: none; }
    .yb-sticky-center {
      display: flex; flex-direction: column; align-items: center; gap: 1px;
    }
    .yb-sticky-center span:first-child {
      font-family: var(--body-font); font-size: 12px; font-weight: 600;
      letter-spacing: 0.1em; color: var(--green-deep);
    }
    .yb-sticky-hint {
      font-family: var(--mono-font); font-size: 7px; letter-spacing: 0.06em;
      color: var(--ink-muted); text-transform: uppercase;
    }
    /* Add bottom padding to body so sticky nav doesn't cover content */
    #tab-yardage { padding-bottom: 64px; }
  }


/* Cart-row remove button hover — was inline onmouseenter/onmouseleave. */
.yb-cart-remove-btn:hover { opacity: 1 !important; color: #c05050 !important; }