/* ============================================================
   3D district map — immersive stage with glass overlays.
   Overlays use logical properties (they follow the page direction);
   the map canvas itself is always LTR.
   ============================================================ */

.map-stage {
  --glass-bg: rgba(255, 255, 255, 0.78);
  --glass-line: rgba(26, 36, 64, 0.1);
  --glass-ink: #1a2440;
  --glass-dim: #5f6a8c;
  --glass-hot: rgba(53, 82, 196, 0.09);
  --stage-bg: #e9edf6;
  position: relative;
  height: clamp(600px, calc(100vh - 120px), 940px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, #f6f8fe 0%, #dde4f4 75%);
  box-shadow: 0 24px 60px rgba(26, 36, 64, 0.14), 0 0 0 1px var(--line);
  isolation: isolate;
}
.map-stage.is-dark {
  --glass-bg: rgba(31, 36, 54, 0.8);
  --glass-line: rgba(170, 182, 255, 0.14);
  --glass-ink: #f0f1f8;
  --glass-dim: #a3aac2;
  --glass-hot: rgba(154, 168, 255, 0.14);
  --stage-bg: #1b2032;
  background: radial-gradient(ellipse 60% 50% at 50% 55%, #2a3150 0%, #181c2b 75%);
  box-shadow: 0 24px 60px rgba(5, 7, 15, 0.35), 0 0 0 1px var(--line);
}
.map-stage.is-dark::after { background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 62%, rgba(12, 14, 26, 0.45)); }
.map-stage.is-dark .det-delta.up { color: #8fe0a6; background: rgba(111, 207, 134, 0.14); }
.map-stage.is-dark .det-delta.down { color: #ffaaa1; background: rgba(245, 132, 121, 0.14); }
.map-stage.is-dark .glass, .map-stage.is-dark .map-tip { box-shadow: 0 10px 32px rgba(5, 7, 15, 0.35); }
.map-stage.is-full { border-radius: 0; height: 100vh; }

.map-stage .map-canvas { position: absolute; inset: 0; }
.map-canvas .maplibregl-canvas { outline: none; }

/* cinematic vignette */
.map-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 75% 70% at 50% 45%, transparent 62%, rgba(160, 175, 210, 0.3));
}

.map-ui { position: absolute; inset: 0; pointer-events: none; z-index: 2; color: var(--glass-ink); }
.map-ui > * { pointer-events: auto; }
.map-ui[hidden], .map-ui > [hidden] { display: none !important; }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid var(--glass-line);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(26, 36, 64, 0.12);
}

/* panels fade in after the fly-in */
.map-panel { opacity: 0; transform: translateY(8px); transition: opacity 600ms ease, transform 600ms ease; }
.map-stage.is-live .map-panel { opacity: 1; transform: none; transition-delay: 200ms; }

.map-kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--glass-dim);
}
html[lang="ar"] .map-kicker { font-size: 12.5px; letter-spacing: 0; text-transform: none; }   /* a joined script never takes tracking */

/* ---------- indicator picker + legend ---------- */
.map-ind {
  position: absolute; inset-block-start: 16px; inset-inline-start: 16px;
  width: 300px; max-height: calc(100% - 120px); overflow: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
.map-ind-list { display: flex; flex-direction: column; gap: 4px; }
.map-ind-btn {
  display: flex; align-items: center; gap: 10px; text-align: start;
  padding: 8px 10px; border-radius: 10px; font-size: 13px; font-weight: 600; line-height: 1.4;
  color: var(--glass-dim); transition: background var(--fast), color var(--fast);
}
.map-ind-btn .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; opacity: 0.55; transition: box-shadow var(--fast), opacity var(--fast); }
.map-ind-btn:hover { background: var(--glass-hot); color: var(--glass-ink); }
.map-ind-btn.on { background: var(--glass-hot); color: var(--glass-ink); }
.map-ind-btn.on .dot { opacity: 1; box-shadow: 0 0 0 3px rgba(53, 82, 196, 0.12); }

.map-legend { border-top: 1px solid var(--glass-line); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.ml-bar { height: 9px; border-radius: 99px; box-shadow: 0 0 18px rgba(80, 140, 255, 0.25); }
.ml-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--glass-dim); }
.ml-unit { font-size: 11px; color: var(--glass-dim); }
.ml-city { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; color: var(--glass-dim); margin-top: 2px; }
.ml-city b { color: var(--glass-ink); font-size: 13.5px; }

/* ---------- ranking / district detail ---------- */
.map-side {
  position: absolute; inset-block-start: 16px; inset-inline-end: 16px;
  width: 330px; max-height: calc(100% - 120px); overflow: auto;
  padding: 14px; display: flex; flex-direction: column; gap: 8px;
}
.map-side-sub { font-size: 13px; font-weight: 700; margin-top: 2px; }
.map-rank { display: flex; flex-direction: column; gap: 2px; }
.rank-row {
  display: grid; grid-template-columns: 22px 1fr auto; grid-template-rows: auto 4px;
  column-gap: 8px; row-gap: 4px; align-items: center; text-align: start;
  padding: 7px 8px; border-radius: 9px; transition: background var(--fast);
}
.rank-row:hover, .rank-row.hot { background: var(--glass-hot); }
.rank-row .rk { font-size: 11px; color: var(--glass-dim); text-align: center; }
.rank-row .rn { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row .rv { font-size: 12px; font-weight: 700; }
.rank-row .rb { grid-column: 2 / 4; height: 4px; border-radius: 99px; background: rgba(140, 160, 255, 0.1); overflow: hidden; }
.rank-row .rb i { display: block; height: 100%; border-radius: inherit; transition: width 700ms cubic-bezier(.18,.82,.22,1); }

.det-back { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--glass-dim); align-self: flex-start; }
.det-back:hover { color: var(--glass-ink); }
.det-name { font-size: 20px; font-weight: 800; line-height: 1.35; margin-top: 4px; }
.det-borough { font-size: 12px; color: var(--glass-dim); }
.det-hero { margin-top: 8px; padding: 12px; border-radius: 12px; background: var(--glass-hot); }
.det-value { font-size: 34px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.det-unit { font-size: 12px; color: var(--glass-dim); margin-top: 2px; }
.det-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; align-items: center; }
.det-rank, .det-delta { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 99px; background: rgba(140, 160, 255, 0.14); }
.det-delta.up { color: #1f7a33; background: rgba(47, 158, 68, 0.12); }
.det-delta.down { color: #b2362f; background: rgba(214, 69, 61, 0.12); }
.det-list { display: flex; flex-direction: column; gap: 2px; }
.det-ind {
  display: grid; grid-template-columns: 1fr auto auto; grid-template-rows: auto 4px; column-gap: 8px; row-gap: 4px;
  align-items: center; text-align: start; padding: 7px 8px; border-radius: 9px;
}
.det-ind:hover, .det-ind.on { background: var(--glass-hot); }
.det-ind .di-name { font-size: 12px; font-weight: 600; color: var(--glass-dim); }
.det-ind.on .di-name { color: var(--glass-ink); }
.det-ind .di-val { font-size: 12px; font-weight: 700; }
.det-ind .di-rank { font-size: 10.5px; color: var(--glass-dim); }
.det-ind .di-bar { grid-column: 1 / 4; height: 4px; border-radius: 99px; background: rgba(140, 160, 255, 0.1); overflow: hidden; }
.det-ind .di-bar i { display: block; height: 100%; border-radius: inherit; }
.det-cta { margin-top: 8px; justify-content: center; }

/* ---------- the dock: one bar along the foot of the stage ----------
   navigation at the inline start · time in the middle · view and tools at the inline end.
   Every group is the same glass bar, 42px tall, its buttons split by hairlines. A stage too
   narrow for one row puts the time on its own row above the other two. */
.map-stage { container: stage / inline-size; }
.map-ui > .map-dock {
  position: absolute; inset-inline: 16px; inset-block-end: 18px; z-index: 4; pointer-events: none;
  display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  grid-template-areas: "nav time ctl"; align-items: center; column-gap: 12px; row-gap: 10px;
}
.map-dock > * { pointer-events: auto; }
.map-dock > [hidden] { display: none !important; }
.map-nav { grid-area: nav; justify-self: start; }
.map-time { grid-area: time; justify-self: center; }
.map-controls { grid-area: ctl; justify-self: end; }
@media (hover: hover) and (pointer: fine) {
  @container stage (max-width: 1060px) {
    /* the time on its own row, the two control groups side by side beneath it — all centred */
    .map-ui > .map-dock { grid-template-columns: 1fr auto auto 1fr; grid-template-areas: ". time time ." ". nav ctl ."; column-gap: 8px; }
    .map-nav { justify-self: end; }
    .map-controls { justify-self: start; }
    /* the two-row dock is taller: the side panel stops above it */
    .map-stage .map-ui > .map-side { max-height: calc(100% - 162px); }
    .map-stage.has-mini .map-ui > .map-side { max-height: calc(100% - 474px); }
  }
}
.map-time { display: flex; align-items: center; gap: 12px; padding: 6px 14px 6px 6px; border-radius: 999px; }
.map-ui[dir="rtl"] .map-time { padding: 6px 6px 6px 14px; }
.map-nav, .map-controls { opacity: 0; transition: opacity 600ms ease 400ms; }
.map-stage.is-live .map-nav, .map-stage.is-live .map-controls { opacity: 1; }
.play-btn {
  width: 38px; height: 38px; border-radius: 50%; flex: none; font-size: 12px;
  display: grid; place-content: center; color: #fff;
  background: linear-gradient(140deg, #4b63e0, #2bc9c0);
  box-shadow: 0 0 0 4px rgba(75, 99, 224, 0.18), 0 6px 18px rgba(43, 201, 192, 0.35);
  transition: transform var(--fast);
}
.play-btn:hover { transform: scale(1.06); }
.play-btn.on { animation: pulse 1.7s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(75, 99, 224, 0.08), 0 6px 18px rgba(43, 201, 192, 0.45); } }
.years { display: flex; align-items: center; position: relative; }
.years::before {
  content: ""; position: absolute; inset-inline: 18px; top: 13px; height: 2px;
  background: var(--glass-line);
}
.yr { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 12px; color: var(--glass-dim); }
.yr-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--glass-bg); border: 2px solid var(--glass-dim); transition: all var(--fast); }
.yr-txt { font-size: 12px; font-weight: 700; }
.yr:hover { color: var(--glass-ink); }
.yr.on { color: var(--glass-ink); }
.yr.on .yr-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(53, 82, 196, 0.16); }

/* ---------- controls: the groups share one look (see .nav-pair, .view-switch) ---------- */
.map-controls, .map-nav { display: flex; align-items: center; gap: 8px; }
.nav-pair, .map-tools, .view-switch {
  display: flex; border-radius: 12px; overflow: hidden;
  background: var(--glass-bg); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 6px 18px rgba(10, 13, 27, 0.18);
}
.map-ctl, .nav-ctl {
  width: 40px; height: 40px; display: grid; place-content: center; flex: none; color: var(--glass-ink);
  transition: color var(--fast), background var(--fast);
}
.map-ctl + .map-ctl, .nav-ctl + .nav-ctl { border-inline-start: 1px solid var(--glass-line); }
.map-ctl:hover, .nav-ctl:hover { background: var(--glass-hot); color: var(--accent); }
.map-ctl:focus-visible, .nav-ctl:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.map-ctl.on { color: var(--accent); background: var(--glass-hot); }

/* ---------- notice, tooltip, loading ---------- */
.map-notice {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  padding: 12px 18px; font-size: 13px; font-weight: 600; max-width: 360px; text-align: center;
}
.map-tip {
  position: absolute; left: 0; top: 0; pointer-events: none; z-index: 5;
  min-width: 150px; padding: 10px 12px; border-radius: 12px;
  background: var(--glass-bg); border: 1px solid var(--glass-line); color: var(--glass-ink);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px rgba(26, 36, 64, 0.16);
}
.tip-name { font-size: 12.5px; font-weight: 800; }
.tip-val { font-size: 20px; font-weight: 700; margin-top: 2px; }
.tip-val span { font-size: 11px; font-weight: 600; color: var(--glass-dim); }
.tip-rank { font-size: 11px; color: var(--glass-dim); margin-top: 2px; }

.map-loading {
  position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px;
  color: var(--glass-dim); font-size: 13px; background: var(--stage-bg);
  transition: opacity 700ms ease, visibility 700ms;
}
.map-stage.is-ready .map-loading { opacity: 0; visibility: hidden; }
.map-stage.is-error .map-loading .boot-mark { display: none; }
.map-stage.is-error .map-loading { color: var(--coral); }

.map-foot { padding-inline: 4px; }

/* MapLibre attribution, tuned to the stage */
.map-stage .maplibregl-ctrl-attrib { background: var(--glass-bg) !important; color: var(--glass-dim); border-radius: 10px; }
.map-stage .maplibregl-ctrl-attrib a { color: var(--glass-dim); }
.map-stage .maplibregl-ctrl-bottom-left { margin-block-end: 70px; }

/* ---------- small screens: picker on top, details as a bottom sheet ---------- */
@media (max-width: 900px) {
  .map-stage { height: 82vh; }
  .map-ind { width: auto; inset-inline-end: 12px; inset-inline-start: 12px; inset-block-start: 12px; max-height: 34%; padding: 10px; }
  .map-ind-list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; }
  .map-ind-btn { white-space: nowrap; }
  .map-side { display: none; }
  .map-side:has(.det-name) {
    display: flex; inset-block-start: auto; inset-block-end: 76px; inset-inline: 12px; width: auto; max-height: 46%;
  }
}

/* ---------- entry points into the map ---------- */
.tab-btn.tab-map { position: relative; }
.tab-spark {
  width: 8px; height: 8px; border-radius: 50%;
  background: conic-gradient(from 0deg, #4b63e0, #2bc9c0, #9cefb2, #4b63e0);
  box-shadow: 0 0 10px rgba(43, 201, 192, 0.7);
  animation: spin 3s linear infinite;
}

.area-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 10px; border-radius: 999px; font-size: 12px;
  background: var(--accent-soft); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--surface));
}
.area-chip .ac-label { font-weight: 600; opacity: 0.8; }
.area-chip .ac-x { width: 20px; height: 20px; border-radius: 50%; display: grid; place-content: center; font-size: 14px; }
.area-chip .ac-x:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }

.det-trend { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--glass-line); }

/* ============================================================
   Engines: the three.js city model and its HTML labels
   ============================================================ */
.map-stage[data-engine="model"] { background: var(--bg-soft); }
.map-stage .model-canvas { position: absolute; inset: 0; display: block; outline: none; touch-action: none; }
.map-stage .model-labels { position: absolute; inset: 0; pointer-events: none; }
.model-label {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 5px 10px; border-radius: 10px; white-space: nowrap;
  background: var(--glass-bg); border: 1px solid var(--glass-line); color: var(--glass-ink);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(22, 29, 54, 0.12);
  transform: translateY(-10px); font-size: 12px; line-height: 1.35;
}
/* the reveal: a name rises onto its district (the `translate` property composes with the renderer's transform) */
.model-label.is-rise { animation: label-rise 900ms cubic-bezier(.2, .8, .2, 1) both; }
@keyframes label-rise { from { opacity: 0; translate: 0 calc(-50% + 22px); } to { opacity: 1; translate: 0 -50%; } }
.model-label b { font-size: 12.5px; font-weight: 800; }
.model-label span { font-size: 11px; color: var(--glass-dim); font-variant-numeric: tabular-nums; }
.model-label.is-strong { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent), 0 8px 22px rgba(22, 29, 54, 0.18); }
.model-label.is-strong b { font-size: 14px; }
/* ranking mode: a small place number on every bar, and the city's own value on its line */
.model-label.is-compact {
  min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; justify-content: center;
  box-shadow: 0 3px 10px rgba(22, 29, 54, 0.12);
}
.model-label.is-compact b { font-size: 11px; font-variant-numeric: tabular-nums; }
.model-label.is-level {
  flex-direction: row; padding: 4px 10px; font-size: 11.5px; font-weight: 700;
  color: var(--accent-ink); background: var(--accent); border-color: transparent;
}

/* one-line headline of what the scene shows */
.map-headline {
  position: absolute; z-index: 3; inset-block-start: 16px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  padding: 8px 18px; border-radius: 14px; max-width: min(520px, 46%);
  background: var(--glass-bg); border: 1px solid var(--glass-line);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 600ms ease 300ms;
}
.map-headline:empty { display: none; }
.map-stage.is-live .map-headline { opacity: 1; }
.mh-ind { font-size: 11.5px; font-weight: 700; color: var(--glass-dim); }
.mh-line { font-size: 15px; font-weight: 800; color: var(--glass-ink); }
@media (max-width: 900px) { .map-headline { display: none; } }

/* model ↔ map switch */
.view-switch button { padding: 0 14px; height: 40px; font-size: 12.5px; font-weight: 700; color: var(--glass-dim); }
.view-switch button.on { background: var(--accent); color: var(--accent-ink); }

/* ============================================================
   Layout v2 (desktop): one slim indicator bar on top, one side panel.
   The scene gets the rest — no panel stacks covering the city.
   ============================================================ */
@media (min-width: 901px) {
  .map-ind {
    inset-inline-end: 362px; width: auto; max-height: none; overflow: visible;
    flex-direction: row; align-items: center; gap: 14px; padding: 8px 10px;
  }
  .map-ind > .map-kicker { display: none; }
  .map-ind-list { flex-direction: row; gap: 4px; overflow-x: auto; flex: 1; min-width: 0; scrollbar-width: none; }
  .map-ind-list::-webkit-scrollbar { display: none; }
  .map-ind-btn { white-space: nowrap; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; }
  .map-legend { border-top: 0; padding: 0 0 0 0; flex: none; width: 190px; gap: 3px; border-inline-start: 1px solid var(--glass-line); padding-inline-start: 14px; }
  .map-legend .ml-unit { display: none; }
  .map-legend .ml-city { font-size: 11px; margin: 0; }
  .map-legend .ml-city b { font-size: 12px; }
  .map-legend .ml-scale { font-size: 10.5px; }
  .map-legend .ml-bar { height: 7px; }

  .map-headline {
    inset-block-start: 76px; left: auto; transform: none;
    inset-inline-start: 16px; align-items: flex-start; text-align: start; max-width: 420px;
  }
  html[dir="rtl"] .map-headline { align-items: flex-start; }
}

/* layout v2.1: the headline card carries the legend; the top bar is chips only */
.map-headline .map-legend { width: 100%; min-width: 240px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--glass-line); border-inline-start: 0; padding-inline-start: 0; }
.map-headline .ml-unit { display: block; }
@media (min-width: 901px) {
  .map-ind { gap: 0; }
  .map-ind-list { flex-wrap: wrap; overflow: visible; }
}

/* layout v3 (desktop): ONE card (indicator switcher + message + scale) and ONE side panel */
@media (min-width: 901px) {
  .map-stage .map-ind { display: none; }
  .map-headline { inset-block-start: 16px; width: 360px; max-width: 360px; align-items: stretch; padding: 12px 14px; }
}
.mh-switch {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: start;
  font-size: 13px; font-weight: 800; color: var(--glass-ink);
  padding: 4px 6px; margin: -4px -6px 2px; border-radius: 8px;
}
.mh-switch:hover { background: var(--glass-hot); }
.mh-switch .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.mh-year { color: var(--glass-dim); font-weight: 700; font-size: 12px; }
.mh-chev { margin-inline-start: auto; color: var(--glass-dim); transition: transform var(--fast); }
.mh-switch.open .mh-chev { transform: rotate(180deg); }
.map-headline .map-ind-list { display: flex; flex-direction: column; gap: 2px; margin: 4px 0 6px; padding-bottom: 6px; border-bottom: 1px solid var(--glass-line); }
.map-headline .map-ind-btn { white-space: normal; border-radius: 9px; }
.map-headline .mh-line { font-size: 16px; text-align: start; }
.model-label .m { font-size: 10.5px; font-weight: 700; color: var(--accent); }

/* small screens: controls sit in one row above the timeline; while a district card is
   open as a bottom sheet, the controls and the timeline step aside */
@media (max-width: 900px) {
  /* a phone is narrower than the full set of controls: they scroll in one row, inside the stage */
  .map-ui > .map-dock { inset-inline: 12px; inset-block-end: 12px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "ctl" "time"; }
  /* centred over the timeline; a phone too narrow for the row scrolls it */
  .map-controls {
    justify-self: center; max-width: 100%; justify-content: flex-start; min-width: 0;
    overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; padding-block: 2px;
  }
  .map-controls::-webkit-scrollbar { display: none; }
  .map-controls > * { flex: none; }
  .map-stage:has(.det-name) .map-dock { display: none; }
  .map-stage:has(.det-name) .map-side { inset-block-end: 12px; max-height: 58%; }
  .view-switch button { padding: 0 10px; }
  .map-ctl { width: 36px; }
}

.map-canvas > .engine-host { position: absolute; inset: 0; }
.map-canvas > .engine-host[hidden] { display: none; }
@media (max-width: 900px) {
}

/* ============================================================
   v4 — cinema: engine cross-fades, blueprint loading, class legend, chapter stats
   ============================================================ */

/* kept engines dissolve into one another instead of cutting */
.map-canvas > .engine-host { transition: opacity 850ms ease; }
.map-canvas > .engine-host.is-off { opacity: 0; z-index: 2; pointer-events: none; }

/* loading: the districts draw themselves as a blueprint while the 3D city builds */
.map-blueprint { width: min(62%, 720px); max-height: 60%; color: var(--accent); opacity: 0.9; }
.map-blueprint svg { width: 100%; height: 100%; display: block; overflow: visible; }
.map-blueprint path {
  fill: color-mix(in srgb, var(--accent) 7%, transparent);
  stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 2400; stroke-dashoffset: 2400;
  animation: bp-draw 2600ms cubic-bezier(.4, 0, .2, 1) forwards, bp-breathe 3s ease-in-out 2600ms infinite;
}
@keyframes bp-draw { to { stroke-dashoffset: 0; } }
@keyframes bp-breathe { 50% { opacity: 0.55; } }
.map-loading { gap: 18px; }
.map-loading .boot-mark { width: 26px; height: 26px; border-width: 2px; }
.map-stage.is-error .map-blueprint { display: none; }

/* the colour key: swatches, class bounds, method */
.ml-classes { display: flex; gap: 2px; height: 10px; border-radius: 6px; overflow: hidden; }
.ml-classes span { flex: 1; }
/* each bound sits on its joint between two classes; the two ends stay inside the card */
.ml-breaks { position: relative; height: 1.2em; font-size: 10px; color: var(--glass-dim); line-height: 1.2; margin-top: 3px; }
.ml-breaks span {
  position: absolute; top: 0; white-space: nowrap;
  inset-inline-start: calc(var(--i) / (var(--n) - 1) * 100%); transform: translateX(-50%);
}
html[dir="rtl"] .ml-breaks span { transform: translateX(50%); }
.ml-breaks span:first-child, html[dir="rtl"] .ml-breaks span:first-child { transform: none; }
.ml-breaks span:last-child { transform: translateX(-100%); }
html[dir="rtl"] .ml-breaks span:last-child { transform: translateX(100%); }

/* chapter stat: the one number the chapter is about */
.sc-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; margin-top: 12px; }
.sc-stat b {
  font-size: clamp(34px, 4.2vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  color: var(--accent); font-variant-numeric: tabular-nums;
}
.sc-stat .su { font-size: 15px; font-weight: 700; color: var(--ink-hi); }
.sc-stat .ss { flex-basis: 100%; font-size: 13px; color: var(--ink-dim); margin-top: 4px; }
.sc-stat b { font-size: clamp(30px, 3.4vw, 44px); }
.sc-stat b small { font-size: 0.55em; font-weight: 700; }

/* ============================================================
   v7 — one place, the data beside it: the city stays on the stage; the clay data
   model lives in its own linked panel at the inline end, above the ranking.
   ============================================================ */
.map-mini {
  position: absolute; inset-block-start: 16px; inset-inline-end: 16px; width: 330px; height: 300px;
  padding: 0; overflow: hidden; display: none;
}
.map-stage.has-mini .map-mini { display: block; }
.map-mini .mini-host {
  position: absolute; inset: 0;
  /* a studio sweep under the miniature: brighter where the city stands, settling at the rim */
  background:
    radial-gradient(70% 55% at 50% 58%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    linear-gradient(to bottom, #f4f5f9 0%, #e9ecf2 100%);
}
.map-stage.is-dark .map-mini .mini-host {
  background:
    radial-gradient(70% 55% at 50% 58%, rgba(92, 106, 170, 0.32), rgba(92, 106, 170, 0) 72%),
    linear-gradient(to bottom, #1d2236 0%, #141828 100%);
}
.map-mini .mini-host .model-canvas { position: absolute; inset: 0; display: block; outline: none; touch-action: none; }
.map-mini .mini-host .model-labels { position: absolute; inset: 0; pointer-events: none; }
.map-mini .model-label { font-size: 11px; padding: 3px 8px; }
.map-mini .model-label b { font-size: 11.5px; }
.map-mini .model-label.is-compact { min-width: 18px; height: 18px; padding: 0 4px; }
.map-mini .model-label.is-compact b { font-size: 10px; }
.map-mini .model-label.is-level { font-size: 10.5px; }
.mini-head {
  position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 6px;
  background: linear-gradient(to bottom, var(--glass-bg), transparent);
}
.mini-switch { display: flex; border-radius: 9px; overflow: hidden; border: 1px solid var(--glass-line); background: var(--glass-bg); }
.mini-switch button { padding: 0 9px; height: 24px; font-size: 11px; font-weight: 700; color: var(--glass-dim); }
.mini-switch button.on { background: var(--accent); color: var(--accent-ink); }
.map-mini.is-live .mini-host { animation: fadeIn 600ms ease both; }
/* the ranking / district card moves down under the data model */
.map-stage.has-mini .map-side { inset-block-start: 328px; max-height: calc(100% - 432px); }
@media (max-width: 900px) {
  .map-stage.has-mini .map-side { inset-block-start: auto; }
  .map-stage:not(.is-present) .map-mini { display: none !important; }   /* narrow workspace: the city and the list are enough */
}
/* story / presentation: the data model is a picture-in-picture in the top corner,
   cued by the chapters; the district card, when it appears, sits under it */
.map-stage.is-present .map-mini {
  inset-block-start: 24px; inset-inline-end: 24px; width: min(420px, 36vw); height: 300px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}
.map-stage.is-present .map-mini .mini-switch { display: none; }
.map-stage.is-present.has-mini .map-side:has(.det-name) { inset-block-start: 340px; max-height: calc(100% - 460px); }
.map-stage.is-story .map-mini { inset-block-start: 88px; }
.present .map-mini, .present .map-mini .model-label { color: var(--glass-ink); }
@media (max-width: 760px) {
  .map-stage.is-present .map-mini, .map-stage.is-story .map-mini { display: none !important; }
}
/* presentation: the data model panel is dark glass, like the caption card */
.map-stage.is-present .map-mini {
  --glass-bg: rgba(11, 14, 28, 0.6); --glass-line: rgba(255, 255, 255, 0.12); --glass-ink: #e6e9f5; --glass-dim: #a3aac2; --glass-hot: rgba(154, 168, 255, 0.14);
  background: rgba(11, 14, 28, 0.6); border-color: rgba(255, 255, 255, 0.12);
}
.map-stage.is-present .map-mini .mini-head { background: linear-gradient(to bottom, rgba(11, 14, 28, 0.7), transparent); }
.map-stage.is-present .map-mini .mini-host {
  background: radial-gradient(70% 55% at 50% 58%, rgba(120, 134, 210, 0.22), rgba(120, 134, 210, 0) 72%);
}
.map-stage.is-present .map-mini .mini-head .map-kicker { color: #c4ccff; }

/* ============================================================
   v11 — the overview (ui/inset.js): the city from above with the camera's view on it,
   and every district on one value axis. Its own header; the panel is the glass.
   ============================================================ */
.map-mini .mini-head:empty { display: none; }
.map-stage .map-mini .mini-host:has(.inset) { background: none; }
.map-stage.is-dark .map-mini:has(.inset) {
  /* the presentation's dark glass: deep, cool, a hairline of light on the rim */
  background: linear-gradient(to bottom, rgba(17, 21, 38, 0.86), rgba(10, 12, 24, 0.9));
  border-color: rgba(196, 204, 255, 0.14);
  box-shadow: 0 18px 44px rgba(3, 5, 14, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.map-stage:not(.is-dark) .map-mini:has(.inset) {
  background: rgba(255, 255, 255, 0.84);
  box-shadow: 0 14px 38px rgba(26, 36, 64, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.inset {
  --in-ink: #18213d; --in-dim: #5d6888; --in-faint: rgba(26, 36, 64, 0.42);
  --in-line: rgba(26, 36, 64, 0.1); --in-grid: rgba(26, 36, 64, 0.07);
  --in-accent: #3346c0; --in-accent-soft: rgba(51, 70, 192, 0.12);
  --in-chip: rgba(255, 255, 255, 0.92); --in-chip-line: rgba(26, 36, 64, 0.1);
  --in-chip-shadow: 0 6px 18px rgba(26, 36, 64, 0.16);
  --in-head: linear-gradient(to bottom, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.86) 62%, rgba(255, 255, 255, 0) 100%);
  --in-sel: #18213d; --in-hov: #18213d; --in-edge: rgba(255, 255, 255, 0.92);
  --in-ref: #c2410c; --in-city: #18213d; --in-up: #2f6f4f; --in-down: #a1453a;
  position: absolute; inset: 0; overflow: hidden; color: var(--in-ink);
  font-size: 11px; line-height: 1.35; user-select: none; -webkit-user-select: none;
}
.inset.is-dark {
  --in-ink: #eef0fa; --in-dim: #a6adc8; --in-faint: rgba(206, 212, 255, 0.42);
  --in-line: rgba(196, 204, 255, 0.14); --in-grid: rgba(196, 204, 255, 0.07);
  --in-accent: #c4ccff; --in-accent-soft: rgba(154, 168, 255, 0.16);
  --in-chip: rgba(14, 17, 32, 0.86); --in-chip-line: rgba(196, 204, 255, 0.16);
  --in-chip-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  --in-head: linear-gradient(to bottom, rgba(14, 17, 32, 0.94) 0%, rgba(14, 17, 32, 0.8) 62%, rgba(14, 17, 32, 0) 100%);
  --in-sel: #ffffff; --in-hov: #ffffff; --in-edge: rgba(214, 220, 255, 0.3);
  --in-ref: #ffab7a; --in-city: #e9ecff; --in-up: #8fe0a6; --in-down: #ffaaa1;
}
.inset .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

/* header */
.inset-head {
  position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 5; height: 64px;
  display: flex; flex-direction: column; gap: 1px; padding: 9px 12px 0;
  background: var(--in-head); pointer-events: none;
}
.inset-head > * { pointer-events: auto; }
.inset-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.inset-line { display: flex; align-items: center; gap: 7px; min-width: 0; }
.inset-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--in-dim); }
.inset[dir="rtl"] .inset-kicker { letter-spacing: 0; font-size: 11px; }
.inset-period { font-size: 10px; font-weight: 700; color: var(--in-accent); padding: 0 6px; border-radius: 99px; background: var(--in-accent-soft); line-height: 16px; }
.inset-ind { font-size: 13px; font-weight: 800; color: var(--in-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.45; pointer-events: none; }

/* the two views: a segmented control with a sliding thumb */
.inset-seg {
  position: relative; display: flex; flex: none; padding: 2px; border-radius: 10px;
  background: var(--in-accent-soft); border: 1px solid var(--in-line);
}
.inset-seg-thumb {
  position: absolute; inset-block: 2px; inset-inline-start: 0; border-radius: 8px;
  background: var(--in-chip); box-shadow: 0 1px 2px rgba(10, 14, 30, 0.12), 0 2px 8px rgba(10, 14, 30, 0.1);
  transition: transform 320ms cubic-bezier(.3, .9, .3, 1), width 320ms cubic-bezier(.3, .9, .3, 1);
}
.inset.is-dark .inset-seg-thumb { background: rgba(196, 204, 255, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 10px rgba(0, 0, 0, 0.3); }
.inset[dir="rtl"] .inset-seg-thumb { inset-inline-start: auto; left: 0; }
.inset-seg-btn {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px; font-size: 11px; font-weight: 700; color: var(--in-dim);
  border-radius: 8px; transition: color 200ms ease;
}
.inset-seg-btn:hover { color: var(--in-ink); }
.inset-seg-btn.on { color: var(--in-ink); }
.inset-seg-ico { display: inline-flex; width: 13px; height: 13px; }
.inset-seg-ico svg { width: 100%; height: 100%; }
.inset-seg-btn.on .inset-seg-ico { color: var(--in-accent); }
.inset-seg-btn:focus-visible { outline: 2px solid var(--in-accent); outline-offset: 1px; }

/* the two panes, cross-fading */
.inset-pane { position: absolute; inset: 0; transition: opacity 360ms ease, transform 420ms cubic-bezier(.2, .8, .2, 1), filter 360ms ease; }
.inset.tab-map .inset-dist, .inset.tab-dist .inset-map { opacity: 0; pointer-events: none; filter: blur(3px); }
.inset.tab-map .inset-dist { transform: translateY(6px); }
.inset.tab-dist .inset-map { transform: scale(1.025); }
.inset:not(.is-ready) .inset-pane { transition: none; }

/* ---- map ---- */
.inset-map { background: var(--stage-bg, #e9edf6); }
.inset-base { position: absolute; inset: 0; display: block; }
.inset-svg { position: absolute; inset: 0; display: block; touch-action: none; cursor: crosshair; }
.inset.is-dragging .inset-svg { cursor: grabbing !important; }
.inset-svg .in-shadow path { fill: #000; }
.inset-svg .in-d { fill-opacity: 0.95; transition: fill-opacity 380ms ease, opacity 380ms ease; }
.inset-svg .in-e { fill: none; stroke: var(--in-edge); stroke-width: 0.7; stroke-linejoin: round; pointer-events: none; }
.inset.is-light .inset-svg .in-e { stroke-width: 0.8; }
.inset.has-sel .inset-svg .in-d:not(.is-sel) { fill-opacity: 0.34; }
.inset.has-sel .inset-svg .in-d.is-hov:not(.is-sel) { fill-opacity: 0.7; }
.inset-svg .in-vig { pointer-events: none; }
.inset-svg .in-sel-halo { fill: none; stroke: var(--in-accent); stroke-opacity: 0.38; stroke-width: 6; stroke-linejoin: round; pointer-events: none; }
.inset-svg .in-sel-line { fill: none; stroke: var(--in-sel); stroke-width: 1.7; stroke-linejoin: round; pointer-events: none; }
.inset-svg .in-hov-line { fill: none; stroke: var(--in-hov); stroke-width: 1.3; stroke-linejoin: round; stroke-opacity: 0.9; pointer-events: none; }
.inset.is-light .inset-svg .in-sel-halo { stroke-opacity: 0.22; }

/* the camera footprint */
.inset-svg .in-foot { pointer-events: none; transition: opacity 500ms ease; }
.inset-svg .in-fp-sides { fill: none; stroke-width: 1.2; stroke-linecap: round; }
.inset-svg .in-fp-near { fill: none; stroke: var(--in-accent); stroke-width: 1.8; stroke-linecap: round; }
.inset-svg .in-fp-sight { fill: none; stroke: var(--in-accent); stroke-width: 1; stroke-dasharray: 1.5 3; stroke-opacity: 0.7; }
.inset-svg .in-fp-center .ring { fill: none; stroke: var(--in-accent); stroke-width: 1.4; }
.inset-svg .in-fp-center .dot { fill: var(--in-accent); }
.inset-svg .in-fp-center .pulse { fill: var(--in-accent); opacity: 0; transform-origin: 0 0; transform-box: fill-box; }
.inset-svg .in-fp-eye .cone { fill: var(--in-accent); opacity: 0.22; }
.inset-svg .in-fp-eye .body { fill: var(--in-accent); stroke: var(--in-chip); stroke-width: 1.6; }
.inset-svg .in-fp-eye .lens { fill: var(--in-chip); }
.inset-svg .in-fp-eye.is-far .cone { opacity: 0.12; }
.inset.is-dark .inset-svg .in-fp-eye .body { stroke: #0c0f1e; }
.inset.is-dark .inset-svg .in-fp-eye .lens { fill: #0c0f1e; }
@media (prefers-reduced-motion: no-preference) {
  .inset-svg .in-fp-center .pulse { animation: inset-pulse 2.6s ease-out infinite; }
}
@keyframes inset-pulse { 0% { opacity: 0.35; transform: scale(0.4); } 100% { opacity: 0; transform: scale(2.2); } }

/* names on the map */
.inset-tag {
  position: absolute; inset-block-start: 0; left: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 7px; white-space: nowrap; max-width: calc(100% - 16px);
  border-radius: 8px; background: var(--in-chip); border: 1px solid var(--in-chip-line); box-shadow: var(--in-chip-shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: opacity 200ms ease;
}
.inset-tag[hidden] { display: none; }
.inset-tag::after {   /* a short stem down to the district */
  content: ""; position: absolute; inset-block-start: 100%; left: var(--px, 50%); width: 1px; height: 8px;
  background: linear-gradient(var(--in-ink), transparent); opacity: 0.45;
}
.inset-tag.is-below::after { display: none; }
.inset-tag .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4) inset; }
.inset-tag b { font-size: 11px; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.inset-tag .val { flex: none; }
.inset-tag .val { font-size: 11px; font-weight: 700; color: var(--in-dim); }
.inset-tag .val .num { color: var(--in-ink); }
.inset-tag .val small { font-size: 9.5px; font-weight: 600; }
.inset-tag.is-sel { border-color: color-mix(in srgb, var(--in-accent) 45%, transparent); }
.inset-tag.is-dim { opacity: 0.35; }

/* north + scale */
.inset-compass {
  position: absolute; z-index: 2; inset-block-start: 66px; inset-inline-end: 9px; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 5px 6px 4px; border-radius: 9px;
  background: color-mix(in srgb, var(--in-chip) 72%, transparent); border: 1px solid var(--in-chip-line);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.inset-compass .north .n-fill { fill: var(--in-ink); opacity: 0.85; }
.inset-compass .north .n-half { fill: var(--in-chip); opacity: 0.9; }
.inset-compass .north text { font-size: 8.5px; font-weight: 800; fill: var(--in-ink); font-family: var(--f-mono); }
.inset-compass .scale { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 2px; }
.inset-compass .scale .bar { height: 4px; border: 1.2px solid var(--in-ink); border-top: 0; opacity: 0.75; }
.inset-compass .scale .lab { font-size: 9px; font-weight: 700; color: var(--in-dim); }

/* legend: the class key along the foot, with the scale bar */
.inset-legend {
  position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 0; pointer-events: none;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 12px 7px;
  background: linear-gradient(to top, var(--in-chip) 0%, color-mix(in srgb, var(--in-chip) 70%, transparent) 55%, transparent 100%);
}
.inset .lg-scale { min-width: 0; display: flex; align-items: flex-start; gap: 5px; }
.inset .lg-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.inset .lg-end { flex: none; font-size: 9.5px; font-weight: 700; color: var(--in-ink); line-height: 7px; opacity: 0.85; }
.inset .lg-track { position: relative; }
.inset .lg-bar { display: flex; height: 7px; border-radius: 4px; overflow: hidden; box-shadow: 0 0 0 1px var(--in-line); }
.inset .lg-bar i { flex: 1; }
.inset .lg-bar i + i { margin-inline-start: 1px; }
.inset .lg-mark {
  position: absolute; inset-block-end: 100%; width: 0; height: 0; margin-inline-start: -5px; margin-bottom: 1px;
  border: 5px solid transparent; border-top: 6px solid var(--in-ink); border-bottom-width: 0;
  transition: left 300ms cubic-bezier(.3, .9, .3, 1), right 300ms cubic-bezier(.3, .9, .3, 1);
}
.inset .lg-mark[hidden] { display: none; }
.inset .lg-ref { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-inline-start: -1px; border-radius: 1px; background: var(--in-ink); box-shadow: 0 0 0 1px var(--in-chip); }
.inset .lg-labs { position: relative; height: 12px; font-size: 9.5px; font-weight: 600; color: var(--in-dim); }
.inset .lg-labs span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.inset[dir="rtl"] .lg-labs span { transform: translateX(50%); }
.inset .lg-unit { font-size: 9.5px; font-weight: 600; color: var(--in-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }

/* ---- distribution ---- */
.inset-dsvg { position: absolute; inset: 0; display: block; }
.inset-dsvg text { font-family: var(--f-mono); }
.inset-dsvg .band { opacity: 0.1; }
.inset.is-dark .inset-dsvg .band { opacity: 0.13; }
.inset-dsvg .strip { opacity: 0.95; }
.inset-dsvg .grid { stroke: var(--in-grid); stroke-width: 1; }
.inset-dsvg .tick { stroke: var(--in-faint); stroke-width: 1; }
.inset-dsvg .tick-lab { font-size: 9.5px; font-weight: 600; fill: var(--in-dim); }
.inset-dsvg .unit { font-size: 9.5px; font-weight: 600; fill: var(--in-dim); }
.inset[dir="rtl"] .inset-dsvg .unit { font-family: var(--f-body-ar); }
.inset-dsvg .ln { stroke-width: 1.2; }
.inset-dsvg .ln.city { stroke: var(--in-city); stroke-dasharray: 3 3; stroke-opacity: 0.8; }
.inset-dsvg .ln.ref { stroke: var(--in-ref); stroke-opacity: 0.9; }
.inset-dsvg .ln-lab rect { fill: var(--in-chip); stroke: var(--in-chip-line); }
.inset-dsvg .ln-lab text { font-size: 9.5px; font-weight: 700; }
.inset-dsvg .ln-lab.city .k { fill: var(--in-dim); }
.inset-dsvg .ln-lab.city .v { fill: var(--in-ink); }
.inset-dsvg .ln-lab.ref rect { stroke: color-mix(in srgb, var(--in-ref) 55%, transparent); }
.inset-dsvg .ln-lab.ref text { fill: var(--in-ref); }
.inset[dir="rtl"] .inset-dsvg .ln-lab text, .inset[dir="rtl"] .inset-dsvg .sel-lab text { font-family: var(--f-body-ar); }
.inset-dsvg .dot {
  fill: var(--c); stroke: var(--in-edge); stroke-width: 0.9;
  transition: opacity 300ms ease;
}
.inset.is-light .inset-dsvg .dot { stroke: rgba(255, 255, 255, 0.95); }
.inset .inset-dsvg .dot.is-hov { stroke: var(--in-hov); stroke-width: 1.6; }
.inset .inset-dsvg .dot.is-sel { stroke: var(--in-sel); stroke-width: 2; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--in-accent) 80%, transparent)); }
.inset.has-sel .inset-dsvg .dot:not(.is-sel):not(.is-hov) { opacity: 0.4 !important; }
.inset-dsvg .trail { transition: opacity 300ms ease; }
.inset.has-sel .inset-dsvg .trail:not(.is-on) { opacity: 0.25 !important; }
.inset-dsvg .ghost { fill: none; stroke: var(--in-faint); stroke-width: 1; }
.inset-dsvg .sel-lab rect { fill: var(--in-chip); stroke: color-mix(in srgb, var(--in-accent) 45%, transparent); }
.inset-dsvg .sel-lab text { font-size: 10px; font-weight: 800; fill: var(--in-ink); }
.inset-tip {
  position: absolute; left: 0; inset-block-start: 0; z-index: 3; pointer-events: none; min-width: 120px;
  padding: 6px 9px; border-radius: 10px; background: var(--in-chip); border: 1px solid var(--in-chip-line); box-shadow: var(--in-chip-shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.inset-tip[hidden] { display: none; }
.inset-tip .tp-name { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.inset-tip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.inset-tip .tp-val { font-size: 11px; color: var(--in-dim); margin-top: 1px; white-space: nowrap; }
.inset-tip .tp-val .num { font-size: 13px; font-weight: 800; color: var(--in-ink); }
.inset-tip .tp-val small { font-size: 10px; }
.inset-tip .tp-ch { font-size: 10.5px; color: var(--in-dim); white-space: nowrap; }
.inset-tip .tp-ch .num { font-weight: 800; color: var(--in-ink); }
.inset-note {
  position: absolute; inset-inline: 12px; inset-block-end: 7px; z-index: 2;
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; overflow: hidden;
  font-size: 10px; font-weight: 600; color: var(--in-dim); white-space: nowrap;
}
.inset-note > span { display: inline-flex; align-items: center; gap: 4px; }
.inset-note .nt-unit { margin-inline-start: auto; }
.inset-note b { font-weight: 800; color: var(--in-ink); }
.inset-note .nt-comet { width: 16px; height: 4px; border-radius: 2px; background: linear-gradient(to right, transparent, var(--in-dim)); }
.inset[dir="rtl"] .inset-note .nt-comet { transform: scaleX(-1); }

/* ============================================================
   v9 — names on the city in the spirit of the title: a word, a hairline, a glowing dot
   on the district. The navigation steps out of the picture to the foot of the frame.
   ============================================================ */
.map-stage.is-present .model-label, .map-stage.is-story .model-label {
  background: none; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0 2px 30px; translate: 0 -50%;   /* the dot at the foot sits on the district itself */
  color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 3px rgba(0, 0, 0, 0.6);
}
.map-stage.is-present .model-label::before, .map-stage.is-story .model-label::before {
  content: ""; position: absolute; left: 50%; bottom: 11px; width: 1px; height: 16px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15), rgba(223, 229, 255, 0.85));
}
.map-stage.is-present .model-label::after, .map-stage.is-story .model-label::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%;
  background: #eef1ff; box-shadow: 0 0 8px 3px rgba(196, 204, 255, 0.95), 0 0 26px 9px rgba(154, 168, 255, 0.5);
}
.map-stage.is-present .model-label b, .map-stage.is-story .model-label b { font-size: 13.5px; letter-spacing: 0.01em; }
.map-stage.is-present .model-label span, .map-stage.is-story .model-label span { color: #dfe3f2; font-size: 11.5px; }
.map-stage.is-present .model-label.is-strong, .map-stage.is-story .model-label.is-strong { box-shadow: none; }
.map-stage.is-present .model-label.is-strong b, .map-stage.is-story .model-label.is-strong b { font-size: 17px; }
.map-stage.is-present .model-label.is-strong::after, .map-stage.is-story .model-label.is-strong::after {
  width: 12px; height: 12px; margin-left: -6px; box-shadow: 0 0 10px 4px rgba(196, 204, 255, 1), 0 0 36px 12px rgba(154, 168, 255, 0.6);
}
.map-stage.is-present .model-label.is-compact, .map-stage.is-story .model-label.is-compact { padding-bottom: 0; translate: none; }
.map-stage.is-present .model-label.is-compact::before, .map-stage.is-present .model-label.is-compact::after,
.map-stage.is-story .model-label.is-compact::before, .map-stage.is-story .model-label.is-compact::after { display: none; }

/* ============================================================
   v10 — the colour key, written on the city like everything else in the show
   ============================================================ */
.map-key {
  position: absolute; z-index: 5; inset-block-start: 76px; inset-inline-start: 28px; width: 300px;
  color: #eef0f8; pointer-events: none; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
  animation: pc-in 700ms cubic-bezier(.18,.82,.22,1) both;
}
.map-key[hidden] { display: none; }
.mk-name { font-size: 18px; font-weight: 800; line-height: 1.4; }
.mk-unit { font-size: 13px; color: #c9d0e4; margin-top: 2px; }
.mk-bar { display: flex; height: 14px; margin-top: 10px; border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 4px 18px rgba(0, 0, 0, 0.45); }
.mk-bar span { flex: 1; }
.mk-bounds { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12.5px; color: #e2e6f5; }
.mk-bounds span { flex: 0 0 auto; }
.mk-note { font-size: 14px; font-weight: 700; color: #ffffff; margin-top: 10px; }
.map-stage:not(.is-present) .map-key { display: none; }

/* every district named with its value (the story): compact, so 25 of them fit on the city */
.map-stage.is-present .model-label.is-all { padding-bottom: var(--lift, 22px); }
.map-stage.is-present .model-label.is-all b { font-size: 11.5px; }
.map-stage.is-present .model-label.is-all span { font-size: 11px; line-height: 1.2; }
.map-stage.is-present .model-label.is-all::before { height: calc(var(--lift, 22px) - 11px); bottom: 9px; }
.map-stage.is-present .model-label.is-all::after { width: 7px; height: 7px; margin-left: -3.5px; }

/* ============================================================
   Guided presentation (#/present/<city>) — one film: the stage full screen; words written
   on the city (title card, caption, colour key, names); the navigation at the foot of the
   frame. Everything for the presentation lives in this block.
   ============================================================ */
html.is-presenting, html.is-presenting body { overflow: hidden; }
.present { position: fixed; inset: 0; z-index: 200; background: #0b0e19; color: #e6e9f5; }
.present .map-tab { height: 100%; gap: 0; }
.present .map-foot { display: none; }
.present .map-stage { height: 100vh; border-radius: 0; box-shadow: none; }
.present .map-stage::after { background: radial-gradient(ellipse 82% 78% at 50% 42%, transparent 52%, rgba(4, 6, 14, 0.62)); }
/* the working panels step aside: the caption and the names on the city carry the numbers */
.map-stage.is-present .map-ind, .map-stage.is-present .map-dock,
.map-stage.is-present .map-notice, .map-stage.is-present .map-side, .map-stage.is-present .map-headline { display: none; }
.map-stage.is-present[data-engine="model"], .map-stage.is-story[data-engine="model"] { background: #0b0e19; }
/* film frame: a breath of shade at the top, a deeper one at the foot, under the words */
.present::before, .present::after { content: ""; position: absolute; inset-inline: 0; z-index: 6; pointer-events: none; }
.present::before { top: 0; height: 4vh; background: linear-gradient(to bottom, rgba(4, 6, 14, 0.55), transparent); }
.present::after { bottom: 0; height: 38vh; background: linear-gradient(to top, rgba(4, 6, 14, 0.66), rgba(4, 6, 14, 0.22) 45%, transparent); }
@keyframes pc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the opening: black while the city builds, the observatory's name on it; the curtain lifts
   on the fly-in and the city's name rises under the observatory's */
.pc-curtain { position: absolute; inset: 0; z-index: 7; background: #05070d; pointer-events: none; transition: opacity 2200ms cubic-bezier(.4, 0, .2, 1) 150ms; }
.pc-curtain.is-up { opacity: 0; }
.pc-titlecard {
  position: absolute; z-index: 8; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px;
  text-align: center; pointer-events: none; color: #fff;
}
.pc-titlecard.is-out { opacity: 0; transition: opacity 1300ms ease; }
.tc-kicker {
  display: flex; align-items: center; gap: 16px; opacity: 0;
  font-size: clamp(14px, 1.4vw, 19px); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase;
  color: #dfe4ff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6), 0 0 40px rgba(154, 168, 255, 0.35);
}
html[lang="ar"] .tc-kicker { letter-spacing: 0; font-size: clamp(20px, 2.4vw, 34px); font-weight: 700; }   /* a joined script never takes tracking */
.tc-kicker::before, .tc-kicker::after { content: ""; width: clamp(28px, 4vw, 70px); height: 1px; background: rgba(196, 204, 255, 0.6); box-shadow: 0 0 10px rgba(196, 204, 255, 0.6); }
.tc-name {
  font-size: clamp(64px, 9.5vw, 148px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; color: #fff; opacity: 0;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6), 0 0 100px rgba(154, 168, 255, 0.3);
}
html[lang="ar"] .tc-name { letter-spacing: 0; line-height: 1.3; }
.tc-sub {
  display: grid; justify-items: center; gap: 12px; opacity: 0;
  font-size: clamp(14px, 1.4vw, 19px); font-weight: 600; letter-spacing: 0.24em; color: #c9d0e4;
  font-variant-numeric: tabular-nums; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
.tc-sub::before { content: ""; width: clamp(80px, 12vw, 180px); height: 1px; background: linear-gradient(90deg, transparent, #c4ccff, transparent); transform: scaleX(0); }
.pc-titlecard.is-pre .tc-kicker { animation: tc-in 1100ms cubic-bezier(.18, .82, .22, 1) 250ms both; }
.pc-titlecard.is-in .tc-name { animation: tc-name-in 1600ms cubic-bezier(.18, .82, .22, 1) 600ms both; }
.pc-titlecard.is-in .tc-sub { animation: tc-in 1000ms cubic-bezier(.18, .82, .22, 1) 1500ms both; }
.pc-titlecard.is-in .tc-sub::before { animation: tc-rule 1200ms cubic-bezier(.18, .82, .22, 1) 1400ms both; }
@keyframes tc-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes tc-name-in { from { opacity: 0; transform: translateY(22px) scale(0.97); filter: blur(16px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes tc-rule { to { transform: scaleX(1); } }

/* the year, written large while a chapter plays the periods */
.pc-year {
  position: absolute; z-index: 5; inset-block-start: 26px; inset-inline-end: 36px;
  font-size: clamp(44px, 7vw, 104px); font-weight: 800; line-height: 1; letter-spacing: -0.02em;
  color: #c4ccff; text-shadow: 0 0 44px rgba(154, 168, 255, 0.5), 0 2px 18px rgba(0, 0, 0, 0.45);
  opacity: 0; transition: opacity 600ms ease; pointer-events: none;
}
.present.has-year .pc-year { opacity: 1; }

/* the caption: words written on the city, no box */
.pc-card {
  position: absolute; z-index: 6; inset-block-end: 64px; inset-inline-start: 48px;
  width: min(780px, calc(100vw - 96px)); color: #e6e9f5; transition: opacity 700ms ease;
}
.pc-card.is-in .pc-stat { animation-delay: 60ms; }
.pc-card.is-in .pc-body { animation-delay: 140ms; }
.pc-title {
  margin: 0 0 6px; font-size: clamp(30px, 3.4vw, 50px); font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; color: #fff;
  text-shadow: 0 4px 30px rgba(0, 0, 0, 0.6), 0 0 70px rgba(154, 168, 255, 0.22);
}
html[lang="ar"] .pc-title { line-height: 1.45; letter-spacing: 0; }
.pc-title:empty { display: none; }
.pc-stat-slot { opacity: 0; transition: opacity 500ms ease; }
.pc-stat-slot.is-on { opacity: 1; }
.pc-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 14px; }
.pc-stat b {
  font-size: clamp(60px, 7.2vw, 108px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #fff;
  font-variant-numeric: tabular-nums; unicode-bidi: isolate;
  text-shadow: 0 6px 40px rgba(0, 0, 0, 0.6), 0 0 90px rgba(154, 168, 255, 0.4);
}
.pc-stat b small { font-size: 0.55em; font-weight: 700; margin-inline-start: 0.04em; color: #c4ccff; }
.pc-stat .su { font-size: clamp(17px, 1.7vw, 24px); font-weight: 700; color: #c4ccff; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6); }
.pc-stat .ss {
  flex-basis: 100%; margin-top: 8px; font-size: clamp(15px, 1.25vw, 18px); font-weight: 600; color: #e2e6f5;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
}
.pc-body {
  margin-top: 12px; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.7; color: #eef0f8; max-width: 66ch;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75), 0 0 2px rgba(0, 0, 0, 0.5);
}
.pc-body:empty { display: none; }
/* chips: what the numbers stand on (a filter applied, a coarse source) */
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700; color: #f6e5b8; background: rgba(240, 190, 90, 0.14); border: 1px solid rgba(240, 190, 90, 0.38);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.pc-links { display: flex; gap: 8px; flex-wrap: wrap; }
.pc-links:not(:empty) { margin-top: 18px; }

/* the navigation, at the foot of the frame; it steps back when the hand is still */
.pc-nav {
  position: absolute; z-index: 6; inset-block-end: 16px; inset-inline-end: 24px;
  display: flex; align-items: center; gap: 14px; opacity: 0.55; transition: opacity 300ms ease;
}
.pc-nav:hover, .pc-nav:focus-within { opacity: 1; }
.pc-count { font-size: 12px; font-weight: 700; color: #8d97b8; }
.pc-dots { display: flex; gap: 6px; }
.pc-dot { width: 8px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, 0.22); transition: width var(--fast), background var(--fast); }
.pc-dot.on { width: 22px; background: #b9c3ff; }
.pc-controls { display: flex; align-items: center; gap: 8px; }
.pc-btn {
  height: 36px; min-width: 36px; padding: 0 12px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #fff;
  background: rgba(11, 14, 28, 0.4); border: 1px solid rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pc-btn:hover:not(:disabled) { border-color: #b9c3ff; color: #b9c3ff; }
.pc-btn:disabled { opacity: .35; cursor: default; }
.pc-next { font-size: 16px; background: #c4ccff; color: #12162a; border-color: transparent; }
.pc-next:hover:not(:disabled) { background: #fff; color: #12162a; }
.pc-progress { position: absolute; z-index: 6; inset-inline: 0; inset-block-end: 0; height: 3px; overflow: hidden; background: rgba(255, 255, 255, 0.12); }
.pc-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9aa8ff, #2bc9c0); }
.pc-exit {
  position: absolute; z-index: 9; inset-block-start: 20px; inset-inline-start: 20px;
  width: 40px; height: 40px; border-radius: 50%; font-size: 16px; color: #fff;
  background: rgba(11, 14, 28, 0.55); border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity 500ms ease;
}
.present.is-idle { cursor: none; }
.present.is-idle .pc-exit { opacity: 0; }
.present.is-idle .pc-nav { opacity: 0.2; }
/* while the title holds the frame, nothing else is on it */
.present .pc-nav, .present .pc-progress, .present .map-key { transition: opacity 700ms ease; }
.present.is-titling .pc-card, .present.is-titling .pc-nav, .present.is-titling .pc-progress,
.present.is-titling .pc-exit, .present.is-titling .map-key { opacity: 0; pointer-events: none; }
/* names the caption speaks of: the value reads at a distance; a name in the way of the
   words is lifted on a longer pin (the engine sets --lift) */
.map-stage.is-present .model-label:not(.is-compact):not(.is-all) { padding-bottom: var(--lift, 30px); }
.map-stage.is-present .model-label:not(.is-compact):not(.is-all)::before { height: calc(var(--lift, 30px) - 14px); }
.map-stage.is-present .model-label span { font-size: 12.5px; }
.map-stage.is-present .model-label.is-strong span { font-size: 14.5px; font-weight: 700; color: #fff; }
.map-stage.is-present .model-label span.m { color: #f6e5b8; font-size: 11.5px; }
/* the light theme's story runs over a bright golden city: white names need a firmer shadow there */
:root:not([data-theme="dark"]) .map-stage.is-story .model-label {
  text-shadow: 0 1px 2px rgba(10, 12, 24, 0.9), 0 0 10px rgba(10, 12, 24, 0.7), 0 0 24px rgba(10, 12, 24, 0.45);
}

/* narrow screens: the caption becomes compact so the city keeps most of the frame */
@media (max-width: 760px) {
  .pc-card { inset-inline: 16px; inset-block-end: 58px; width: auto; max-height: 52vh; }
  .pc-title { font-size: 22px; }
  .pc-stat b { font-size: 44px; }
  .pc-stat .su { font-size: 14px; }
  .pc-stat .ss { font-size: 12.5px; margin-top: 4px; }
  .pc-body { font-size: 13.5px; line-height: 1.6; margin-top: 8px; }
  .pc-nav { inset-inline: 12px; justify-content: space-between; }
  .pc-btn { height: 32px; min-width: 32px; font-size: 12px; }
  .tc-name { font-size: clamp(40px, 13vw, 72px); }
}

/* a phone on its side: the map fills the screen above the slim tab bar; in the presentation
   the colour key steps to the far side and the caption tightens, so neither covers the other */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  .map-stage { height: calc(100svh - 44px); }
  .map-ind > .map-kicker { display: none; }
  .map-ind { padding: 6px; max-height: 30%; }
  .map-key { inset-block-start: 14px; inset-inline-start: auto; inset-inline-end: 20px; width: 240px; }
  .mk-name { font-size: 15px; }
  .pc-card { inset-block-end: 46px; inset-inline-start: 24px; width: min(520px, 58vw); }
  .pc-title { font-size: 20px; margin-bottom: 2px; }
  .pc-stat b { font-size: 46px; }
  .pc-stat .su { font-size: 15px; }
  .pc-stat .ss { font-size: 12.5px; margin-top: 4px; }
  .pc-body { font-size: 12.5px; line-height: 1.6; margin-top: 6px; }
  .pc-year { font-size: 44px; inset-block-start: 14px; }
  .tc-name { font-size: clamp(40px, 13vh, 72px); }
}

/* map navigation (workspace): zoom, turn, compass — the start of the dock */
.compass-needle { display: grid; place-content: center; transition: transform 120ms linear; }
/* touch screens steer with the hand */
@media (max-width: 900px), (pointer: coarse) { .map-nav { display: none; } }

/* a phone on its side: like the phone upright — no overview inset, the list only with a district
   open — and, with room across, the time and the controls share one centred row */
@media (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  .map-stage:not(.is-present) .map-mini { display: none !important; }
  .map-stage:not(.is-present) .map-side:not(:has(.det-name)) { display: none; }
}
@media (min-width: 760px) and (max-width: 980px) and (max-height: 500px) and (orientation: landscape) {
  .map-ui > .map-dock { grid-template-columns: 1fr auto auto 1fr; grid-template-areas: ". time ctl ."; column-gap: 8px; }
}