/* unde-sa-va-mutati: two commutes as two coloured lights over Bucharest; where they overlap, the city turns gold */
:root {
  --bg: #f3eee4; --bg-2: #e9e2d4; --card: #fbf8f1; --ink: #161b26; --mut: #3d4452; --line: #d4cab7;
  --acc: #684300; --link: #1e4f8a;
  --map-bg: #ebe4d6; --map-water: #b3cbd8; --map-park: #d3dcc0; --map-road: #c4b8a3; --map-road2: #d6ccba; --map-rail: #a99d8a;
  --map-uat: #8d8270; --map-label: #232a36; --map-halo: #f3eee4;
  --p1: #0b7a70; --p2: #c4430f; --p3: #6a35c9; --zone: #f0a800; --zone-ink: #6b4300; --star: #161b26;
  --p1t: #06544e; --p2t: #8c2d08; --p3t: #5b2bb4; --on-zone: #1b1606;
  --field-blend: multiply;
  --topbar: 52px; --serif: 'Fraunces', Georgia, serif; --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --shadow: 0 1px 0 rgba(22, 27, 38, .05), 0 12px 32px -14px rgba(22, 27, 38, .28);
  color-scheme: light;
}
:root.dark {
  --bg: #0c111d; --bg-2: #121a2a; --card: #141c2c; --ink: #efe9dd; --mut: #c3bdb0; --line: #2a3448;
  --acc: #ffc64a; --link: #a9c8ff;
  --map-bg: #0a0f1a; --map-water: #16304a; --map-park: #112421; --map-road: #2c3548; --map-road2: #1d2536; --map-rail: #3a4357;
  --map-uat: #59647c; --map-label: #efe9dd; --map-halo: #0a0f1a;
  --p1: #36d3c3; --p2: #ff8a5e; --p3: #b79bff; --zone: #ffc94a; --zone-ink: #ffd877; --star: #ffffff;
  --p1t: #36d3c3; --p2t: #ff8a5e; --p3t: #b79bff; --on-zone: #1b1606;
  --field-blend: screen;
  --shadow: 0 1px 0 rgba(0, 0, 0, .35), 0 14px 36px -14px rgba(0, 0, 0, .7);
  color-scheme: dark;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
svg[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 12px); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17px/1.6 var(--sans); overflow-anchor: none; }
a { color: var(--link); text-underline-offset: 2px; }
.mut { color: var(--mut); }
.nw { white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--ink); color: var(--bg); padding: 8px 12px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; }

/* topbar: one line, scene-coloured */
.topbar { position: sticky; top: 0; z-index: 40; height: var(--topbar); display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: color-mix(in srgb, var(--bg) 94%, transparent); font: 500 14px/1 var(--sans); border-bottom: 1px solid var(--line); }
.progress { position: sticky; top: var(--topbar); z-index: 39; height: 2px; margin-top: -2px; pointer-events: none; }
.progress span { display: block; height: 2px; background: var(--zone); transform-origin: 0 50%; transform: scaleX(0); }
.home { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-weight: 600; white-space: nowrap; }
.motif { width: 22px; height: 22px; }
.topnav { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.topnav::-webkit-scrollbar { display: none; }
.topnav a { color: var(--mut); text-decoration: none; white-space: nowrap; padding: 6px 0; }
.topnav a:hover { color: var(--ink); }
.spacer { flex: 1; }
.lang { color: var(--mut); text-decoration: none; font: 600 13px/1 var(--sans); padding: 8px 6px; }
.icon-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; font: 600 18px/1 var(--sans); }
@media (pointer: coarse) { .icon-btn { width: 44px; height: 44px; } }
@media (max-width: 760px) { .topnav { display: none; } .home span { font-size: 13px; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1.5px solid var(--ink); background: var(--ink); color: var(--bg); border-radius: 8px; padding: 9px 14px; font: 600 15px/1.2 var(--sans); cursor: pointer; text-decoration: none; }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line); }
.btn.small { padding: 6px 10px; font-size: 13px; }
.btn:hover { border-color: var(--zone); }
@media (pointer: coarse) { .btn { min-height: 44px; } }

/* ---------- the tool: text column + pinned map ---------- */
.tool { display: grid; grid-template-columns: minmax(360px, 470px) 1fr; grid-template-areas: "intro map" "pins map" "ctl map" "res map"; grid-template-rows: auto auto auto 1fr; align-items: start; }
.tool > .intro { grid-area: intro; } .tool > .pins { grid-area: pins; } .tool > .ctl { grid-area: ctl; } .tool > .res { grid-area: res; }
.tool > .stage { grid-area: map; }
.tool > .intro, .tool > .pins, .tool > .ctl, .tool > .res { padding-left: clamp(16px, 3.5vw, 44px); padding-right: 28px; min-width: 0; }
.intro { padding-top: 30px; }
.kicker { font: 600 12.5px/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--acc); margin: 0 0 12px; }
h1 { font: 640 clamp(31px, 3.4vw, 44px)/1.06 var(--serif); letter-spacing: -.012em; margin: 0 0 16px; font-variation-settings: 'opsz' 96; }
h1 .gold { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--zone) 55%, transparent) 62%); padding: 0 .05em; }
.deck { font-size: 18px; line-height: 1.55; margin: 0 0 14px; }
.finding { margin: 0 0 18px; font-size: 16.5px; line-height: 1.55; color: var(--mut); }
.finding b { color: var(--ink); }

.pins { display: grid; gap: 10px; padding-bottom: 6px; }
.pin { position: relative; }
.pin label { display: flex; align-items: center; gap: 8px; font: 600 14px/1.2 var(--sans); margin: 0 0 5px; }
.dot { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font: 700 12px/1 var(--sans); flex: none; }
:root.dark .dot { color: #0c111d; }
.pin[data-i="0"] .dot, .dot.d1 { background: var(--p1t); } .pin[data-i="1"] .dot, .dot.d2 { background: var(--p2t); } .pin[data-i="2"] .dot, .dot.d3 { background: var(--p3t); }
.qwrap { display: flex; gap: 6px; }
.qwrap input { flex: 1; min-width: 0; font: 400 16px/1.3 var(--sans); padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink); }
.pin[data-i="0"] input:focus { border-color: var(--p1); outline: none; } .pin[data-i="1"] input:focus { border-color: var(--p2); outline: none; } .pin[data-i="2"] input:focus { border-color: var(--p3); outline: none; }
.qwrap .icon-btn { width: 42px; height: 42px; flex: none; font-size: 16px; }
.qwrap .icon-btn.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sugg { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; margin: 4px 0 0; padding: 4px; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); max-height: 320px; overflow: auto; }
.sugg li { padding: 8px 10px; border-radius: 6px; cursor: pointer; line-height: 1.3; }
.sugg li small { display: block; color: var(--mut); font-size: 13px; }
.sugg li[aria-selected="true"], .sugg li:hover { background: var(--bg-2); }
.pin .note { margin: 4px 0 0; font-size: 13.5px; color: var(--mut); line-height: 1.4; }
.presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; }
.presets button { border: 1px solid var(--line); background: transparent; color: var(--ink); border-radius: 99px; padding: 5px 10px; font: 500 13px/1.2 var(--sans); cursor: pointer; }
.presets button:hover { border-color: var(--zone); }
@media (pointer: coarse) { .presets button { min-height: 36px; } }
.presets-lab { font-size: 13px; color: var(--mut); margin: 6px 0 2px; }
.add3 { justify-self: start; }

.ctl { padding-top: 14px; padding-bottom: 6px; }
.ctl .row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ctl label.lim { font: 600 15px/1.3 var(--sans); display: block; margin-bottom: 6px; }
.ctl label.lim output { font: 700 22px/1 var(--serif); color: var(--zone-ink); }
input[type=range] { width: 100%; accent-color: var(--zone); height: 30px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 99px; padding: 3px; background: var(--card); margin-top: 6px; }
.seg button { border: 0; background: transparent; color: var(--mut); font: 600 13.5px/1.2 var(--sans); padding: 7px 12px; border-radius: 99px; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (pointer: coarse) { .seg button { min-height: 40px; } }
.seg-note { font-size: 13.5px; color: var(--mut); margin: 6px 0 0; }

.res { padding-top: 12px; padding-bottom: 44px; }
.sum { font-size: 17px; line-height: 1.5; margin: 0 0 10px; }
.sum .big { font: 650 30px/1.1 var(--serif); display: block; color: var(--zone-ink); margin-bottom: 4px; }
.sum.none .big { color: var(--p2); }
.best { font-size: 15.5px; margin: 0 0 14px; }
.best button { font: inherit; color: var(--link); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.res h3 { font: 600 15px/1.3 var(--sans); margin: 14px 0 6px; }
.places { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.places li { border-bottom: 1px solid var(--line); }
.places button { all: unset; box-sizing: border-box; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; width: 100%; padding: 9px 2px; cursor: pointer; }
.places button:focus-visible { outline: 3px solid var(--link); }
.places .nm { font-weight: 600; }
.places .pp { color: var(--mut); font-size: 13.5px; }
.places .tt { grid-row: span 2; align-self: center; font: 600 14px/1.25 var(--mono); text-align: right; white-space: nowrap; }
.places .tt span { display: block; }
.c1 { color: var(--p1t); } .c2 { color: var(--p2t); } .c3 { color: var(--p3t); }
.share-mine { margin: 16px 0 0; display: flex; gap: 8px; flex-wrap: wrap; }

.stage { position: sticky; top: var(--topbar); height: calc(100svh - var(--topbar)); margin: 0; background: var(--map-bg); border-left: 1px solid var(--line); overflow: hidden; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.stage canvas.drag { cursor: grabbing; } .stage canvas.placing { cursor: crosshair; }
.nomap { position: absolute; inset: auto 16px 70px 16px; background: var(--card); padding: 12px; border-radius: 8px; margin: 0; }
.map-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.stage .legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 10px 14px; flex-wrap: wrap; align-items: center; font: 500 12.5px/1.3 var(--sans); color: var(--mut);
  background: color-mix(in srgb, var(--card) 90%, transparent); padding: 6px 10px; border-radius: 8px; max-width: calc(100% - 24px); margin: 0; }
.k { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.k.z { background: var(--zone); } .k.a { background: color-mix(in srgb, var(--p1) 45%, transparent); } .k.b { background: color-mix(in srgb, var(--p2) 45%, transparent); } .k.c { background: color-mix(in srgb, var(--p3) 45%, transparent); }
.k.s { background: none; color: var(--star); width: auto; height: auto; font-size: 13px; line-height: 1; }
.placing-hint { position: absolute; top: 12px; left: 12px; right: 120px; margin: 0; background: var(--ink); color: var(--bg); padding: 8px 12px; border-radius: 8px; font: 600 14px/1.3 var(--sans); }
.busy { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); margin: 0; background: var(--card); padding: 6px 12px; border-radius: 99px; font-size: 13px; box-shadow: var(--shadow); }
.pop { position: absolute; z-index: 6; width: 270px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; box-shadow: var(--shadow); font-size: 14px; line-height: 1.4; }
.pop h4 { margin: 0 32px 6px 0; font: 600 17px/1.2 var(--serif); }
.pop .rows { display: grid; gap: 6px; margin: 0 0 6px; }
.pop .rows div { display: grid; grid-template-columns: 22px 1fr; gap: 6px; align-items: start; }
.pop .rows .dot { width: 18px; height: 18px; font-size: 11px; margin-top: 1px; }
.pop .rows b { font: 650 16px/1.2 var(--mono); }
.pop .rows small { display: block; color: var(--mut); font-size: 12.5px; }
.pop .pp { color: var(--mut); font-size: 13px; margin: 6px 0 0; }
.pop .x { position: absolute; top: 4px; right: 6px; border: 0; background: none; font-size: 22px; color: var(--mut); cursor: pointer; width: 36px; height: 36px; }

@media (max-width: 900px) {
  .tool { grid-template-columns: 1fr; grid-template-areas: "intro" "pins" "map" "ctl" "res"; grid-template-rows: none; }
  .tool > .intro, .tool > .pins, .tool > .ctl, .tool > .res { padding-left: 16px; padding-right: 16px; }
  .intro { padding-top: 22px; }
  .stage { position: relative; top: auto; height: min(68svh, 560px); border-left: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 12px; }
  .pop { width: min(270px, calc(100% - 24px)); }
}

/* ---------- reading sections ---------- */
.block { padding: 44px 0 10px; border-top: 1px solid var(--line); }
.wrap { max-width: 700px; margin: 0 auto; padding: 0 16px; }
.wide { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
h2 { font: 620 clamp(26px, 2.8vw, 33px)/1.15 var(--serif); margin: 0 0 16px; letter-spacing: -.01em; position: relative; }
h2 .anchor { position: absolute; left: -1.1em; color: var(--mut); text-decoration: none; opacity: 0; font-weight: 400; }
h2:hover .anchor, h2 .anchor:focus { opacity: 1; }
h3 { font: 600 19px/1.3 var(--sans); margin: 26px 0 8px; }
.block p { margin: 0 0 16px; }
.note { font-size: 15px; color: var(--mut); }
.fig { margin: 8px 0 26px; }
.fig figcaption { font-size: 14.5px; color: var(--mut); margin: 0 0 10px; line-height: 1.45; }
.matrix { width: 100%; height: auto; display: block; font-family: var(--sans); }
.matrix .lab { font-size: 12.5px; fill: var(--ink); }
.matrix .v { font: 600 12px var(--mono); }
.matrix a:focus-visible rect { stroke: var(--link); stroke-width: 3; }
.matrix a:hover rect { stroke: var(--ink); stroke-width: 1.5; }
.matrix .diag { stroke: var(--ink); stroke-width: 1.2; }
.scrollx { overflow-x: auto; }
.plain { padding-left: 1.1em; } .plain li { margin: 0 0 8px; }
.sources li { font-size: 15px; }
.page-share { padding: 26px 16px 8px; }
.share-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.share-row .lbl { font: 600 14px/1 var(--sans); margin-right: 4px; }
.share-row a, .share-row button { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 99px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.share-row svg { width: 18px; height: 18px; }
.status { min-height: 1.2em; font-size: 14px; color: var(--mut); margin: 6px 0 0; }
footer { display: flex; gap: 18px; flex-wrap: wrap; padding: 28px 16px 40px; justify-content: center; border-top: 1px solid var(--line); margin-top: 40px; font-size: 14.5px; color: var(--mut); }
footer a { color: var(--mut); }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }