/* ============================================================
   Lakes Terrain Viewer (CM-1) — combined CSS
   Source: UI/terrain-ltv.html lines 25-1156 + 6646-6920
   Generated as part of Phase 0a refactor 2026-05-11
   ============================================================ */

/* ───── Main viewer CSS (was lines 25-1156) ───── */
:root {
  --navy: #1a2338;
  --gold: #b38a2f;
  --green: #2d6a4f;
  --bg: #0a0f1a;
  --panel: #141a28;
  --text: #e8e4d8;
  --dim: #8a8f96;
  --red: #c8464e;
  --accent: #4a9fd4;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

header {
  background: var(--navy);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-bottom: 1px solid #22304a;
  flex-shrink: 0;
}

header h1 {
  font-size: 16px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.3px;
}

header .subtitle {
  font-size: 12px;
  color: var(--dim);
}

.palette-selector {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.palette-selector button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2a3550;
  padding: 6px 12px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.palette-selector button:hover {
  background: #1e2a42;
  border-color: var(--gold);
}

.palette-selector button.active {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  font-weight: 600;
}

#main {
  flex: 1;
  display: flex;
  min-height: 0;
}

#map-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#map {
  flex: 1;
  /* Sea / no-data tone — matches cm1-sea-overlay.png navy (#1A2238).
     Shows through wherever the palette PNG has alpha=0 (i.e. NaN/no-LIDAR
     areas: Solway Firth water, beyond-coast margins, SW corner Solway flats). */
  background: #1A2238;
  position: relative;
}

#toolbar {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: 6px;
  /* Solid background — no backdrop-filter blur (it repaints whenever the
     map image filter changes, contributing to the wobble). */
  background: #0f1520;
  padding: 8px 12px;
  border: 1px solid #2a3550;
  border-radius: 5px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.55);
  max-width: calc(100% - 80px);
  white-space: nowrap;
  /* Pin the size so nothing inside (status text, sharpen button label)
     can reflow the parent and shift the centred position. */
  will-change: auto;
}

#toolbar .tool-group {
  display: flex;
  align-items: center;
  gap: 5px;
}

#toolbar button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2a3550;
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
  min-width: 36px;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}

/* Sharpen button has a fixed width so its label can change (off / 1× / 2×)
   without reflowing the toolbar and causing the whole thing to jiggle. */
#toolbar #tool-sharpen {
  width: 108px;
  text-align: center;
}

#toolbar button:hover {
  background: #1e2a42;
  border-color: var(--gold);
}

#toolbar button.active {
  background: var(--accent);
  color: var(--navy);
  border-color: var(--accent);
  font-weight: 600;
}

#toolbar .separator {
  width: 1px;
  height: 22px;
  background: #2a3550;
  margin: 0 3px;
}

#toolbar .status-text {
  color: var(--dim);
  font-size: 11.5px;
  padding: 6px 12px;
  width: 240px;         /* FIXED — don't let text length reflow the toolbar */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 1px solid #2a3550;
  margin-left: 4px;
  border-radius: 3px;
  transition: background 0.25s, color 0.25s;
}

#toolbar .coord-readout {
  color: var(--gold);
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  padding: 6px 12px;
  border-left: 1px solid #2a3550;
  width: 300px;         /* FIXED — fits grid ref + raw E/N */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.2px;
}

#toolbar .coord-readout.dim { color: var(--dim); }

#profile-panel {
  height: 440px;
  background: var(--panel);
  border-top: 1px solid #22304a;
  display: none;
  flex-direction: column;
  padding: 8px 12px;
  flex-shrink: 0;
}

#profile-panel.visible {
  display: flex;
}

#profile-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 4px;
}

#profile-panel-header .title {
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#profile-panel-header .close {
  background: transparent;
  color: var(--dim);
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
}

#profile-panel-header .header-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

#profile-panel-header button#profile-detail {
  background: transparent;
  color: var(--dim);
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  line-height: 1;
  transition: color 0.15s, transform 0.1s;
}
#profile-panel-header button#profile-detail:hover {
  color: var(--gold);
  transform: scale(1.15);
}
#profile-panel-header button#profile-detail:disabled {
  color: #3a4a5e;
  cursor: not-allowed;
  transform: none;
}

#profile-chart {
  flex: 1;
  min-height: 0;          /* prevent flex growth from pushing siblings */
  overflow: visible;       /* x-axis labels can extend slightly below */
  background: #0a0f1a;
  border: 1px solid #1e2a42;
  border-radius: 2px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--dim);
  font-size: 11px;
  text-align: center;
  padding: 14px;
}
#profile-chart svg {
  max-height: 100%;        /* SVG can't grow beyond its container */
}

#profile-panel-summary {
  display: flex;
  gap: 20px;
  font-size: 11px;
  color: var(--dim);
  margin-top: 4px;
  flex-shrink: 0;
}

#profile-panel-summary .stat {
  display: flex;
  gap: 6px;
}

#profile-panel-summary .stat span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   Point-capture panel — numbered markers + editable notes table
   ============================================================ */
#points-panel {
  height: 280px;
  background: var(--panel);
  border-top: 1px solid #22304a;
  display: none;
  flex-direction: column;
  padding: 10px 14px;
  flex-shrink: 0;
}

#points-panel.visible { display: flex; }

#points-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--dim);
  margin-bottom: 6px;
}

#points-panel-header .title {
  color: var(--gold);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#points-panel-header .count {
  color: var(--dim);
  font-size: 11px;
  margin-left: 10px;
  font-weight: normal;
}

#points-panel-header .close {
  background: transparent;
  color: var(--dim);
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 2px 6px;
}

#points-panel-body {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #1e2a42;
  background: #0a0f1a;
  border-radius: 2px;
}

#points-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

#points-table th {
  position: sticky;
  top: 0;
  background: #141a28;
  color: var(--accent);
  text-align: left;
  padding: 7px 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-size: 10px;
  border-bottom: 1px solid #22304a;
}

#points-table td {
  padding: 5px 8px;
  border-bottom: 1px solid #141a28;
  color: var(--text);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

#points-table td.num-col {
  color: var(--gold);
  font-weight: 600;
  width: 36px;
  text-align: center;
  padding-top: 8px;
}

#points-table td.coord-col {
  width: 95px;
  color: var(--dim);
  padding-top: 8px;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
}

#points-table td.gref-col {
  width: 120px;
  padding-top: 6px;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  letter-spacing: 0.3px;
  line-height: 1.35;
}
#points-table td.gref-col .gref-8 {
  color: var(--gold);
  font-weight: 600;
  font-size: 11px;
  display: block;
}
#points-table td.gref-col .gref-6 {
  color: var(--dim);
  font-size: 10px;
  display: block;
  margin-top: 1px;
}
#points-table th .th-sub {
  display: block;
  font-size: 9px;
  color: var(--dim);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0.2px;
  margin-top: 1px;
}

#points-table td.elev-col {
  width: 85px;
  padding-top: 8px;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
}
#points-table td.elev-col .elev-val {
  color: var(--green);
  font-weight: 600;
}
#points-table td.elev-col .elev-gap {
  color: var(--dim);
  font-style: italic;
}
#points-table td.elev-col .elev-pending {
  color: var(--dim);
  font-style: italic;
}

#points-table td.note-col textarea {
  width: 100%;
  min-height: 28px;
  max-height: 140px;
  background: #141a28;
  color: var(--text);
  border: 1px solid #2a3550;
  border-radius: 2px;
  padding: 4px 6px;
  font-family: inherit;
  font-size: 11px;
  resize: vertical;
  line-height: 1.4;
  box-sizing: border-box;
}

#points-table td.note-col textarea:focus {
  border-color: var(--accent);
  outline: none;
}

#points-table td.del-col {
  width: 26px;
  text-align: center;
  padding-top: 6px;
}

#points-table td.del-col button {
  background: transparent;
  color: var(--red);
  border: none;
  cursor: pointer;
  font-size: 15px;
  padding: 0 4px;
  line-height: 1;
}

#points-table td.del-col button:hover {
  color: #ff7070;
}

#points-empty {
  padding: 34px 20px;
  text-align: center;
  color: var(--dim);
  font-style: italic;
  font-size: 12px;
}

#points-panel-footer {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}

#points-panel-footer button {
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2a3550;
  padding: 6px 11px;
  font-size: 11px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}

#points-panel-footer button:hover {
  background: #1e2a42;
  border-color: var(--gold);
}

#points-panel-footer button.danger {
  color: var(--red);
}

#points-panel-footer button.danger:hover {
  border-color: var(--red);
}

#points-panel-footer .spacer { flex: 1; }

/* Numbered divIcon marker — white circle with dark number */
.point-marker-icon {
  background: var(--accent);
  color: #fff;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  line-height: 20px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Floating distance label for the measure tool — sits at the midpoint of
   the measure line, always visible, pinned to the map so it pans/zooms with
   the rest of the drawing. */
.measure-label {
  background: none !important;
  border: none !important;
}
.measure-label-inner {
  display: inline-block;
  background: rgba(10, 14, 26, 0.92);
  color: #4a9fd4;
  border: 1px solid #4a9fd4;
  padding: 4px 9px;
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.55);
  transform: translate(-50%, -50%);
  letter-spacing: 0.3px;
}

/* Waypoints mini-panel — sits below the Leaflet zoom control on the
   left side of the map. Collapsed = small icon button. Expanded = a
   compact input panel for pasting up to 10 grid refs. Completely
   independent of the toolbar tools — no interference. */
.waypoint-control {
  background: #0f1520;
  border: 1px solid #2a3550;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  font-family: inherit;
  color: var(--text);
}

.waypoint-toggle {
  width: 34px;
  height: 34px;
  background: var(--panel);
  border: 1px solid #2a3550;
  border-radius: 4px;
  color: var(--text);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.waypoint-toggle:hover {
  background: #1e2a42;
  border-color: var(--gold);
}

.waypoint-panel {
  display: none;
  width: 240px;
  padding: 10px;
  font-size: 11px;
}
.waypoint-panel.open { display: block; }

.waypoint-panel h4 {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.waypoint-panel textarea {
  width: 100%;
  height: 130px;
  background: #0a0f1a;
  color: var(--text);
  border: 1px solid #2a3550;
  border-radius: 3px;
  padding: 6px 8px;
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  font-size: 10.5px;
  line-height: 1.5;
  resize: vertical;
  box-sizing: border-box;
}
.waypoint-panel textarea:focus {
  border-color: var(--gold);
  outline: none;
}
.waypoint-panel textarea::placeholder {
  color: #4a5a70;
  font-family: inherit;
}

.waypoint-panel .wp-buttons {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}
.waypoint-panel .wp-buttons button {
  flex: 1;
  background: var(--panel);
  color: var(--text);
  border: 1px solid #2a3550;
  padding: 5px 8px;
  font-size: 10px;
  border-radius: 3px;
  cursor: pointer;
  font-family: inherit;
}
.waypoint-panel .wp-buttons button:hover {
  background: #1e2a42;
  border-color: var(--gold);
}
.waypoint-panel .wp-buttons button.primary {
  background: var(--gold);
  color: #0a0f1a;
  border-color: var(--gold);
  font-weight: 600;
}
.waypoint-panel .wp-buttons button.primary:hover {
  background: #d4a830;
}
.waypoint-panel .wp-buttons button.danger {
  color: var(--red);
}

.waypoint-panel .wp-help {
  font-size: 9px;
  color: var(--dim);
  margin-top: 6px;
  line-height: 1.4;
}

/* Waypoint map markers — distinct from Point tool markers */
.wp-marker-icon {
  background: #d4a830;
  color: #0a0f1a;
  border: 2px solid #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 16px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  font-family: inherit;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.wp-label {
  background: rgba(15, 21, 32, 0.88);
  color: #d4a830;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 10px;
  font-family: ui-sans-serif, sans-serif;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  border: none !important;
  background-clip: padding-box;
}

/* v1.2.7.6 (2026-05-09) — DECOUPLED map reveal from DTM progress.
   Previously (v1.2.7.2) the palette PNG was clipped from 100% → 0% as the DTM
   downloaded — meaning the user stared at a synced thermometer for ~10 s on
   first visit. New UX: palette PNG and basemap show INSTANTLY (initial value
   = 0%, no clip), the thermometer pill at top still reports DTM progress so
   the user knows when the viewpoint feature becomes available, but the map
   itself is fully usable from the moment the page paints. The clip-path infra
   is kept (transition + var) so we can re-enable the synced reveal cheaply
   if we ever change our minds. */
:root {
  --map-reveal-bottom: 0%;
}
.leaflet-image-layer {
  clip-path: inset(0 0 var(--map-reveal-bottom) 0);
  -webkit-clip-path: inset(0 0 var(--map-reveal-bottom) 0);
  transition: clip-path 0.18s ease-out, -webkit-clip-path 0.18s ease-out;
}

/* DTM loading banner — shown while the COG loads into memory.
   v1.2.7 — thermometer-style horizontal progress bar (Richard's "thermometer
   style loader but obv horizontal"). Wider container with status row above
   + horizontal fill-bar + small byte-counter below.
   v1.2.6 history: pill-shape + bigger size; v1.2.6.1 scaled back. */
#dtm-loading {
  position: absolute;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  background: rgba(20, 26, 40, 0.94);
  border: 1.5px solid var(--gold);
  border-radius: 22px;           /* v1.2.7: rounded but not full-pill (container is now multi-line) */
  padding: 15px 30px 13px 30px;
  color: var(--gold);
  font-size: 15px;
  letter-spacing: 0.4px;
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.6);
  display: none;
  min-width: 380px;              /* v1.2.7: ensures progress bar has room */
  text-align: center;
}
#dtm-loading.visible { display: block; }
#dtm-loading .dtm-status {
  /* v1.2.7.1: spinner removed; just a centred status text line */
  text-align: center;
}
#dtm-loading .dtm-bar {
  /* The thermometer "tube" — empty rounded track */
  margin-top: 10px;
  height: 8px;
  width: 100%;
  background: rgba(255, 220, 120, 0.15);
  border-radius: 999px;
  overflow: hidden;
}
#dtm-loading .dtm-bar-fill {
  /* The "mercury" — gold gradient fill that grows left-to-right */
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b38a2f 0%, #ffd166 60%, #fff3b8 100%);
  border-radius: 999px;
  /* v1.2.7.9 (2026-05-09): NO CSS transition — JS uses a requestAnimationFrame
     lerp loop to smoothly interpolate the bar and keeps the percentage text
     synchronised to whatever the bar visually shows. CSS transitions caused
     "bar at 50% / text at 85%" desync because each new target value kicked
     off a fresh transition that took longer than the next progress event.
     With a JS lerp the bar and text always read the same value. */
  transition: none;
  box-shadow: 0 0 6px rgba(255,209,102,0.55);
}
#dtm-loading .dtm-bar-text {
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.3px;
  opacity: 0.78;
  font-family: 'SF Mono', 'Menlo', monospace;
}
/* When the loader hits an error: red instead of gold, no fill animation */
#dtm-loading.error { border-color: var(--red); color: var(--red); }
#dtm-loading.error .dtm-spinner { animation: none; content: '⚠'; }
#dtm-loading.error .dtm-bar-fill { background: var(--red); }
/* v1.2.7.7 (2026-05-09): Sliding-stripe animation for the indeterminate
   "decoding" phase — replaces the old subtle opacity pulse which made the
   bar look frozen at 100% for ~5s while the COG decoded. The new look is a
   diagonal-stripe fill that scrolls left-to-right, signalling "actively
   working" without claiming a specific percentage. */
#dtm-loading.decoding .dtm-bar-fill {
  width: 100%;
  background:
    repeating-linear-gradient(
      45deg,
      #b38a2f 0%, #b38a2f 10%,
      #ffd166 10%, #ffd166 20%
    );
  background-size: 28px 28px;
  animation: dtm-stripe-slide 0.7s linear infinite;
}
@keyframes dtm-stripe-slide {
  0%   { background-position: 0 0; }
  100% { background-position: 28px 0; }
}
@keyframes dtm-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* v1.2.7: dead ::before rules from previous version removed; .dtm-spinner now
   handles the rotating glyph as a real DOM element. Error styling is in the
   v1.2.7 block above. */

/* Elevation segment inside the coord readout — shown live on hover */
#toolbar .elev-readout {
  color: var(--green);
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  font-size: 11.5px;
  padding: 6px 12px;
  border-left: 1px solid #2a3550;
  width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#toolbar .elev-readout.dim { color: var(--dim); }

#sidebar {
  width: 280px;
  background: var(--panel);
  border-left: 1px solid #22304a;
  padding: 14px 16px;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.5;
}

#sidebar h2 {
  font-size: 13px;
  color: var(--gold);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

#sidebar h3 {
  font-size: 12px;
  color: var(--green);
  margin: 14px 0 6px 0;
  font-weight: 600;
}

#sidebar .row {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  color: var(--dim);
}

#sidebar .row span:last-child {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

#sidebar .note {
  margin-top: 16px;
  padding: 10px;
  background: rgba(179, 138, 47, 0.08);
  border-left: 2px solid var(--gold);
  color: var(--dim);
  font-size: 11px;
  line-height: 1.5;
}

footer {
  background: var(--navy);
  padding: 6px 18px;
  font-size: 11px;
  color: var(--dim);
  border-top: 1px solid #22304a;
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
}

footer #footer-coords {
  font-family: ui-monospace, "SF Mono", Monaco, monospace;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
}

/* Leaflet tweaks for dark mode */

.leaflet-control-zoom a {
  background: var(--panel) !important;
  color: var(--text) !important;
  border-color: #2a3550 !important;
}

.leaflet-control-zoom a:hover {
  background: #1e2a42 !important;
}

.leaflet-control-attribution {
  background: rgba(20, 26, 40, 0.85) !important;
  color: var(--dim) !important;
  font-size: 10px !important;
}

.leaflet-control-attribution a {
  color: var(--gold) !important;
}

/* Sharpen filter — applied to the map image overlay.
   Uses cheap GPU-accelerated CSS filter (not SVG feConvolveMatrix) because
   the SVG convolve was expensive enough on 9000×13500 to cause flicker on
   pan/zoom and palette switch. Final PS unsharp-mask tuning happens at
   export time, not in the live viewer. */
.sharpen-1 .leaflet-image-layer {
  filter: contrast(1.12) saturate(1.06);
}
.sharpen-2 .leaflet-image-layer {
  filter: contrast(1.25) saturate(1.12) brightness(1.02);
}

/* Sub-rows for the richer sidebar blocks */
#sidebar .sub {
  color: var(--dim);
  font-size: 10.5px;
  padding: 1px 0 3px 0;
  font-style: italic;
}
#sidebar a.about-link {
  display: inline-block;
  margin-top: 10px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px dashed var(--gold);
  font-size: 11px;
}
#sidebar a.about-link:hover { color: var(--text); }

/* ========== T4 RIGHT COLUMN — T3-style docked aside (ported 2026-04-26) ==========
   Same structural pattern as T3: <aside id="right-column"> as a flex sibling of
   #map-wrap inside #main, with .rc-tab buttons and .rc-pane cross-fade panes.
   Two views: "layers" (default) and "sidebar" (project/extent metadata).
   Tab switch is a tiny IIFE near the bottom of <body>.
   v1.2.7.13 (2026-05-10): removed stale CC1 dev-only back-button HTML that
   was parked inside this comment — pointed at localhost:8095, irrelevant for
   the lakes-terrain-viewer commercial product. */

#right-column {
  width: 280px;
  flex-shrink: 0;
  background: var(--panel);
  border-left: 1px solid #22304a;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#right-column-tabs {
  display: flex;
  flex-shrink: 0;
  background: #0f1520;
  border-bottom: 1px solid #22304a;
}

#right-column-tabs .rc-tab {
  flex: 1;
  background: transparent;
  color: var(--dim);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 8px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

#right-column-tabs .rc-tab:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.02);
}

#right-column-tabs .rc-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
  background: rgba(179, 138, 47, 0.06);
}

#right-column-body {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
}

#right-column-body .rc-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  opacity: 1;
  transition: opacity 0.2s ease;
}

#right-column.view-layers .rc-pane-sidebar,
#right-column.view-sidebar .rc-pane-layers {
  opacity: 0;
  pointer-events: none;
}

/* Docked sidebar — drop the now-redundant outer width/border (the parent
   #right-column provides those). Keep all inner styles (h2/h3/.row/.sub). */
#right-column #sidebar {
  width: auto;
  border-left: none;
  padding: 14px 16px;
  overflow-y: visible;
  font-size: 12px;
  line-height: 1.5;
}

/* Layers pane — keeps the row styling from the previous floating panel,
   rescoped to the new pane container. */
.rc-pane-layers {
  padding: 12px 14px 14px;
}
.rc-pane-layers .t4-row {
  display: grid;
  grid-template-columns: 14px 14px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  border-bottom: 1px solid #2a2a2a;
  font-size: 12.5px;
  color: #f0e6d2;
}
.rc-pane-layers .t4-row:last-of-type { border-bottom: none; }
.rc-pane-layers .t4-row:hover { color: #fff; }
.rc-pane-layers .t4-row input { margin: 0; cursor: pointer; }
.rc-pane-layers .t4-row .t4-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.2);
}
.rc-pane-layers .t4-row.disabled {
  color: #666;
  cursor: not-allowed;
}
.rc-pane-layers .t4-row.disabled .t4-swatch { opacity: 0.3; }
.rc-pane-layers .t4-meta {
  font-size: 10px;
  color: #888;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid #2a2a2a;
  font-style: italic;
}

/* Grid colour mode bar (cyan / dark flip) — sits at top of layers pane */
.rc-pane-layers .t4-grid-mode-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0 10px 0;
  margin-bottom: 6px;
  border-bottom: 1px solid #2a2a2a;
}
.rc-pane-layers .t4-grid-mode-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #888;
  flex: 1;
}
.rc-pane-layers .t4-grid-mode-btn {
  background: transparent;
  color: #888;
  border: 1px solid #444;
  padding: 3px 10px;
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  border-radius: 2px;
  transition: color 0.12s, background 0.12s, border-color 0.12s;
}
.rc-pane-layers .t4-grid-mode-btn:hover {
  color: #f0e6d2;
  border-color: #888;
}
.rc-pane-layers .t4-grid-mode-btn.active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(179, 138, 47, 0.08);
}

/* T4 NGR grid label styling — Leaflet divIcon */
.t4-ngr-label {
  background: transparent;
  border: none;
  font-family: 'Courier New', monospace;
  font-weight: 700;
  font-size: 22px;                              /* 2× larger per Richard 2026-04-25 */
  color: #3ec1d3;
  text-shadow: 0 0 4px rgba(0,0,0,0.95), 0 0 2px rgba(0,0,0,0.95), 0 0 1px rgba(0,0,0,0.95);
  white-space: nowrap;
  pointer-events: none;
}
.t4-ngr-label.subtile { font-size: 22px; color: #3ec1d3; }
/* DARK variant for use over light/cream palettes */
.t4-ngr-label.dark {
  color: #1a1a1a;
  text-shadow: 0 0 4px rgba(255,255,255,0.95), 0 0 2px rgba(255,255,255,0.95), 0 0 1px rgba(255,255,255,0.95);
}

/* ───── CM-2 viewpoint renderer CSS (was lines 6646-6920) ───── */
/* ── Pin marker on the map ─────────────────────────────────────── */
.cm2-pin {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  pointer-events: auto;
}
.cm2-pin-svg {
  width: 30px; height: 30px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.6));
}

/* ── Compass-rose dragger that surrounds the pin ───────────────── */
.cm2-compass {
  width: 200px; height: 200px;
  pointer-events: none;  /* let the SVG inside catch */
}
.cm2-compass svg {
  width: 100%; height: 100%;
  pointer-events: auto;
}
.cm2-compass .ring {
  fill: rgba(20,30,50,0.45);
  stroke: rgba(255,220,120,0.85);
  stroke-width: 1.5;
}
.cm2-compass .tick {
  stroke: rgba(255,220,120,0.7);
  stroke-width: 1;
}
.cm2-compass .label {
  fill: rgba(255,220,120,0.9);
  font: 600 11px 'Helvetica Neue', sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none;
}
.cm2-compass .arrow {
  fill: #ffd166;
  stroke: #fff;
  stroke-width: 1.5;
  cursor: grab;
  transform-origin: 100px 100px;
  filter: drop-shadow(0 0 4px rgba(255,209,102,0.6));
}
.cm2-compass .arrow.dragging { cursor: grabbing; }
.cm2-compass .bearing-text {
  fill: #fff;
  font: 700 12px 'Helvetica Neue', sans-serif;
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none;
}

/* ── Floating "Scene Render" button next to the pin (v1.2.4: pill shape, no icon) ───── */
.cm2-render-btn {
  position: absolute;
  z-index: 1100;
  background: linear-gradient(135deg, #b38a2f, #8a6920);
  color: #fff;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid rgba(255,220,120,0.65);
  border-radius: 999px;            /* v1.2.4: pill shape (rounded ends) */
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
  user-select: none;
  white-space: nowrap;
}
.cm2-render-btn:hover { background: linear-gradient(135deg,#c89c39,#a07a2a); border-color: rgba(255,220,120,0.95); }
.cm2-render-btn:active { transform: scale(0.97); }
.cm2-render-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* ── v1.2.3 / v1.2.5 / v1.2.7.1 — Compass dock toggle ─────
   v1.2.7.1: moved from top-right to CENTRE-top, floating directly below the
   toolbar (under the viewpoint button visually). Per Richard's "in the main
   window floating" — visually detached from the toolbar row but aligned with
   it horizontally. */
.cm2-dock-btn {
  position: absolute;
  top: 56px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1102;
  background: rgba(20,30,50,0.85);
  color: #ffd166;
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 11px 7px 8px;
  border: 1px solid rgba(255,220,120,0.55);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  user-select: none;
  display: flex; align-items: center; gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}
.cm2-dock-btn:hover { background: rgba(40,55,85,0.95); border-color: rgba(255,220,120,0.85); }
/* v1.2.7.1: combine translateX(-50%) for centring + scale for active feedback */
.cm2-dock-btn:active { transform: translateX(-50%) scale(0.97); }
.cm2-dock-btn .arrow-mini {
  display: inline-block; width: 14px; height: 14px;
  background: radial-gradient(circle, rgba(255,220,120,0.95) 30%, transparent 32%);
  position: relative;
}
.cm2-dock-btn .arrow-mini::after {
  content: ''; position: absolute; top: 0; left: 50%;
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-bottom: 7px solid #ffd166;
  transform: translateX(-50%);
  transform-origin: 50% 7px;  /* tip-of-arrow rotation pivot — corresponds to circle centre */
}

/* ── Full-screen modal (CM-2 panel) ────────────────────────────── */
#cm2-modal {
  position: fixed; inset: 0;
  background: rgba(8,12,22,0.96);
  z-index: 9999;
  display: none;
  flex-direction: column;
  font-family: 'Helvetica Neue', sans-serif;
  color: #e8e4d8;
}
#cm2-modal.visible { display: flex; }

#cm2-modal .topbar {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  background: #141a28;
  border-bottom: 1px solid #2a3550;
}
#cm2-modal .topbar h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd166;
}
#cm2-modal .topbar .info {
  font-size: 11px;
  color: #8a8f96;
  font-family: 'SF Mono', 'Menlo', monospace;
}
#cm2-modal .topbar button {
  background: #1a2236;
  border: 1px solid #2a3550;
  color: #e8e4d8;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 3px;
  cursor: pointer;
  margin-left: 6px;
}
#cm2-modal .topbar button:hover { background:#22304a; border-color:#b38a2f; }
#cm2-modal .topbar .close-btn { color:#c8464e; border-color:#5a2a30; }
#cm2-modal .topbar .close-btn:hover { background:#3a1a1d; border-color:#c8464e; }

#cm2-canvas-wrap {
  flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  overflow: auto;
  background: #050810;
  padding: 18px;
}
#cm2-canvas {
  max-width: 100%;
  max-height: 100%;
  background: #1a2238;
  box-shadow: 0 4px 16px rgba(0,0,0,0.6);
  display: block;
}

#cm2-controls {
  flex: 0 0 auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 18px;
  background: #141a28;
  border-top: 1px solid #2a3550;
  font-size: 12px;
}
#cm2-controls .row {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
#cm2-controls .row.row-2 {
  border-top: 1px dashed #2a3550;
  padding-top: 8px;
  font-size: 11px;
}
#cm2-controls label {
  display: flex; align-items: center; gap: 6px;
  color: #8a8f96;
}
#cm2-controls input[type=range] {
  width: 110px;
  accent-color: #b38a2f;
}
/* Scene-render palette dropdown — was too narrow (~250 px) so labels truncated
   ("Lakes C · 50 m bands (no contours,"). Wider + bigger so the user can
   read the selected palette at a glance and click confidently. */
#cm2-controls select#cm2-palette {
  min-width: 170px;
  padding: 4px 8px;
  font-size: 13px;
  background: #1a2238;
  color: #e8e4d8;
  border: 1px solid #2a3550;
  border-radius: 3px;
  cursor: pointer;
}
#cm2-controls select#cm2-palette:hover { border-color: #b38a2f; }
#cm2-controls select#cm2-palette option { padding: 4px; }
#cm2-controls .row.row-2 input[type=range] {
  width: 90px;
}
#cm2-controls input[type=checkbox] {
  accent-color: #b38a2f;
  width: 14px; height: 14px;
  margin: 0;
}
#cm2-controls .ghost-btn {
  background: #1a2236;
  border: 1px solid #2a3550;
  color: #e8e4d8;
  padding: 5px 10px;
  font: 11px 'Helvetica Neue', sans-serif;
  border-radius: 3px;
  cursor: pointer;
}
#cm2-controls .ghost-btn:hover { background: #22304a; border-color: #b38a2f; }
#cm2-controls .ghost-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#cm2-controls .readout {
  font-family: 'SF Mono', 'Menlo', monospace;
  color: #ffd166;
  min-width: 50px;
}
#cm2-controls .render-btn {
  background: linear-gradient(135deg,#b38a2f,#8a6920);
  color: #fff;
  border: 1px solid rgba(255,220,120,0.6);
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  border-radius: 3px;
  cursor: pointer;
}
#cm2-controls .render-btn:hover { background: linear-gradient(135deg,#c89c39,#a07a2a); }
#cm2-controls .render-btn:disabled { opacity: 0.5; cursor: not-allowed; }
#cm2-controls select {
  background: #1a2238;
  color: #ffd166;
  border: 1px solid #2a3550;
  padding: 6px 10px;
  font: 12px 'Helvetica Neue', sans-serif;
  border-radius: 3px;
  cursor: pointer;
  max-width: 220px;
}
#cm2-controls select:hover  { border-color: #b38a2f; }
#cm2-controls select:focus  { outline: none; border-color: #ffd166; }
#cm2-controls .status {
  margin-left: auto;
  color: #8a8f96;
  font-style: italic;
}