/* ============================================================
   The Great Southern Road Trip — vintage atlas styling
   ============================================================ */

:root {
  --parchment: #f3ead7;
  --parchment-deep: #ead9bb;
  --ocean: #d3e2da;
  --land: #f1e7d0;
  --ink: #3c3225;
  --ink-soft: #6b5d48;
  --rule: #c9b896;
  --accent: #8c2f1b;          /* barn red */
  --river: #88aab6;
  --border-line: #a08e6f;

  --gulf: #1d7a74;
  --deep-south: #3b4a8f;
  --upper-south: #9c5708;
  --atlantic: #356e3c;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: "Gill Sans", "Trebuchet MS", Verdana, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--serif);
  color: var(--ink);
  background: var(--parchment);
}

#app { display: flex; height: 100vh; overflow: hidden; }

/* ---------------- Sidebar ---------------- */

#sidebar {
  width: 420px; min-width: 420px;
  display: flex; flex-direction: column;
  background: var(--parchment);
  border-right: 3px double var(--border-line);
  box-shadow: 2px 0 12px rgba(60,50,37,.18);
  z-index: 20;
}

#masthead {
  padding: 18px 20px 0;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse at top left, rgba(140,47,27,.06), transparent 60%),
    var(--parchment);
}
#masthead h1 {
  margin: 0 0 4px;
  font-size: 27px; line-height: 1.05;
  letter-spacing: .5px;
  font-variant: small-caps;
  color: var(--accent);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
.tagline { margin: 0 0 12px; font-style: italic; color: var(--ink-soft); font-size: 13.5px; }

#tabs { display: flex; gap: 2px; }
.tab {
  flex: 1; padding: 8px 2px 7px;
  font-family: var(--serif); font-variant: small-caps; font-size: 13.5px;
  background: transparent; color: var(--ink-soft);
  border: 1px solid var(--rule); border-bottom: none;
  border-radius: 6px 6px 0 0; cursor: pointer;
}
.tab:hover { color: var(--accent); }
.tab.active { background: #fffaf0; color: var(--accent); font-weight: 700; }

#panel { flex: 1; overflow-y: auto; padding: 16px 20px 40px; background: #fffaf0; }
#panel::-webkit-scrollbar { width: 10px; }
#panel::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 5px; }

/* panel typography & widgets */
#panel h2 { font-size: 20px; font-variant: small-caps; margin: 6px 0 8px; color: var(--ink); }
#panel h3 { font-size: 15px; margin: 18px 0 6px; color: var(--accent); font-variant: small-caps; letter-spacing: .4px; }
#panel p  { font-size: 13.5px; line-height: 1.55; margin: 6px 0; }
#panel .muted { color: var(--ink-soft); font-style: italic; }
.smallrule { border: none; border-top: 1px solid var(--rule); margin: 14px 0; }

.backlink {
  display: inline-block; margin-bottom: 8px; cursor: pointer;
  color: var(--accent); font-variant: small-caps; font-size: 14px;
  background: none; border: none; font-family: var(--serif); padding: 0;
}
.backlink:hover { text-decoration: underline; }

.search {
  width: 100%; padding: 8px 10px; margin: 4px 0 12px;
  font-family: var(--serif); font-size: 14px;
  border: 1px solid var(--rule); border-radius: 6px;
  background: #fffdf7; color: var(--ink);
}

.region-head {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 4px; font-variant: small-caps; font-size: 16px; font-weight: 700;
}
.region-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }

.card {
  border: 1px solid var(--rule); border-left-width: 5px; border-radius: 6px;
  background: #fffdf7; padding: 10px 12px; margin: 8px 0; cursor: pointer;
  transition: box-shadow .15s, transform .15s;
}
.card:hover { box-shadow: 0 2px 10px rgba(60,50,37,.18); transform: translateY(-1px); }
.card .c-name { font-weight: 700; font-size: 14.5px; }
.card .c-sub  { font-size: 12.5px; color: var(--ink-soft); font-style: italic; margin-top: 1px; }
.card .c-meta { font-size: 12px; color: var(--ink-soft); margin-top: 4px; font-family: var(--sans); }

.badges { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0; }
.badge-chip {
  font-family: var(--sans); font-size: 11px; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 10px;
  background: var(--parchment-deep); color: var(--ink); border: 1px solid var(--rule);
}
.badge-chip.hwy { background: #fff; border: 2px solid var(--ink); border-radius: 4px; font-weight: 700; }
.badge-chip.avoid { background: #8c2f1b; color: #fff; border-color: #8c2f1b; }

.seg {
  border: 1px solid var(--rule); border-radius: 6px; background: #fffdf7;
  margin: 8px 0; padding: 9px 12px; cursor: pointer;
}
.seg:hover { box-shadow: 0 2px 8px rgba(60,50,37,.15); }
.seg .s-name { font-weight: 700; font-size: 13.5px; }
.seg .s-meta { font-size: 11.5px; color: var(--ink-soft); font-family: var(--sans); margin: 2px 0 4px; }
.seg .s-desc { font-size: 12.5px; line-height: 1.5; }

.stop-row {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 6px; border-bottom: 1px dotted var(--rule); cursor: pointer;
}
.stop-row:hover { background: var(--parchment); }
.stop-row .ic { font-size: 15px; line-height: 1.2; width: 22px; text-align: center; flex: none; }
.stop-row .s-name { font-weight: 700; font-size: 13px; }
.stop-row .s-town { font-size: 11.5px; color: var(--ink-soft); font-family: var(--sans); }
.stop-row .s-blurb { font-size: 12.5px; line-height: 1.45; margin-top: 2px; }

.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.fchip {
  font-family: var(--sans); font-size: 12px; padding: 4px 10px;
  border-radius: 14px; border: 1px solid var(--rule);
  background: #fffdf7; color: var(--ink-soft); cursor: pointer;
}
.fchip.on { background: var(--ink); color: var(--parchment); border-color: var(--ink); }

.day-row { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px dotted var(--rule); }
.day-num {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 13px;
}
.day-body .d-title { font-weight: 700; font-size: 13.5px; }
.day-body .d-text  { font-size: 12.5px; line-height: 1.5; color: var(--ink); }

.linklike { color: var(--accent); cursor: pointer; text-decoration: underline dotted; }
a.ext { color: var(--accent); }

.stat-strip {
  display: flex; gap: 10px; margin: 10px 0;
  font-family: var(--sans); font-size: 12px; color: var(--ink-soft);
}
.stat-strip b { display: block; font-size: 17px; color: var(--ink); font-family: var(--serif); }
.stat-strip > div { flex: 1; border: 1px solid var(--rule); border-radius: 6px; padding: 7px 10px; background: #fffdf7; text-align: center; }

/* ---------------- Map ---------------- */

#mapwrap { position: relative; flex: 1; overflow: hidden; background: var(--ocean); }

/* ---- paper: grain, folds, aged vignette (screen-space, zero map cost) ---- */
#mapwrap::before {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 52%, rgba(74, 58, 34, 0.16) 100%),
    linear-gradient(90deg, transparent 0 33.1%, rgba(60,45,25,.07) 33.3%, rgba(255,252,240,.06) 33.5%, transparent 33.9%),
    linear-gradient(90deg, transparent 0 66.1%, rgba(60,45,25,.07) 66.3%, rgba(255,252,240,.06) 66.5%, transparent 66.9%),
    linear-gradient(0deg, transparent 0 49.6%, rgba(60,45,25,.06) 49.85%, rgba(255,252,240,.05) 50.05%, transparent 50.45%);
}
#mapwrap::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.45 0 0 0 0 0.38 0 0 0 0 0.27 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
}
#panel, #masthead {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.42 0 0 0 0 0.35 0 0 0 0 0.24 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* neatline & graticule — the surveyor's frame */
.graticule { fill: none; stroke: #8a7a5e; opacity: .14; stroke-width: calc(0.7px * var(--inv)); }
.neatline { fill: none; stroke: #54462f; stroke-width: calc(2px * var(--inv)); }
.neatline.inner { stroke-width: calc(0.8px * var(--inv)); }
.grat-label {
  position: absolute;
  transform: translate(-50%,-50%) scale(var(--inv));
  font-family: var(--sans); font-size: 8.5px; letter-spacing: .5px;
  color: #6b5d48; opacity: .6; white-space: nowrap;
  pointer-events: none !important;
}

#map { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
#map.dragging { cursor: grabbing; }

#map .world {
  position: absolute; top: 0; left: 0;
  transform-origin: 0 0;
  --inv: 1;
}
#map svg { display: block; overflow: visible; }

/* basemap — engraved-atlas water */
.land { fill: var(--land); stroke: #a8957288; stroke-width: 1; }
.coast-lining {
  fill: none; stroke: #8fb3bd;
  stroke-linejoin: round; stroke-linecap: round;
}
.waterpoly { fill: #cde0dc; stroke: #9dbfc2; stroke-width: .7; }
.lake-lining { fill: none; stroke: #87aab4; stroke-linejoin: round; }
.stateline { fill: none; stroke: var(--border-line); stroke-width: calc(1.1px * var(--inv)); stroke-dasharray: 7 4 2 4; opacity: .8; }
.riverline {
  fill: none; stroke: #7fa3b4; opacity: .95;
  stroke-linejoin: round; stroke-linecap: round;
}
.riverline.major { stroke: #6f96a9; }
.riverline.bayou { stroke: #79a08f; }
.ridge { fill: none; stroke: #8d7b58; stroke-width: 26; opacity: .10; stroke-linecap: round; }

.water-label {
  position: absolute;
  transform: translate(-50%,-50%) rotate(var(--rot, 0deg)) scale(var(--inv));
  font-family: var(--serif); font-style: italic;
  font-size: 12px; letter-spacing: 2.5px;
  color: #5b8799; opacity: .85; white-space: nowrap;
  text-shadow: 0 0 3px var(--land), 0 0 3px var(--land);
  pointer-events: none !important;
}
.swamp-label {
  position: absolute;
  transform: translate(-50%,-50%) scale(var(--inv));
  font-family: var(--serif); font-style: italic; font-variant: small-caps;
  font-size: 10.5px; letter-spacing: 3px; text-align: center;
  color: #6f937f; opacity: .85; white-space: nowrap;
  pointer-events: none !important;
}
.swamp-tufts { font-size: 8px; letter-spacing: 3px; opacity: .75; line-height: 1.1; }

.region-poly { stroke-width: calc(1.5px * var(--inv)); stroke-dasharray: 10 6; fill-opacity: .10; opacity: 1; }

/* routes — the quiet hero of the opening: shown all at once, faded at rest */
.route-casing { fill: none; stroke: #fffaf0; stroke-width: calc(7px * var(--inv)); stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s ease; }
.route-line   { fill: none; stroke-width: calc(2.4px * var(--inv)); stroke-linecap: round; stroke-linejoin: round; opacity: .34; transition: opacity .25s ease, stroke-width .15s ease; }
.route-line.spur { stroke-width: calc(1.8px * var(--inv)); stroke-dasharray: calc(7px * var(--inv)) calc(5px * var(--inv)); }
.route-hit    { fill: none; stroke: rgba(0,0,0,0); stroke-width: calc(16px * var(--inv)); cursor: pointer; pointer-events: stroke; }

/* hovering a region label/wash gently lifts that region's whole web of routes */
.route-g.region-lit .route-line   { opacity: .68; stroke-width: calc(3px * var(--inv)); }
.route-g.region-lit .route-casing { opacity: .4; }

/* hover lifts a single resting route to full colour, thicker, with its halo */
.route-g.hovered .route-line   { opacity: 1; stroke-width: calc(5px * var(--inv)); }
.route-g.hovered .route-casing { opacity: 1; }

/* selection: chosen/lit routes stand out, the rest of the web recedes */
#map.sel .route-g:not(.selected):not(.lit) .route-line   { opacity: .07; }
#map.sel .route-g:not(.selected):not(.lit) .route-casing { opacity: 0; }
#map.sel .route-g.selected .route-line,
#map.sel .route-g.lit .route-line     { opacity: 1; stroke-width: calc(5px * var(--inv)); }
#map.sel .route-g.selected .route-casing,
#map.sel .route-g.lit .route-casing   { opacity: 1; }
/* hover still wins while a selection is active */
#map.sel .route-g.hovered .route-line   { opacity: 1; }
#map.sel .route-g.hovered .route-casing { opacity: 1; }

/* floating hover tag: route name + a one-line teaser */
.route-tag {
  transform: translate(-50%, calc(-100% - 12px)) scale(var(--inv));
  transform-origin: 50% 100%;
  background: rgba(255,250,240,.96);
  border: 1px solid var(--tag-color, #3c3225);
  border-left: 4px solid var(--tag-color, #3c3225);
  border-radius: 3px; padding: 4px 9px 5px;
  box-shadow: 0 3px 10px rgba(60,45,25,.22);
  white-space: nowrap; pointer-events: none !important;
  z-index: 7;
}
.route-tag .rt-name {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 12.5px; color: var(--tag-color, #3c3225); letter-spacing: .3px;
}
.route-tag .rt-teaser {
  display: block; font-family: var(--sans); font-size: 10px;
  letter-spacing: .4px; color: var(--ink-soft); margin-top: 1px;
}

/* overlay (HTML) */
#map .overlay { position: absolute; top: 0; left: 0; pointer-events: none; }
#map .overlay > * { position: absolute; pointer-events: auto; }

.region-label {
  transform: translate(-50%,-50%) scale(var(--inv));
  font-variant: small-caps; font-family: var(--serif);
  font-size: 14px; letter-spacing: 3px; font-weight: 600;
  opacity: .5; white-space: nowrap;
  text-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.region-label.clickable { cursor: pointer; }
.region-label.clickable:hover { opacity: .85; }
.region-poly.clickable { cursor: pointer; }
.geo-label {
  transform: translate(-50%,-50%) scale(var(--inv));
  font-family: var(--serif); font-style: italic;
  color: #7d8f87; letter-spacing: 4px; font-size: 15px;
  opacity: .8; white-space: nowrap; pointer-events: none !important;
}
.state-label {
  transform: translate(-50%,-50%) scale(var(--inv));
  font-family: var(--sans); font-size: 11px; letter-spacing: 3px;
  color: var(--ink-soft); opacity: .55; pointer-events: none !important;
}

.hub {
  transform: translate(-50%,-50%) scale(var(--inv));
  width: 16px; height: 16px; border-radius: 50%;
  background: #fffaf0; border: 3px double var(--ink);
  box-shadow: 0 0 0 2px rgba(255,250,240,.7);
  cursor: pointer;
}
.hub-label {
  transform: translate(-50%, 4px) scale(var(--inv));
  transform-origin: 50% 0;
  font-family: var(--serif); font-size: 12.5px; font-weight: 700;
  color: var(--ink); white-space: nowrap;
  text-shadow: 0 0 3px #fffaf0, 0 0 3px #fffaf0;
  cursor: pointer;
}
.hub-label:hover { color: var(--accent); }

/* gazetteer towns */
.town-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #7a6a50;
  transform: translate(-50%,-50%) scale(var(--inv));
  cursor: pointer;
}
.town-dot.t1 { width: 7px; height: 7px; background: #564a36; box-shadow: 0 0 0 1.5px #fffaf0; }
.town-dot.t3 { width: 4px; height: 4px; opacity: .85; }
.town-label {
  transform: translate(-50%, 3px) scale(var(--inv));
  transform-origin: 50% 0;
  font-family: var(--sans); font-size: 9.5px; letter-spacing: .4px;
  color: #6b5d48; white-space: nowrap; cursor: pointer;
  text-shadow: 0 0 3px var(--land), 0 0 3px var(--land), 0 0 3px var(--land);
}
.town-label:hover { color: var(--accent); }
.town-label.t1 {
  font-family: var(--serif); font-size: 12px; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase; color: #4a3e2d;
}
.town-label.t2 { font-size: 10.5px; }
#map[data-zoom="far"] .town-dot.t2, #map[data-zoom="far"] .town-label.t2,
#map[data-zoom="far"] .town-dot.t3, #map[data-zoom="far"] .town-label.t3 { display: none; }
#map[data-zoom="mid"] .town-dot.t3, #map[data-zoom="mid"] .town-label.t3 { display: none; }

.stopb {
  transform: translate(-50%,-50%) scale(var(--inv));
  width: 21px; height: 21px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; background: #fffdf7;
  border: 1.5px solid var(--ink-soft);
  box-shadow: 0 1px 3px rgba(60,50,37,.4);
  cursor: pointer;
}
.stopb:hover { border-color: var(--accent); z-index: 5; }
.stopb.floater { border-style: dashed; }
#map[data-zoom="far"] .stopb { display: none; }
#map[data-zoom="mid"] .stopb { width: 17px; height: 17px; font-size: 9px; }
#map .stopb.show { display: flex; }
#map.sel .stopb:not(.show) { display: none; }

/* famous journeys — dotted footstep lines */
.famous-casing {
  fill: none; stroke: #fffaf0; stroke-width: calc(5px * var(--inv));
  stroke-linecap: round; stroke-linejoin: round; opacity: .7;
}
.famous-line {
  fill: none; stroke-width: calc(2.4px * var(--inv));
  stroke-dasharray: calc(2px * var(--inv)) calc(8px * var(--inv));
  stroke-linecap: round; stroke-linejoin: round;
}
.famous-g:hover .famous-line { stroke-width: calc(3.6px * var(--inv)); }

/* live data */
.live-btn {
  margin-top: 5px; padding: 4px 10px; cursor: pointer;
  font-family: var(--sans); font-size: 11.5px;
  background: var(--parchment-deep); color: var(--ink);
  border: 1px solid var(--ink-soft); border-radius: 12px;
}
.live-btn:hover { border-color: var(--accent); color: var(--accent); }
.live-btn:disabled { opacity: .6; cursor: wait; }
.live-results { margin-top: 6px; font-size: 12px; line-height: 1.6; }

/* time ruler */
#map.measuring { cursor: crosshair; }
#map.measuring .overlay > * { pointer-events: none !important; }
#map.measuring svg path { pointer-events: none !important; }
.measure-dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent); border: 2px solid #fffaf0;
  transform: translate(-50%,-50%) scale(var(--inv));
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.measure-line {
  fill: none; stroke: #8c2f1b;
  stroke-width: calc(2.5px * var(--inv));
  stroke-dasharray: calc(9px * var(--inv)) calc(6px * var(--inv));
  stroke-linecap: round;
}
.measure-label {
  transform: translate(-50%,-130%) scale(var(--inv));
  transform-origin: 50% 130%;
  background: #fffdf7; border: 1.5px solid var(--accent); border-radius: 7px;
  padding: 6px 11px; font-size: 12.5px; text-align: center; white-space: nowrap;
  box-shadow: 0 2px 10px rgba(60,50,37,.35);
  pointer-events: none !important;
}
#mapcontrols button.on { background: var(--accent); color: #fff; border-color: var(--accent); }

.daypin {
  transform: translate(-50%,-50%) scale(var(--inv));
  min-width: 24px; height: 24px; padding: 0 4px; border-radius: 12px;
  background: var(--accent); color: #fff;
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fffaf0; box-shadow: 0 1px 4px rgba(0,0,0,.4);
}

.popup {
  transform: translate(-50%, calc(-100% - 14px)) scale(var(--inv));
  transform-origin: 50% calc(100% + 14px);
  width: 270px; background: #fffdf7;
  border: 1px solid var(--ink-soft); border-radius: 8px;
  box-shadow: 0 4px 18px rgba(60,50,37,.35);
  padding: 10px 12px; font-size: 12.5px; z-index: 30;
}
.popup:after {
  content: ""; position: absolute; left: 50%; bottom: -8px;
  transform: translateX(-50%);
  border: 8px solid transparent; border-bottom: none;
  border-top-color: #fffdf7;
}
.popup .p-name { font-weight: 700; font-size: 14px; }
.popup .p-town { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); margin-bottom: 4px; }
.popup .p-blurb { line-height: 1.5; }
.popup .tour-list { max-height: 190px; overflow-y: auto; margin-top: 5px; padding-right: 4px; }
.popup .tour-row { padding: 4px 0; border-top: 1px dotted var(--rule); font-size: 12px; }
.popup .tour-row:first-child { border-top: none; }
.popup .tour-links { font-family: var(--sans); font-size: 10.5px; white-space: nowrap; }
.popup .p-links { margin-top: 7px; font-family: var(--sans); font-size: 11.5px; }
.popup .p-close {
  position: absolute; top: 4px; right: 8px; cursor: pointer;
  border: none; background: none; font-size: 15px; color: var(--ink-soft);
}

/* map furniture */
#cartouche {
  position: absolute; top: 16px; left: 18px; z-index: 10;
  background: rgba(255,250,240,.92);
  border: 1px solid var(--ink-soft); outline: 3px double var(--ink-soft); outline-offset: 3px;
  padding: 9px 16px; pointer-events: none;
}
#cartouche .c-title { font-variant: small-caps; font-weight: 700; font-size: 16px; letter-spacing: 1px; }
#cartouche .c-sub { font-style: italic; font-size: 11px; color: var(--ink-soft); }

#mapcontrols { position: absolute; top: 16px; right: 16px; z-index: 10; display: flex; flex-direction: column; gap: 5px; }
#mapcontrols button {
  width: 34px; height: 34px; font-size: 17px; cursor: pointer;
  background: #fffaf0; color: var(--ink);
  border: 1px solid var(--ink-soft); border-radius: 6px;
  box-shadow: 0 1px 4px rgba(60,50,37,.3);
}
#mapcontrols button:hover { color: var(--accent); }
#layers-pop {
  position: absolute; right: 40px; top: 116px;
  background: #fffaf0; border: 1px solid var(--ink-soft); border-radius: 8px;
  padding: 10px 14px; width: 175px;
  box-shadow: 0 3px 12px rgba(60,50,37,.3);
}
#layers-pop label { display: block; font-size: 12.5px; font-family: var(--sans); padding: 3px 0; cursor: pointer; }
.hidden { display: none !important; }

#legend {
  position: absolute; right: 16px; bottom: 38px; z-index: 10;
  width: 230px; background: rgba(255,250,240,.95);
  border: 1px solid var(--ink-soft); border-radius: 8px;
  box-shadow: 0 2px 10px rgba(60,50,37,.3);
  overflow: hidden;
}
#legend-toggle {
  width: 100%; text-align: left; padding: 7px 12px;
  font-family: var(--serif); font-variant: small-caps; font-size: 14px; font-weight: 700;
  background: var(--parchment-deep); color: var(--ink);
  border: none; cursor: pointer;
}
#legend-body { padding: 8px 12px 10px; font-size: 12px; max-height: 300px; overflow-y: auto; }
#legend:not(.open) #legend-body { display: none; }
.lg-row { display: flex; align-items: center; gap: 8px; padding: 2.5px 0; }
.lg-row.act { cursor: pointer; border-radius: 4px; padding-left: 3px; margin-left: -3px; transition: background .15s ease; }
.lg-row.act:hover { background: var(--parchment-deep); }
/* mirrors the map's region-hover cue: hovering a region wash/label lights its legend row */
.lg-row.region-lit { background: var(--parchment-deep); }
.lg-row.region-lit .lg-swatch { border-top-width: 6px; }
.lg-row.act.on { color: var(--accent); font-weight: 700; }
.stat-strip > div.act { cursor: pointer; }
.stat-strip > div.act:hover { border-color: var(--accent); }
.region-head.act { cursor: pointer; }
.region-head.act:hover { color: var(--accent); }
.detour-row { cursor: pointer; }
.detour-row:hover { background: var(--parchment); }
.lg-swatch { width: 26px; height: 0; border-top: 4px solid; flex: none; border-radius: 2px; }
.lg-swatch.dash { border-top-style: dashed; border-top-width: 3px; }
.lg-ic { width: 26px; text-align: center; flex: none; }

#scalebar {
  position: absolute; left: 18px; bottom: 14px; z-index: 10;
  font-family: var(--sans); font-size: 11px; color: var(--ink);
  background: rgba(255,250,240,.85); padding: 4px 10px 6px; border-radius: 5px;
  border: 1px solid var(--rule);
}
#scalebar-line { height: 5px; border: 1.5px solid var(--ink); border-top: none; margin-bottom: 2px; }

#sidebar-toggle { display: none; }

/* ---------------- buttons & builder ---------------- */

.btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.btn {
  font-family: var(--serif); font-variant: small-caps; font-size: 13.5px;
  padding: 6px 12px; border: 1px solid var(--ink-soft); border-radius: 6px;
  background: #fffdf7; color: var(--ink); cursor: pointer;
}
.btn:hover { color: var(--accent); border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn.primary:hover { color: #fff; filter: brightness(1.1); }
.btn:disabled { opacity: .45; cursor: default; }

.build-item {
  display: flex; align-items: center; gap: 9px;
  border: 1px solid var(--rule); border-left: 5px solid var(--ink);
  border-radius: 6px; background: #fffdf7; padding: 8px 10px; margin: 7px 0;
}
.build-item .bi-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--ink); color: var(--parchment);
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.build-item .bi-body { flex: 1; min-width: 0; cursor: pointer; }
.build-item .bi-name { font-weight: 700; font-size: 13.5px; }
.build-item .bi-meta { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); }
.build-item .bi-ctrl { display: flex; gap: 3px; flex: none; }
.build-item .bi-ctrl button {
  width: 24px; height: 24px; border: 1px solid var(--rule); border-radius: 5px;
  background: var(--parchment); color: var(--ink-soft); cursor: pointer; font-size: 12px;
  line-height: 1;
}
.build-item .bi-ctrl button:hover { color: var(--accent); border-color: var(--accent); }

.connector {
  font-family: var(--sans); font-size: 11.5px; color: var(--ink-soft);
  margin: -2px 0 -2px 12px; padding: 1px 0 1px 22px;
  border-left: 2px dotted var(--ink-soft);
}

.suggest-chip { cursor: pointer; }
.suggest-chip:hover { border-color: var(--accent); color: var(--accent); }

/* ---------------- calendar ---------------- */

.cal-day {
  border: 1px solid var(--rule); border-radius: 6px; background: #fffdf7;
  padding: 8px 11px; margin: 7px 0;
}
.cal-day .cd-name { font-variant: small-caps; font-weight: 700; font-size: 14px; color: var(--accent); }
.cal-ev { padding: 5px 0 2px; border-top: 1px dotted var(--rule); margin-top: 5px; }
.cal-ev:first-of-type { border-top: none; margin-top: 2px; }
.cal-ev .ce-name { font-weight: 700; font-size: 13px; }
.cal-ev .ce-name .linklike { font-weight: 700; }
.cal-ev .ce-where { font-family: var(--sans); font-size: 11px; color: var(--ink-soft); }
.cal-ev .ce-note { font-size: 12.5px; line-height: 1.45; }

/* ---------------- print sheets ---------------- */

#printsheet { display: none; }

@media print {
  @page { margin: 14mm; }
  #app, .compass { display: none !important; }
  body { background: #fff; }
  #printsheet {
    display: block; font-family: var(--serif); color: #1d1812;
    font-size: 11.5pt; line-height: 1.45;
  }
  #printsheet .print-title {
    font-size: 21pt; font-variant: small-caps; color: #6e2415;
    border-bottom: 2.5px double #6e2415; padding-bottom: 4px;
  }
  #printsheet .print-sub { font-style: italic; font-size: 10pt; color: #5a4c3a; margin: 3px 0 10px; }
  #printsheet .print-meta { font-family: var(--sans); font-size: 9.5pt; margin: 6px 0 10px; }
  #printsheet h3 {
    font-variant: small-caps; font-size: 13pt; color: #6e2415;
    margin: 14px 0 4px; border-bottom: 1px solid #c9b896; page-break-after: avoid;
  }
  #printsheet .pr-leg { font-weight: 700; margin: 10px 0 2px; page-break-after: avoid; }
  #printsheet .pr-stop { margin: 3px 0 3px 14px; page-break-inside: avoid; }
  #printsheet .pr-stop b { font-size: 11pt; }
  #printsheet .pr-stop .town { font-family: var(--sans); font-size: 8.5pt; color: #5a4c3a; }
  #printsheet .pr-day { margin: 6px 0; page-break-inside: avoid; }
  #printsheet .pr-connector { font-family: var(--sans); font-size: 9pt; color: #5a4c3a; margin: 2px 0 2px 14px; }
  #printsheet .print-foot {
    margin-top: 16px; padding-top: 6px; border-top: 1px solid #c9b896;
    font-size: 8.5pt; font-style: italic; color: #5a4c3a;
  }
}

.compass {
  position: absolute;
  pointer-events: none; opacity: .75;
}

/* ---------------- responsive ---------------- */
@media (max-width: 860px) {
  #app { flex-direction: column; }
  #sidebar {
    position: absolute; z-index: 40; inset: 0 0 0 0;
    width: 100%; min-width: 0; max-height: 100%;
    transform: translateY(100%); transition: transform .25s;
  }
  #sidebar.open { transform: translateY(0); }
  #sidebar .close-sheet {
    display: block; position: absolute; top: 10px; right: 14px; z-index: 5;
    background: var(--accent); color: #fff; border: none; border-radius: 50%;
    width: 32px; height: 32px; font-size: 16px; cursor: pointer;
  }
  #sidebar-toggle {
    display: block; position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%);
    z-index: 30; padding: 9px 18px; border-radius: 20px;
    background: var(--ink); color: var(--parchment);
    font-family: var(--serif); font-variant: small-caps; font-size: 15px;
    border: 2px solid var(--parchment); cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
  }
  #cartouche { display: none; }
  #legend { display: none; }
}