/* Valea, Coasta și Muntele — toponimia de altitudine a bazinului Bârsei.
   Harta e întotdeauna închisă la culoare (relief); restul paginii urmează tema.
   Titlul h1 rămâne pe stiva de serif de sistem ("Iowan Old Style" etc.), NU pe
   un serif afișat de tip Fraunces/Literata: ambele au fost testate cu captură
   de ecran reală și rup virgula de sub ș/ț de literă la mărimi de afișaj mari.
   Inter e folosit doar pentru interfață (etichete, butoane, cifre), unde nu a
   arătat aceeași problemă la mărimile mici folosite aici. */

:root {
  color-scheme: light;
  --bg: #f4f1ea;
  --bg-raised: #fffdf9;
  --bg-sunken: #e9e3d6;
  --fg: #1c1913;
  --fg-soft: #58524a;
  --fg-faint: #8b8478;
  --line: rgba(28, 25, 19, 0.14);
  --line-strong: rgba(28, 25, 19, 0.32);
  --shadow: rgba(40, 28, 10, 0.16);
  --map-bg: #14100a;
  --map-ink: #efe7d8;
  --map-soft: #b9b0a2;

  --R: #7d5a35; --R-tint: #ece0cd;
  --G: #3f6fa8; --G-tint: #dbe6f3;
  --H: #7a4fb8; --H-tint: #e6dcf3;
  --U: #8a847d; --U-tint: #e6e2dc;

  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --container: 780px;
  --radius: 12px;
  --radius-lg: 16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #14120c;
    --bg-raised: #1d1a13;
    --bg-sunken: #0e0c08;
    --fg: #f0ead9;
    --fg-soft: #bfb6a4;
    --fg-faint: #8b8477;
    --line: rgba(240, 234, 217, 0.14);
    --line-strong: rgba(240, 234, 217, 0.3);
    --shadow: rgba(0, 0, 0, 0.5);
    --R: #cf9f66; --R-tint: #2b2114;
    --G: #7fadea; --G-tint: #101f30;
    --H: #b599e6; --H-tint: #1e1730;
    --U: #a19a92; --U-tint: #211e1a;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14120c;
  --bg-raised: #1d1a13;
  --bg-sunken: #0e0c08;
  --fg: #f0ead9;
  --fg-soft: #bfb6a4;
  --fg-faint: #8b8477;
  --line: rgba(240, 234, 217, 0.14);
  --line-strong: rgba(240, 234, 217, 0.3);
  --shadow: rgba(0, 0, 0, 0.5);
  --R: #cf9f66; --R-tint: #2b2114;
  --G: #7fadea; --G-tint: #101f30;
  --H: #b599e6; --H-tint: #1e1730;
  --U: #a19a92; --U-tint: #211e1a;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); }
body { font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; }
main { max-width: var(--container); margin: 0 auto; padding: 0 20px 80px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; }
h2 { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem); margin: 1.9em 0 0.55em; }
p { margin: 0 0 1em; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--R); outline-offset: 3px; border-radius: 4px; }
.num, .tabular { font-variant-numeric: tabular-nums; }
.deck { font-size: 1.2rem; line-height: 1.5; color: var(--fg-soft); max-width: 60ch; }
.byline {
  font-family: var(--mono); font-size: 0.78rem; color: var(--fg-faint);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------ scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none; opacity: 1; transform: none; }
  * { animation: none !important; }
}

/* ---------------------------------------------------------------- top bar */
header.top {
  display: flex; justify-content: space-between; align-items: center;
  max-width: var(--container); margin: 0 auto; padding: 18px 20px 0;
  font-family: var(--mono); font-size: 0.8rem; color: var(--fg-faint);
}
header.top a { text-decoration: none; transition: color 0.15s ease; }
header.top a:hover { color: var(--fg); }
header.top .lang-switch a {
  border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px;
  transition: border-color 0.15s ease, background 0.15s ease;
}
header.top .lang-switch a:hover { border-color: var(--line-strong); background: var(--bg-sunken); }

/* -------------------------------------------------------- full-bleed hero */
.hero {
  position: relative;
  background: var(--map-bg);
  color: var(--map-ink);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hero .stage { position: absolute; inset: 0; }
.hero canvas#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; border-radius: 0; }
.hero .topbar {
  position: relative; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.4rem;
  font-family: var(--mono); font-size: 0.82rem;
}
.hero .topbar a { text-decoration: none; color: var(--map-ink); opacity: 0.85; }
.hero .topbar a:hover { opacity: 1; }
.hero .topbar .lang { display: flex; gap: 0.6rem; align-items: center; }
.hero .topbar .lang a[aria-current] { font-weight: 700; opacity: 1; border-bottom: 1px solid currentColor; }
.hero .fullscreen {
  position: absolute; right: 1.4rem; top: 3.6rem; z-index: 5;
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--map-soft); text-decoration: none;
  border: 1px solid rgba(239, 231, 216, 0.3); border-radius: 999px; padding: 0.35em 0.9em;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hero .fullscreen:hover { color: var(--map-ink); border-color: var(--map-ink); }
.hero .scroll-hint {
  position: absolute; right: 1.4rem; bottom: 1rem; z-index: 4;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--map-soft);
  display: none;
}
@media (min-width: 1100px) { .hero .scroll-hint { display: block; } }

.hero-content {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; gap: 1rem;
  padding: 1.2rem 1.4rem 1.4rem;
  margin-top: auto;
  background: linear-gradient(to top, rgba(15, 13, 11, 0.94), rgba(15, 13, 11, 0.55) 65%, rgba(15, 13, 11, 0));
}
.hero .title { max-width: 40rem; pointer-events: none; }
.hero .title > * { pointer-events: auto; }
.hero .kicker {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--map-soft); margin: 0 0 0.5em;
}
.hero h1 {
  font-size: clamp(2.2rem, 1.5rem + 3.6vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  margin: 0 0 0.32em;
  color: var(--map-ink);
  text-shadow: 0 2px 26px rgba(0, 0, 0, 0.65);
}
.hero .deck {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.18rem);
  line-height: 1.48;
  max-width: 40rem;
  color: var(--map-ink);
  text-shadow: 0 1px 18px rgba(0, 0, 0, 0.7);
}

/* search: bara de căutare din erou și din harta pe tot ecranul */
.vsm-search { position: relative; max-width: 26rem; }
.vsm-search form { display: flex; flex-direction: column; gap: 0.4rem; }
.vsm-search input[type="search"] {
  width: 100%; font: inherit; font-size: 1rem; padding: 0.65em 0.9em; border-radius: 999px;
  border: 1px solid rgba(239, 231, 216, 0.3); background: rgba(255, 255, 255, 0.08); color: var(--map-ink);
}
.vsm-search input[type="search"]::placeholder { color: var(--map-soft); }
.vsm-search input[type="search"]:focus { outline: 2px solid var(--R); outline-offset: 2px; background: rgba(255, 255, 255, 0.14); }
.vsm-suggest {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6;
  list-style: none; margin: 0; padding: 0; max-height: 17rem; overflow: auto;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.55);
}
.vsm-suggest:empty { display: none; border: 0; }
.vsm-suggest li button {
  appearance: none; width: 100%; text-align: left; font: inherit; background: none; border: 0;
  padding: 0.5em 0.8em; cursor: pointer; color: var(--fg); display: flex; align-items: center; gap: 0.55rem;
}
.vsm-suggest li button:hover, .vsm-suggest li button:focus { background: var(--bg-sunken); }
.vsm-suggest li button i { width: 9px; height: 9px; border-radius: 50%; background: var(--sw); flex: none; }
.vsm-suggest li button span { flex: 1; }
.vsm-suggest li button small { color: var(--fg-faint); font-size: 0.78rem; white-space: nowrap; }
.vsm-suggest-empty { padding: 0.6em 0.8em; color: var(--fg-faint); font-size: 0.88rem; }
.vsm-search-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.15rem; }
.vsm-search-chips button {
  appearance: none; font: inherit; font-size: 0.8rem; cursor: pointer;
  background: rgba(255, 255, 255, 0.08); color: var(--map-ink);
  border: 1px solid rgba(239, 231, 216, 0.24); border-radius: 999px; padding: 0.24em 0.75em;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.vsm-search-chips button:hover { border-color: var(--map-ink); background: rgba(255, 255, 255, 0.16); }

.controls { display: flex; flex-direction: column; gap: 0.85rem; }
.controls label { display: block; font-family: var(--mono); font-size: 0.8rem; color: var(--map-soft); margin-bottom: 4px; }
input[type="range"] { width: 100%; accent-color: var(--R); height: 22px; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: rgba(239, 231, 216, 0.22); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -7px;
  width: 16px; height: 16px; border-radius: 50%; background: var(--R);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4), 0 0 0 4px rgba(125, 90, 53, 0.3);
  transition: transform 0.12s ease;
}
input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.12); }
.ele-readout { font-family: var(--mono); font-size: 0.95rem; color: var(--map-ink); margin-top: 4px; }
.hero .ele-readout, .hero .year-note { color: var(--map-ink); }

.mode-toggle { display: flex; gap: 6px; }
.mode-toggle button {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(239, 231, 216, 0.3); border-radius: 999px;
  padding: 5px 14px; color: var(--map-ink); cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mode-toggle button:hover { border-color: var(--map-ink); }
.mode-toggle button[aria-selected="true"] {
  background: var(--R); color: var(--bg-raised); border-color: var(--R);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.5);
}
.year-note { font-size: 0.82rem; color: var(--fg-soft); margin: 8px 0 0; max-width: 42rem; }

.year-row { display: flex; align-items: center; gap: 10px; }
.year-row input[type="range"] { flex: 1; }
.play-btn {
  flex: none; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(239, 231, 216, 0.3); border-radius: 999px;
  padding: 6px 14px; color: var(--map-ink); cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.play-btn:hover { border-color: var(--map-ink); box-shadow: 0 2px 8px -3px rgba(0, 0, 0, 0.4); }
.play-btn[aria-pressed="true"] { background: var(--R); color: var(--bg-raised); border-color: var(--R); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--map-soft); margin-top: 2px; }
.legend .swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 6px; }

@media (min-width: 860px) {
  .hero-content { flex-direction: row; align-items: flex-end; gap: 2.4rem; padding-inline: 2rem; }
  .hero .title { flex: 1.15; }
  .vsm-search { max-width: 24rem; }
  .controls { flex: 1; max-width: 22rem; }
  .hero .topbar { padding-inline: 2rem; }
  .hero .fullscreen { right: 2rem; }
}

/* ---------------------------------------------------------------- article */
main { position: relative; }
.callout {
  background: var(--bg-sunken); border-left: 3px solid var(--U);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px; margin: 1.4em 0; font-size: 0.95rem; color: var(--fg-soft);
  box-shadow: 0 1px 0 var(--line);
}
.callout.honesty { border-left-color: var(--G); }

/* ---------------------------------------------------------- before/after */
.ba-compare { display: grid; gap: 1rem; margin: 1.6em 0 2em; }
@media (min-width: 620px) { .ba-compare { grid-template-columns: 1fr 1fr; } }
.ba-card {
  margin: 0; background: var(--map-bg); border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25), 0 14px 30px -16px rgba(0, 0, 0, 0.5);
}
.ba-card canvas { display: block; width: 100%; height: 190px; }
.ba-card figcaption {
  padding: 10px 14px; font-family: var(--mono); font-size: 0.78rem; color: var(--fg-soft);
  background: var(--bg-raised); border-top: 1px solid var(--line);
}
.ba-hint { font-size: 0.86rem; color: var(--fg-faint); margin-top: -0.6em; }

/* ------------------------------------------------------------- map figure */
figure { margin: 2em 0; }
figure.map-wrap {
  position: relative;
  background: var(--map-bg); border-radius: var(--radius);
  padding: 16px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 18px 40px -18px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.04);
}
canvas#map { width: 100%; height: auto; display: block; border-radius: 8px; touch-action: none; cursor: crosshair; }
figure.map-wrap figcaption {
  margin-top: 10px; font-size: 0.78rem; color: var(--fg-faint); font-family: var(--mono);
}

/* --------------------------------------------------------- hover tooltip */
.vsm-tooltip {
  position: absolute; z-index: 5; pointer-events: none; max-width: 240px;
  background: rgba(15, 13, 10, 0.94); color: var(--map-ink);
  border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
  padding: 8px 10px; font-size: 0.78rem; line-height: 1.4;
  box-shadow: 0 8px 24px -8px rgba(0,0,0,0.6);
  transform: translateY(-4px);
}
.vsm-tooltip b { font-family: var(--serif); font-size: 0.92rem; }
.vsm-tooltip .tt-alt { color: rgba(239,231,216,0.7); }
.vsm-tooltip .tt-meta { color: rgba(239,231,216,0.55); font-family: var(--mono); font-size: 0.72rem; }

/* --------------------------------------------------------- detail panel */
.vsm-detail {
  position: relative; margin-top: 14px; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: 0 10px 30px -18px rgba(0,0,0,0.4);
  animation: vsm-pop 0.22s ease both;
}
@keyframes vsm-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hero .vsm-detail { background: rgba(20, 16, 10, 0.94); border-color: rgba(239,231,216,0.18); color: var(--map-ink); }
.hero .vsm-detail .detail-meta, .hero .vsm-detail .dn-tag { color: var(--map-soft); }
.hero .vsm-detail .detail-pill { background: rgba(255,255,255,0.08); border-color: rgba(239,231,216,0.2); color: var(--map-ink); }
.vsm-detail-close {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--bg-sunken);
  color: var(--fg-soft); font-size: 1rem; line-height: 1; cursor: pointer;
}
.vsm-detail-close:hover { color: var(--fg); border-color: var(--line-strong); }
.detail-head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.detail-swatch { width: 12px; height: 12px; border-radius: 3px; background: var(--sw); flex: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw) 20%, transparent); }
.detail-head h3 { margin: 0; font-size: 1.15rem; }
.detail-names { font-size: 0.88rem; color: var(--fg-soft); margin-bottom: 6px; }
.dn-name { font-style: italic; }
.dn-tag { font-family: var(--mono); font-size: 0.7rem; color: var(--fg-faint); }
.detail-meta { font-family: var(--mono); font-size: 0.8rem; color: var(--fg-soft); margin-bottom: 8px; }
.detail-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.detail-pill {
  font-family: var(--mono); font-size: 0.72rem; padding: 3px 10px; border-radius: 999px;
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--fg);
}
.detail-pill.muted { color: var(--fg-faint); }

/* --------------------------------------------------------- elevation profile */
.profile { margin: 1.6em 0; }
.profile-wrap { position: relative; }
.profile-wrap h3 { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint); margin: 0 0 4px; }
.profile-hint { font-size: 0.82rem; color: var(--fg-soft); margin: 0 0 10px; }
.profile-svg { width: 100%; height: auto; display: block; overflow: visible; }
.profile-bar { cursor: pointer; opacity: 0.88; transition: opacity 0.15s ease, filter 0.15s ease; }
.profile-bar:hover, .profile-bar:focus { opacity: 1; outline: none; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25)); }
.profile-axis-line { stroke: var(--line); stroke-width: 1; }
.profile-axis-text { font-family: var(--mono); font-size: 9px; fill: var(--fg-faint); }
.profile-tip {
  position: absolute; transform: translate(-50%, -100%) translateY(-8px);
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 8px;
  padding: 6px 10px; font-size: 0.76rem; box-shadow: 0 8px 20px -10px rgba(0,0,0,0.4);
  pointer-events: none; white-space: nowrap; z-index: 3; font-variant-numeric: tabular-nums;
}
.profile-tip b { font-family: var(--serif); }
.profile-tip span { color: var(--fg-soft); }

.bars { display: flex; gap: 16px; margin: 1.2em 0; flex-wrap: wrap; }
.bar-col { flex: 1 1 220px; }
.bar-col h3 { font-family: var(--mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint); margin: 0 0 8px; }
.hero .bar-col h3 { color: var(--map-soft); }
.bar-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 0.85rem; }
.hero .bar-row { color: var(--map-ink); }
.bar-row .swatch { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.bar-row .track { flex: 1; height: 8px; background: rgba(239,231,216,0.14); border-radius: 4px; overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,0.25); }
.hero .bar-row .track { background: rgba(239,231,216,0.14); }
.bar-row .fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.bar-row .n { font-family: var(--mono); color: var(--fg-faint); width: 3em; text-align: right; font-variant-numeric: tabular-nums; }
.hero .bar-row .n { color: var(--map-soft); }

.map-link {
  display: inline-block; margin-top: 10px; font-family: var(--mono); font-size: 0.82rem;
  text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.map-link:hover { border-color: var(--line-strong); background: var(--bg-sunken); transform: translateX(2px); }

footer.related {
  max-width: var(--container); margin: 3em auto 0; padding: 20px; border-top: 1px solid var(--line);
  font-size: 0.88rem; color: var(--fg-soft);
}
footer.related h2 { font-size: 1rem; margin-top: 0; }
footer.related ul { list-style: none; padding: 0; margin: 0; }
footer.related li { margin: 6px 0; }
footer.related a { text-decoration: none; border-bottom: 1px solid var(--line-strong); transition: color 0.15s ease; }
footer.related a:hover { color: var(--R); }

.sources-list { font-size: 0.88rem; color: var(--fg-soft); }
.sources-list li { margin-bottom: 0.6em; }

/* --------------------------------------------------------- fullscreen map */
body.map-page { height: 100vh; overflow: hidden; }
body.map-page main.map-full { max-width: none; padding: 0; height: 100vh; display: flex; flex-direction: column; }
.map-full .map-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--bg-raised); border-bottom: 1px solid var(--line);
  font-family: var(--mono); font-size: 0.8rem;
}
.map-full .map-toolbar a { text-decoration: none; transition: color 0.15s ease; }
.map-full .map-toolbar a:hover { color: var(--R); }
.map-full .stage { flex: 1; position: relative; background: var(--map-bg); }
.map-full canvas#map { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.map-full .overlay-panel {
  position: absolute; left: 16px; bottom: 16px;
  width: min(420px, calc(100% - 32px));
  max-height: calc(100% - 32px); overflow-y: auto;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px 16px; font-size: 0.85rem;
  box-shadow: 0 12px 32px -14px rgba(0,0,0,0.5);
}
.map-full .overlay-panel .controls { gap: 0.7rem; }
.map-full .overlay-panel .ele-readout, .map-full .overlay-panel .year-note { color: var(--fg); }
.map-full .overlay-panel .mode-toggle button { color: var(--fg-soft); background: var(--bg-sunken); border-color: var(--line); }
.map-full .overlay-panel .mode-toggle button[aria-selected="true"] { color: var(--bg-raised); }
.map-full .overlay-panel .play-btn { color: var(--fg); background: var(--bg-sunken); border-color: var(--line); }
.map-full .overlay-panel .bar-col h3 { color: var(--fg-faint); }
.map-full .overlay-panel .bar-row { color: var(--fg); }
.map-full .overlay-panel .vsm-search input[type="search"] { color: var(--fg); background: var(--bg-sunken); border-color: var(--line-strong); }
.map-full .overlay-panel .vsm-search input[type="search"]::placeholder { color: var(--fg-faint); }
.map-full .overlay-panel .vsm-detail { margin-top: 10px; box-shadow: none; padding: 12px 14px; }
.map-full .map-note { font-size: 0.72rem; color: var(--fg-faint); font-family: var(--mono); margin: 8px 0 0; }

@media (max-width: 640px) {
  .bars { flex-direction: column; }
  .map-full .overlay-panel { width: calc(100% - 32px); }
}

/* -------------------------------------------------- hero on small screens */
@media (max-width: 859px) {
  .hero { min-height: 100svh; }
  .hero .fullscreen { position: static; display: inline-block; margin: 0.7rem 1.1rem 0; }
  .hero-content { padding: 1rem 1.1rem 1.2rem; gap: 0.85rem; }
  .hero h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
  .hero .deck { font-size: 0.98rem; }
  .vsm-search { max-width: none; }
}