/* The explore map (/explore, step 3.S7; map v2, 13 Nov 2026). The site's own look: a light sheet, ink lines, and one
   black survey panel (the legend with its source and credit). Sizes come from the design system's tokens (styles.css).
   Wide screens: the map beside the panel. Under 960px: the map fills the screen, the layers are a row to swipe and
   the panel is a sheet that rises from the foot. Motion is the camera, shapes arriving and the chosen place lifting;
   all of it is off under prefers-reduced-motion. No blur anywhere: the map repaints often. */
.ex { max-width: var(--max); margin: 0 auto; padding: clamp(16px, 3.4vh, 36px) var(--gutter) 72px; }
.ex-head h1 { margin: 0 0 10px; }
.ex-head .sheet { margin-bottom: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ex-head .sheet::before { margin-right: 0; }
.ex-early { padding: 3px 8px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: var(--r-sm); font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); }
.ex-lede { margin: 0; color: var(--ink-2); font-size: var(--t-lede); }
.ex-kind { margin: 0 0 6px; font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }

/* Layers, group by group: they wrap on a wide screen and are one row to swipe on a phone. */
.ex-layers { display: flex; gap: var(--s-2) var(--s-5); margin: var(--s-4) calc(-1 * var(--gutter)) var(--s-3); padding: 2px var(--gutter); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.ex-layers::-webkit-scrollbar { display: none; }
.ex-lg { display: flex; flex: none; align-items: center; gap: 6px; }
.ex-lg > span { margin-right: 2px; font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.ex-layers button { flex: none; min-height: 40px; padding: 8px 14px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 .9rem var(--sans); cursor: pointer; transition: background .18s, color .18s, border-color .18s; }
.ex-layers button:hover:not(:disabled) { border-color: var(--ink); }
.ex-layers button[aria-pressed="true"] { background: var(--core); border-color: var(--core); color: var(--on-core); }
.ex-layers button:disabled { border-style: dashed; color: var(--ink-3); cursor: default; }
.ex-layers small { margin-left: 6px; font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }
.ex :is(button, select, input, a, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.ex-grid { position: relative; display: grid; gap: var(--s-4); }
.ex-stage { position: relative; height: calc(100svh - var(--top-h) - 118px); min-height: 440px; border: 1px solid var(--rule-2); border-radius: var(--r-md); background: var(--surface); overflow: hidden; isolation: isolate; contain: layout paint; }
.ex-bar { position: absolute; z-index: 5; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 6px 10px; background: linear-gradient(var(--surface) 62%, transparent); pointer-events: none; }
.ex-bar > * { pointer-events: auto; }
.ex-back { flex: none; width: 36px; height: 36px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer; }
.ex[data-level="country"] .ex-back { visibility: hidden; width: 0; margin-right: -8px; border: 0; }
.ex-trail { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-family: var(--mono); font-size: .75rem; letter-spacing: .02em; white-space: nowrap; overflow: hidden; }
.ex-trail button { padding: 6px 2px; border: 0; background: none; color: var(--ink-3); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ex-trail button:hover { color: var(--ink); }
.ex-trail i { color: var(--rule-2); font-style: normal; }
.ex-trail span { overflow: hidden; text-overflow: ellipsis; color: var(--ink); font-weight: 600; }

/* Search: a button on a phone that opens the box over the trail; always open on a wide screen. */
.ex-find { position: relative; flex: none; display: flex; align-items: center; }
.ex-find-btn { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); color: var(--ink); cursor: pointer; }
.ex-find input { display: none; width: 100%; height: 36px; padding: 0 12px 0 36px; border: 1px solid var(--rule-2); border-radius: 999px; background: var(--surface); color: var(--ink); font: 400 16px var(--sans); }
.ex-find input::placeholder { color: var(--ink-3); }
.ex-find.is-open { position: absolute; left: 10px; right: 10px; top: 6px; }
.ex-find.is-open input { display: block; }
.ex-find.is-open .ex-find-btn { position: absolute; left: 0; border-color: transparent; background: none; pointer-events: none; }
.ex-find-list { position: absolute; top: 42px; left: 0; right: 0; margin: 0; padding: 4px; list-style: none; border: 1px solid var(--rule-2); border-radius: var(--r-md); background: var(--surface); box-shadow: 0 14px 30px -18px rgba(15, 20, 25, .45); max-height: min(320px, 50svh); overflow-y: auto; }
.ex-find-list li { display: grid; gap: 1px; padding: 8px 10px; border-radius: var(--r-sm); cursor: pointer; font-size: .92rem; }
.ex-find-list li span { font-size: var(--t-xs); color: var(--ink-3); }
.ex-find-list li[aria-selected="true"], .ex-find-list li[data-i]:hover { background: var(--sunk); }
.ex-find-list .ex-find-note { cursor: default; font-size: .8125rem; color: var(--ink-3); border-top: 1px solid var(--rule); border-radius: 0; margin-top: 2px; }
.ex-find-list .ex-find-note:first-child { border-top: 0; font-size: var(--t-sm); }

.ex-map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 0 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; opacity: 0; transition: opacity .4s; }
.ex.is-ready .ex-map { opacity: 1; }
.ex-grat line { stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.ex-s { fill: var(--land); stroke: rgba(17, 19, 17, .32); stroke-width: .6; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: fill .3s, transform .38s cubic-bezier(.2, .7, .2, 1); }
.ex-s.b0 { fill: var(--b0); } .ex-s.b1 { fill: var(--b1); } .ex-s.b2 { fill: var(--b2); } .ex-s.b3 { fill: var(--b3); }
.ex-s.b4 { fill: var(--b4); } .ex-s.b5 { fill: var(--b5); } .ex-s.b6 { fill: var(--b6); } .ex-s.b7 { fill: var(--b7); }
.ex-s.gap { fill: url(#ex-hatch-base); }
.ex-d1 .ex-s.gap { fill: url(#ex-hatch-d1); }
.ex-d2 .ex-s.gap { fill: url(#ex-hatch-d2); }
/* While the slider plays the colours blend quickly, so a step is done well before the next one (measured: 60 frames
   a second on a phone at a quarter speed, scripts/explore/perf.mjs). */
.ex.is-playing .ex-s { transition: fill .16s, transform .38s cubic-bezier(.2, .7, .2, 1); }
/* The place in view is drawn in full above a veil over the rest (no see-through fills: tiles overlap at their edges). */
.ex-veil { fill: var(--surface); opacity: 0; pointer-events: none; transition: opacity .4s; }
.ex.has-d1 .ex-veil1, .ex.has-d2 .ex-veil2 { opacity: .74; }
.ex-s[data-l="ward"] { stroke: rgba(17, 19, 17, .5); }
.ex-s.sel { stroke: var(--ink); stroke-width: 2.6; }
.ex-shadow { fill: rgba(17, 19, 17, .26); stroke: none; pointer-events: none; }
@media (hover: hover) { .ex-s:hover { stroke: var(--ink); stroke-width: 1.4; } .ex-s.sel:hover { stroke-width: 2.6; } }
.ex-hatch-bg { fill: var(--sunk); }
.ex-hatch-line { stroke: var(--rule-2); stroke-width: 2.6; }
.ex-p { fill: none; stroke: var(--ink); stroke-width: 1.3; vector-effect: non-scaling-stroke; stroke-linejoin: round; pointer-events: none; }
.ex:not([data-level="country"]) .ex-p, .ex:not([data-level="country"]) .ex-names { display: none; }
.ex-names text { font-family: var(--mono); font-weight: 500; letter-spacing: .02em; fill: var(--ink); stroke: color-mix(in srgb, var(--surface) 85%, transparent); stroke-width: .28em; paint-order: stroke; pointer-events: none; dominant-baseline: middle; }
.ex-pt-ring { stroke: var(--ink); stroke-width: 10.5; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.ex-pt { stroke: var(--sunk); stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; cursor: pointer; pointer-events: stroke; transition: stroke-width .2s; }
.ex-pt.b0 { stroke: var(--b0); } .ex-pt.b1 { stroke: var(--b1); } .ex-pt.b2 { stroke: var(--b2); } .ex-pt.b3 { stroke: var(--b3); } .ex-pt.b4 { stroke: var(--b4); }
.ex-pt.sel { stroke-width: 15; }
.ex-pt-ring { transition: stroke-width .2s; }
.ex-pt-ring.sel { stroke-width: 20; }
.ex-pin-ring { stroke: var(--surface); stroke-width: 15; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }
.ex-pin-dot { stroke: var(--ink); stroke-width: 9; stroke-linecap: round; vector-effect: non-scaling-stroke; pointer-events: none; }

.ex-tip { position: absolute; z-index: 6; top: 0; left: 0; margin: 0; padding: 5px 9px; border-radius: var(--r-sm); background: var(--core); color: var(--on-core); font-size: .8rem; font-weight: 600; white-space: nowrap; pointer-events: none; }
.ex-tip span { display: block; font-weight: 400; font-size: .8125rem; color: var(--on-core-2); }
.ex-status { position: absolute; z-index: 4; left: 12px; top: 54px; margin: 0; max-width: calc(100% - 24px); padding: 6px 10px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--surface); font-family: var(--mono); font-size: .75rem; color: var(--ink-2); }
/* The callout: in the corner for a whole province or municipality; beside the chosen ward, dam or plaza (.is-at),
   moving with it. On a phone the sheet's top says the same, so there is no callout. */
.ex-callout { position: absolute; z-index: 3; right: 14px; bottom: 76px; display: none; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; max-width: 340px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--core); color: var(--on-core); font-size: .84rem; box-shadow: 0 10px 24px -14px rgba(15, 20, 25, .6); }
.ex-callout.is-at { top: 0; left: 0; right: auto; bottom: auto; max-width: 300px; transition: transform .42s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.ex-callout b { grid-column: 1; font-size: .95rem; }
.ex-callout span { grid-column: 1; color: var(--on-core-2); }
.ex-callout a { grid-column: 2; grid-row: 1 / span 2; padding: 8px 10px; border: 1px solid var(--on-core-2); border-radius: var(--r-sm); color: var(--on-core); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ex-callout[hidden], .ex-tip[hidden], .ex-status[hidden], .ex-keybar[hidden], .ex-time[hidden], .ex-sub[hidden], .ex-find-list[hidden] { display: none; }

/* The foot of the map: the layer's key and the time bar. */
.ex-foot { position: absolute; z-index: 4; left: 10px; right: 10px; bottom: 106px; display: grid; gap: 8px; pointer-events: none; }
.ex-foot > * { pointer-events: auto; }
.ex-keybar { display: flex; align-items: center; gap: 3px; justify-self: start; max-width: 100%; margin: 0; padding: 5px 9px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: color-mix(in srgb, var(--surface) 94%, transparent); font-size: .8125rem; color: var(--ink-2); }
.ex-keybar b { margin-right: 5px; color: var(--ink); white-space: nowrap; }
.ex-keybar i { flex: none; width: 16px; height: 10px; border: 1px solid rgba(17, 19, 17, .28); }
.ex-keybar span { margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-time { display: flex; align-items: center; gap: 10px; padding: 6px 10px 6px 6px; border: 1px solid var(--rule-2); border-radius: var(--r-md); background: var(--surface); }
.ex-play { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--core); color: var(--on-core); cursor: pointer; }
.ex-play .ex-i-pause, .ex-play[aria-pressed="true"] .ex-i-play { display: none; }
.ex-play[aria-pressed="true"] .ex-i-pause { display: inline; }
.ex-yr { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 10px; }
.ex-when::first-letter { text-transform: uppercase; }
.ex-when { display: block; font-weight: 650; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-span { font-family: var(--mono); font-size: .75rem; color: var(--ink-3); white-space: nowrap; }
.ex-year { grid-column: 1 / -1; width: 100%; height: 24px; margin: 0; accent-color: var(--ink); cursor: pointer; touch-action: pan-y; }
.ex-sub { flex: none; max-width: 42%; min-height: 40px; padding: 6px 8px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 16px var(--sans); }

/* The panel. Under 960px it is a sheet over the foot of the map: its top (the grip) names the place and its figure;
   a tap or a pull opens the rest, which scrolls inside the sheet. */
.ex-side { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 82%; min-width: 0; border: 1px solid var(--rule-2); border-radius: 14px 14px var(--r-md) var(--r-md); background: var(--surface); box-shadow: 0 -12px 30px -22px rgba(15, 20, 25, .5); transform: translateY(calc(100% - 96px)); transition: transform .42s cubic-bezier(.2, .7, .2, 1); }
.ex.sheet-open .ex-side { transform: none; }
.ex-grip { flex: none; display: grid; gap: 6px; justify-items: start; width: 100%; height: 96px; padding: 8px 16px 12px; align-content: start; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ex-grip i { justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--rule-2); }
.ex-peek { display: grid; gap: 2px; width: 100%; min-width: 0; }
.ex-peek b { font-size: 1.02rem; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-peek span { font-size: .84rem; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.3; }
.ex-scroll { display: grid; gap: var(--s-4); align-content: start; min-height: 0; padding: 0 12px 16px; overflow-y: auto; overscroll-behavior: contain; visibility: hidden; }
.ex.sheet-open .ex-scroll { visibility: visible; }
.ex.sheet-open .ex-peek { display: none; }
.ex.sheet-open .ex-grip { height: 30px; }

.ex-card, .ex-pick { padding: 18px 18px 16px; border: 1px solid var(--rule); border-radius: var(--r-md); background: var(--surface); }
.ex-card h2, .ex-legend h2 { margin: 0 0 10px; font-size: 1.35rem; letter-spacing: -.02em; line-height: 1.15; border: 0; padding: 0; }
.ex-card h3 { margin: 20px 0 6px; font-size: .95rem; }
.ex-card p { margin: 0 0 10px; color: var(--ink-2); font-size: .95rem; }
.ex-hint:empty { display: none; }
.ex-fig { min-height: 52px; margin-bottom: 10px; }
.ex-val { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin: 0 !important; padding: 10px 12px; border-radius: var(--r-sm); background: var(--sunk); color: var(--ink) !important; }
.ex-val small { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--ink-3); }
.ex-sw { display: inline-block; flex: none; width: 14px; height: 14px; margin-top: 3px; border: 1px solid rgba(17, 19, 17, .35); border-radius: 3px; background: var(--land); }
.ex-sw.b0 { background: var(--b0); } .ex-sw.b1 { background: var(--b1); } .ex-sw.b2 { background: var(--b2); } .ex-sw.b3 { background: var(--b3); }
.ex-sw.b4 { background: var(--b4); } .ex-sw.b5 { background: var(--b5); } .ex-sw.b6 { background: var(--b6); } .ex-sw.b7 { background: var(--b7); }
.ex-sw.gap { background: repeating-linear-gradient(45deg, var(--sunk) 0 3px, var(--rule-2) 3px 5px); }
/* A small chart of a history: one ink line, the period on the map marked in green. */
.ex-hist { margin: 8px 0 0; }
.ex-spark { display: block; width: 100%; height: 44px; overflow: visible; }
.ex-spark-line { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ex-spark-at { stroke: var(--accent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ex-spark-dot { stroke: var(--accent-strong); stroke-width: 7; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ex-hist figcaption { margin-top: 3px; font-size: .8125rem; line-height: 1.35; color: var(--ink-3); }
.ex-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 0 !important; }
.ex-acts .btn { min-height: 40px; padding: 8px 14px; font-size: .88rem; }
.ex-acts .btn-line { border: 1px solid var(--rule-2); background: var(--surface); color: var(--ink); }
.ex-acts .btn-line:hover { border-color: var(--ink); }
.ex-share { min-height: 40px; padding: 8px 4px; border: 0; background: none; color: var(--ink-2); font: 600 .84rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; overflow-wrap: anywhere; text-align: left; }
.ex-lines { margin: 0; }
.ex-lines > div { padding: 10px 0; border-top: 1px solid var(--rule); }
.ex-lines dt { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.ex-lines dt a { color: inherit; text-underline-offset: 3px; }
.ex-lines dt a:hover { color: var(--ink); }
.ex-lines dd { margin: 3px 0 0; font-size: .92rem; }
.ex-show { flex: none; padding: 3px 0; border: 0; background: none; color: var(--accent-ink); font: 600 .8125rem var(--sans); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ex-on { flex: none; font: 600 .8125rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ink); }
.ex-fine, .ex-wait { font-size: .82rem !important; color: var(--ink-3) !important; }
.ex-pick { display: grid; gap: 10px; }
.ex-pick .ex-kind { margin: 0; }
.ex-pick label { display: grid; gap: 4px; font-size: .82rem; font-weight: 600; }
.ex-pick select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 1rem var(--sans); }

/* The black survey panel: the layer, its legend, source, release and credit. */
.ex-legend { padding: 20px 18px 18px; border-radius: var(--r-md); background: var(--core); color: var(--on-core); }
.ex-legend:empty { display: none; }
.ex-legend .ex-kind { color: var(--on-core-2); }
.ex-legend h2 { color: var(--on-core); }
.ex-legend p { margin: 0 0 10px; font-size: .9rem; color: var(--on-core-2); }
.ex-key { display: grid; gap: 7px; margin: 12px 0 14px; padding: 0; list-style: none; font-size: .9rem; }
.ex-key li { display: flex; align-items: flex-start; gap: 10px; }
.ex-legend .ex-sw { border-color: rgba(244, 245, 243, .45); }
.ex-meta { margin: 14px 0 12px; font-size: .8rem; }
.ex-meta div { display: grid; grid-template-columns: 62px 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(244, 245, 243, .16); }
.ex-meta dt { font-family: var(--mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--on-core-2); padding-top: 2px; }
.ex-meta dd { margin: 0; color: var(--on-core); overflow-wrap: anywhere; }
.ex-legend a { color: var(--on-core); text-underline-offset: 3px; }
.ex-more { font-weight: 600; }
.ex-not { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(244, 245, 243, .16); font-size: .82rem; }
.ex-not summary { min-height: 32px; cursor: pointer; font-weight: 600; color: var(--on-core); }
.ex-not ul { margin: 8px 0 0; padding-left: 1.1em; display: grid; gap: 8px; color: var(--on-core-2); }
.ex-not b { color: var(--on-core); font-weight: 600; }

.ex-about { margin-top: 40px; max-width: 70ch; }
.ex-about h2 { margin: 0 0 12px; font-size: 1.3rem; letter-spacing: -.02em; }
.ex-about ul { margin: 0 0 14px; padding-left: 1.1em; display: grid; gap: 8px; color: var(--ink-2); }
.ex-noscript { margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--rule-2); border-radius: var(--r-sm); }

/* A phone: the map is the page. The title stays for readers that read it aloud; the label above it is enough to see. */
@media (max-width: 959px) {
  .ex { padding-top: 12px; }
  .ex-head h1, .ex-lede { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ex-head .sheet { margin-bottom: 0; }
  .ex-layers { margin-top: 10px; margin-bottom: 10px; gap: 14px; }
  /* The sheet's closed part hangs below the map: the grid clips it, so it never covers the page under the map. */
  .ex-grid { margin-inline: calc(-1 * var(--gutter) + 8px); overflow: clip; border-radius: var(--r-md); }
}
@media (max-width: 480px) { .ex-keybar span { display: none; } .ex-time { gap: 8px; } }

@media (min-width: 960px) {
  .ex-grid { grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); gap: var(--s-5); align-items: start; }
  /* The title and the lede share a row, and the layers keep to one, so the whole map with its slider is on the
     first screen of a laptop (the stage's height is the screen less what is above it). */
  .ex-head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--col); align-items: end; }
  .ex-head .sheet { grid-column: 1 / -1; }
  .ex-head h1 { margin: 0 0 4px; }
  .ex-lede { max-width: 46ch; padding-bottom: 6px; font-size: 1rem; line-height: 1.45; }
  .ex-stage { position: sticky; top: calc(var(--top-h) + 16px); height: calc(100svh - var(--top-h) - 236px); min-height: 480px; max-height: 860px; }
  .ex-side { position: static; display: block; max-height: none; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; transition: none; }
  .ex-grip { display: none; }
  .ex-scroll { padding: 0; overflow: visible; visibility: visible; }
  .ex-callout { display: grid; }
  .ex-callout[hidden] { display: none; }
  .ex-foot { left: 14px; right: 14px; bottom: 14px; grid-template-columns: minmax(0, 520px); }
  .ex-layers { margin-inline: 0; padding-inline: 0; flex-wrap: wrap; overflow: visible; gap: var(--s-2) var(--s-4); }
  .ex-bar { padding: 8px 14px; }
  .ex-trail { font-size: .8125rem; }
  .ex-find, .ex-find.is-open { position: relative; left: auto; right: auto; top: auto; width: min(300px, 42%); }
  .ex-find input { display: block; }
  .ex-find .ex-find-btn { position: absolute; left: 0; border-color: transparent; background: none; pointer-events: none; }
  .ex-status { left: 14px; }
}
@media (prefers-reduced-motion: reduce) { .ex-s, .ex-map, .ex-veil, .ex-layers button, .ex-side, .ex-callout.is-at, .ex-pt { transition: none; } }