*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─────────────────────────────────────────────────────────────
   Fonts. Metric-matched local fallbacks reduce layout shift while
   the web fonts load; the web font files themselves sit on Bunny
   Fonts (bunny.net) — a privacy-respecting, GDPR-friendly host.
   ───────────────────────────────────────────────────────────── */
@font-face {
  font-family: 'DM Sans Fallback';
  src: local('Arial');
  size-adjust: 96.2%; ascent-override: 99%; descent-override: 26%; line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Serif Display Fallback';
  src: local('Georgia');
  size-adjust: 101.4%; ascent-override: 95%; descent-override: 24%; line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Mono Fallback';
  src: local('Courier New');
  size-adjust: 83.5%; ascent-override: 105%; descent-override: 28%; line-gap-override: 0%;
}
@font-face {
  font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap;
  src: url(https://fonts.bunny.net/dm-serif-display/files/dm-serif-display-latin-400-italic.woff2) format('woff2'), url(https://fonts.bunny.net/dm-serif-display/files/dm-serif-display-latin-400-italic.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Serif Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://fonts.bunny.net/dm-serif-display/files/dm-serif-display-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/dm-serif-display/files/dm-serif-display-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(https://fonts.bunny.net/dm-mono/files/dm-mono-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/dm-mono/files/dm-mono-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(https://fonts.bunny.net/dm-mono/files/dm-mono-latin-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/dm-mono/files/dm-mono-latin-500-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-stretch: 100%; font-display: swap;
  src: url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-400-normal.woff2) format('woff2'), url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-stretch: 100%; font-display: swap;
  src: url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-500-normal.woff2) format('woff2'), url(https://fonts.bunny.net/dm-sans/files/dm-sans-latin-500-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

  :root {
    --green-dark: #1a3a2a; --green-mid: #2d6a4f; --green-light: #52b788;
    --green-pale: #e8dfc8; --fairway: #d4c9a8;
    --ink: #1e1a14; --muted: #6b5f47;
    --border: rgba(100,80,40,0.18); --surface: #f5f0e8; --card: #faf7f2;
    --radius: 10px;
  }
  body { font-family:'DM Sans','DM Sans Fallback',sans-serif; background:var(--surface); color:var(--ink); min-height:100vh; display:flex; flex-direction:column; }

  /* ── Header ── */
  header { background:var(--green-dark); padding:1.75rem 2rem; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; text-align:center; }
  header::before { content:''; position:absolute; top:-40px; right:-40px; width:200px; height:200px; border-radius:50%; background:rgba(82,183,136,0.1); }
  .header-brand h1 { font-family:'DM Serif Display','DM Serif Display Fallback',serif; font-size:clamp(1.5rem,4vw,2.2rem); color:#fff; line-height:1.1; }
  .header-brand h1 em { color:var(--green-light); font-style:italic; }
  .header-brand p { color:rgba(255,255,255,0.65); font-size:13px; margin-top:3px; }

  /* ── Layout ── */
  main { flex:1; max-width:900px; margin:0 auto; padding:1.75rem 1.25rem 4rem; width:100%; }

  /* ── Search view ── */
  .search-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.5rem; margin-bottom:1.25rem; }
  .field { display:flex; flex-direction:column; gap:5px; }
  .field label { font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.05em; text-transform:uppercase; }
  .field input { padding:.6rem .9rem; border:1px solid var(--border); border-radius:var(--radius); font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:15px; color:var(--ink); background:var(--surface); outline:none; transition:border-color .15s,box-shadow .15s; }
  .field input:focus { border-color:var(--green-mid); box-shadow:0 0 0 3px rgba(45,106,79,.1); }
  .field input::placeholder { color:#b0a48c; }
  .search-row { display:flex; gap:10px; flex-wrap:wrap; align-items:flex-start; }
  .search-row .field:first-child { flex:2; min-width:180px; }
  .search-row .field:last-child { flex:1; min-width:140px; }
  .radius-row { display:flex; gap:10px; margin-top:.85rem; align-items:flex-end; flex-wrap:wrap; }
  .slider-wrap { flex:1; min-width:160px; display:flex; flex-direction:column; gap:5px; }
  .slider-label { display:flex; justify-content:space-between; font-size:11px; font-weight:500; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .slider-label span:last-child { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:12px; color:var(--green-mid); text-transform:none; }
  input[type=range] { -webkit-appearance:none; appearance:none; width:100%; height:4px; border-radius:2px; background:var(--fairway); outline:none; cursor:pointer; }
  input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--green-mid); border:2px solid #fff; box-shadow:0 0 0 1px var(--green-mid); cursor:pointer; }
  .btn-primary { padding:.65rem 1.5rem; background:var(--green-dark); color:#fff; border:none; border-radius:var(--radius); font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:14px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:7px; transition:background .15s,transform .1s; white-space:nowrap; align-self:flex-end; }
  .btn-primary:hover { background:var(--green-mid); }
  .btn-primary:active { transform:scale(.97); }
  .btn-primary svg { width:15px; height:15px; }
  .location-input-wrap { position:relative; display:flex; align-items:center; }
  .location-input-wrap input { padding-right:2.5rem; width:100%; }
  .gps-btn { position:absolute; right:8px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; padding:3px; display:flex; align-items:center; justify-content:center; color:var(--muted); border-radius:5px; transition:color .15s,background .15s; }
  .gps-btn:hover { color:var(--green-mid); background:var(--green-pale); }
  .gps-btn:active { transform:translateY(-50%) scale(.9); }
  .gps-btn svg { width:15px; height:15px; display:block; }
  .gps-btn.locating { color:var(--green-mid); animation:gps-pulse .8s ease-in-out infinite alternate; }
  @keyframes gps-pulse { from { opacity:.5; } to { opacity:1; } }

  /* status */
  .status-bar { display:flex; align-items:center; gap:8px; margin-bottom:1rem; min-height:22px; }
  .status-text { font-size:12px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; }
  .spinner { display:none; width:14px; height:14px; border:2px solid var(--fairway); border-top-color:var(--green-mid); border-radius:50%; animation:spin .7s linear infinite; flex-shrink:0; }
  @keyframes spin { to { transform:rotate(360deg); } }

  .error-msg { background:#fff5f5; border:1px solid #fca5a5; border-radius:10px; padding:.9rem 1.1rem; color:#991b1b; font-size:13px; display:none; margin-bottom:1rem; }
  .geocode-hint { font-size:11px; color:var(--muted); margin-top:3px; font-style:italic; }

  /* results list */
  .results-list { display:flex; flex-direction:column; gap:8px; }
  .result-row { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:.9rem 1.1rem; display:flex; align-items:center; gap:12px; cursor:pointer; transition:border-color .15s,box-shadow .15s; animation:fadeUp .2s ease both; }
  .result-row:hover { border-color:rgba(100,80,40,.35); box-shadow:0 3px 12px rgba(100,80,40,.08); }
  @keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)} }
  .result-name { font-weight:500; font-size:14px; color:var(--ink); }
  .result-operator { font-size:11px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; margin-top:2px; }
  .result-meta { font-size:11px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; margin-top:2px; }
  .result-arrow { margin-left:auto; color:var(--green-light); flex-shrink:0; }
  .result-arrow svg { width:16px; height:16px; }

  /* cache banner */
  .cache-banner { display:flex; align-items:center; gap:10px; padding:8px 12px; background:var(--green-pale); border:1px solid var(--border); border-radius:10px; margin-bottom:12px; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:12px; color:var(--green-dark); }
  .cache-banner span { flex:1; }
  .btn-ghost { padding:3px 10px; border-radius:20px; border:1px solid var(--green-mid); background:transparent; color:var(--green-mid); font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; cursor:pointer; }
  .btn-ghost.muted { border-color:var(--border); color:var(--muted); }

  /* ── Club view ── */
  #clubView { display:none; }
  #searchView { display:none; }

  /* Club header card */
  .club-header-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.1rem 1.25rem; margin-bottom:1.25rem; display:flex; flex-direction:column; }
  .club-header-row { display:flex; align-items:center; gap:14px; }
  .club-title { font-family:'DM Serif Display','DM Serif Display Fallback',serif; font-size:1.25rem; color:var(--ink); }
  .club-location { font-size:12px; color:var(--muted); margin-top:1px; }
  .club-subtitle { font-size:12px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; margin-top:4px; display:flex; gap:10px; flex-wrap:wrap; }
  .club-subtitle a { color:var(--green-mid); text-decoration:none; }
  .club-subtitle a:hover { text-decoration:underline; }
  .change-btn { flex-shrink:0; display:flex; align-items:center; gap:6px; padding:5px 11px; background:var(--surface); border:1px solid var(--border); border-radius:7px; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); cursor:pointer; transition:background .12s,border-color .12s,color .12s; }
  .change-btn:hover { background:var(--green-pale); border-color:var(--green-mid); color:var(--green-mid); }
  .change-btn:active { transform:scale(.97); }
  .change-btn svg { width:12px; height:12px; flex-shrink:0; }
  .permalink-btn { flex-shrink:0; display:flex; align-items:center; gap:6px; padding:5px 10px; background:transparent; border:1px solid transparent; border-radius:7px; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); cursor:pointer; transition:background .12s,border-color .12s,color .12s; }
  .permalink-btn:hover { background:var(--green-pale); color:var(--green-mid); }
  .permalink-btn svg { width:12px; height:12px; flex-shrink:0; }

  /* Climate card — sidebar + main layout. The card itself does NOT clip
     overflow, so info-tip popovers can extend past the card edge when needed.
     Visual sealing at the rounded corners is achieved by rounding the
     sidebar's outer corners to match the card's inner radius (14px outer
     border - 1px border = 13px inner). */
  /* Mode switcher — primary navigation between the three view modes
     (Today / Long-term / Course map). Pill-style segmented control sits
     under the club header and replaces the stacking of all three modes
     on one page. Visually heavier than the .view-tab strip below it so
     the two tiers (mode → sub-tab) are clearly distinguishable. */
  .mode-switcher { display:flex; gap:0; margin-bottom:1.25rem; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:4px; }
  .mode-btn { flex:1; padding:10px 14px; border:none; background:transparent; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:14px; font-weight:500; color:var(--muted); border-radius:8px; cursor:pointer; transition:background .15s,color .15s; display:flex; align-items:center; justify-content:center; gap:6px; white-space:nowrap; }
  .mode-btn:hover:not(.is-active) { color:var(--ink); background:var(--surface); }
  .mode-btn.is-active { background:var(--green-dark); color:#fff; }
  .mode-btn:focus-visible { outline:2px solid var(--green-mid); outline-offset:-2px; }

  /* Mode panes — only the active mode's pane is visible. */
  .mode-pane { display:none; }
  .mode-pane.is-active { display:block; }
  /* Today mode panel switching mirrors mode-pane: only the active sub-tab
     panel is rendered visible, the other two stay in the DOM with their
     content ready (so re-activating is instant). */
  .today-panel { display:none; }
  .today-panel.is-active { display:block; }

  .climate-card { background:var(--card); border:1px solid var(--border); border-radius:14px; }

  /* Today mode card — same surface treatment as .climate-card and
     .course-map-card, with internal padding because the Today layout
     doesn't have an inner sidebar+main grid that provides its own. */
  .today-card { background:var(--card); border:1px solid var(--border); border-radius:14px; padding:1.25rem; }
  .climate-layout { display:grid; grid-template-columns:148px 1fr; min-height:300px; }
  .climate-sidebar { background:var(--surface); border-right:1px solid var(--border); border-radius:13px 0 0 13px; padding:14px 12px; display:flex; flex-direction:column; gap:16px; }
  .climate-main { padding:1.25rem; min-width:0; }

  /* Sidebar control groups */
  .ctrl-group { }
  .ctrl-group-label { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
  .ctrl-scroll-wrap { position:relative; }
  .ctrl-scroll { display:contents; }
  .ctrl-pill { display:block; width:100%; text-align:left; padding:5px 10px; border-radius:7px; border:1px solid transparent; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; cursor:pointer; transition:background .12s,border-color .12s,color .12s; color:var(--muted); background:transparent; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.3; }
  .ctrl-pill:hover:not(.active) { background:var(--green-pale); color:var(--green-mid); }
  .ctrl-pill.active { background:var(--green-dark); color:#fff; border-color:var(--green-dark); }

  /* View tabs — horizontal across top of main */
  .view-tabs { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:16px; }
  .view-tab { padding:8px 16px; border:none; background:transparent; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:13px; color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; transition:color .12s,border-color .12s; }
  .view-tab:hover { color:var(--ink); }
  .view-tab.active { color:var(--green-dark); border-bottom-color:var(--green-dark); font-weight:500; }

  /* Summary stats */
  .stats-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px; margin-bottom:16px; }
  .stat-box { background:var(--surface); border-radius:var(--radius); padding:10px 12px; }
  .stat-label { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-bottom:3px; }
  .stat-val { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:17px; font-weight:500; color:var(--green-dark); }
  .stat-delta { font-size:11px; margin-left:5px; }

  /* Chart hover zones — transparent <rect>s overlaid on SVG charts to
     catch tooltips. Used across multiple charts (chart-zone, gp-zone,
     cgdd-zone, gdd-bar-zone, wd-zone, prec-zone). */
  .chart-zone, .gp-zone, .cgdd-zone, .gdd-bar-zone, .wd-zone, .prec-zone { cursor:crosshair; }

  /* ── "Data incorrect?" trigger + popover ──
     Shown next to the club title. Lightweight popover with one link
     inside, toggled by a button and closed on outside-click or ESC. */
  .osm-correct-wrap { position:relative; display:inline-block; }
  .osm-correct-btn { background:none; border:none; cursor:pointer; padding:0;
    font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted);
    text-decoration:underline; text-decoration-style:dotted; }
  .osm-correct-btn:hover { color:var(--green-mid); }
  .osm-correct-tip { position:absolute; top:calc(100% + 6px); left:0; width:260px; z-index:100;
    background:var(--green-dark); color:#fff;
    font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:12px; line-height:1.6; font-weight:400;
    padding:10px 13px; border-radius:9px; box-shadow:0 4px 14px rgba(0,0,0,.2); }
  .osm-correct-tip[hidden] { display:none; }
  .osm-correct-tip-title { font-weight:500; margin-bottom:5px; }
  .osm-correct-tip-arrow { position:absolute; top:-5px; left:14px; width:10px; height:10px;
    background:var(--green-dark); transform:rotate(45deg); }

  /* Chart + tooltip */
  .chart-wrap { position:relative; margin-bottom:8px; }
  .chart-area { height:128px; }
  .chart-svg { width:100%; height:100%; overflow:visible; cursor:crosshair; }
  .chart-tooltip { position:absolute; pointer-events:none; background:var(--green-dark); color:#fff; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; padding:5px 9px; border-radius:7px; white-space:nowrap; opacity:0; transition:opacity .1s; z-index:10; }
  .chart-tooltip.visible { opacity:1; }

  /* Data table toggle */
  .toggle-table-btn { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted); background:none; border:none; cursor:pointer; padding:0; text-decoration:underline; display:block; margin:6px 0 8px; }
  .toggle-table-btn:hover { color:var(--green-mid); }
  .data-table-wrap { display:none; overflow-x:auto; }
  .data-table-wrap.open { display:block; }
  .data-tbl { width:100%; border-collapse:collapse; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; }
  .data-tbl th { text-align:center; padding:4px 3px; color:var(--muted); font-weight:400; border-bottom:1px solid var(--border); }
  .data-tbl td { text-align:center; padding:3px; }
  .data-tbl tr.divider td { border-top:1px solid var(--border); }

  /* Legend */
  .legend { display:flex; gap:12px; flex-wrap:wrap; padding-top:10px; border-top:1px solid var(--border); margin-top:8px; }
  .legend-item { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; }
  .legend-line { width:14px; height:2px; border-radius:1px; flex-shrink:0; }
  .legend-swatch { width:10px; height:10px; border-radius:2px; flex-shrink:0; }

  /* Bioclimate grid */
  .bio-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(175px,1fr)); gap:8px; }

  .bio-unit { font-size:10px; font-weight:400; color:var(--muted); margin-left:3px; }
  .bio-delta { font-size:10px; margin-left:6px; }

  /* Traffic light badges */
  .tl-grid { display:flex; flex-direction:column; gap:0; }
  .tl-row { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
  .tl-row:last-child { border-bottom:none; }
  .tl-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; margin-top:2px; }
  .tl-dot.green  { background:#27ae60; }
  .tl-dot.amber  { background:#f39c12; }
  .tl-dot.red    { background:#c0392b; }
  .tl-dot.grey   { background:#bbb; }
  .tl-body { flex:1; min-width:0; }
  .tl-title { font-size:13px; font-weight:500; color:var(--ink); }
  .tl-badge { display:inline-block; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; padding:2px 8px; border-radius:10px; margin-left:6px; vertical-align:middle; }
  .tl-badge.red   { background:#fde8e8; color:#9b1c1c; }
  .tl-badge.amber { background:#fef3c7; color:#92400e; }
  .tl-badge.green { background:#d1fae5; color:#065f46; }
  .tl-desc { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.5; }

  /* Programme Calendar */
  .prog-calendar-card {
    background: linear-gradient(180deg, rgba(82,183,136,0.05) 0%, rgba(82,183,136,0.02) 100%);
    border: 1px solid rgba(45,106,79,0.18);
    border-radius: 10px;
    padding: 14px 16px 12px;
    margin-top: 28px;
    margin-bottom: 22px;
    position: relative;
  }
  .prog-calendar-card::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -16px;
    height: 2px;
    background: var(--green-pale);
  }
  .prog-calendar-card .section-header { margin-top: 0; }
  .prog-legend { margin: 6px 0 10px; padding-left: 4px; }
  .prog-legend .legend-swatch { width:18px; height:11px; border-radius:2px; }
  .prog-timeline-wrap { position:relative; margin-bottom:8px; }

  /* Two-column layout: programme labels on the left (HTML), timeline on the
     right (SVG). On desktop, the timeline fills the available width. On mobile,
     labels become a fixed-width left column and the timeline scrolls. */
  .prog-timeline-grid {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
  }
  .prog-labels-col {
    flex: 0 0 180px;
    padding-right: 8px;
    /* SVG layout: first row starts at y=0, each row is 30px tall, then a 24px
       month-axis area at the bottom. Labels-col mirrors this exactly: no top
       padding, 24px bottom padding, 30px per label. */
    padding-bottom: 24px;
    box-sizing: border-box;
    background: transparent;
    z-index: 2;
  }
  .prog-row-label {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: var(--ink);
    text-align: right;
    line-height: 1.2;
    padding: 0 4px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .prog-row-label > span {
    display: inline-block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .prog-scroll {
    flex: 1 1 auto;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .prog-scroll-inner {
    /* The SVG stretches horizontally to fill the available scroll viewport
       (preserveAspectRatio="none"). Its height is locked at the viewBox H
       value (240px) so each bar's vertical position aligns precisely with
       its label row. On mobile, .prog-scroll-inner is forced to a wider
       fixed width so users can scroll to see the year. */
    min-width: 100%;
  }
  .prog-timeline-svg {
    width: 100%;
    /* height comes from the SVG's height attribute, set to the natural viewBox
       H so 1 viewBox-y-unit = 1 pixel regardless of how many programme rows
       are present. */
    display: block;
  }
  /* Don't let strokes look stretched under non-uniform x-scaling. */
  .prog-timeline-svg rect { vector-effect: non-scaling-stroke; }
  /* Right-edge fade gradient — visible only when the scroll container has
     more content to the right. Indicates the calendar is horizontally
     scrollable on narrow viewports. */
  .prog-scroll-fade {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 24px; /* don't cover the bottom rounded corners */
    width: 36px;
    pointer-events: none;
    background: linear-gradient(to right,
      rgba(245,240,232,0) 0%,
      rgba(245,240,232,0.55) 50%,
      rgba(245,240,232,0.95) 100%);
    opacity: 0;
    transition: opacity .2s ease;
    z-index: 1;
  }
  .prog-timeline-grid.has-overflow-right .prog-scroll-fade { opacity: 1; }
  /* A small chevron hint inside the fade — only shown on touch devices */
  .prog-scroll-fade::after {
    content: "›";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    font-family: 'DM Sans', sans-serif;
    font-size: 22px;
    color: var(--green-mid);
    opacity: 0.7;
    line-height: 1;
  }

  .legend-baseline-swatch {
    width:18px; height:11px; flex-shrink:0;
    border:1.5px dashed var(--green-mid); border-radius:2px;
    background-image: repeating-linear-gradient(-45deg,
      rgba(45,106,79,0.85) 0 2px,
      rgba(45,106,79,0.16) 2px 6px);
  }
  .prog-insights { background:var(--card); border-left:3px solid var(--green-mid); border-radius:6px; padding:10px 14px; margin:8px 0 10px; }
  .prog-insights-heading { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--green-dark); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; font-weight:500; }
  .prog-insights-list { margin:0; padding:0 0 0 18px; list-style:disc; }
  .prog-insights-list li { font-size:13px; color:var(--ink); line-height:1.55; margin-bottom:4px; }
  .prog-insights-list li:last-child { margin-bottom:0; }
  .prog-empty { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); padding:10px 0; text-align:center; }
  .prog-disclaimer { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:9.5px; color:var(--muted); line-height:1.6; margin-top:4px; opacity:.85; }

  @media (max-width: 620px) {
    .prog-calendar-card { padding:12px 12px 10px; }
    .prog-insights-list li { font-size:12.5px; }
    /* On mobile, narrow the label column to give the chart room. Labels wrap
       to two lines if needed so they stay fully readable. The outer flex
       handles vertical centring while the inner span does the line clamp. */
    .prog-labels-col {
      flex: 0 0 130px;
      min-width: 0;
      padding-right: 6px;
    }
    .prog-row-label {
      font-size: 11px;
      line-height: 1.15;
      white-space: normal;
    }
    .prog-row-label > span {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
    /* Force the SVG to render at a wider intrinsic width than the viewport so
       each month is touch-friendly even when the screen is narrow. The
       .prog-scroll wrapper handles horizontal overflow. */
    .prog-scroll-inner {
      width: 480px;
      min-width: 480px;
    }
  }

  /* Source note */
  .source-note { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted); margin-top:12px; line-height:1.7; padding-top:10px; border-top:1px solid var(--border); }

  /* Info icon + tooltip */
  .info-wrap { position:relative; display:inline-flex; align-items:center; }
  .info-icon { display:inline-flex; align-items:center; justify-content:center; width:13px; height:13px; border-radius:50%; border:1px solid var(--muted); color:var(--muted); font-size:8px; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-weight:600; cursor:default; margin-left:5px; flex-shrink:0; opacity:.65; line-height:1; font-style:normal; vertical-align:middle; }
  .info-icon:hover { opacity:1; border-color:var(--green-mid); color:var(--green-mid); }
  .info-tip { display:none; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(calc(-50% + var(--info-tip-shift, 0px))); background:var(--green-dark); color:#fff; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:11px; line-height:1.5; padding:7px 10px; border-radius:8px; white-space:normal; width:200px; z-index:100; pointer-events:none; box-shadow:0 4px 12px rgba(0,0,0,.2); text-transform:none; letter-spacing:normal; font-weight:400; }
  .info-tip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(calc(-50% - var(--info-tip-shift, 0px))); border:5px solid transparent; border-top-color:var(--green-dark); }
  .info-wrap:hover .info-tip, .info-wrap:focus-within .info-tip { display:block; }

  /* Loading/error */
  .pane-loading { padding:1.5rem 0; display:flex; align-items:center; gap:8px; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:12px; color:var(--muted); }
  .pane-error { padding:1rem 0; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:12px; color:#991b1b; }

  /* Toast */
  .copied-toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%) translateY(20px); background:var(--green-dark); color:#fff; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:13px; padding:7px 18px; border-radius:20px; opacity:0; pointer-events:none; transition:opacity .2s,transform .2s; }
  .copied-toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

  .empty-state { text-align:center; padding:3rem 1rem; color:var(--muted); }
  .empty-state .icon { font-size:2.5rem; margin-bottom:.75rem; display:block; }
  .empty-state h3 { font-family:'DM Serif Display','DM Serif Display Fallback',serif; font-size:1.2rem; color:var(--ink); margin-bottom:.35rem; }
  .empty-state p { font-size:14px; }

  /* ── Focus-visible for keyboard accessibility (WCAG 2.4.7) ── */
  :focus-visible { outline: 2px solid var(--green-mid); outline-offset: 2px; border-radius: 4px; }
  input:focus-visible { outline-offset: 0; }
  .ctrl-pill:focus-visible { outline-offset: -2px; }

  /* ── Skip-to-content link ── */
  .skip-link { position:absolute; top:-100%; left:1rem; background:var(--green-dark); color:#fff; padding:8px 16px; border-radius:0 0 8px 8px; font-size:14px; z-index:1000; transition:top .15s; }
  .skip-link:focus { top:0; }

  /* ── Featured courses ── */
  .featured-label { font-size:11px; font-weight:500; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; margin-bottom:.6rem; font-family:'DM Mono','DM Mono Fallback',monospace; }
  .featured-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; margin-bottom:1.5rem; min-height:160px; }
  .featured-card { display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--border); border-radius:11px; padding:.7rem 1rem; cursor:pointer; transition:border-color .15s,box-shadow .15s,background .15s; text-align:left; font-family:inherit; width:100%; }
  .featured-card:hover { border-color:rgba(45,106,79,.45); box-shadow:0 3px 14px rgba(100,80,40,.09); background:#fff; }
  .featured-card:active { transform:scale(.98); }
  .featured-card-name { font-size:13px; font-weight:500; color:var(--ink); line-height:1.25; }
  .featured-card-operator { font-size:10px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; margin-top:2px; }
  .featured-card-loc { font-size:10px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; margin-top:2px; }
  .featured-card-arrow { margin-left:auto; flex-shrink:0; color:var(--green-light); }

  /* ── Traffic-light icon shapes for CVD accessibility ── */
  .tl-dot { position:relative; display:flex; align-items:center; justify-content:center; }
  .tl-dot::after { font-size:8px; font-weight:700; color:#fff; line-height:1; }
  .tl-dot.green::after  { content:'✓'; }
  .tl-dot.amber::after  { content:'–'; font-size:10px; }
  .tl-dot.red::after    { content:'✕'; }
  .tl-dot.grey::after   { content:'·'; font-size:10px; }

  @media(max-width:620px) {
    .climate-layout { grid-template-columns:1fr; }
    .climate-sidebar { border-right:none; border-bottom:1px solid var(--border); border-radius:13px 13px 0 0; flex-direction:column; gap:10px; padding:12px; min-width:0; }
    .ctrl-group { min-width:0; }
    .ctrl-group-label { margin-bottom:6px; }
    .ctrl-scroll-wrap { position:relative; min-width:0; overflow:visible; }
    .ctrl-scroll-wrap::after { display:none; }
    .ctrl-scroll { display:flex; flex-wrap:nowrap; overflow:visible; width:100%; background:var(--surface); border:1px solid var(--border); border-radius:8px; padding:3px; gap:2px; box-sizing:border-box; }
    .ctrl-pill { display:flex; align-items:center; justify-content:center; flex:1 1 0; min-width:0; min-height:32px; padding:4px 4px; font-size:11px; border:none; border-radius:6px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:transparent; color:var(--muted); letter-spacing:-.01em; }
    .ctrl-pill.active { background:var(--green-dark); color:#fff; border-color:transparent; }
    .ctrl-pill:hover:not(.active) { background:var(--green-pale); color:var(--green-mid); }
    .ctrl-pill span { display:none !important; }
    header { padding:1.25rem; }
  }

  /* ── Climate Analogue Tab ── */
  .analogue-icon { width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg, var(--green-pale), #d8ecdb); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .analogue-icon svg { width:18px; height:18px; color:var(--green-mid); }
  .analogue-title { font-family:'DM Serif Display','DM Serif Display Fallback',serif; font-size:1rem; color:var(--ink); }
  .analogue-loc { font-size:11px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; margin-top:2px; }
  .analogue-body { font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:10px; }
  .analogue-stats { display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
  .analogue-stat { background:var(--surface); border-radius:8px; padding:8px 10px; text-align:center; }
  .analogue-stat-label { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:2px; }
  .analogue-stat-val { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:14px; font-weight:500; color:var(--green-dark); }
  .analogue-stat-sub { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted); margin-top:1px; }
  .analogue-loading { display:flex; align-items:center; gap:8px; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); padding:10px 0; }

  /* Match-quality warning banner. Two tiers:
       .analogue-warning.fair  → mild caveat (yellow/amber tones, sand-friendly)
       .analogue-warning.poor  → strong caveat (warm red tones)
     Strong caveats borrow from the existing .pane-error red but don't go full
     error red, since the result is still rendered below; this is a flag, not a
     failure. */
  .analogue-warning { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:10px; margin:0 0 14px; font-size:12px; line-height:1.55; border:1px solid; }
  .analogue-warning .analogue-warning-icon { flex-shrink:0; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; font-weight:600; line-height:1; margin-top:1px; }
  .analogue-warning .analogue-warning-text { flex:1; min-width:0; }
  .analogue-warning .analogue-warning-label { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:500; margin-bottom:2px; }
  .analogue-warning.close { background:#eaf3ec; border-color:#a3c8a8; color:var(--green-dark); }
  .analogue-warning.close .analogue-warning-icon { background:var(--green-mid); color:#fff; }
  .analogue-warning.fair { background:#faf3e0; border-color:#e8c97a; color:#7a5a1a; }
  .analogue-warning.fair .analogue-warning-icon { background:#e8c97a; color:#5a4310; }
  .analogue-warning.poor { background:#fbece8; border-color:#d6604d; color:#8a2a1a; }
  .analogue-warning.poor .analogue-warning-icon { background:#d6604d; color:#fff; }

  @media(max-width:620px) {
    .analogue-stats { grid-template-columns:repeat(2,1fr); }
  }

  /* ── Print stylesheet ── */
  @media print {
    header, footer { break-inside:avoid; }
    .climate-layout { grid-template-columns:1fr !important; }
    .climate-sidebar { flex-direction:row !important; flex-wrap:wrap !important; border-right:none !important; border-bottom:1px solid #ccc !important; gap:6px !important; padding:8px !important; }
    .ctrl-pill { display:inline-block !important; width:auto !important; }
    .ctrl-pill:not(.active) { display:none !important; }
    .data-table-wrap { display:block !important; }
    .toggle-table-btn { display:none !important; }
    .btn-primary, .change-btn, .permalink-btn, .gps-btn, .search-card, #searchView { break-inside:avoid; }
    .chart-tooltip { display:none !important; }
    body { font-size:11pt; }
    .source-note { font-size:8pt; }
  }

  /* ── Header nav ── */
  .header-nav { display:flex; gap:1.25rem; margin-top:.75rem; z-index:2; }
  .header-nav a { color:rgba(255,255,255,0.75); text-decoration:none; font-size:13px; font-family:'DM Sans','DM Sans Fallback',sans-serif; transition:color .15s; }
  .header-nav a:hover { color:#fff; }
  .header-nav a.active { color:var(--green-light); }
  @media(max-width:620px) {
    header { padding:1.25rem; }
  }

  /* ── Site footer ── */
  .site-footer { background:var(--green-dark); color:rgba(255,255,255,0.65); font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; line-height:1.8; padding:1.5rem 2rem; margin-top:2rem; }
  .site-footer-inner { max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:10px; }
  .site-footer h2 { color:rgba(255,255,255,0.75); font-size:9px; text-transform:uppercase; letter-spacing:.08em; font-weight:400; font-family:'DM Mono','DM Mono Fallback',monospace; }
  .site-footer p { font-size:10px; line-height:1.8; }
  .site-footer a { color:var(--green-light); text-decoration:none; }
  .site-footer a:hover { text-decoration:underline; }
  .site-footer strong, .site-footer .footer-highlight { color:rgba(255,255,255,0.75); font-weight:400; }
  .site-footer-disclaimer { border-top:1px solid rgba(255,255,255,0.1); padding-top:10px; color:rgba(255,255,255,0.55); }
  /* Fallback paragraph shown before footer.js swaps in the full footer.
     Hidden once the full footer renders (which contains .site-footer-inner but not .site-footer-fallback). */
  .site-footer-inner.site-footer-fallback p { color:rgba(255,255,255,0.7); }

  /* ── OSM help collapsible ── */
  #osmHelpToggle[aria-expanded="true"] { border-radius:10px 10px 0 0; }
  #osmHelpToggle[aria-expanded="true"] .osm-help-chevron { transform:rotate(180deg); }

  /* ── About page ── */
  .about-main { flex:1; max-width:780px; margin:0 auto; padding:1.75rem 1.25rem 4rem; width:100%; }
  .about-main h2 { font-family:'DM Serif Display','DM Serif Display Fallback',serif; font-size:1.5rem; color:var(--ink); margin:2rem 0 .75rem; }
  .about-main h2:first-child { margin-top:0; }
  .about-main p { font-size:14px; line-height:1.7; color:var(--muted); margin-bottom:.9rem; }
  .about-main p strong { color:var(--ink); font-weight:500; }
  .about-main a { color:var(--green-mid); text-decoration:none; }
  .about-main a:hover { text-decoration:underline; }
  .about-main ul { margin:0 0 1rem 1.25rem; font-size:14px; line-height:1.7; color:var(--muted); }
  .about-main ul li { margin-bottom:.35rem; }

  /* ── Utilities used by course-details.js template output ──
     These cover the inline-style blobs that were being written repeatedly
     (section headings, dividers, data-table muted cells, pill sub-labels
     and GDD toggle buttons). Dynamic styles (data-driven colours) remain
     inline since they vary per render. ── */
  .section-heading { font-family:'DM Serif Display','DM Serif Display Fallback',serif; font-size:1rem; color:var(--ink); }
  .section-meta { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted); }
  .section-header { display:flex; align-items:baseline; gap:8px; margin-bottom:10px; }
  .section-header--tight { margin-bottom:12px; }
  .section-header--wrap { flex-wrap:wrap; }
  .section-divider { border-top:2px solid var(--green-pale); margin:20px 0; padding-top:20px; }
  .section-divider--sub { border-top:2px solid var(--green-pale); margin-top:8px; padding-top:20px; margin-bottom:4px; }
  .pill-sub { display:block; font-size:9px; opacity:.75; margin-top:1px; letter-spacing:.03em; }
  .legend-baseline-tick { width:14px; height:2px; background:#1e1a14; border-radius:1px; flex-shrink:0; opacity:.5; }
  .data-tbl td.tbl-label { color:var(--muted); text-align:left; }
  .data-tbl td.tbl-label-pad { color:var(--muted); text-align:left; padding-right:6px; }
  .data-tbl .tbl-muted { color:var(--muted); }
  .tab-intro { text-align:center; padding:2rem 1rem; color:var(--muted); }
  .tab-intro-emoji { font-size:2rem; margin-bottom:.5rem; }
  .tab-intro-title { font-family:'DM Serif Display','DM Serif Display Fallback',serif; font-size:1rem; color:var(--ink); margin-bottom:.3rem; }
  .tab-intro-desc { font-size:13px; }
  .gdd-toggle-group { margin-left:auto; display:inline-flex; border:1px solid var(--border); border-radius:8px; overflow:hidden; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; }
  .gdd-toggle { padding:3px 10px; border:none; cursor:pointer; background:transparent; color:var(--muted); transition:background .12s,color .12s; }
  .gdd-toggle.active { background:var(--green-dark); color:#fff; }

  /* ── Course layout map card ── */
  .course-map-card { background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }

  /* Sidebar switch list */
  .cm-opts { display:flex; flex-direction:column; gap:2px; }
  .cm-opt { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:5px 10px; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); cursor:pointer; border-radius:7px; border:1px solid transparent; transition:background .12s,color .12s; user-select:none; }
  .cm-opt:hover { background:var(--green-pale); color:var(--green-mid); }
  .cm-switch-label { flex:1; min-width:0; }
  .cm-switch { position:relative; width:28px; height:16px; flex-shrink:0; }
  .cm-switch input { opacity:0; width:0; height:0; position:absolute; }
  .cm-thumb { position:absolute; inset:0; background:#ccc; border-radius:16px; transition:background .2s; cursor:pointer; }
  .cm-thumb::after { content:''; position:absolute; width:10px; height:10px; left:3px; top:3px; background:#fff; border-radius:50%; transition:transform .2s; box-shadow:0 1px 3px rgba(0,0,0,.2); }
  .cm-switch input:checked ~ .cm-thumb { background:var(--green-mid); }
  .cm-switch input:checked ~ .cm-thumb::after { transform:translateX(12px); }
  .cm-switch input:focus-visible ~ .cm-thumb { outline:2px solid var(--green-mid); outline-offset:2px; }

  /* Segmented download control — PNG main + chevron reveals SVG/PDF */
  .cm-dl-wrap { position:relative; }
  .cm-dl-segmented { display:flex; width:100%; border-radius:var(--radius); overflow:hidden; border:1px solid var(--green-dark); background:var(--green-dark); }
  .cm-dl-main,
  .cm-dl-chevron { background:var(--green-dark); color:#fff; border:none; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; cursor:pointer; padding:8px 10px; transition:background .12s,opacity .15s; }
  .cm-dl-main { flex:1; border-right:1px solid rgba(255,255,255,0.18); text-align:center; }
  .cm-dl-chevron { flex-shrink:0; width:32px; display:flex; align-items:center; justify-content:center; }
  .cm-dl-main:hover:not(:disabled),
  .cm-dl-chevron:hover:not(:disabled) { background:var(--green-mid); }
  .cm-dl-main:disabled,
  .cm-dl-chevron:disabled { opacity:.45; cursor:not-allowed; }
  .cm-dl-menu { position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 4px 14px rgba(0,0,0,.12); z-index:20; overflow:hidden; }
  .cm-dl-menu[hidden] { display:none; }
  .cm-dl-menu-item { display:block; width:100%; padding:8px 12px; background:transparent; border:none; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--ink); cursor:pointer; text-align:left; transition:background .12s; }
  .cm-dl-menu-item:hover { background:var(--green-pale); color:var(--green-mid); }
  .cm-dl-menu-item + .cm-dl-menu-item { border-top:1px solid var(--border); }

  /* Main area */
  .cm-status { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); min-height:16px; margin-bottom:10px; }
  /* Collapse the status row entirely while no message is showing — keeps
     the loading/error message slot reserved when text *is* set, and tightens
     the layout once a render is complete. */
  .cm-status:empty { display:none; }
  .cm-container { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; min-height:340px; display:flex; align-items:center; justify-content:center; }
  .cm-container svg { display:block; width:100%; height:auto; }
  .cm-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:340px; padding:20px; }
  .cm-loading { display:flex; align-items:center; gap:10px; padding:40px 20px; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:12px; color:var(--muted); }
  .cm-error { padding:20px; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:12px; color:#9b1c1c; background:#fde8e8; border-radius:var(--radius); }

  /* Interactive map stage — holds the SVG, zoom controls, and attribution overlay */
  .cm-map-stage { position:relative; width:100%; }
  .cm-map-svg { cursor:grab; touch-action:none; outline:none; user-select:none; -webkit-user-select:none; }
  .cm-map-svg:focus-visible { box-shadow:inset 0 0 0 2px var(--green-mid); }
  .cm-map-svg.cm-grabbing { cursor:grabbing; }
  /* Hide the embedded badge on screen — live map uses the HTML overlay below,
     but the badge stays in the SVG string for export compliance (PNG/SVG/PDF). */
  .cm-container .cm-embedded-attrib { display:none; }

  /* Zoom controls (top-right, Google Maps style) */
  .cm-zoom-ctrls { position:absolute; top:8px; right:8px; display:flex; flex-direction:column; gap:0; background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.1); z-index:2; }
  .cm-zoom-btn { width:30px; height:30px; border:none; background:#fff; color:var(--ink); font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:17px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0; transition:background .12s; }
  .cm-zoom-btn + .cm-zoom-btn { border-top:1px solid var(--border); }
  .cm-zoom-btn:hover { background:var(--green-pale); color:var(--green-mid); }
  .cm-zoom-btn:active { background:#dfd3b8; }

  /* Live attribution overlay (bottom-right) */
  .cm-attrib-overlay { position:absolute; bottom:6px; right:6px; background:rgba(255,255,255,0.85); color:#333; font-family:-apple-system,system-ui,sans-serif; font-size:10px; line-height:1.2; padding:3px 6px; border-radius:3px; z-index:2; pointer-events:auto; user-select:none; }
  .cm-attrib-overlay:hover { background:#fff; }
  .cm-attrib-overlay a { color:#333; text-decoration:none; }
  .cm-attrib-overlay a:hover { text-decoration:underline; }

  .cm-legend { display:flex; gap:12px; flex-wrap:wrap; padding-top:10px; margin-top:10px; border-top:1px solid var(--border); }

  /* Scorecard — restyled to match site */
  .cm-scorecard { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
  .cm-sc-title { font-size:13px; font-weight:500; color:var(--ink); margin-bottom:4px; }
  .cm-sc-note { font-size:11px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; margin-bottom:10px; }
  /* Per-course group heading on multi-course sites (e.g. Olivos's three courses) */
  .cm-sc-group-heading { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:var(--ink); margin:14px 0 6px; }
  .cm-sc-group-heading:first-of-type { margin-top:0; }
  .cm-sc-swatch { display:inline-block; width:14px; height:14px; border-radius:3px; flex-shrink:0; border:1px solid rgba(0,0,0,.15); background:#7fb069; position:relative; }
  /* Render a small dashed line inside the swatch to echo the map style */
  .cm-sc-swatch::after { content:''; position:absolute; left:1px; right:1px; top:50%; height:2px; transform:translateY(-50%); background-image:linear-gradient(to right, currentColor 60%, transparent 40%); background-size:5px 2px; background-repeat:repeat-x; color:inherit; }
  .cm-sc-count { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted); font-weight:400; margin-left:4px; }
  /* Per-group missing-data note (multi-course sites only) */
  .cm-sc-group-note { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted); margin:6px 0 0; font-style:italic; }
  .cm-sc-scroll { overflow-x:auto; }
  .cm-sc-table { width:100%; border-collapse:collapse; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; }
  .cm-sc-table th { background:var(--green-dark); color:#fff; padding:6px 8px; text-align:center; font-weight:500; white-space:nowrap; }
  .cm-sc-table th.cm-left { text-align:left; }
  .cm-sc-table td { padding:5px 8px; text-align:center; border-bottom:1px solid var(--border); color:var(--ink); }
  .cm-sc-table td.cm-left { text-align:left; font-family:'DM Sans','DM Sans Fallback',sans-serif; }
  .cm-sc-table tr:nth-child(even) td { background:var(--surface); }
  .cm-sc-table tr.cm-subtotal td { font-weight:500; background:var(--green-pale); color:var(--green-dark); border-top:1px solid var(--border); }
  .cm-sc-table tr.cm-total td { font-weight:500; background:var(--green-dark); color:#fff; }
  .cm-na { color:var(--muted); opacity:.5; }

  /* Course statistics report */
  .cm-report { margin-top:1.25rem; padding-top:1.25rem; border-top:1px solid var(--border); }
  .cm-report-title { font-size:13px; font-weight:500; color:var(--ink); margin-bottom:4px; }
  .cm-stat-note { font-size:11px; color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; margin-bottom:12px; }
  .cm-stat-note a { color:var(--green-mid); text-decoration:none; }
  .cm-stat-note a:hover { text-decoration:underline; }
  .cm-report-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px; }
  .cm-stat { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:10px 12px; }
  .cm-stat-value { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:15px; font-weight:500; color:var(--green-dark); line-height:1.2; }
  .cm-stat-label { font-size:10px; color:var(--muted); margin-top:3px; }
  .cm-stat-sub { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:9px; color:var(--muted); margin-top:2px; opacity:.7; }

  @media(max-width:620px) {
    .cm-opts { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
    .cm-opt { padding:4px 8px; font-size:10px; }
    .cm-container, .cm-placeholder { min-height:260px; }
    .cm-sc-table { font-size:10px; }
    .cm-sc-table th, .cm-sc-table td { padding:4px 5px; }
    .cm-report-grid { grid-template-columns:repeat(2,1fr); }
  }

  /* ── Today mode (forecast / disease / anomaly sub-tabs) ──
     The sub-tabs reuse the climate card's .view-tab styling for visual
     consistency. Each .today-panel holds one sub-view's content. */
  .live-loading { display:flex; align-items:center; gap:8px; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); padding:1rem 0; }
  .live-loading .spinner { width:13px; height:13px; }
  .live-empty { font-size:12px; color:var(--muted); font-style:italic; padding:.75rem 0; }
  .live-error { font-size:12px; color:#a44; background:#fcf0ee; border:1px solid #f0c8c0; border-radius:8px; padding:8px 12px; }

  /* 7-day outlook — one row per day, six columns. Numerical columns are
     sized to fit their content with no extra padding so the row reads
     densely instead of being mostly empty space. The frost outlook is
     the rightmost column and gets the remaining width; on mobile it
     wraps to its own line below the numerical columns. All rows + the
     header share one grid template so columns line up vertically. */
  /* .live-fc-table is the (potentially scrolling) outer frame; the inner
     wrapper actually stacks the header and rows. Splitting the two means
     we can size the wrapper to its widest child on narrow viewports
     (so header + rows share one width) while keeping the scroll container
     viewport-bound. */
  .live-fc-table-inner { display:flex; flex-direction:column; gap:4px; }
  .live-fc-head, .live-fc-row {
    display:grid;
    /* Each column is at least the minimum needed to fit its widest
       expected value (e.g. temp needs ~72px for "-15° / -23°"), then
       grows by 1fr to share any extra row width. The frost column gets
       2fr because its prose runs longer than the other values. The
       result: extra row width distributes evenly across all cells
       instead of pooling at the right of the frost cell. */
    grid-template-columns:
      minmax(70px, 1fr)
      minmax(72px, 1fr)
      minmax(44px, 1fr)
      minmax(44px, 1fr)
      minmax(44px, 1fr)
      minmax(160px, 2fr);
    gap:10px;
    align-items:center;
  }
  /* Numerical cells centre their values — keeps the data balanced inside
     the (now tight) column rather than hugging the left edge. Day and
     frost columns stay left-aligned because they hold prose. */
  .live-fc-c-temp, .live-fc-c-rain, .live-fc-c-et, .live-fc-c-soil { text-align:center; }
  .live-fc-head {
    padding:0 12px 3px;
    /* Transparent 1px border matches the visible 1px border on .live-fc-row.
       Without it the header's content area is 2px wider than the row's
       (box-sizing:border-box minus padding only, vs row's padding + border),
       which shifts every header column 1px left of its row counterpart. */
    border:1px solid transparent;
    font-family:'DM Mono','DM Mono Fallback',monospace;
    font-size:9px;
    color:var(--muted);
    text-transform:uppercase;
    letter-spacing:.04em;
    line-height:1.2;
  }
  .live-fc-row {
    padding:8px 12px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:8px;
    font-family:'DM Mono','DM Mono Fallback',monospace;
    font-size:12px;
  }
  .live-fc-row.has-frost { background:#eaf3fb; border-color:#bcd4eb; }
  .live-fc-c-day { display:flex; flex-direction:column; gap:1px; }
  .live-fc-c-dow { font-size:11px; font-weight:500; color:var(--ink); text-transform:uppercase; letter-spacing:.04em; }
  .live-fc-c-dom { font-size:10px; color:var(--muted); }
  .live-fc-c-temp { font-size:13px; font-weight:500; }
  .live-fc-tmax { color:#c0392b; }
  .live-fc-tmin { color:#2471a3; }
  .live-fc-tsep { color:var(--muted); opacity:.5; margin:0 2px; }
  .live-fc-c-rain { color:#2471a3; font-size:12px; }
  .live-fc-c-et   { color:#7a5a1a; font-size:12px; }
  .live-fc-c-soil { color:var(--green-mid); font-size:12px; }
  /* Inline unit suffix (mm) — small and muted so the number stays the
     dominant glyph in the cell. The °C unit on temperature/soil values
     stays at full size since "°C" reads as one symbol with the digits. */
  .live-fc-unit { font-size:9px; color:var(--muted); margin-left:1px; font-weight:400; opacity:.8; }
  .live-fc-c-frost { display:flex; flex-direction:column; gap:1px; font-family:'DM Sans','DM Sans Fallback',sans-serif; font-size:12px; min-width:0; }
  .live-fc-note { font-size:11px; color:var(--muted); margin-top:.7rem; line-height:1.55; }
  .live-frost-ok { color:var(--green-mid); }
  .live-frost-clear { color:var(--ink); }
  .live-frost-stuck { color:#c0392b; }
  .live-frost-sunrise { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted); }

  /* Disease pressure grid — fixed-width cells, header + every row scroll
     together as one unit because they all use the same column widths and
     share `overflow-x:auto` on the wrapping `.live-disease-grid`. Using
     flex (not grid) on the rows + `min-width:max-content` lets the rows
     extend beyond the parent's width so the parent's scrollbar is the
     thing that actually moves. */
  .live-disease-grid { display:flex; flex-direction:column; gap:4px; overflow-x:auto; padding-bottom:6px; }
  /* Axis row above the day labels: explicit "past observed" vs "forecast"
     callouts spanning the two halves of the date strip. Same column
     structure as the data rows so the labels line up over the right
     cells. */
  .live-disease-axis { display:flex; gap:6px; align-items:end; min-width:max-content; margin-bottom:2px; }
  .live-disease-axis-cells { display:grid; grid-template-columns:repeat(14, 32px); gap:3px; flex-shrink:0; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .live-disease-axis-past { grid-column:1 / 8;  text-align:left; }
  .live-disease-axis-fut  { grid-column:8 / 15; text-align:right; }
  .live-disease-header { display:flex; gap:6px; align-items:end; min-width:max-content; }
  /* "Risk indicator" header label — same mono caps treatment as the
     date labels above the dot cells. */
  .live-disease-spacer { width:200px; flex-shrink:0; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding-bottom:2px; }
  /* Symmetric vertical padding so the DOW/DOM labels have breathing room
     inside the today-column highlight rectangle (instead of the day text
     hugging the top edge of the pale-beige strip). */
  .live-disease-day { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:9px; color:var(--muted); text-align:center; line-height:1.2; padding:3px 0 2px; }
  .live-disease-day.is-today .live-disease-dom { color:var(--green-mid); font-weight:500; }
  .live-disease-day.is-past { opacity:.55; }
  /* Today column highlight — a single pale-beige strip running from the
     day header through all four model rows. Box-shadows fill the 4px
     row-gaps so the column reads as one continuous strip rather than
     five stacked tiles; the shadows are scoped to *inner* gaps only,
     so the strip terminates cleanly at the top of the day header and
     at the bottom of the last model row instead of bleeding into the
     axis row above or the legend below. The top and bottom cells get
     half-rounded corners to give the strip a soft, intentional finish.
     --green-pale (#e8dfc8) is a warm sand tone that doesn't compete
     with the green/amber/red risk dots inside the cells. */
  .live-disease-day.is-today,
  .live-disease-cell.is-today { background:var(--green-pale); }
  .live-disease-day.is-today { border-radius:4px 4px 0 0; box-shadow:0 4px 0 0 var(--green-pale); }
  .live-disease-row .live-disease-cell.is-today { box-shadow:0 -4px 0 0 var(--green-pale), 0 4px 0 0 var(--green-pale); }
  .live-disease-row:last-of-type .live-disease-cell.is-today { border-radius:0 0 4px 4px; box-shadow:0 -4px 0 0 var(--green-pale); }
  .live-disease-dow { font-size:9px; text-transform:uppercase; letter-spacing:.04em; }
  .live-disease-dom { font-size:11px; color:var(--ink); }
  .live-disease-row { display:flex; gap:6px; align-items:center; min-width:max-content; }
  .live-disease-row.is-na { opacity:.55; }
  .live-disease-label { width:200px; flex-shrink:0; font-size:12px; color:var(--ink); padding-right:8px; }
  .live-disease-na { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:9px; color:var(--muted); margin-left:4px; padding:1px 4px; background:var(--surface); border:1px solid var(--border); border-radius:3px; }
  .live-disease-cells { display:grid; grid-template-columns:repeat(14, 32px); gap:3px; flex-shrink:0; }
  .live-disease-cell { aspect-ratio:1; display:flex; align-items:center; justify-content:center; }
  .live-disease-dot { width:60%; height:60%; border-radius:50%; min-width:8px; min-height:8px; }
  .live-disease-cell.tier-na .live-disease-dot { opacity:.4; }
  .live-disease-legend { display:flex; gap:14px; margin-top:.7rem; font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted); flex-wrap:wrap; }
  .live-disease-key { display:flex; align-items:center; gap:6px; }
  .live-disease-key .live-disease-dot { width:10px; height:10px; flex-shrink:0; }
  .live-disease-note { font-size:11px; color:var(--muted); margin-top:.5rem; line-height:1.55; }

  /* Anomaly cards — each card is a small 3-column table:
       [metric label] [observed value] [Δ vs baseline]
     The thead row names the latter two so users see at a glance what
     the value next to the arrow represents. The card title above the
     table identifies the period (current month / year to date). */
  .live-anom-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .live-anom-card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
  .live-anom-label { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); margin-bottom:.7rem; }
  .live-anom-thead, .live-anom-row {
    display:grid;
    grid-template-columns: minmax(80px, auto) minmax(0, 1fr) minmax(0, 1fr);
    gap:10px;
    align-items:baseline;
  }
  .live-anom-thead {
    padding:0 0 4px;
    border-bottom:1px solid var(--border);
    margin-bottom:4px;
  }
  .live-anom-th {
    font-family:'DM Mono','DM Mono Fallback',monospace;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.04em;
    color:var(--muted);
  }
  .live-anom-row { padding:5px 0; font-size:13px; }
  .live-anom-key { color:var(--muted); font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; }
  .live-anom-val { color:var(--ink); font-family:'DM Mono','DM Mono Fallback',monospace; font-size:14px; font-weight:500; }
  .live-anom-cell { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
  .live-anom-delta { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:12px; padding:1px 6px; border-radius:3px; }
  .live-anom-delta.up { background:#fce8e0; color:#c0392b; }
  .live-anom-delta.down { background:#e0ecf6; color:#2471a3; }
  .live-anom-delta.flat { background:var(--border); color:var(--muted); }
  .live-anom-pct { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:11px; color:var(--muted); }
  .live-anom-na { color:var(--muted); opacity:.4; font-family:'DM Mono','DM Mono Fallback',monospace; }
  .live-anom-baseline { font-family:'DM Mono','DM Mono Fallback',monospace; font-size:10px; color:var(--muted); margin-top:.7rem; padding-top:.6rem; border-top:1px solid var(--border); line-height:1.5; }
  .live-anom-note { font-size:11px; color:var(--muted); margin-top:.7rem; line-height:1.55; }

  @media(max-width:620px) {
    /* Forecast rows: drop the frost column to its own line under the
       numerical columns. The grid stays 5-column for the data, and the
       frost cell spans the full row width on a second grid line.
       The header is kept (column labels matter for new users) but its
       "Frost outlook" cell is hidden because the wrapped frost prose in
       each data row is self-explanatory. The table gets overflow-x:auto
       so very narrow phones (≤320px) scroll horizontally instead of
       breaking the card layout. */
    .live-fc-table { overflow-x:auto; padding-bottom:6px; }
    /* Wrapper sizes to its widest child (the data rows, whose frost cell
       spans every column on a second grid row and pushes max-content
       beyond the viewport). The header then stretches to match the
       wrapper's width instead of stopping at the narrower viewport, so
       both share the same column distribution and align across all
       widths — header and rows scroll together as one unit. */
    .live-fc-table-inner { min-width:max-content; }
    .live-fc-head, .live-fc-row {
      grid-template-columns:
        minmax(56px, 1fr)
        minmax(64px, 1fr)
        minmax(36px, 1fr)
        minmax(36px, 1fr)
        minmax(40px, 1fr);
      gap:6px;
    }
    .live-fc-head { padding:0 10px 3px; font-size:8px; }
    .live-fc-row { padding:8px 10px; }
    .live-fc-head .live-fc-c-frost { display:none; }
    .live-fc-row .live-fc-c-frost {
      grid-column: 1 / -1;
      margin-top:4px;
      padding-top:6px;
      border-top:1px solid var(--border);
    }
    .live-fc-row.has-frost .live-fc-c-frost { border-top-color:#bcd4eb; }
    .live-fc-c-temp { font-size:12px; }
    .live-fc-c-rain, .live-fc-c-et, .live-fc-c-soil { font-size:11px; }
    .live-disease-spacer, .live-disease-label { width:140px; }
    .live-disease-label { font-size:11px; }
    .live-disease-cells { grid-template-columns:repeat(14, 28px); }
    .live-disease-axis-cells { grid-template-columns:repeat(14, 28px); }
    .live-anom-grid { grid-template-columns:1fr; }
    .live-anom-card { padding:12px 14px; }
    /* Mode switcher: shrink padding/font on narrow phones so all three
       buttons stay on one line. */
    .mode-btn { padding:9px 8px; font-size:13px; }
  }