:root {
  --green-deep:  #19382a;
  --green-mid:   #2b5c42;
  --green-light: #3d7a58;
  --gold:        #c9a84c;
  --gold-light:  #e0c278;
  --gold-dim:    rgba(201,168,76,0.35);
  --cream:       #f4f0e6;
  --cream-dim:   rgba(244,240,230,0.65);
  --overlay-bg:  rgba(25,56,42,0.92);
  --border:      rgba(201,168,76,0.3);
  /* era colours */
  --era-orig:    #b89450;   /* warm gold — original MacKenzie */
  --era-chng:    #8b5a3a;   /* rust — degradation */
  --era-rest:    #3d7a58;   /* green — restored */
  --era-orig-bg: rgba(184,148,80,0.08);
  --era-chng-bg: rgba(139,90,58,0.08);
  --era-rest-bg: rgba(61,122,88,0.08);
  /* proposed work — blueprint blue, deliberately outside the three historical
     era colours so nothing proposed can be mistaken for something built */
  --era-plan:    #6d9fc0;
  --era-plan-bg: rgba(109,159,192,0.10);
  --sidebar-w:   172px;
}

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

html, body {
  font-family: 'EB Garamond', Georgia, serif;
  background: var(--green-deep);
  color: var(--cream);
  overflow-x: hidden;
}

/* ── HEADER ─────────────────────────────────── */
.site-header {
  background: var(--green-deep);
  border-bottom: 2px solid var(--gold);
  padding: 14px 28px 14px calc(var(--sidebar-w) + 28px);
  display: flex;
  align-items: baseline;
  gap: 20px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 200;
}
.site-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  color: var(--gold);
  letter-spacing: 0.07em;
  white-space: nowrap;
}
.page-subtitle {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--cream);
  opacity: 0.8;
}
.page-meta {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--gold-light);
  opacity: 0.6;
  white-space: nowrap;
}
.nav-links {
  margin-left: auto;
  display: flex;
  gap: 8px;
  align-items: center;
}
.nav-link {
  font-family: 'EB Garamond', serif;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  text-decoration: none;
  opacity: 0.6;
  border: 1px solid var(--border);
  padding: 3px 10px;
  white-space: nowrap;
  transition: opacity 0.15s, background 0.15s;
}
.nav-link:hover { opacity: 1; background: rgba(201,168,76,0.08); }

/* ── MODE BAR ────────────────────────────────── */
.mode-bar {
  background: rgba(0,0,0,0.25);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0 28px 0 calc(var(--sidebar-w) + 28px);
  display: flex;
  align-items: center;
  gap: 0;
  min-height: 42px;
  position: sticky;
  top: 52px; /* header height */
  z-index: 190;
}
.mode-tab {
  padding: 10px 18px;
  font-family: 'EB Garamond', serif;
  font-size: 0.83rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: none;
  background: none;
  color: rgba(244,240,230,0.45);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s;
}
.mode-tab:hover { color: rgba(244,240,230,0.8); }
.mode-tab.active { color: var(--gold); border-bottom-color: var(--gold); }
.bw-toggle {
  margin-left: auto;
  padding: 5px 13px;
  font-family: 'EB Garamond', serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  border: 1px solid var(--border);
  background: none;
  color: rgba(244,240,230,0.45);
  transition: color 0.15s, background 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.bw-toggle:hover { color: var(--cream); }
.bw-toggle.color-on { color: var(--gold); border-color: var(--gold); background: rgba(201,168,76,0.1); }
.compare-controls {
  margin-left: 14px;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.compare-controls.visible { display: flex; }
.compare-label { font-size: 0.75rem; color: rgba(244,240,230,0.45); letter-spacing: 0.05em; }
.year-select {
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  color: var(--cream);
  padding: 4px 10px;
  font-family: 'EB Garamond', serif;
  font-size: 0.9rem;
  border-radius: 2px;
  cursor: pointer;
  outline: none;
}
.year-select:focus { border-color: var(--gold); }

/* ── PAGE BODY LAYOUT ───────────────────────── */
.page-body {
  display: flex;
  align-items: flex-start;
}

/* ── SIDEBAR ─────────────────────────────────── */
.hole-sidebar {
  position: sticky;
  top: 94px; /* header + mode bar */
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  max-height: calc(100vh - 94px);
  overflow-y: auto;
  flex-shrink: 0;
  background: rgba(0,0,0,0.18);
  border-right: 1px solid var(--border);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.hole-sidebar::-webkit-scrollbar { width: 4px; }
.hole-sidebar::-webkit-scrollbar-track { background: transparent; }
.hole-sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.sb-head {
  padding: 10px 14px 8px;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.5;
  border-bottom: 1px solid var(--border);
}
.sb-full-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--cream-dim);
  font-family: 'EB Garamond', serif;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  padding: 8px 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.sb-full-btn:hover { background: rgba(201,168,76,0.08); color: var(--gold); }

.sb-hole {
  display: block;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(201,168,76,0.12);
  padding: 7px 14px 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s;
  position: relative;
}
.sb-hole:hover { background: rgba(201,168,76,0.07); }
.sb-hole.active {
  background: rgba(201,168,76,0.12);
  border-left: 2px solid var(--gold);
  padding-left: 12px;
}
.sb-roman {
  font-family: 'Playfair Display', serif;
  font-size: 0.65rem;
  color: var(--gold);
  opacity: 0.5;
  letter-spacing: 0.08em;
  display: block;
  line-height: 1.2;
}
.sb-hole.active .sb-roman { opacity: 1; }
.sb-hname {
  font-family: 'EB Garamond', serif;
  font-size: 0.8rem;
  color: var(--cream-dim);
  line-height: 1.3;
  display: block;
}
.sb-hole.active .sb-hname { color: var(--cream); }
.sb-par {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: rgba(201,168,76,0.4);
  display: block;
  margin-top: 1px;
}
.par-3 { color: #b8b05a; }
.par-4 { color: rgba(201,168,76,0.4); }
.par-5 { color: #5a9b70; }

/* ── MAIN COLUMN ─────────────────────────────── */
.page-main { flex: 1; min-width: 0; }

/* ── VIEWER ──────────────────────────────────── */
.viewer-section {
  padding: 18px 28px 10px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.viewer-wrap {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.aerial-col {
  flex: 1;
  min-width: 0;
}
#viewer-canvas {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
  cursor: default;
}
#viewer-canvas.pannable { cursor: grab; }
#viewer-canvas.panning  { cursor: grabbing; }
.img-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

/* ── COMPARE DIVIDER ─────────────────────────── */
#compare-divider {
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 2px;
  background: var(--gold);
  cursor: col-resize;
  display: none;
  z-index: 20;
  transform: translateX(-50%);
}
#compare-handle {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 30px; height: 30px;
  background: var(--gold);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--green-deep);
  font-size: 0.75rem; font-family: sans-serif;
  user-select: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

/* ── YEAR BADGE ──────────────────────────────── */
#year-badge {
  position: absolute;
  top: 12px; left: 50%; transform: translateX(-50%);
  background: var(--overlay-bg);
  border: 1px solid var(--gold-dim);
  color: var(--gold);
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  padding: 5px 22px;
  z-index: 15;
  letter-spacing: 0.1em;
  pointer-events: none;
  white-space: nowrap;
}

/* ── ZOOM CONTROLS ───────────────────────────── */
#zoom-controls {
  position: absolute;
  top: 10px; right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 25;
}
.zoom-btn {
  width: 28px; height: 28px;
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  color: var(--gold);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s;
  user-select: none;
}
.zoom-btn:hover { background: rgba(25,56,42,1); }
#zoom-badge {
  position: absolute;
  bottom: 10px; right: 10px;
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  color: rgba(201,168,76,0.6);
  font-family: 'Playfair Display', serif;
  font-size: 0.72rem;
  padding: 3px 8px;
  z-index: 25;
  letter-spacing: 0.06em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
#zoom-badge.visible { opacity: 1; }
#speed-control {
  position: absolute;
  top: 10px; left: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  z-index: 25;
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  padding: 6px 9px;
}
#speed-control .speed-lbl {
  color: rgba(201,168,76,0.7);
  font-family: 'Playfair Display', serif;
  font-size: 0.6rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
  user-select: none;
}
#speed-slider {
  width: 72px;
  cursor: pointer;
  accent-color: var(--gold);
}

/* ── TIMELINE ────────────────────────────────── */
.timeline-outer { max-width: 1100px; margin: 0 auto; width: 100%; }
.timeline-row { display: flex; align-items: center; gap: 14px; }
.play-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: none;
  color: var(--gold);
  font-size: 0.9rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
  padding-left: 2px;
}
.play-btn:hover { background: rgba(201,168,76,0.15); }
.play-btn.playing { padding-left: 0; }
.slider-wrap { flex: 1; position: relative; }
input[type=range].tl-slider {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
input[type=range].tl-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--green-deep);
  box-shadow: 0 0 0 1px var(--gold);
  cursor: pointer;
}
input[type=range].tl-slider::-moz-range-thumb {
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--green-deep);
  cursor: pointer;
}
.slider-endpoints {
  display: flex; justify-content: space-between;
  font-size: 0.68rem; color: rgba(244,240,230,0.35);
  margin-top: 4px;
  font-family: 'Playfair Display', serif; letter-spacing: 0.04em;
}
.year-display {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; color: var(--gold);
  min-width: 130px; text-align: right;
  letter-spacing: 0.05em; white-space: nowrap;
}
.era-bar {
  max-width: 1100px; margin: 0 auto 4px; width: 100%;
  font-size: 0.78rem; font-style: italic;
  color: rgba(201,168,76,0.5); text-align: center;
  letter-spacing: 0.04em; min-height: 1.2em;
}
.kbd-hint {
  text-align: center; font-size: 0.7rem;
  color: rgba(244,240,230,0.18); letter-spacing: 0.06em;
  padding: 4px 0 14px;
}

/* ── HOLE INFO PANEL ─────────────────────────── */
.hole-info-panel {
  width: 0;
  overflow: hidden;
  transition: width 0.3s ease;
  flex-shrink: 0;
  background: rgba(0,0,0,0.35);
  border: 1px solid transparent;
  border-left: none;
}
.hole-info-panel.open {
  width: 300px;
  border-color: var(--border);
}
.panel-inner {
  width: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.panel-inner::-webkit-scrollbar { width: 4px; }
.panel-inner::-webkit-scrollbar-track { background: transparent; }
.panel-inner::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.panel-close-row {
  display: flex;
  justify-content: flex-end;
  padding: 6px 8px 5px;
  border-bottom: 1px solid rgba(201,168,76,0.15);
  position: sticky;
  top: 0;
  background: rgba(15,30,22,0.92);
  z-index: 5;
}
.panel-close-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--gold);
  font-size: 1rem;
  width: 24px; height: 24px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.55;
  transition: opacity 0.1s, background 0.1s;
  font-family: sans-serif;
  line-height: 1;
}
.panel-close-btn:hover { opacity: 1; background: rgba(201,168,76,0.1); }

.panel-hole-head {
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(201,168,76,0.15);
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel-roman {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  color: var(--gold);
  opacity: 0.3;
  flex-shrink: 0;
  line-height: 1;
  min-width: 32px;
}
.panel-title-block { flex: 1; min-width: 0; }
.panel-hole-num {
  font-size: 0.57rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.45;
  display: block;
  margin-bottom: 1px;
}
.panel-hole-name {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  color: var(--cream);
  display: block;
  line-height: 1.2;
}
.panel-hole-sub {
  font-style: italic;
  font-size: 0.78rem;
  color: var(--cream-dim);
  display: block;
  margin-top: 2px;
  line-height: 1.3;
}

/* Par badges */
.par-badge {
  font-family: 'Playfair Display', serif;
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid;
  flex-shrink: 0;
}
.par-badge.p3 { color: #c9c070; border-color: rgba(201,192,112,0.4); }
.par-badge.p4 { color: #7ab8c8; border-color: rgba(122,184,200,0.4); }
.par-badge.p5 { color: #72b88a; border-color: rgba(114,184,138,0.4); }
/* the range has no par — neutral gold rather than a par colour */
.par-badge.pnull { color: var(--gold-light); border-color: var(--gold-dim); }

/* Era sections stacked vertically */
.panel-era {
  padding: 12px 14px;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.panel-era.era-orig { background: var(--era-orig-bg); }
.panel-era.era-chng { background: var(--era-chng-bg); }
.panel-era.era-rest { background: var(--era-rest-bg); }
.panel-era.era-plan { background: var(--era-plan-bg); }

.era-label {
  font-size: 0.57rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
  padding-bottom: 5px;
  border-bottom: 2px solid;
  font-family: 'Playfair Display', serif;
}
.era-orig .era-label { color: var(--era-orig); border-color: var(--era-orig); }
.era-chng .era-label { color: var(--era-chng); border-color: var(--era-chng); }
.era-rest .era-label { color: var(--era-rest); border-color: var(--era-rest); }
.era-plan .era-label { color: var(--era-plan); border-color: var(--era-plan); }

.era-bullets {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.era-bullets li {
  font-size: 0.79rem;
  color: var(--cream-dim);
  line-height: 1.5;
  padding-left: 12px;
  position: relative;
}
.era-bullets li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--gold);
  opacity: 0.5;
}

/* Highlight Today pull quote */
.card-highlight {
  padding: 12px 14px 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.highlight-rule {
  width: 3px;
  min-width: 3px;
  background: var(--gold);
  opacity: 0.45;
  border-radius: 2px;
  align-self: stretch;
}
.highlight-label {
  font-size: 0.57rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.55;
  display: block;
  margin-bottom: 5px;
}
.highlight-text {
  font-style: italic;
  font-size: 0.82rem;
  color: var(--cream-dim);
  line-height: 1.6;
}

/* ── RESPONSIVE ──────────────────────────────── */
@media (max-width: 700px) {
  .hole-info-panel.open { width: 260px; }
  .panel-inner { width: 260px; }
}

/* ── MEDIA GALLERY ───────────────────────────── */
.panel-media-block {
  border-top: 1px solid rgba(201,168,76,0.15);
}
.panel-media-section {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.media-section-label {
  font-size: 0.57rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.55;
  display: block;
  margin-bottom: 8px;
  font-family: 'Playfair Display', serif;
}
.media-photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.media-photo-item img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(201,168,76,0.2);
  transition: opacity 0.15s;
}
.media-photo-item img:hover { opacity: 0.85; }
.media-caption {
  font-size: 0.68rem;
  color: var(--cream-dim);
  font-style: italic;
  display: block;
  margin-top: 3px;
  line-height: 1.3;
}
.media-links { display: flex; flex-direction: column; gap: 5px; }
.media-link-item {
  font-size: 0.79rem;
  color: var(--gold-light);
  text-decoration: none;
  padding: 4px 8px;
  border: 1px solid rgba(201,168,76,0.2);
  display: block;
  transition: background 0.12s, color 0.12s;
}
.media-link-item:hover { background: rgba(201,168,76,0.08); color: var(--gold); }
.media-notes-text {
  font-size: 0.82rem;
  color: var(--cream-dim);
  line-height: 1.6;
  font-style: italic;
}

/* ── ADMIN PANEL ─────────────────────────────── */
.admin-panel {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: rgba(8,20,14,0.97);
  border-top: 2px solid var(--gold);
  z-index: 1000;
  font-family: 'EB Garamond', serif;
  max-height: 60vh;
  overflow-y: auto;
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--green-mid);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
}
.admin-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.07em;
}
.admin-close {
  background: none; border: none; color: var(--cream);
  font-size: 1.2rem; cursor: pointer; opacity: 0.6; padding: 0 4px;
}
.admin-body { padding: 12px 16px; display: flex; flex-wrap: wrap; gap: 12px; }
.admin-row { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 200px; }
.admin-label {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.6;
}
.admin-textarea, .admin-text-input, .admin-year-input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: 'EB Garamond', serif;
  font-size: 0.85rem;
  padding: 5px 8px;
  outline: none;
  border-radius: 2px;
  width: 100%;
}
.admin-textarea { resize: vertical; }
.admin-year-input { width: 70px; flex-shrink: 0; }
.admin-file-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: flex-start; }
.admin-btn {
  background: var(--green-mid);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: 'EB Garamond', serif;
  font-size: 0.8rem;
  padding: 5px 12px;
  cursor: pointer;
  letter-spacing: 0.05em;
  transition: background 0.12s;
  white-space: nowrap;
}
.admin-btn:hover { background: rgba(201,168,76,0.15); }
.admin-btn:disabled { opacity: 0.4; cursor: default; }
.admin-file-input { color: var(--cream-dim); font-size: 0.78rem; flex: 1; min-width: 0; }
.admin-status {
  padding: 6px 16px;
  font-size: 0.78rem;
  color: var(--gold-light);
  min-height: 24px;
  border-top: 1px solid rgba(201,168,76,0.15);
}
.admin-media-list { display: flex; flex-direction: column; gap: 4px; }
.admin-media-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  color: var(--cream-dim);
  padding: 4px 6px;
  border: 1px solid rgba(201,168,76,0.12);
}
.admin-media-item a { color: var(--gold-light); text-decoration: none; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-del-btn {
  background: none; border: none; color: #c06060; cursor: pointer;
  font-size: 0.78rem; padding: 0 4px; flex-shrink: 0;
}
.admin-del-btn:hover { color: #e08080; }

/* ── CALIBRATION PANEL ───────────────────────────────── */
.cal-panel {
  position: fixed; bottom: 80px; right: 16px; width: 272px;
  background: rgba(10,24,16,0.97); border: 1px solid var(--gold);
  z-index: 600; border-radius: 2px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6); font-family: 'EB Garamond', serif;
}
.cal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; background: var(--green-mid); border-bottom: 1px solid var(--border);
}
.cal-title { font-family: 'Playfair Display', serif; font-size: 0.82rem; color: var(--gold); letter-spacing: 0.07em; }
.cal-close-x { background: none; border: none; color: var(--cream); font-size: 1.1rem; cursor: pointer; opacity: 0.6; padding: 0 2px; line-height: 1; }
.cal-close-x:hover { opacity: 1; }
.cal-body { padding: 11px 13px; }
.cal-progress { font-size: 0.70rem; letter-spacing: 0.08em; color: var(--gold-light); opacity: 0.7; margin-bottom: 3px; }
.cal-hole-name { font-size: 1.02rem; color: var(--cream); margin-bottom: 1px; }
.cal-hole-sub { font-size: 0.76rem; color: var(--cream-dim); font-style: italic; margin-bottom: 9px; }
.cal-hint { font-size: 0.76rem; color: var(--cream-dim); margin-bottom: 9px; line-height: 1.4; }
.cal-vals {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px;
  margin-bottom: 10px; padding: 7px; background: rgba(0,0,0,0.3); border: 1px solid var(--border);
}
.cal-val-item { text-align: center; font-size: 0.68rem; color: var(--gold-light); opacity: 0.8; letter-spacing: 0.05em; }
.cal-val-num { display: block; font-size: 0.95rem; color: var(--gold); font-family: monospace; margin-top: 2px; }
.cal-btns { display: flex; gap: 6px; }
.cal-btn {
  flex: 1; padding: 7px 6px; border: 1px solid var(--border); background: rgba(0,0,0,0.3);
  color: var(--cream); font-family: 'EB Garamond', serif; font-size: 0.82rem; cursor: pointer; transition: background 0.15s;
}
.cal-btn:hover { background: rgba(201,168,76,0.12); }
.cal-btn:disabled { opacity: 0.35; cursor: default; }
.cal-btn-set { background: rgba(61,122,88,0.3); border-color: var(--green-light); }
.cal-btn-set:hover { background: rgba(61,122,88,0.5); }
.cal-pips { display: flex; gap: 3px; flex-wrap: wrap; margin-top: 9px; }
.cal-pip {
  width: 11px; height: 11px; border-radius: 50%;
  background: rgba(201,168,76,0.15); border: 1px solid var(--border); cursor: pointer;
}
.cal-pip:hover { background: rgba(201,168,76,0.3); }
.cal-pip.done { background: var(--green-light); border-color: var(--green-light); }
.cal-pip.active { background: var(--gold); border-color: var(--gold); }

/* Calibration output modal */
.cal-output-modal {
  position: fixed; inset: 0; z-index: 700; background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
}
.cal-output-box {
  background: var(--green-deep); border: 1px solid var(--gold); padding: 22px;
  width: min(580px, 92vw); max-height: 82vh; overflow-y: auto;
}
.cal-output-title { font-family: 'Playfair Display', serif; color: var(--gold); font-size: 1.1rem; margin-bottom: 3px; }
.cal-output-sub { font-size: 0.80rem; color: var(--cream-dim); margin-bottom: 12px; line-height: 1.4; }
.cal-output-area {
  width: 100%; background: rgba(0,0,0,0.4); border: 1px solid var(--border);
  color: var(--cream); font-family: monospace; font-size: 0.76rem; padding: 10px;
  resize: vertical; min-height: 180px;
}
.cal-output-btns { display: flex; gap: 8px; margin-top: 10px; }
.cal-output-copy {
  flex: 1; padding: 8px; background: rgba(61,122,88,0.4); border: 1px solid var(--green-light);
  color: var(--cream); font-family: 'EB Garamond', serif; cursor: pointer; font-size: 0.88rem;
}
.cal-output-copy:hover { background: rgba(61,122,88,0.6); }
.cal-output-dismiss {
  padding: 8px 16px; background: rgba(0,0,0,0.3); border: 1px solid var(--border);
  color: var(--cream); font-family: 'EB Garamond', serif; cursor: pointer; font-size: 0.88rem;
}

/* ═══════════════════════════════════════════════════════
   MOBILE LAYOUT  (@media max-width:768px)
   Desktop (>768px) completely unaffected.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .site-header { padding-left:14px; padding-right:14px; gap:8px; min-height:46px; }
  .page-subtitle,.page-meta { display:none; }
  .site-title { font-size:1rem; }
  .nav-link { font-size:0.7rem; padding:3px 8px; }
  .mode-bar { padding-left:10px; padding-right:10px; top:46px; }
  .mode-tab[data-mode="dissolve"] { display:none; }
  .hole-sidebar { display:none !important; }
  .page-main { width:100%; }
  /* Remove all padding so image fills edge-to-edge */
  .viewer-section { padding:0; gap:4px; }
  .viewer-wrap { flex-direction:column; align-items:stretch; }
  .aerial-col { width:100%; }
  .hole-info-panel { display:none !important; }
  .play-btn { display:none; }
  /* Timeline row: remove gap, pad slightly */
  .timeline-outer { padding:6px 10px 2px; }
  .year-display { font-size:0.82rem; min-width:72px; }
  .kbd-hint { display:none; }
  .slider-endpoints span:nth-child(2) { display:none; }
  .era-bar { font-size:0.7rem; padding:2px 10px 4px; }
  input[type=range].tl-slider { height:6px; }
  input[type=range].tl-slider::-webkit-slider-thumb { width:28px; height:28px; }
  input[type=range].tl-slider::-moz-range-thumb { width:28px; height:28px; }
  /* Hide speed control on mobile */
  #speed-control { display:none !important; }
  .bw-toggle { padding:8px 16px; font-size:0.82rem; }
  /* Small zoom buttons — stack horizontally at top-right */
  #zoom-controls { flex-direction:row; top:6px; right:6px; gap:3px; }
  .zoom-btn { width:26px; height:26px; font-size:0.85rem; }
  /* Year badge smaller */
  #year-badge { font-size:0.72rem; padding:3px 10px; }

  /* Tap zones — !important overrides later global rule */
  .tap-zone { display:flex !important; }
  /* Decade bar */
  .mobile-decade-bar { display:flex !important; }
  /* FAB hidden — using inline list instead */
  .mobile-holes-btn { display:none !important; }
  /* Bottom sheet */
  .mobile-hole-sheet { display:flex !important; }
  /* Inline holes list */
  .mob-holes-inline { display:block !important; }
}

/* Hide tap zones when zoomed (pan mode takes over) — JS adds .zoomed to body */
body.zoomed .tap-zone { pointer-events:none !important; opacity:0 !important; }

/* ── Instagram-style tap zones ── */
.tap-zone {
  display:none; position:absolute; top:0; bottom:0; width:32%; z-index:18;
  align-items:center; justify-content:center;
  user-select:none; -webkit-tap-highlight-color:transparent;
}
.tap-prev { left:0; } .tap-next { right:0; }
.tap-arrow {
  font-family:'Playfair Display',serif; font-size:3rem; color:var(--cream);
  opacity:0.6; transition:opacity 0.15s;
  text-shadow:0 1px 14px rgba(0,0,0,0.9); pointer-events:none; line-height:1;
}
.tap-zone.flash .tap-arrow { opacity:1; }

/* ── Decade bar ── */
.mobile-decade-bar {
  display:none; gap:6px; padding:8px 0 6px;
  justify-content:center; flex-wrap:wrap;
}
.decade-btn {
  font-family:'Playfair Display',serif; font-size:0.75rem; letter-spacing:0.05em;
  color:rgba(244,240,230,0.55); background:rgba(0,0,0,0.25);
  border:1px solid rgba(201,168,76,0.25); padding:7px 11px;
  cursor:pointer; min-width:58px; text-align:center;
  transition:color 0.1s,background 0.1s,border-color 0.1s;
  -webkit-tap-highlight-color:transparent;
}
.decade-btn.active { color:var(--gold); border-color:var(--gold); background:rgba(201,168,76,0.1); }

/* ── Year picker popup ── */
.mobile-year-picker {
  display:none; position:fixed; inset:0; z-index:900;
  background:rgba(0,0,0,0.65); align-items:flex-end;
}
.mobile-year-picker.open { display:flex; }
.myp-inner {
  background:var(--green-deep); border-top:2px solid var(--gold);
  width:100%; max-height:52vh; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:12px 14px 28px; display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
}
.myp-title {
  width:100%; font-family:'Playfair Display',serif; font-size:0.6rem;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); opacity:0.5;
  text-align:center; padding-bottom:8px; border-bottom:1px solid var(--border); margin-bottom:2px;
}
.year-pick-btn {
  font-family:'Playfair Display',serif; font-size:0.9rem; letter-spacing:0.04em;
  color:var(--cream-dim); background:rgba(0,0,0,0.3); border:1px solid var(--border);
  padding:9px 16px; cursor:pointer; min-width:88px; text-align:center;
  transition:background 0.1s,color 0.1s; -webkit-tap-highlight-color:transparent;
}
.year-pick-btn.current { color:var(--gold); border-color:var(--gold); background:rgba(201,168,76,0.12); }

/* ── Mobile holes overlay (full-screen) ── */
.mobile-holes-overlay {
  display:none; position:fixed; inset:0; z-index:1000;
  background:var(--green-deep); flex-direction:column; overflow:hidden;
}
.mobile-holes-overlay.open { display:flex; }
.mho-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px 14px; border-bottom:1px solid var(--border);
  background:rgba(0,0,0,0.2); flex-shrink:0;
}
.mho-title {
  font-family:'Playfair Display',serif; font-size:0.62rem;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--gold); opacity:0.65;
}
.mho-close {
  background:none; border:none; color:var(--cream); font-size:1.5rem;
  cursor:pointer; padding:0 2px; opacity:0.55; line-height:1;
}
.mho-list { flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.mho-full-btn {
  display:flex; align-items:center; gap:12px; width:100%; background:none; border:none;
  border-bottom:1px solid var(--border); color:var(--cream-dim);
  font-family:'EB Garamond',serif; font-size:0.92rem; letter-spacing:0.05em;
  padding:15px 18px; cursor:pointer; text-align:left;
  -webkit-tap-highlight-color:transparent;
}
.mho-full-btn:active { background:rgba(201,168,76,0.08); }
.mho-hole-row {
  display:flex; align-items:center; gap:14px; width:100%; background:none; border:none;
  border-bottom:1px solid rgba(201,168,76,0.1); padding:13px 18px 11px;
  cursor:pointer; text-align:left; -webkit-tap-highlight-color:transparent; transition:background 0.1s;
}
.mho-hole-row:active { background:rgba(201,168,76,0.09); }
.mho-roman {
  font-family:'Playfair Display',serif; font-size:1.1rem; color:var(--gold);
  opacity:0.38; min-width:34px; text-align:center; flex-shrink:0;
}
.mho-info { flex:1; min-width:0; }
.mho-name { font-family:'EB Garamond',serif; font-size:1rem; color:var(--cream); display:block; line-height:1.3; }
.mho-par { font-size:0.7rem; letter-spacing:0.05em; color:rgba(201,168,76,0.42); display:block; margin-top:2px; }
.mho-chevron { color:rgba(201,168,76,0.3); font-size:1rem; flex-shrink:0; }

/* ── Mobile holes FAB button ── */
.mobile-holes-btn {
  display:none; position:fixed; bottom:24px; left:50%; transform:translateX(-50%);
  z-index:400; background:var(--overlay-bg); border:1px solid var(--gold); color:var(--gold);
  font-family:'EB Garamond',serif; font-size:0.88rem; letter-spacing:0.1em;
  text-transform:uppercase; padding:11px 26px; cursor:pointer;
  box-shadow:0 3px 16px rgba(0,0,0,0.55); white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}

/* ── Mobile hole info bottom sheet ── */
.mobile-hole-sheet {
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:800;
  background:rgba(18,42,30,0.97); border-top:2px solid var(--gold);
  flex-direction:column; transform:translateY(100%);
  transition:transform 0.32s cubic-bezier(0.4,0,0.2,1);
  max-height:82vh; overflow:hidden;
}
.mobile-hole-sheet.show { transform:translateY(0); }
.mhs-top {
  display:flex; align-items:flex-start; padding:11px 14px 10px;
  border-bottom:1px solid rgba(201,168,76,0.18); flex-shrink:0; gap:10px;
}
.mhs-labels { flex:1; min-width:0; }
.mhs-hole-label {
  font-family:'Playfair Display',serif; font-size:0.58rem; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold); opacity:0.5;
  display:block; line-height:1; margin-bottom:3px;
}
.mhs-hole-name {
  font-family:'Playfair Display',serif; font-size:0.95rem; color:var(--gold);
  display:block; line-height:1.2;
}
.mhs-close {
  background:none; border:1px solid rgba(201,168,76,0.3); color:var(--gold);
  font-family:sans-serif; font-size:1rem; width:30px; height:30px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; opacity:0.65; -webkit-tap-highlight-color:transparent;
}
.mhs-body { padding:11px 16px 4px; flex-shrink:0; }
.mhs-sub { font-style:italic; font-size:0.82rem; color:var(--cream-dim); display:block; margin-bottom:7px; line-height:1.4; }
.mhs-hl { font-size:0.88rem; color:var(--cream); line-height:1.65; }
.mhs-more-btn {
  display:flex; width:100%; align-items:center; justify-content:center; gap:6px;
  padding:10px 16px; background:none; border:none;
  border-top:1px solid rgba(201,168,76,0.15); color:rgba(201,168,76,0.55);
  font-family:'EB Garamond',serif; font-size:0.78rem; letter-spacing:0.08em;
  cursor:pointer; flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.mhs-full { display:none; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; min-height:0; }
.mhs-full.expanded { display:block; }

/* ── Mobile inline holes list ── */
.mob-holes-inline {
  display:none;
  padding:8px 10px 6px;
  border-top:1px solid var(--border);
}
.mob-hole-select {
  width:100%;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(201,168,76,0.3);
  color:var(--cream);
  padding:10px 14px;
  font-family:'EB Garamond',serif;
  font-size:1rem;
  letter-spacing:0.02em;
  cursor:pointer;
  border-radius:2px;
  outline:none;
  -webkit-appearance:auto;
}

/* ── MOBILE FINAL OVERRIDES — must be last in stylesheet ──
   Placed here so they come after every global display:none rule
   and win the cascade without needing !important.            */
@media (max-width: 768px) {
  /* Show tap navigation arrows */
  .tap-zone { display:flex; }

  /* Show decade bar */
  .mobile-decade-bar { display:flex; }

  /* Show inline holes list */
  .mob-holes-inline { display:block; }

  /* Show bottom hole-info sheet */
  .mobile-hole-sheet { display:flex; }

  /* Move timeline BELOW the image on mobile */
  .aerial-col {
    display:flex;
    flex-direction:column;
  }
  #viewer-canvas { order:1; }
  .timeline-outer { order:3; padding:6px 10px 0; }
  .era-bar { order:4; }
  .mobile-decade-bar { order:5; }
  .mob-holes-inline { order:6; }

  /* Compare controls repositioned below image on mobile */
  .compare-controls.mob-repositioned {
    margin-left:0;
    width:100%;
    justify-content:center;
    padding:10px 14px;
    gap:14px;
    border-top:1px solid var(--border);
    order:2;
    flex-wrap:wrap;
  }
  .compare-controls.mob-repositioned .compare-label {
    font-size:0.82rem;
  }
  .compare-controls.mob-repositioned .year-select {
    font-size:1rem;
    padding:6px 12px;
  }
}

/* ── LONG RANGE PLAN (plan mode only) ─────────────── */
.plan-trees {
  margin-top: 9px;
  padding: 6px 9px;
  border-left: 2px solid var(--era-plan);
  background: rgba(109,159,192,0.07);
  font-size: 0.76rem;
  color: var(--cream-dim);
}
.plan-trees-label {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--era-plan);
  margin-bottom: 3px;
}

/* Standing reminder that this view is not public and not built. */
.plan-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 5px 14px;
  background: rgba(109,159,192,0.12);
  border-bottom: 1px solid rgba(109,159,192,0.3);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  color: var(--era-plan);
  text-align: center;
}
.plan-banner strong {
  font-family: 'Playfair Display', serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.6rem;
}
.plan-banner .plan-banner-sep { opacity: 0.4; }

/* Document library */
.plan-docs-btn {
  background: none;
  cursor: pointer;
  border: 1px solid var(--era-plan);
  color: var(--era-plan);
}
.plan-docs {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10,26,19,0.82);
  padding: 20px;
}
.plan-docs.open { display: flex; }
.plan-docs-inner {
  width: min(560px, 100%);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--overlay-bg);
  border: 1px solid var(--border);
  border-radius: 3px;
}
.plan-docs-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--border);
}
.plan-docs-title {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  color: var(--gold-light);
}
.plan-docs-meta { font-size: 0.7rem; color: var(--cream-dim); }
.plan-docs-close {
  background: none;
  border: none;
  color: var(--cream-dim);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.plan-docs-close:hover { color: var(--cream); }
.plan-doc-item {
  display: block;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(201,168,76,0.1);
  text-decoration: none;
  color: var(--cream);
}
.plan-doc-item:hover { background: rgba(201,168,76,0.07); }
.plan-doc-label { display: block; font-size: 0.86rem; color: var(--gold-light); }
.plan-doc-note  { display: block; font-size: 0.73rem; color: var(--cream-dim); margin-top: 2px; }

/* ── OVERLAY MODE ─────────────────────────────────── */
.ov-fade {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
}
.ov-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 150px;
  height: 3px;
  background: linear-gradient(to right, var(--gold-dim), var(--gold));
  border-radius: 2px;
  outline: none;
  cursor: pointer;
}
.ov-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--green-deep);
  cursor: grab;
}
.ov-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--green-deep);
  cursor: grab;
}
.ov-pct {
  font-size: 0.74rem;
  color: var(--gold-light);
  min-width: 34px;      /* hold width so the row does not jitter while dragging */
  text-align: right;
}

@media (max-width: 900px) {
  .ov-slider { width: 96px; }
  .overlay-controls { margin-left: 8px; gap: 6px; }
}

/* practice entries (range, putting green) sit under their own heading */
.sb-head-practice { border-top: 1px solid var(--border); margin-top: 4px; }

/* visit count — quieter than the keyboard hint above it */
.visit-count {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(244,240,230,0.13);
  padding: 0 0 18px;
  min-height: 1em;      /* hold the space so the page does not shift when it lands */
}

/* ── CITATIONS INTO THE MANUSCRIPT ────────────────── */
.cite {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  font-size: 0.64rem;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.25);
  border-radius: 2px;
  text-decoration: none;
  vertical-align: 1px;
  white-space: nowrap;
  opacity: 0.75;
}
.cite:hover { opacity: 1; background: rgba(201,168,76,0.2); }

/* ── ADD MEDIA ────────────────────────────────────── */
.addmedia { padding: 12px 14px 20px; border-top: 1px solid rgba(201,168,76,0.12); }
.addmedia-btn {
  width: 100%;
  background: none;
  border: 1px dashed var(--border);
  color: var(--gold);
  font-family: 'EB Garamond', serif;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  padding: 8px 10px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.addmedia-btn:hover { background: rgba(201,168,76,0.1); }
.addmedia-form { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.addmedia-file { font-size: 0.74rem; color: var(--cream-dim); }
.addmedia-text, .addmedia-year {
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border);
  color: var(--cream);
  font-family: 'EB Garamond', serif;
  font-size: 0.82rem;
  padding: 5px 8px;
  border-radius: 2px;
  outline: none;
}
.addmedia-text:focus, .addmedia-year:focus { border-color: var(--gold); }
.addmedia-year { width: 84px; }
.addmedia-row { display: flex; gap: 7px; }
.addmedia-go, .addmedia-cancel {
  font-family: 'EB Garamond', serif;
  font-size: 0.78rem;
  padding: 5px 12px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: rgba(201,168,76,0.12);
  color: var(--gold);
}
.addmedia-cancel { background: none; color: var(--cream-dim); }
.addmedia-go:disabled { opacity: 0.5; cursor: default; }
.addmedia-status { font-size: 0.74rem; color: var(--cream-dim); min-height: 1em; }
.addmedia-status.bad { color: #e08080; }

/* a location with no history written yet */
.panel-empty {
  padding: 16px 14px;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--cream-dim);
  font-style: italic;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}

/* the architect's walkthrough, set apart from his spreadsheet items */
.plan-voice {
  margin-top: 12px;
  padding: 11px 13px;
  background: rgba(109,159,192,0.07);
  border-left: 2px solid var(--era-plan);
}
.plan-voice-label {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--era-plan);
  margin-bottom: 6px;
}
.plan-voice p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--cream);
  font-style: italic;
}
.plan-voice-cite {
  display: block;
  margin-top: 7px;
  font-size: 0.68rem;
  color: var(--cream-dim);
  font-style: normal;
}

/* how much this hole actually changes */
.plan-scale { display:flex; gap:9px; align-items:flex-start; margin:0 0 10px; }
.plan-scale-badge {
  flex-shrink:0; font-family:'Playfair Display',serif; font-size:0.55rem;
  letter-spacing:0.16em; text-transform:uppercase; padding:3px 9px;
  border:1px solid; border-radius:2px;
}
.plan-scale-why { font-size:0.76rem; line-height:1.45; color:var(--cream-dim); }
.plan-scale-light .plan-scale-badge    { color:#7fb08a; border-color:rgba(127,176,138,0.45); }
.plan-scale-moderate .plan-scale-badge { color:var(--gold-light); border-color:var(--gold-dim); }
.plan-scale-major .plan-scale-badge    { color:#d09a72; border-color:rgba(208,154,114,0.5); }

/* themes browser */
.themes-btn { background:none; cursor:pointer; border:1px solid var(--era-plan); color:var(--era-plan); }
.themes { position:fixed; inset:0; z-index:400; display:none; align-items:center;
  justify-content:center; background:rgba(10,26,19,0.82); padding:20px; }
.themes.open { display:flex; }
.themes-inner { width:min(760px,100%); max-height:88vh; overflow-y:auto;
  background:var(--overlay-bg); border:1px solid var(--border); border-radius:3px; }
.themes-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  padding:13px 16px; border-bottom:1px solid var(--border); position:sticky; top:0;
  background:var(--overlay-bg); }
.themes-title { font-family:'Playfair Display',serif; font-size:0.95rem; color:var(--gold-light); }
.themes-close { background:none; border:none; color:var(--cream-dim); font-size:1.4rem;
  line-height:1; cursor:pointer; }
.themes-close:hover { color:var(--cream); }
.theme { border-bottom:1px solid rgba(201,168,76,0.1); }
.theme-head { width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:11px 16px; display:flex; align-items:baseline; gap:10px; font-family:'EB Garamond',serif; }
.theme-head:hover { background:rgba(201,168,76,0.06); }
.theme-name { color:var(--gold-light); font-size:0.9rem; flex:1; }
.theme-count { font-size:0.72rem; color:var(--cream-dim); font-variant-numeric:tabular-nums; }
.theme-note { padding:0 16px 10px; font-size:0.78rem; color:var(--cream-dim); font-style:italic; }
.theme-body { display:none; padding:0 16px 12px; }
.theme.open .theme-body { display:block; }
.theme-loc { margin-top:10px; }
.theme-loc-name { display:block; font-size:0.6rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--era-plan); margin-bottom:4px; cursor:pointer; }
.theme-loc-name:hover { color:var(--cream); }
.theme-loc ul { list-style:none; }
.theme-loc li { font-size:0.8rem; color:var(--cream-dim); line-height:1.45; padding:2px 0 2px 12px;
  position:relative; }
.theme-loc li::before { content:'·'; position:absolute; left:2px; color:var(--era-plan); }

/* ── GREEN COMMITTEE DECISIONS ────────────────────── */
.gc-decision { padding:10px 12px; margin:0 0 12px; border-left:3px solid; background:rgba(0,0,0,0.16); }
.gc-head { display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.gc-badge { font-family:'Playfair Display',serif; font-size:0.58rem; letter-spacing:0.16em;
  text-transform:uppercase; }
.gc-vote { font-size:0.72rem; color:var(--cream); font-variant-numeric:tabular-nums; }
.gc-when { font-size:0.7rem; color:var(--cream-dim); margin-left:auto; }
.gc-decision p { font-size:0.79rem; line-height:1.5; color:var(--cream-dim); }
.gc-src { display:block; margin-top:6px; font-size:0.66rem; color:var(--cream-dim); opacity:0.75; }

.gc-approved  { border-color:#6faa7d; } .gc-approved  .gc-badge { color:#8fc79c; }
.gc-caveat    { border-color:var(--gold); } .gc-caveat  .gc-badge { color:var(--gold-light); }
.gc-partial   { border-color:#d09a72; } .gc-partial   .gc-badge { color:#e0b190; }
.gc-referred  { border-color:#c98080; } .gc-referred  .gc-badge { color:#dc9c9c; }
.gc-pending   { border-color:rgba(244,240,230,0.25); } .gc-pending .gc-badge { color:var(--cream-dim); }
.gc-excluded  { border-color:rgba(244,240,230,0.2); } .gc-excluded .gc-badge { color:var(--cream-dim); }

/* sidebar marker */
.sb-gc { display:block; margin-top:2px; font-size:0.56rem; letter-spacing:0.12em;
  text-transform:uppercase; }
.sb-gc-approved { color:#7fb08a; }
.sb-gc-caveat   { color:var(--gold); opacity:0.85; }
.sb-gc-partial  { color:#d09a72; }
.sb-gc-referred { color:#c98080; }
.sb-gc-pending  { color:rgba(244,240,230,0.3); }
.sb-gc-excluded { color:rgba(244,240,230,0.28); }