/* Offline map: colours (light / dark), labels and the layer switcher */
:root {
  --map-sea: #cfe0ea; --map-land: #f4f1ea; --map-land-other: #e6e2da; --map-border: #9c8f80;
  --map-water: #a9cbe0; --map-water-line: #5f9cc4; --map-motorway: #d9822b; --map-road-major: #e0a85c;
  --map-road: #c9b79b; --map-road-minor: #bba57f; --map-historic-county: #8a3b8f; --map-rail: #6f665c; --map-park: #9cc79a; --map-park-line: #4f8a4c;
  --map-trail: #a0522d;
  --map-label: #2a2622; --map-label-soft: #6f665c; --map-halo: #fbfaf7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --map-sea: #17232c; --map-land: #2a2724; --map-land-other: #221f1c; --map-border: #6d6358;
    --map-water: #23415a; --map-water-line: #4a86b0; --map-motorway: #c27426; --map-road-major: #a9804a;
    --map-road: #6e6250; --map-road-minor: #574d40; --map-historic-county: #c58bd0; --map-rail: #a79d91; --map-park: #2f5a33; --map-park-line: #5e9a5b;
    --map-trail: #d9895b;
    --map-label: #ece6de; --map-label-soft: #a79d91; --map-halo: #1c1a18;
  }
}
:root[data-theme="dark"] {
  --map-sea: #17232c; --map-land: #2a2724; --map-land-other: #221f1c; --map-border: #6d6358;
  --map-water: #23415a; --map-water-line: #4a86b0; --map-motorway: #c27426; --map-road-major: #a9804a;
  --map-road: #6e6250; --map-road-minor: #574d40; --map-historic-county: #c58bd0; --map-rail: #a79d91; --map-park: #2f5a33; --map-park-line: #5e9a5b;
  --map-trail: #d9895b;
  --map-label: #ece6de; --map-label-soft: #a79d91; --map-halo: #1c1a18;
}
.outline-map { background: var(--map-sea) !important; }
.map-label { white-space: nowrap; color: var(--map-label); font: 12px/1.1 system-ui, sans-serif; pointer-events: none;
  text-shadow: 0 0 2px var(--map-halo), 0 0 2px var(--map-halo), 0 0 3px var(--map-halo);
  transform: translate(-4px, -50%); }
.map-label i { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--map-label);
  margin-right: 4px; vertical-align: middle; }
.map-label.city { font-weight: 700; font-size: 14px; }
.map-label.town { font-weight: 600; font-size: 12.5px; }
.map-label.village { font-size: 11px; color: var(--map-label-soft); }
.map-label.village i { width: 3px; height: 3px; background: var(--map-label-soft); }
.map-label.county { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--map-border);
  transform: translate(-50%, -50%); }
.map-label.land { font-style: italic; font-size: 11px; color: var(--map-label-soft); }
.map-label.land.region, .map-label.land.range { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.map-label.land.lake, .map-label.land.bay { color: var(--map-water-line); }
.map-label.land.forest { color: var(--map-park-line); }
.map-label.airport { font-size: 11px; color: var(--map-label-soft); }
.map-label.station { font-size: 11px; color: var(--map-label); font-weight: 600; }
.map-label.defence { font-size: 10px; color: var(--map-label); white-space: nowrap; }
.defence-dot { display: inline-block; width: 7px; height: 7px; margin-right: 3px; background: #556b2f; border: 1px solid #fff;
  vertical-align: middle; }
.map-layers { background: var(--panel); color: var(--ink); font-size: 13px; }
.map-layers .ml-toggle { border: 0; background: var(--panel); color: var(--ink); padding: 6px 10px; cursor: pointer; font: inherit; }
.map-layers .ml-panel { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 3px; max-width: 240px; }
.map-layers .ml-panel label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.map-layers .ml-overlays { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.map-layers .ml-overlays.online .ml-off-only { opacity: .45; }
.map-layers small { color: var(--muted); margin-top: 6px; }
/* Map page */
.explore { display: grid; grid-template-columns: 270px 1fr; height: calc(100vh - var(--explore-top, 58px)); }   /* top set by map_page.js: the nav wraps */
.explore-panel { overflow-y: auto; padding: 14px 16px; background: var(--panel); border-right: 1px solid var(--line); }
.explore-panel h3 { font-size: 14px; margin: 16px 0 6px; }
.explore-panel .check { display: flex; align-items: center; gap: 4px; font-size: 13.5px; margin: 3px 0; }
.explore-panel .check em { margin-left: auto; color: var(--muted); font-style: normal; font-size: 12px; }
.ex-find { display: flex; gap: 6px; }
.ex-find input { flex: 1; min-width: 0; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--bg); color: var(--ink); }
.explore-map { position: relative; }
#ex_map { position: absolute; inset: 0; }
.ex-toggle { display: none; position: absolute; left: 10px; bottom: 26px; z-index: 500; }
.explore + .foot { display: none; }
@media (max-width: 760px) {
  .explore { grid-template-columns: 1fr; height: calc(100vh - var(--explore-top, 100px)); }
  .explore-panel { display: none; position: absolute; z-index: 600; left: 0; right: 0; max-height: 60vh;
    box-shadow: var(--shadow); }
  .explore-panel.open { display: block; }
  .ex-toggle { display: inline-block; }
}
.map-layers .ml-historic { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.map-layers .ml-historic select { max-width: 220px; padding: 3px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); }
.map-layers .ml-op { display: flex; align-items: center; gap: 6px; }
.map-layers .ml-op input { flex: 1; }
.map-layers .ml-panel { max-height: 70vh; overflow-y: auto; }

.map-label.county.historic { color: var(--map-historic-county); font-style: italic; }
/* "Show on the map" target (map_page.js markFromUrl) */
.map-mark { animation: map-mark-pulse 1.6s ease-out 3; }
@keyframes map-mark-pulse { 0% { stroke-opacity: 1; } 100% { stroke-opacity: .35; } }
.map-mark-label { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .map-mark { animation: none; } }

/* "Through time" year slider (time_slider.js) */
.time-slider { position: absolute; z-index: 500; left: 50%; transform: translateX(-50%); bottom: 22px;
  width: min(520px, calc(100% - 120px)); padding: 8px 12px; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; }
.time-slider .ts-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.time-slider .ts-head .check { display: flex; align-items: center; gap: 4px; margin: 0; }
.time-slider .ts-year { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 5.5em; color: var(--accent); }
.time-slider .ts-maps { margin-left: auto !important; font-size: 12.5px; }
.time-slider .ts-body, .time-slider .ts-note { display: none; }
.time-slider.on .ts-body, .time-slider.on .ts-note { display: block; }
.time-slider .ts-hist { display: block; width: 100%; height: 34px; margin-top: 6px; }
.time-slider .ts-hist rect { fill: var(--accent); opacity: .55; }
.time-slider .ts-range { width: 100%; margin: 2px 0 0; accent-color: var(--accent); }
.time-slider .ts-note { margin-top: 4px; line-height: 1.3; font-size: 11.5px; }
.time-slider[hidden], .ts-show[hidden] { display: none; }
.time-slider .ts-close:hover { color: var(--ink); }
.ts-show { position: absolute; z-index: 500; left: 50%; transform: translateX(-50%); bottom: 22px; box-shadow: var(--shadow); }
@media (max-width: 760px) {
  .time-slider { width: calc(100% - 32px); bottom: 64px; padding: 6px 10px; }
  .time-slider .ts-note { display: none !important; }
  .ts-show { bottom: 64px; }
}

/* "Change over time" graphs (change_panel.js, change_charts.js) */
.ex-graphs { position: absolute; z-index: 500; right: 10px; top: 54px; box-shadow: var(--shadow); }
.ex-graphs[hidden], .change-panel[hidden] { display: none; }
.change-panel { position: absolute; z-index: 600; right: 10px; top: 54px; width: 340px; max-height: calc(100% - 250px);
  overflow-y: auto; padding: 8px 12px; background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: var(--shadow); font-size: 13px; }
.change-panel .cp-head { display: flex; align-items: center; gap: 8px; }
.change-panel .cp-range { margin-left: auto; font-size: 12px; }
.change-panel .cp-close, .time-slider .ts-close { padding: 0 4px; border: 0; background: none; color: var(--muted);
  font-size: 18px; line-height: 1; cursor: pointer; }
.change-panel .cp-close:hover { color: var(--ink); }
.change-panel .cp-pick { margin: 6px 0; }
.change-panel .cp-pick summary { cursor: pointer; color: var(--accent); }
.change-panel .cp-theme { margin: 6px 0; }
.change-panel .cp-theme .check { display: flex; gap: 6px; margin: 2px 0; font-size: 12.5px; }
.change-panel .cp-foot { margin: 6px 0 0; font-size: 11.5px; }
.change-panel .cp-notes { margin: 4px 0; font-size: 12px; line-height: 1.4; }
.change-panel .cp-notes:empty { display: none; }
.cc-item { padding: 6px 0; border-top: 1px solid var(--line); }
.cc-title { font-weight: 600; font-size: 12.5px; display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; }
.cc-region { font-weight: 400; color: var(--muted); }
.cc-now { margin-left: auto; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; }
.cc-svg { display: block; width: 100%; height: 74px; overflow: visible; }
.cc-axis { stroke: var(--line); stroke-width: 1; }
.cc-tick { fill: var(--muted); font-size: 9px; }
.cc-empty { fill: var(--muted); font-size: 11px; }
.cc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cc-line.cc-modelled { stroke-dasharray: 5 3; }
.cc-band { fill: var(--accent); opacity: .16; }
.cc-dot { fill: var(--accent); stroke: var(--panel); stroke-width: 1.5; }
.cc-gap { fill: none; stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 1 3; stroke-linecap: round; opacity: .7; }
.cc-err { stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; }
/* comparison lines: the reference palette's first three categorical slots (validated all-pairs) */
.cc-svg { --m0: #2a78d6; --m1: #eb6834; --m2: #1baf7a; }
:root[data-theme="dark"] .cc-svg, :root[data-theme="dark"] .cc-legend { --m0: #3987e5; --m1: #d95926; --m2: #199e70; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cc-svg, :root:not([data-theme="light"]) .cc-legend { --m0: #3987e5; --m1: #d95926; --m2: #199e70; } }
.cc-legend { --m0: #2a78d6; --m1: #eb6834; --m2: #1baf7a; display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 11px; color: var(--muted); }
.cc-key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.cc-key.cc-key-dot { width: 7px; height: 7px; border-radius: 50%; }
.cc-key.cc-m0 { background: var(--m0); } .cc-key.cc-m1 { background: var(--m1); } .cc-key.cc-m2 { background: var(--m2); }
.cc-line.cc-m0, .cc-gap.cc-m0, .cc-err.cc-m0 { stroke: var(--m0); } .cc-band.cc-m0, .cc-dot.cc-m0 { fill: var(--m0); }
.cc-line.cc-m1, .cc-gap.cc-m1, .cc-err.cc-m1 { stroke: var(--m1); } .cc-band.cc-m1, .cc-dot.cc-m1 { fill: var(--m1); }
.cc-line.cc-m2, .cc-gap.cc-m2, .cc-err.cc-m2 { stroke: var(--m2); } .cc-band.cc-m2, .cc-dot.cc-m2 { fill: var(--m2); }
.cc-band.cc-m1, .cc-band.cc-m2 { opacity: .12; }
.cc-year-dot.cc-m0 { stroke: var(--m0); } .cc-year-dot.cc-m1 { stroke: var(--m1); } .cc-year-dot.cc-m2 { stroke: var(--m2); }
.cc-year { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 2 2; opacity: .7; }
.cc-year-dot { fill: var(--panel); stroke: var(--ink); stroke-width: 2; }
.cc-cross { stroke: var(--muted); stroke-width: 1; }
.cc-break { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 1 2; opacity: .8; }
.cc-src { font-size: 11px; color: var(--muted); }
.cc-lic { white-space: nowrap; }
.cc-more { border: 0; background: none; padding: 0 2px; color: var(--accent); cursor: pointer; font-size: 11px; text-decoration: underline; }
.cc-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
@media (max-width: 760px) {
  .change-panel { left: 16px; right: 16px; width: auto; top: 54px; max-height: calc(100% - 200px); }
}
.change-panel .cp-layers { margin: 6px 0; padding: 6px 0; border-top: 1px solid var(--line); }
.cl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12.5px; }
.cl-head select { font-size: 12px; max-width: 200px; }
.cl-when { color: var(--accent); font-weight: 600; font-size: 12px; }
.cl-legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.cl-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cl-legend i { width: 12px; height: 10px; border-radius: 2px; display: inline-block; border: 1px solid var(--line); }
.cl-grid { image-rendering: pixelated; }
.gm-readout { font: 12px/1.3 var(--mono, ui-monospace, monospace); background: var(--panel); color: var(--ink); border: 1px solid var(--line);
  border-radius: 4px; padding: 2px 6px; cursor: copy; opacity: .9; }
.gm-popup .gm-row { display: flex; align-items: center; gap: 6px; font-size: 12.5px; margin: 2px 0; }
.gm-popup .gm-row span { color: var(--muted); min-width: 64px; }
@media (hover: none) { .gm-readout { display: none; } }