/*!
 * campscore — Iceland camping weather, stylesheet
 * Copyright (c) 2026 Larus Árni Hermannsson. All rights reserved.
 */

:root {
  /* Earth palette — desaturated, slightly warm */
  --paper:        #f3efe6;   /* warm off-white, like topo paper */
  --paper-2:      #ece7da;
  --paper-3:      #e2dccc;
  --ink:          #1f2419;   /* deep forest-black */
  --ink-2:        #3a4032;
  --ink-3:        #5b614f;
  --ink-4:        #7c826f;
  --ink-5:        #a8ad9a;
  --rule:         #c8c2af;
  --rule-2:       #d8d2bf;

  --moss:         #5a6b3a;
  --moss-2:       #7d8e57;
  --rust:         #a85a2a;
  --ochre:        #c0892e;
  --slate:        #4a5a6a;

  /* Score ramp anchors (matches the canvas ramp in JS) */
  --bad:          #dc2828;
  --mid:          #f0c83c;
  --good:         #1eaa3c;

  /* Type */
  --font-sans:    'Inter Tight', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-serif:   'Fraunces', Georgia, serif;

  --shadow-1: 0 1px 0 rgba(60,55,40,0.04), 0 2px 8px rgba(60,55,40,0.10);
  --shadow-2: 0 2px 0 rgba(60,55,40,0.04), 0 6px 20px rgba(60,55,40,0.14);
}

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--paper);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }

/* Typography variant: serif headings */
body[data-type="serif"] .wm-text,
body[data-type="serif"] .card-head h3,
body[data-type="serif"] .insp-title h4,
body[data-type="serif"] .modal h2 {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* MAP -------------------------------------------------------- */
#map {
  position: absolute;
  inset: 0 0 96px 0;
  background: var(--paper);
}
.grayscale-tiles {
  /* warm sepia treatment over OSM tiles to feel like a topo */
  filter: grayscale(0.85) sepia(0.18) brightness(1.04) contrast(0.92);
}
.leaflet-container { background: var(--paper-2); font-family: var(--font-sans); }
.leaflet-control-zoom a {
  background: rgba(243,239,230,0.96) !important;
  color: var(--ink-2) !important;
  border: 1px solid var(--rule) !important;
  box-shadow: var(--shadow-1) !important;
  font-weight: 500 !important;
}
.leaflet-control-zoom a:hover { background: var(--paper) !important; color: var(--ink) !important; }
.leaflet-bar { border-radius: 4px !important; overflow: hidden; }
.leaflet-control-attribution {
  background: rgba(243,239,230,0.85) !important;
  font-size: 10px !important;
  color: var(--ink-4) !important;
  padding: 2px 6px !important;
}
.leaflet-control-attribution a { color: var(--ink-3) !important; }
.leaflet-popup-content-wrapper {
  background: var(--paper);
  color: var(--ink);
  border-radius: 4px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-2);
}
.leaflet-popup-content { font-size: 12px; line-height: 1.5; margin: 10px 12px; }
.leaflet-popup-content b { font-weight: 600; }
.leaflet-popup-tip { background: var(--paper); border: 1px solid var(--rule); }

/* RAILS (floating panels) ----------------------------------- */
.rail { position: absolute; z-index: 1000; display: flex; flex-direction: column; gap: 10px; }
.rail-left  { top: 14px; left: 14px;  width: 296px; }
.rail-right { top: 14px; right: 56px; width: 200px; align-items: stretch; }

/* Sidebar layout variant */
body[data-layout="sidebar"] .rail-left {
  top: 0; left: 0; bottom: 0; width: 320px;
  padding: 14px; gap: 12px;
  background: var(--paper);
  border-right: 1px solid var(--rule);
  box-shadow: 4px 0 12px rgba(60,55,40,0.06);
}
body[data-layout="sidebar"] #map { left: 320px; }
body[data-layout="sidebar"] .rail-left .card { box-shadow: none; border-color: var(--rule); }

/* WORDMARK -------------------------------------------------- */
.wordmark {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(243,239,230,0.97);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 8px 12px;
  box-shadow: var(--shadow-1);
}
.wm-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--moss);
}
.wm-text {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.wm-meta {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  letter-spacing: 0.04em;
}

/* CARD ------------------------------------------------------ */
.card {
  background: rgba(243,239,230,0.97);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-1);
  padding: 0;
  font-size: 13px;
}
.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--rule-2);
}
.card-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.card-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Weight rows */
.weights-caption {
  margin: 0;
  padding: 8px 14px 0;
  font-size: 11.5px;
  color: var(--ink-3);
  line-height: 1.35;
}
.weights { padding: 10px 14px 4px; display: flex; flex-direction: column; gap: 8px; }
.weight-row {
  display: grid;
  grid-template-columns: 78px 1fr 36px;
  align-items: center;
  gap: 10px;
}
.w-meta { display: flex; align-items: baseline; gap: 6px; }
.w-key {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 600;
  color: var(--paper);
  background: var(--ink-2);
  border-radius: 2px;
}
.weight-row[data-axis="wind"] .w-key { background: var(--slate); }
.weight-row[data-axis="rain"] .w-key { background: #3d6a82; }
.weight-row[data-axis="temp"] .w-key { background: var(--rust); }
.w-name { font-weight: 500; font-size: 12.5px; color: var(--ink-2); }
.w-hint { font-size: 11px; color: var(--ink-4); margin-left: -2px; }
.w-val { font-size: 11px; color: var(--ink-3); text-align: right; }

/* Range sliders — custom thin track, square handles */
input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px; background: transparent; margin: 0;
}
input[type=range]::-webkit-slider-runnable-track {
  height: 3px; background: var(--rule); border-radius: 0;
}
input[type=range]::-moz-range-track {
  height: 3px; background: var(--rule); border-radius: 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink-2);
  border-radius: 0;
  margin-top: -4.5px;
  cursor: grab;
}
input[type=range]::-webkit-slider-thumb:active { background: var(--ink-2); cursor: grabbing; }
input[type=range]::-moz-range-thumb {
  width: 12px; height: 12px;
  background: var(--paper);
  border: 1.5px solid var(--ink-2);
  border-radius: 0;
  cursor: grab;
}

/* Hour block */
.hour-block { padding: 8px 14px 6px; border-top: 1px solid var(--rule-2); margin-top: 4px; }
.block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.block-label { font-size: 12px; font-weight: 500; color: var(--ink-2); }
.block-summary { font-size: 11px; color: var(--ink); }
.block-foot {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 2px;
}

/* Advanced */
.advanced { padding: 8px 14px 12px; border-top: 1px solid var(--rule-2); margin-top: 4px; }
.advanced summary {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; color: var(--ink-3);
  list-style: none;
  padding: 2px 0;
}
.advanced summary::-webkit-details-marker { display: none; }
.advanced summary::before {
  content: "▸"; font-size: 9px; color: var(--ink-4);
  transition: transform 0.15s;
  display: inline-block;
}
.advanced[open] summary::before { transform: rotate(90deg); }
.advanced summary:hover { color: var(--ink); }
.adv-flag {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--rust);
  letter-spacing: 0.04em;
}
.adv-grid {
  display: grid;
  grid-template-columns: 1fr 56px 56px;
  gap: 4px 8px;
  margin-top: 8px;
  align-items: center;
  font-size: 11px;
}
.adv-hdr {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-align: center;
}
.adv-name { font-size: 11.5px; color: var(--ink-2); }
.adv-name em { font-style: normal; color: var(--ink-4); margin-left: 4px; font-size: 10px; }
.adv-grid input[type=number] {
  width: 100%;
  padding: 3px 6px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  text-align: right;
}
.adv-grid input[type=number]:focus { outline: 1px solid var(--ink-3); border-color: var(--ink-3); }

/* Buttons */
.btn-primary {
  background: var(--moss);
  color: var(--paper);
  border: none;
  border-radius: 3px;
  padding: 8px 16px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12.5px;
  cursor: pointer;
  letter-spacing: -0.01em;
}
.btn-primary:hover { background: var(--ink-2); }
.btn-ghost {
  margin-top: 10px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  cursor: pointer;
}
.btn-ghost:hover { background: var(--paper-2); color: var(--ink); }

/* Meta line */
.meta-line {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  padding: 2px 4px;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* RIGHT RAIL — segmented buttons + legend ------------------- */
.seg {
  display: flex;
  background: rgba(243,239,230,0.97);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.seg-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-right: 1px solid var(--rule-2);
  padding: 7px 8px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-3);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--paper-2); color: var(--ink); }
.seg-btn.active { background: var(--moss); color: var(--paper); }
.seg-btn.active .seg-icon { color: var(--paper); }
.seg-icon { font-size: 10px; color: var(--moss); }

.legend {
  background: rgba(243,239,230,0.97);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-1);
  padding: 9px 12px 8px;
  font-size: 11px;
}
.legend-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.legend-head span:first-child { font-weight: 600; font-size: 11.5px; color: var(--ink-2); }
.legend-range { font-size: 10px; color: var(--ink-4); }
.legend-bar {
  height: 8px;
  border: 1px solid var(--rule);
  background: linear-gradient(to right, var(--bad), var(--mid), var(--good));
}
.legend-labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 3px;
}
.legend-foot {
  display: grid;
  grid-template-columns: 10px 1fr 10px 1fr;
  align-items: center;
  gap: 4px 6px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--rule-2);
  font-size: 10px;
  color: var(--ink-3);
}
.dot {
  width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid var(--ink-2);
  background: var(--paper);
}
.dot-nodata { border-color: var(--ink-4); background: var(--ink-5); }

.links {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(243,239,230,0.97);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-1);
  overflow: hidden;
}
.link {
  background: transparent; border: none;
  padding: 6px 10px;
  font-family: var(--font-sans); font-size: 11px;
  color: var(--ink-3);
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid var(--rule-2);
}
.link:last-child { border-bottom: none; }
.link:hover { background: var(--paper-2); color: var(--ink); }

/* DATE BAR (bottom) ---------------------------------------- */
#bottom-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 96px;
  background: rgba(243,239,230,0.97);
  border-top: 1px solid var(--rule);
  padding: 10px 24px 12px;
  z-index: 1000;
  box-shadow: 0 -2px 12px rgba(60,55,40,0.08);
}
body[data-layout="sidebar"] #bottom-bar { left: 320px; }
.hdr {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 2px;
}
.hdr .title {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--ink);
}
.date-label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
  font-weight: 500;
}
.day-nav {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  width: 22px; height: 22px;
  cursor: pointer;
  font-size: 9px;
  line-height: 1;
  color: var(--ink-3);
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.day-nav:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink-3); }
.summary { font-size: 12.5px; color: var(--ink-2); font-weight: 500; }

/* DUAL SLIDER ---------------------------------------------- */
.dslider { position: relative; padding: 8px 8px 22px; user-select: none; }
.dslider-track {
  position: relative; height: 3px;
  background: var(--rule); border-radius: 0;
}
.dslider-range {
  position: absolute; top: 0; height: 100%;
  background: var(--moss);
}
.dslider-handle {
  position: absolute; top: 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  background: var(--paper);
  border: 1.5px solid var(--ink-2);
  border-radius: 0;
  cursor: grab;
  z-index: 2;
  touch-action: none;
}
.dslider-handle:active, .dslider-handle.dragging { cursor: grabbing; background: var(--ink-2); }
.dslider-ticks {
  position: relative; margin-top: 8px; height: 12px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-4);
  letter-spacing: 0.02em;
}
.dslider-ticks span {
  position: absolute; transform: translateX(-50%); white-space: nowrap;
}
.dslider-ticks .tick-mark {
  position: absolute; top: -7px; width: 1px; height: 4px;
  background: var(--ink-5);
  transform: none;
}
.dslider-ticks .tick-link {
  cursor: pointer; color: var(--ink-3);
}
.dslider-ticks .tick-link:hover { color: var(--ink); text-decoration: underline; }

/* INSPECTOR ------------------------------------------------- */
.inspector {
  position: absolute;
  left: 326px;
  bottom: 110px;
  width: 360px;
  background: rgba(243,239,230,0.98);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  z-index: 1000;
  font-size: 12px;
}
body[data-layout="sidebar"] .inspector { left: 14px; bottom: 110px; }

.insp-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--rule-2);
}
.insp-eyebrow {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-4);
}
.insp-title h4 {
  margin: 1px 0 0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.insp-close {
  background: transparent; border: none;
  width: 22px; height: 22px;
  font-size: 11px;
  color: var(--ink-4);
  cursor: pointer;
  border-radius: 2px;
}
.insp-close:hover { background: var(--paper-2); color: var(--ink); }

.insp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule-2);
}
.insp-stat {
  padding: 8px 10px 9px;
  border-right: 1px solid var(--rule-2);
  display: flex;
  flex-direction: column;
}
.insp-stat:last-child { border-right: none; }
.stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-4);
}
.stat-val {
  font-size: 17px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.1;
  margin-top: 2px;
}
.stat-unit {
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: var(--ink-4);
  margin-top: 1px;
}
.insp-stat[data-axis="score"] .stat-val { color: var(--moss); font-weight: 600; }

.insp-charts {
  padding: 8px 14px 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.ch-head {
  display: flex; justify-content: space-between;
  font-size: 10px;
  color: var(--ink-3);
  margin-bottom: 1px;
}
.ch-head .mono { font-size: 9.5px; color: var(--ink-4); }
.ch-svg {
  width: 100%; height: 36px;
  display: block;
  background: var(--paper-2);
  border: 1px solid var(--rule-2);
  border-radius: 2px;
}
.ch-line { fill: none; stroke-width: 1.25; }
.ch[data-axis="wind"] .ch-line { stroke: var(--slate); }
.ch[data-axis="rain"] .ch-line { stroke: #3d6a82; }
.ch[data-axis="temp"] .ch-line { stroke: var(--rust); }
.ch-area { opacity: 0.18; }
.ch[data-axis="wind"] .ch-area { fill: var(--slate); }
.ch[data-axis="rain"] .ch-area { fill: #3d6a82; }
.ch[data-axis="temp"] .ch-area { fill: var(--rust); }

/* BARS — width represents the actual time window each forecast point
   covers (1h near-term → 3h → 6h further out). Wider bar = lower
   resolution. */
.ch-bar { opacity: 0.85; }
.ch[data-axis="wind"] .ch-bar { fill: var(--slate); }
.ch[data-axis="rain"] .ch-bar { fill: #3d6a82; }
.ch[data-axis="temp"] .ch-bar { fill: var(--rust); }
/* Negative-temperature bars are tinted blue and hang below the zero
   baseline. (Other axes are forced to a 0 minimum so they never go
   negative.) */
.ch[data-axis="temp"] .ch-bar.ch-bar-neg { fill: #3d6a82; }
.ch-band {
  fill: var(--moss);
  opacity: 0.10;
}
.ch-zero {
  stroke: var(--ink-5); stroke-width: 0.5; stroke-dasharray: 2 2;
}

.insp-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 14px 8px;
  border-top: 1px solid var(--rule-2);
  font-size: 9.5px;
  color: var(--ink-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.insp-foot #inspWindow { text-align: right; }

/* CAMP BADGES ----------------------------------------------- */
.camp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px 1px 4px;
  background: rgba(243,239,230,0.95);
  border: 1px solid var(--ink-2);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(60,55,40,0.18);
  letter-spacing: -0.01em;
  transform: scale(var(--camp-scale, 1));
  transform-origin: 0 50%;
}
.camp-badge .cb-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
  background: var(--moss);
  color: var(--paper);
  border-radius: 50%;
  font-size: 9px;
}
.camp-label {
  background: transparent;
  padding: 0 2px;
  border: none;
  box-shadow: none;
  font-size: 10.5px;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--ink);
  /* Paper-colored halo so the label stays legible against the
     warm/cool heatmap behind it without a visible chip. */
  text-shadow:
    1px 0 0 var(--paper), -1px 0 0 var(--paper),
    0 1px 0 var(--paper), 0 -1px 0 var(--paper),
    1px 1px 0 var(--paper), -1px -1px 0 var(--paper),
    1px -1px 0 var(--paper), -1px 1px 0 var(--paper);
  transform: scale(var(--camp-scale, 1));
  transform-origin: 0 50%;
}
.tent-marker {
  color: var(--moss);
  font-size: 14px;
  text-align: center;
  text-shadow:
    1px 0 0 var(--paper), -1px 0 0 var(--paper),
    0 1px 0 var(--paper), 0 -1px 0 var(--paper);
  transform: scale(var(--camp-scale, 1));
  transform-origin: center;
}

/* STALE BANNER --------------------------------------------- */
.stale-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  max-width: 460px;
  background: #fff8e1;
  border: 1px solid var(--ochre);
  border-left: 3px solid var(--ochre);
  border-radius: 3px;
  padding: 7px 14px;
  font-size: 11.5px;
  color: var(--ink-2);
  box-shadow: var(--shadow-1);
  line-height: 1.45;
}
.stale-banner b { color: var(--rust); }
.stale-banner a { color: var(--moss); }

/* FOOTER COPYRIGHT ------------------------------------------ */
.footer-copy {
  position: fixed;
  bottom: 6px;
  right: 14px;
  z-index: 1100;
  background: transparent;
  border: 0;
  padding: 3px 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink-4);
  cursor: pointer;
  transition: color 0.15s ease;
}
.footer-copy:hover { color: var(--ink-2); text-decoration: underline; }
.footer-copy:focus-visible { outline: 1px solid var(--rule); outline-offset: 1px; }

/* VERSION-UPDATE BANNER ------------------------------------ */
.version-banner {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1500;
  max-width: 460px;
  background: #eef2e6;
  border: 1px solid var(--moss);
  border-left: 3px solid var(--moss);
  border-radius: 3px;
  padding: 7px 14px;
  font-size: 11.5px;
  color: var(--ink-2);
  box-shadow: var(--shadow-1);
  line-height: 1.45;
  align-items: center;
  gap: 12px;
}
.version-banner b { color: var(--moss); }
.version-banner button {
  background: var(--moss);
  color: #fff;
  border: 0;
  border-radius: 3px;
  padding: 4px 12px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.version-banner button:hover { background: var(--moss-2); }
/* Stack below the stale banner when both are visible. */
.stale-banner:not([style*="display:none"]) ~ .version-banner { top: 60px; }

/* MODALS ---------------------------------------------------- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(31, 36, 25, 0.45);
  z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  max-width: 520px;
  width: 100%;
  padding: 28px 32px 24px;
  box-shadow: 0 30px 60px rgba(31,36,25,0.30);
  font-size: 13px;
  line-height: 1.6;
  max-height: 90vh;
  overflow-y: auto;
  color: var(--ink-2);
}
.modal-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--rust);
  margin-bottom: 6px;
}
.modal h2 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.15;
}
.modal h3 {
  font-size: 12px;
  font-weight: 600;
  margin: 16px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.modal p { margin: 8px 0; }
.modal ol, .modal ul { padding-left: 20px; margin: 6px 0; }
.modal li { margin: 4px 0; }
.modal a { color: var(--moss); text-decoration: underline; text-decoration-thickness: 1px; }
.modal-strong { color: var(--ink); font-weight: 500; }
.modal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--rule-2);
}
.modal-attr { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-4); letter-spacing: 0.04em; }

/* TWEAKS PANEL --------------------------------------------- */
.tweaks-panel {
  position: fixed;
  right: 14px;
  bottom: 110px;
  width: 232px;
  background: rgba(243,239,230,0.99);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: var(--shadow-2);
  z-index: 1100;
  font-size: 12px;
}
.tweaks-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 12px 7px;
  border-bottom: 1px solid var(--rule-2);
}
.tweaks-head h4 { margin: 0; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-3); }
.tweaks-close { background: transparent; border: none; width: 20px; height: 20px; cursor: pointer; color: var(--ink-4); }
.tweaks-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 12px; }
.tweak-group { display: flex; flex-direction: column; gap: 4px; }
.tweak-label { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4); }
.tweak-options { display: flex; gap: 4px; flex-wrap: wrap; }
.tweak-opt {
  padding: 4px 8px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  font-family: var(--font-sans); font-size: 11px;
  color: var(--ink-3);
  cursor: pointer;
}
.tweak-opt:hover { color: var(--ink); border-color: var(--ink-3); }
.tweak-opt.active { background: var(--ink-2); color: var(--paper); border-color: var(--ink-2); }

/* MOBILE-ONLY ELEMENTS — hidden on desktop ----------------- */
.hamburger,
.mobile-legend,
.mobile-quick { display: none; }

/* NARROW-VIEWPORT ADJUSTMENTS ------------------------------- */
/* On phones we collapse the preferences card behind a hamburger
   button and surface a compact legend + W/R/T mini sliders so
   the map gets the screen. */
@media (max-width: 600px) {
  body[data-layout="sidebar"] .rail-left { width: 100%; max-width: 100%; }
  body[data-layout="sidebar"] #map { left: 0; top: auto; }

  /* Preferences card: hidden by default; toggled via hamburger.
     When open, fills space between the top chrome and the
     mobile-quick bar so the user can scroll the long form. */
  .rail-left {
    top: 56px; left: 8px; right: 8px; width: auto;
    bottom: 178px;
    max-height: none;
    overflow-y: auto;
    display: none;
  }
  body.panel-open .rail-left { display: flex; flex-direction: column; }

  /* Right-rail: keep just the All sites/Top 15 segmented control;
     icon-only on phones to save space. The legend + links move
     into the compact mobile bits. (.links is relocated by JS.) */
  .rail-right {
    top: 12px; bottom: auto;
    left: auto; right: 12px;
    width: auto;
    flex-direction: row;
    gap: 6px;
    align-items: stretch;
  }
  .rail-right .legend { display: none !important; }
  .rail-right .seg { flex: 0 0 auto; height: 38px; }
  .rail-right .seg-btn {
    padding: 0 10px;
    font-size: 11px;
    gap: 0;
    min-width: 44px;
    justify-content: center;
  }
  /* Hide the long text label, keep the icon glyph only */
  .rail-right .seg-btn span:nth-child(2) { display: none; }
  .rail-right .seg-btn .seg-icon { font-size: 14px; }

  /* Links pulled out of the right rail and parked as small text
     buttons at the bottom-left of the map, near the leaflet
     attribution. Always visible, doesn't require opening the
     preferences panel. */
  .links.mobile-links-floating {
    position: absolute;
    left: 8px;
    bottom: 176px;     /* above the W/R/T bar (footer strip is 18px) */
    z-index: 1100;
    display: flex; flex-direction: row;
    background: rgba(243,239,230,0.92);
    border: 1px solid var(--rule);
    border-radius: 3px;
    box-shadow: var(--shadow-1);
    overflow: hidden;
    height: 22px;
  }
  .links.mobile-links-floating .link {
    border-bottom: none;
    border-right: 1px solid var(--rule-2);
    padding: 3px 8px;
    font-size: 10px;
    color: var(--ink-3);
    line-height: 1;
    display: inline-flex;
    align-items: center;
  }
  .links.mobile-links-floating .link:last-child { border-right: none; }
  .links.mobile-links-floating .link:hover { color: var(--ink); }

  /* Hide legend when preferences panel is open */
  body.panel-open .mobile-legend { display: none; }

  /* Hide the in-panel wordmark and the "less/more is better"
     subtitle inside the panel — the floating wordmark speaks for
     the brand on phones, and the legend on the map carries the
     same message. */
  body.panel-open .wordmark { display: none; }
  .rail-left .card-sub { display: none; }

  /* Pin the wordmark next to the hamburger so the brand stays
     visible whether or not the preferences panel is open. JS
     DOM-moves the existing .wordmark element to body and toggles
     this class on viewport changes. */
  .wordmark.mobile-wordmark-floating {
    position: absolute;
    top: 10px;
    left: 56px;
    z-index: 1100;
    height: 38px;
    padding: 0 12px;
  }
  .wordmark.mobile-wordmark-floating .wm-meta { display: none; }
  body.panel-open .wordmark.mobile-wordmark-floating { display: flex; }

  /* Footer copyright sits in an 18px strip at the very bottom; the
     date bar / W-R-T sliders / how-disclaimer links all shift up by
     this amount (see #bottom-bar, .mobile-quick, .links.mobile-
     links-floating, #map, .inspector, .rail-left below). */
  .footer-copy {
    bottom: 2px;
    right: 12px;
    font-size: 9.5px;
    padding: 2px 6px;
  }
  .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    position: absolute;
    top: 10px; left: 10px;
    z-index: 1100;
    width: 38px; height: 38px;
    background: rgba(243,239,230,0.97);
    border: 1px solid var(--rule);
    border-radius: 4px;
    box-shadow: var(--shadow-1);
    cursor: pointer;
    padding: 0 9px;
  }
  .hamburger span {
    display: block;
    height: 2px;
    background: var(--ink-2);
    border-radius: 1px;
  }
  body.panel-open .hamburger { background: var(--moss); border-color: var(--moss); }
  body.panel-open .hamburger span { background: var(--paper); }

  /* Compact legend floating below the top chrome — clears the
     phone notch / hamburger row and includes the active hour
     window beneath the worse→better ramp. */
  .mobile-legend {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    position: absolute;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    z-index: 1050;
    background: rgba(243,239,230,0.92);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 5px 12px 6px;
    box-shadow: var(--shadow-1);
    pointer-events: none;
  }
  .mobile-legend .ml-row {
    display: flex; align-items: center; gap: 8px;
    font-size: 9.5px;
    color: var(--ink-3);
    line-height: 1;
  }
  .mobile-legend .ml-bar {
    width: 80px;
    height: 5px;
    border: 1px solid var(--rule);
    background: linear-gradient(to right, var(--bad), var(--mid), var(--good));
  }
  .mobile-legend .ml-hour {
    display: block;
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--ink-2);
    letter-spacing: 0.02em;
    line-height: 1;
  }

  /* Compact W/R/T mini sliders — sits directly above the date bar.
     Date bar is 110 tall at bottom: 18px (above the footer strip). */
  .mobile-quick {
    display: flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    left: 8px; right: 8px;
    bottom: 132px;
    z-index: 1050;
    background: rgba(243,239,230,0.97);
    border: 1px solid var(--rule);
    border-radius: 4px;
    padding: 8px 10px;
    box-shadow: var(--shadow-1);
  }
  .mobile-quick .mq-group {
    display: flex; align-items: center; gap: 6px;
    flex: 1 1 0;
    min-width: 0;
  }
  .mobile-quick .mq-key {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--ink-3);
    letter-spacing: 0.04em;
    width: 10px;
    flex: 0 0 auto;
  }
  .mobile-quick input[type="range"] {
    flex: 1 1 auto;
    min-width: 0;
    height: 18px;
    accent-color: var(--moss);
    margin: 0;
  }

  /* Shrink the All sites / Top 15 segmented buttons inside the
     preferences card (they're now mounted there only) */
  .rail-left .seg-btn { padding: 6px 8px; font-size: 11.5px; }

  /* Pack the preferences card tighter */
  .card { font-size: 12.5px; }
  .card-head { padding: 8px 12px 6px; }
  .weights { padding: 8px 12px 4px; }
  .hour-block, .advanced { padding: 6px 12px; }
  .weight-row { grid-template-columns: 70px 1fr 32px; gap: 8px; }
  .meta-line { padding: 0 4px; }

  /* Map fills under the floating top-row chrome; legend, hamburger
     and All-sites/Top-15 buttons sit on top of it. */
  #map { bottom: 178px; top: 56px; }

  /* Date bar: arrows on the right (thumb reach), vertical
     date tick labels so all days fit. Sans labels — feels less
     scientific than mono on a phone. */
  #bottom-bar { height: 110px; padding: 8px 14px 4px; bottom: 18px; }
  .hdr {
    flex-direction: row-reverse;   /* puts .title group on the right */
    align-items: center;
    gap: 8px;
  }
  /* keep prev|next order inside the title — don't reverse it */
  .hdr .title { gap: 6px; font-size: 12px; }
  .hdr .summary {
    font-size: 11px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .date-label { display: none; } /* save space — arrows speak for themselves */
  .day-nav { width: 32px; height: 32px; font-size: 13px; }

  /* Vertical date-tick labels, lifted off the line.
     Each label is anchored at the tick (left edge of the rotated
     text aligns to the tick mark) and rotated -90° so it reads
     bottom→top. Top offset gives clear space between the slider
     line and the start of the rotated text. */
  .dslider-ticks {
    height: 52px;
    font-family: var(--font-sans);
    font-weight: 500;
  }
  .dslider-ticks span:not(.tick-mark) {
    /* Clockwise rotation: text reads top→bottom from the tick.
       Pivot at left-top so the start of text sits AT the tick
       column, with breathing room between the slider line and
       the first character. */
    transform: rotate(90deg);
    transform-origin: left top;
    top: 14px;
    right: auto;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink-3);
    white-space: nowrap;
  }
  .dslider-ticks .tick-mark {
    transform: none;
    top: -7px;
  }

  /* Hour slider has only 5 labels — keep them horizontal but
     give them more breathing room from the line. */
  #hourSlider .dslider-ticks { height: 18px; }
  #hourSlider .dslider-ticks span:not(.tick-mark) {
    transform: translateX(-50%);
    transform-origin: center top;
    top: 6px;
    font-family: var(--font-sans);
    font-weight: 500;
    font-size: 10px;
    color: var(--ink-3);
    letter-spacing: 0;
  }
  .summary { font-size: 11px; }

  /* Inspector floats above the bottom bar, anchored at the bottom so
     it sizes to its content. The bottom value clears the mobile
     bottom bar AND the leaflet credits beneath it AND the floating
     "How it works / Disclaimer" links (which sit at bottom: 178px). */
  .inspector {
    left: 8px; right: 8px;
    bottom: 206px;
    top: auto;
    width: auto;
    max-height: calc(100dvh - 258px);
    overflow: auto;
  }
  .insp-charts { padding: 6px 12px 4px; }
  .ch-svg { height: 32px; }
}

/* MOBILE PREVIEW ------------------------------------------- */
.mobile-preview-overlay {
  position: fixed;
  inset: 0;
  background: rgba(31, 36, 25, 0.65);
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}
.mobile-preview-frame {
  position: relative;
  width: 390px;
  height: 844px;
  max-height: calc(100vh - 120px);
  background: #1f2419;
  border-radius: 44px;
  padding: 12px;
  box-shadow:
    0 0 0 2px #2a2f24,
    0 30px 80px rgba(0,0,0,0.45);
}
.mobile-preview-frame::before {
  content: "";
  position: absolute;
  top: 14px; left: 50%;
  transform: translateX(-50%);
  width: 110px; height: 28px;
  background: #1f2419;
  border-radius: 0 0 18px 18px;
  z-index: 2;
}
.mobile-preview-screen {
  width: 100%; height: 100%;
  background: var(--paper);
  border-radius: 32px;
  overflow: hidden;
  border: none;
  display: block;
}
.mobile-preview-meta {
  position: absolute;
  top: -28px; left: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(243,239,230,0.78);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-preview-close {
  position: absolute;
  top: -32px; right: 0;
  background: rgba(243,239,230,0.95);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 3px;
  cursor: pointer;
}
.mobile-preview-close:hover { background: var(--paper); }