/* Global foundation — imports the Waystone design tokens, then a minimal
   reset establishing the dark Exploration surface as the default. */

/* ─────────────────────────────────────────────────────────────
   Waystone Web — Design System tokens
   Ported verbatim from the WaystoneWebsite design skill
   (colors_and_type.css) and the iOS theme.js (Section C of the
   port inventory). Dark mode is the default / Exploration surface.
   Paper mode is carried for future Reading surfaces.
   Font URLs are rewritten to this repo's src/fonts/ location.
   ───────────────────────────────────────────────────────────── */

/* ── Fonts (8 TTFs copied from WanderPing/assets/fonts) ── */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/CormorantGaramond-Light-Jd3jEDF-.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/CormorantGaramond-LightItalic-nEHpQe_c.ttf') format('truetype');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/CormorantGaramond-Regular-BtKDB5pG.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/CormorantGaramond-SemiBold-AmV_v4Jw.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('/assets/CormorantGaramond-Bold-Q3jUdXm6.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/DMSans-Regular-Dvt-avFb.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/DMSans-Medium-BjjbzgJR.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('/assets/DMSans-Bold-DRMr3LYH.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* DM Mono is referenced in the brand doc but not bundled — JetBrains Mono
   substituted as fallback (flagged in the design skill). */

:root {
  /* ─────────── DARK MODE (default / Exploration) ─────────── */
  --void:         #0B0D12;   /* design-skill primary dark background */
  --surface:      #11141C;   /* cards, bottom sheets */
  --raised:       #181C28;   /* elevated, modals */
  --raised-2:     #232940;   /* higher elevation */

  /* App-code background (theme.js THEME.colors.background) — the canonical
     page background the inventory Section C / Part 1 mandates. */
  --background:   #0a0f1a;

  --gold:         #C9A84C;   /* primary accent — use sparingly */
  --gold-dim:     #7A6228;   /* inactive gold, rules */
  --gold-bright:  #F0D080;   /* shimmer peak */
  --gold-deep:    #3A2A08;   /* dark gold shadow */

  /* App-code gold (softer variant used in theme.js) */
  --gold-soft:        #F4D58D;
  --gold-soft-dark:   #D4A03C;
  --gold-soft-light:  #F7E4A8;

  --moonlight:    #EDE9E2;   /* primary text on dark */
  --mist:         #7A8090;   /* secondary text on dark */
  --shadow-fg:    #363B48;   /* tertiary / disabled */

  --user-blue:    #4A90D9;   /* custom user pins, own messages */
  --ancient-blue: #4A9ECC;   /* Ancient Ground cyan glow */
  --error:        #E85D5D;

  /* Foreground semantic aliases (dark default) */
  --fg1: var(--moonlight);
  --fg2: var(--mist);
  --fg3: var(--shadow-fg);
  --accent: var(--gold);
  --accent-dim: var(--gold-dim);

  --bg1: var(--void);
  --bg2: var(--surface);
  --bg3: var(--raised);

  --rule: rgba(201, 168, 76, 0.12);         /* hairline divider */
  --rule-strong: rgba(201, 168, 76, 0.30);
  --surface-border: rgba(244, 213, 141, 0.08);

  /* Glass fill for map controls / overlay surfaces (design skill) */
  --glass: rgba(10, 15, 26, 0.82);

  /* ─────────── Type families ─────────── */
  --font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, serif;
  --font-body:    'DM Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ─────────── Type scale (px) ─────────── */
  --fs-wordmark:   96px;
  --fs-hero:       58px;
  --fs-h1:         40px;
  --fs-h2:         34px;
  --fs-h3:         28px;
  --fs-pull:       22px;
  --fs-ui-heading: 22px;
  --fs-lg:         17px;
  --fs-body:       15px;
  --fs-sm:         13px;
  --fs-xs:         11px;
  --fs-label:      10px;
  --fs-coord:      11px;

  /* ─────────── Spacing (4-based) ─────────── */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 24px;
  --sp-xl: 32px;
  --sp-xxl: 48px;

  /* ─────────── Radii ─────────── */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 28px;

  /* ─────────── Elevation ─────────── */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.30);
  --shadow-sheet: 0 -8px 24px rgba(0,0,0,0.45);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.60);
  --inner-top-dark: inset 0 1px 0 rgba(255,255,255,0.05);

  /* Gold glow — used on active pills, CTAs, focused controls */
  --glow-gold: 0 0 0 1px rgba(201,168,76,0.30), 0 0 24px rgba(201,168,76,0.18);

  /* Tracking */
  --tr-label: 0.15em;
  --tr-cap:   0.08em;
  --tr-body:  0.02em;
  --tr-display: 0.015em;

  /* Standard easing (design skill: out-cubic) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ─────────── PAPER MODE (carried for future Reading surfaces) ─────────── */

[data-mode="paper"] {
  --laid:       #FBF6E9;
  --vellum:     #F3EAD2;
  --gilt:       #8B6820;
  --gilt-light: #BF9A40;
  --ink:        #1C1710;
  --ink-mid:    #4A4238;
  --ink-faint:  #8A8070;

  --fg1: var(--ink);
  --fg2: var(--ink-mid);
  --fg3: var(--ink-faint);
  --accent: var(--gilt);
  --accent-dim: var(--gilt-light);

  --bg1: var(--laid);
  --bg2: var(--vellum);
  --bg3: #E8DDBE;

  --rule: rgba(139, 104, 32, 0.22);
  --rule-strong: rgba(139, 104, 32, 0.50);
  --surface-border: rgba(139, 104, 32, 0.18);

  --shadow-card: 0 2px 6px rgba(92,70,24,0.18);
  --glow-gold: 0 0 0 1px rgba(139,104,32,0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--background); /* #0a0f1a — no white anywhere */
  color: var(--fg1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden; /* map-first, full-bleed; no page scroll */
}

/* Brand text selection. */

::selection {
  background: rgba(244, 213, 141, 0.25);
  color: var(--moonlight);
}

/* Consistent keyboard focus ring (gold), suppressed for mouse interactions. */

:focus-visible {
  outline: 1.5px solid var(--rule-strong);
  outline-offset: 2px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
input:focus:not(:focus-visible) {
  outline: none;
}

/* ── 4K console scale (BETA-5, 2026-08-13; breakpoint corrected 2026-08-31) ─────
   The console is sized in px and holds its physical proportions to 2560 CSS px of
   viewport. Beyond that (4K at 100% OS scaling) the chrome shrinks to ~13% of the
   screen with small type, so the UI surfaces — and ONLY the UI surfaces — scale up.
   `zoom` rather than transform: it reflows layout (no blurry rasterised text), is
   supported in Chrome/Edge/Safari and Firefox 126+, and older Firefox simply keeps
   the small-but-correct layout. The MAP is untouched: zooming the canvas would
   CSS-stretch WebGL output and soften every tile.

   BOTH DIMENSIONS ARE PART OF THE TEST. `min-width` on its own also matches ULTRAWIDE
   monitors — 3440x1440 and 5120x1440 are 4K-WIDE but 1440p-TALL — where the chrome is
   not small and there is no spare vertical room at all. Scaling a full-height sidebar
   by 1.3 on a 1440-tall screen makes it read as oversized and pushes its own content
   into a scroll, which is what it was reported doing. A large console is one that is
   large in BOTH directions, so the height is tested too.

   TWO SURFACES ARE DELIBERATELY EXCLUDED, both for the same reason: their footprint is
   a geometry contract with the map camera, and scaling one side of a contract breaks it.
     · the tour panel — its size is TOUR_PANEL in tourEngine.js, which the camera uses as
       viewport padding; scaling one without the other nudges the reticle off its subject.
     · `.callout` — its left/top are written by map.project() (POICallout.jsx). `zoom`
       scales an element's whole coordinate system, so it multiplies the USED VALUE of
       left/top as well as the size: an element written to left:1000px lands at x=1300
       under zoom 1.3 (measured). Zooming the wrapper therefore slid the card off its pin
       by (zoom − 1) × the pin's distance from the map origin. It scales its CARD instead
       — see POICallout.css, which must be kept in step with the factor below. */

@media (min-width: 2800px) and (min-height: 1700px) {
  .sidebar,
  .searchdock,
  .romansite,
  .rightdock,
  .lidar-sundial,
  .np-panel {
    zoom: 1.3;
  }
}
.maplibregl-map{font:12px/20px Helvetica Neue,Arial,Helvetica,sans-serif;overflow:hidden;position:relative;-webkit-tap-highlight-color:rgb(0 0 0/0)}.maplibregl-canvas{left:0;position:absolute;top:0}.maplibregl-map:fullscreen{height:100%;width:100%}.maplibregl-ctrl-group button.maplibregl-ctrl-compass{touch-action:none}.maplibregl-canvas-container.maplibregl-interactive,.maplibregl-ctrl-group button.maplibregl-ctrl-compass{cursor:grab;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-canvas-container.maplibregl-interactive.maplibregl-track-pointer{cursor:pointer}.maplibregl-canvas-container.maplibregl-interactive:active,.maplibregl-ctrl-group button.maplibregl-ctrl-compass:active{cursor:grabbing}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-canvas-container.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:pinch-zoom}.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan,.maplibregl-canvas-container.maplibregl-touch-zoom-rotate.maplibregl-touch-drag-pan .maplibregl-canvas{touch-action:none}.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures,.maplibregl-canvas-container.maplibregl-touch-drag-pan.maplibregl-cooperative-gestures .maplibregl-canvas{touch-action:pan-x pan-y}.maplibregl-ctrl-bottom-left,.maplibregl-ctrl-bottom-right,.maplibregl-ctrl-top-left,.maplibregl-ctrl-top-right{pointer-events:none;position:absolute;z-index:2}.maplibregl-ctrl-top-left{left:0;top:0}.maplibregl-ctrl-top-right{right:0;top:0}.maplibregl-ctrl-bottom-left{bottom:0;left:0}.maplibregl-ctrl-bottom-right{bottom:0;right:0}.maplibregl-ctrl{clear:both;pointer-events:auto;transform:translate(0)}.maplibregl-ctrl-top-left .maplibregl-ctrl{float:left;margin:10px 0 0 10px}.maplibregl-ctrl-top-right .maplibregl-ctrl{float:right;margin:10px 10px 0 0}.maplibregl-ctrl-bottom-left .maplibregl-ctrl{float:left;margin:0 0 10px 10px}.maplibregl-ctrl-bottom-right .maplibregl-ctrl{float:right;margin:0 10px 10px 0}.maplibregl-ctrl-group{background:#fff;border-radius:4px}.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px rgba(0,0,0,.1)}@media (forced-colors:active){.maplibregl-ctrl-group:not(:empty){box-shadow:0 0 0 2px ButtonText}}.maplibregl-ctrl-group button{background-color:transparent;border:0;box-sizing:border-box;cursor:pointer;display:block;height:29px;outline:none;padding:0;width:29px}.maplibregl-ctrl-group button+button{border-top:1px solid #ddd}.maplibregl-ctrl button .maplibregl-ctrl-icon{background-position:50%;background-repeat:no-repeat;display:block;height:100%;width:100%}@media (forced-colors:active){.maplibregl-ctrl-icon{background-color:transparent}.maplibregl-ctrl-group button+button{border-top:1px solid ButtonText}}.maplibregl-ctrl button::-moz-focus-inner{border:0;padding:0}.maplibregl-ctrl-attrib-button:focus,.maplibregl-ctrl-group button:focus{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl button:disabled{cursor:not-allowed}.maplibregl-ctrl button:disabled .maplibregl-ctrl-icon{opacity:.25}@media (hover:hover){.maplibregl-ctrl button:not(:disabled):hover{background-color:rgba(0,0,0,.05)}}.maplibregl-ctrl button:not(:disabled):active{background-color:rgba(0,0,0,.05)}.maplibregl-ctrl-group button:focus:focus-visible{box-shadow:0 0 2px 2px #0096ff}.maplibregl-ctrl-group button:focus:not(:focus-visible){box-shadow:none}.maplibregl-ctrl-group button:focus:first-child{border-radius:4px 4px 0 0}.maplibregl-ctrl-group button:focus:last-child{border-radius:0 0 4px 4px}.maplibregl-ctrl-group button:focus:only-child{border-radius:inherit}.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M10 13c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h9c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 8.5c-.75 0-1.5.75-1.5 1.5v3h-3c-.75 0-1.5.75-1.5 1.5S9.25 16 10 16h3v3c0 .75.75 1.5 1.5 1.5S16 19.75 16 19v-3h3c.75 0 1.5-.75 1.5-1.5S19.75 13 19 13h-3v-3c0-.75-.75-1.5-1.5-1.5'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-fullscreen .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M24 16v5.5c0 1.75-.75 2.5-2.5 2.5H16v-1l3-1.5-4-5.5 1-1 5.5 4 1.5-3zM6 16l1.5 3 5.5-4 1 1-4 5.5 3 1.5v1H7.5C5.75 24 5 23.25 5 21.5V16zm7-11v1l-3 1.5 4 5.5-1 1-5.5-4L6 13H5V7.5C5 5.75 5.75 5 7.5 5zm11 2.5c0-1.75-.75-2.5-2.5-2.5H16v1l3 1.5-4 5.5 1 1 5.5-4 1.5 3h1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-shrink .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M18.5 16c-1.75 0-2.5.75-2.5 2.5V24h1l1.5-3 5.5 4 1-1-4-5.5 3-1.5v-1zM13 18.5c0-1.75-.75-2.5-2.5-2.5H5v1l3 1.5L4 24l1 1 5.5-4 1.5 3h1zm3-8c0 1.75.75 2.5 2.5 2.5H24v-1l-3-1.5L25 5l-1-1-5.5 4L17 5h-1zM10.5 13c1.75 0 2.5-.75 2.5-2.5V5h-1l-1.5 3L5 4 4 5l4 5.5L5 12v1z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-compass .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='m10.5 14 4-8 4 8z'/%3E%3Cpath fill='%23ccc' d='m10.5 16 4 8 4-8z'/%3E%3C/svg%3E")}}.maplibregl-ctrl button.maplibregl-ctrl-globe .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%23333' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-globe-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none' stroke='%2333b5e5' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='8.5'/%3E%3Cpath d='M17.5 11c0 4.819-3.02 8.5-6.5 8.5S4.5 15.819 4.5 11 7.52 2.5 11 2.5s6.5 3.681 6.5 8.5Z'/%3E%3Cpath d='M13.5 11c0 2.447-.331 4.64-.853 6.206-.262.785-.562 1.384-.872 1.777-.314.399-.58.517-.775.517s-.461-.118-.775-.517c-.31-.393-.61-.992-.872-1.777C8.831 15.64 8.5 13.446 8.5 11s.331-4.64.853-6.206c.262-.785.562-1.384.872-1.777.314-.399.58-.517.775-.517s.461.118.775.517c.31.393.61.992.872 1.777.522 1.565.853 3.76.853 6.206Z'/%3E%3Cpath d='M11 7.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138q.07-.058.224-.138c.299-.151.763-.302 1.379-.434C7.378 5.666 9.091 5.5 11 5.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138q-.07.058-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428ZM4.486 6.436ZM11 16.5c-1.909 0-3.622-.166-4.845-.428-.616-.132-1.08-.283-1.379-.434a1.3 1.3 0 0 1-.224-.138 1.3 1.3 0 0 1 .224-.138c.299-.151.763-.302 1.379-.434C7.378 14.666 9.091 14.5 11 14.5s3.622.166 4.845.428c.616.132 1.08.283 1.379.434.105.053.177.1.224.138a1.3 1.3 0 0 1-.224.138c-.299.151-.763.302-1.379.434-1.223.262-2.936.428-4.845.428Zm-6.514-1.064ZM11 12.5c-2.46 0-4.672-.222-6.255-.574-.796-.177-1.406-.38-1.805-.59a1.5 1.5 0 0 1-.39-.272.3.3 0 0 1-.047-.064.3.3 0 0 1 .048-.064c.066-.073.189-.167.389-.272.399-.21 1.009-.413 1.805-.59C6.328 9.722 8.54 9.5 11 9.5s4.672.222 6.256.574c.795.177 1.405.38 1.804.59.2.105.323.2.39.272a.3.3 0 0 1 .047.064.3.3 0 0 1-.048.064 1.4 1.4 0 0 1-.389.272c-.399.21-1.009.413-1.804.59-1.584.352-3.796.574-6.256.574Zm-8.501-1.51v.002zm0 .018v.002zm17.002.002v-.002zm0-.018v-.002z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%23333' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-terrain-enabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='%2333b5e5' viewBox='0 0 22 22'%3E%3Cpath d='m1.754 13.406 4.453-4.851 3.09 3.09 3.281 3.277.969-.969-3.309-3.312 3.844-4.121 6.148 6.886h1.082v-.855l-7.207-8.07-4.84 5.187L6.169 6.57l-5.48 5.965v.871ZM.688 16.844h20.625v1.375H.688Zm0 0'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23333' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23aaa' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-waiting .maplibregl-ctrl-icon{animation:maplibregl-spin 2s linear infinite}@media (forced-colors:active){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23fff' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23999' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-active-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e58978' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%2333b5e5' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate.maplibregl-ctrl-geolocate-background-error .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23e54e33' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl button.maplibregl-ctrl-geolocate .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3C/svg%3E")}.maplibregl-ctrl button.maplibregl-ctrl-geolocate:disabled .maplibregl-ctrl-icon{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' fill='%23666' viewBox='0 0 20 20'%3E%3Cpath d='M10 4C9 4 9 5 9 5v.1A5 5 0 0 0 5.1 9H5s-1 0-1 1 1 1 1 1h.1A5 5 0 0 0 9 14.9v.1s0 1 1 1 1-1 1-1v-.1a5 5 0 0 0 3.9-3.9h.1s1 0 1-1-1-1-1-1h-.1A5 5 0 0 0 11 5.1V5s0-1-1-1m0 2.5a3.5 3.5 0 1 1 0 7 3.5 3.5 0 1 1 0-7'/%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Cpath fill='red' d='m14 5 1 1-9 9-1-1z'/%3E%3C/svg%3E")}}@keyframes maplibregl-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E");background-repeat:no-repeat;cursor:pointer;display:block;height:23px;margin:0 0 -4px -4px;overflow:hidden;width:88px}a.maplibregl-ctrl-logo.maplibregl-compact{width:14px}@media (forced-colors:active){a.maplibregl-ctrl-logo{background-color:transparent;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}@media (forced-colors:active) and (prefers-color-scheme:light){a.maplibregl-ctrl-logo{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='23' fill='none'%3E%3Cpath fill='%23000' fill-opacity='.4' fill-rule='evenodd' d='M17.408 16.796h-1.827l2.501-12.095h.198l3.324 6.533.988 2.19.988-2.19 3.258-6.533h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.929 5.644h-.098l-2.914-5.644-.757-1.71-.345 1.71zm1.958-3.42-.726 3.663a1.255 1.255 0 0 1-1.232 1.011h-1.827a1.255 1.255 0 0 1-1.229-1.509l2.501-12.095a1.255 1.255 0 0 1 1.23-1.001h.197a1.25 1.25 0 0 1 1.12.685l3.19 6.273 3.125-6.263a1.25 1.25 0 0 1 1.123-.695h.181a1.255 1.255 0 0 1 1.227.991l1.443 6.71a5 5 0 0 1 .314-.787l.009-.016a4.6 4.6 0 0 1 1.777-1.887c.782-.46 1.668-.667 2.611-.667a4.6 4.6 0 0 1 1.7.32l.306.134c.21-.16.474-.256.759-.256h1.694a1.255 1.255 0 0 1 1.212.925 1.255 1.255 0 0 1 1.212-.925h1.711c.284 0 .545.094.755.252.613-.3 1.312-.45 2.075-.45 1.356 0 2.557.445 3.482 1.4q.47.48.763 1.064V4.701a1.255 1.255 0 0 1 1.255-1.255h1.86A1.255 1.255 0 0 1 54.44 4.7v9.194h2.217c.19 0 .37.043.532.118v-4.77c0-.356.147-.678.385-.906a2.42 2.42 0 0 1-.682-1.71c0-.665.267-1.253.735-1.7a2.45 2.45 0 0 1 1.722-.674 2.43 2.43 0 0 1 1.705.675q.318.302.504.683V4.7a1.255 1.255 0 0 1 1.255-1.255h1.744A1.255 1.255 0 0 1 65.812 4.7v3.335a4.8 4.8 0 0 1 1.526-.246c.938 0 1.817.214 2.59.69a4.47 4.47 0 0 1 1.67 1.743v-.98a1.255 1.255 0 0 1 1.256-1.256h1.777c.233 0 .451.064.639.174a3.4 3.4 0 0 1 1.567-.372c.346 0 .861.02 1.285.232a1.25 1.25 0 0 1 .689 1.004 4.7 4.7 0 0 1 .853-.588c.795-.44 1.675-.647 2.61-.647 1.385 0 2.65.39 3.525 1.396.836.938 1.168 2.173 1.168 3.528q-.001.515-.056 1.051a1.255 1.255 0 0 1-.947 1.09l.408.952a1.255 1.255 0 0 1-.477 1.552c-.418.268-.92.463-1.458.612-.613.171-1.304.244-2.049.244-1.06 0-2.043-.207-2.886-.698l-.015-.008c-.798-.48-1.419-1.135-1.818-1.963l-.004-.008a5.8 5.8 0 0 1-.548-2.512q0-.429.053-.843a1.3 1.3 0 0 1-.333-.086l-.166-.004c-.223 0-.426.062-.643.228-.03.024-.142.139-.142.59v3.883a1.255 1.255 0 0 1-1.256 1.256h-1.777a1.255 1.255 0 0 1-1.256-1.256V15.69l-.032.057a4.8 4.8 0 0 1-1.86 1.833 5.04 5.04 0 0 1-2.484.634 4.5 4.5 0 0 1-1.935-.424 1.25 1.25 0 0 1-.764.258h-1.71a1.255 1.255 0 0 1-1.256-1.255V7.687a2.4 2.4 0 0 1-.428.625c.253.23.412.561.412.93v7.553a1.255 1.255 0 0 1-1.256 1.255h-1.843a1.25 1.25 0 0 1-.894-.373c-.228.23-.544.373-.894.373H51.32a1.255 1.255 0 0 1-1.256-1.255v-1.251l-.061.117a4.7 4.7 0 0 1-1.782 1.884 4.77 4.77 0 0 1-2.485.67 5.6 5.6 0 0 1-1.485-.188l.009 2.764a1.255 1.255 0 0 1-1.255 1.259h-1.729a1.255 1.255 0 0 1-1.255-1.255v-3.537a1.255 1.255 0 0 1-1.167.793h-1.679a1.25 1.25 0 0 1-.77-.263 4.5 4.5 0 0 1-1.945.429c-.885 0-1.724-.21-2.495-.632l-.017-.01a5 5 0 0 1-1.081-.836 1.255 1.255 0 0 1-1.254 1.312h-1.81a1.255 1.255 0 0 1-1.228-.99l-.782-3.625-2.044 3.939a1.25 1.25 0 0 1-1.115.676h-.098a1.25 1.25 0 0 1-1.116-.68l-2.061-3.994zM35.92 16.63l.207-.114.223-.15q.493-.356.735-.785l.061-.118.033 1.332h1.678V9.242h-1.694l-.033 1.267q-.133-.329-.526-.658l-.032-.028a3.2 3.2 0 0 0-.668-.428l-.27-.12a3.3 3.3 0 0 0-1.235-.23q-1.136-.001-1.974.493a3.36 3.36 0 0 0-1.3 1.382q-.445.89-.444 2.074 0 1.2.51 2.107a3.8 3.8 0 0 0 1.382 1.381 3.9 3.9 0 0 0 1.893.477q.795 0 1.455-.33zm-2.789-5.38q-.576.675-.575 1.762 0 1.102.559 1.794.576.675 1.645.675a2.25 2.25 0 0 0 .934-.19 2.2 2.2 0 0 0 .468-.29l.178-.161a2.2 2.2 0 0 0 .397-.561q.244-.5.244-1.15v-.115q0-.708-.296-1.267l-.043-.077a2.2 2.2 0 0 0-.633-.709l-.13-.086-.047-.028a2.1 2.1 0 0 0-1.073-.285q-1.052 0-1.629.692zm2.316 2.706c.163-.17.28-.407.28-.83v-.114c0-.292-.06-.508-.15-.68a.96.96 0 0 0-.353-.389.85.85 0 0 0-.464-.127c-.4 0-.56.114-.664.239l-.01.012c-.148.174-.275.45-.275.945 0 .506.122.801.27.99.097.11.266.224.68.224.303 0 .504-.09.687-.269zm7.545 1.705a2.6 2.6 0 0 0 .331.423q.319.33.755.548l.173.074q.65.255 1.49.255 1.02 0 1.844-.493a3.45 3.45 0 0 0 1.316-1.4q.493-.904.493-2.089 0-1.909-.988-2.913-.988-1.02-2.584-1.02-.898 0-1.575.347a3 3 0 0 0-.415.262l-.199.166a3.4 3.4 0 0 0-.64.82V9.242h-1.712v11.553h1.729l-.017-5.134zm.53-1.138q.206.29.48.5l.155.11.053.034q.51.296 1.119.297 1.07 0 1.645-.675.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.435 0-.835.16a2 2 0 0 0-.284.136 2 2 0 0 0-.363.254 2.2 2.2 0 0 0-.46.569l-.082.162a2.6 2.6 0 0 0-.213 1.072v.115q0 .707.296 1.267l.135.211zm.964-.818a1.1 1.1 0 0 0 .367.385.94.94 0 0 0 .476.118c.423 0 .59-.117.687-.23.159-.194.28-.478.28-.95 0-.53-.133-.8-.266-.952l-.021-.025c-.078-.094-.231-.221-.68-.221a1 1 0 0 0-.503.135l-.012.007a.86.86 0 0 0-.335.343c-.073.133-.132.324-.132.614v.115a1.4 1.4 0 0 0 .14.66zm15.7-6.222q.347-.346.346-.856a1.05 1.05 0 0 0-.345-.79 1.18 1.18 0 0 0-.84-.329q-.51 0-.855.33a1.05 1.05 0 0 0-.346.79q0 .51.346.855.345.346.856.346.51 0 .839-.346zm4.337 9.314.033-1.332q.191.403.59.747l.098.081a4 4 0 0 0 .316.224l.223.122a3.2 3.2 0 0 0 1.44.322 3.8 3.8 0 0 0 1.875-.477 3.5 3.5 0 0 0 1.382-1.366q.527-.89.526-2.09 0-1.184-.444-2.073a3.24 3.24 0 0 0-1.283-1.399q-.823-.51-1.942-.51a3.5 3.5 0 0 0-1.527.344l-.086.043-.165.09a3 3 0 0 0-.33.214q-.432.315-.656.707a2 2 0 0 0-.099.198l.082-1.283V4.701h-1.744v12.095zm.473-2.509a2.5 2.5 0 0 0 .566.7q.117.098.245.18l.144.08a2.1 2.1 0 0 0 .975.232q1.07 0 1.645-.675.576-.69.576-1.778 0-1.102-.576-1.777-.56-.691-1.645-.692a2.2 2.2 0 0 0-1.015.235q-.22.113-.415.282l-.15.142a2.1 2.1 0 0 0-.42.594q-.223.479-.223 1.1v.115q0 .705.293 1.26zm2.616-.293c.157-.191.28-.479.28-.967 0-.51-.13-.79-.276-.961l-.021-.026c-.082-.1-.232-.225-.67-.225a.87.87 0 0 0-.681.279l-.012.011c-.154.155-.274.38-.274.807v.115c0 .285.057.499.144.669a1.1 1.1 0 0 0 .367.405c.137.082.28.123.455.123.423 0 .59-.118.686-.23zm8.266-3.013q.345-.13.724-.14l.069-.002q.493 0 .642.099l.247-1.794q-.196-.099-.717-.099a2.3 2.3 0 0 0-.545.063 2 2 0 0 0-.411.148 2.2 2.2 0 0 0-.4.249 2.5 2.5 0 0 0-.485.499 2.7 2.7 0 0 0-.32.581l-.05.137v-1.48h-1.778v7.553h1.777v-3.884q0-.546.159-.943a1.5 1.5 0 0 1 .466-.636 2.5 2.5 0 0 1 .399-.253 2 2 0 0 1 .224-.099zm9.784 2.656.05-.922q0-1.743-.856-2.698-.838-.97-2.584-.97-1.119-.001-2.007.493a3.46 3.46 0 0 0-1.4 1.382q-.493.906-.493 2.106 0 1.07.428 1.975.428.89 1.332 1.432.906.526 2.255.526.973 0 1.668-.185l.044-.012.135-.04q.613-.184.984-.421l-.542-1.267q-.3.162-.642.274l-.297.087q-.51.131-1.3.131-.954 0-1.497-.444a1.6 1.6 0 0 1-.192-.193q-.366-.44-.512-1.234l-.004-.021zm-5.427-1.256-.003.022h3.752v-.138q-.011-.727-.288-1.118a1 1 0 0 0-.156-.176q-.46-.428-1.316-.428-.986 0-1.494.604-.379.45-.494 1.234zm-27.053 2.77V4.7h-1.86v12.095h5.333V15.15zm7.103-5.908v7.553h-1.843V9.242h1.843z'/%3E%3Cpath fill='%23fff' d='m19.63 11.151-.757-1.71-.345 1.71-1.12 5.644h-1.827L18.083 4.7h.197l3.325 6.533.988 2.19.988-2.19L26.839 4.7h.181l2.6 12.095h-1.81l-1.218-5.644-.362-1.71-.658 1.71-2.93 5.644h-.098l-2.913-5.644zm14.836 5.81q-1.02 0-1.893-.478a3.8 3.8 0 0 1-1.381-1.382q-.51-.906-.51-2.106 0-1.185.444-2.074a3.36 3.36 0 0 1 1.3-1.382q.839-.494 1.974-.494a3.3 3.3 0 0 1 1.234.231 3.3 3.3 0 0 1 .97.575q.396.33.527.659l.033-1.267h1.694v7.553H37.18l-.033-1.332q-.279.593-1.02 1.053a3.17 3.17 0 0 1-1.662.444zm.296-1.482q.938 0 1.58-.642.642-.66.642-1.711v-.115q0-.708-.296-1.267a2.2 2.2 0 0 0-.807-.872 2.1 2.1 0 0 0-1.119-.313q-1.053 0-1.629.692-.575.675-.575 1.76 0 1.103.559 1.795.577.675 1.645.675zm6.521-6.237h1.711v1.4q.906-1.597 2.83-1.597 1.596 0 2.584 1.02.988 1.005.988 2.914 0 1.185-.493 2.09a3.46 3.46 0 0 1-1.316 1.399 3.5 3.5 0 0 1-1.844.493q-.954 0-1.662-.329a2.67 2.67 0 0 1-1.086-.97l.017 5.134h-1.728zm4.048 6.22q1.07 0 1.645-.674.577-.69.576-1.762 0-1.119-.576-1.777-.558-.675-1.645-.675-.592 0-1.12.296-.51.28-.822.823-.296.527-.296 1.234v.115q0 .708.296 1.267.313.543.823.855.51.296 1.119.297z'/%3E%3Cpath fill='%23e1e3e9' d='M51.325 4.7h1.86v10.45h3.473v1.646h-5.333zm7.12 4.542h1.843v7.553h-1.843zm.905-1.415a1.16 1.16 0 0 1-.856-.346 1.17 1.17 0 0 1-.346-.856 1.05 1.05 0 0 1 .346-.79q.346-.329.856-.329.494 0 .839.33a1.05 1.05 0 0 1 .345.79 1.16 1.16 0 0 1-.345.855q-.33.346-.84.346zm7.875 9.133a3.17 3.17 0 0 1-1.662-.444q-.723-.46-1.004-1.053l-.033 1.332h-1.71V4.701h1.743v4.657l-.082 1.283q.279-.658 1.086-1.119a3.5 3.5 0 0 1 1.778-.477q1.119 0 1.942.51a3.24 3.24 0 0 1 1.283 1.4q.445.888.444 2.072 0 1.201-.526 2.09a3.5 3.5 0 0 1-1.382 1.366 3.8 3.8 0 0 1-1.876.477zm-.296-1.481q1.069 0 1.645-.675.577-.69.577-1.778 0-1.102-.577-1.776-.56-.691-1.645-.692a2.12 2.12 0 0 0-1.58.659q-.642.641-.642 1.694v.115q0 .71.296 1.267a2.4 2.4 0 0 0 .807.872 2.1 2.1 0 0 0 1.119.313zm5.927-6.237h1.777v1.481q.263-.757.856-1.217a2.14 2.14 0 0 1 1.349-.46q.527 0 .724.098l-.247 1.794q-.149-.099-.642-.099-.774 0-1.416.494-.626.493-.626 1.58v3.883h-1.777V9.242zm9.534 7.718q-1.35 0-2.255-.526-.904-.543-1.332-1.432a4.6 4.6 0 0 1-.428-1.975q0-1.2.493-2.106a3.46 3.46 0 0 1 1.4-1.382q.889-.495 2.007-.494 1.744 0 2.584.97.855.956.856 2.7 0 .444-.05.92h-5.43q.18 1.005.708 1.45.542.443 1.497.443.79 0 1.3-.131a4 4 0 0 0 .938-.362l.542 1.267q-.411.263-1.119.46-.708.198-1.711.197zm1.596-4.558q.016-1.02-.444-1.432-.46-.428-1.316-.428-1.728 0-1.991 1.86z'/%3E%3Cpath d='M5.074 15.948a.484.657 0 0 0-.486.659v1.84a.484.657 0 0 0 .486.659h4.101a.484.657 0 0 0 .486-.659v-1.84a.484.657 0 0 0-.486-.659zm3.56 1.16H5.617v.838h3.017z' style='fill:%23fff;fill-rule:evenodd;stroke-width:1.03600001'/%3E%3Cg style='stroke-width:1.12603545'%3E%3Cpath d='M-9.408-1.416c-3.833-.025-7.056 2.912-7.08 6.615-.02 3.08 1.653 4.832 3.107 6.268.903.892 1.721 1.74 2.32 2.902l-.525-.004c-.543-.003-.992.304-1.24.639a1.87 1.87 0 0 0-.362 1.121l-.011 1.877c-.003.402.104.787.347 1.125.244.338.688.653 1.23.656l4.142.028c.542.003.99-.306 1.238-.641a1.87 1.87 0 0 0 .363-1.121l.012-1.875a1.87 1.87 0 0 0-.348-1.127c-.243-.338-.688-.653-1.23-.656l-.518-.004c.597-1.145 1.425-1.983 2.348-2.87 1.473-1.414 3.18-3.149 3.2-6.226-.016-3.59-2.923-6.684-6.993-6.707m-.006 1.1v.002c3.274.02 5.92 2.532 5.9 5.6-.017 2.706-1.39 4.026-2.863 5.44-1.034.994-2.118 2.033-2.814 3.633-.018.041-.052.055-.075.065q-.013.004-.02.01a.34.34 0 0 1-.226.084.34.34 0 0 1-.224-.086l-.092-.077c-.699-1.615-1.768-2.669-2.781-3.67-1.454-1.435-2.797-2.762-2.78-5.478.02-3.067 2.7-5.545 5.975-5.523m-.02 2.826c-1.62-.01-2.944 1.315-2.955 2.96-.01 1.646 1.295 2.988 2.916 2.999h.002c1.621.01 2.943-1.316 2.953-2.961.011-1.646-1.294-2.988-2.916-2.998m-.005 1.1c1.017.006 1.829.83 1.822 1.89s-.83 1.874-1.848 1.867c-1.018-.006-1.829-.83-1.822-1.89s.83-1.874 1.848-1.868m-2.155 11.857 4.14.025c.271.002.49.305.487.676l-.013 1.875c-.003.37-.224.67-.495.668l-4.14-.025c-.27-.002-.487-.306-.485-.676l.012-1.875c.003-.37.224-.67.494-.668' style='color:%23000;font-style:normal;font-variant:normal;font-weight:400;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:evenodd;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23000;solid-opacity:1;vector-effect:none;fill:%23000;fill-opacity:.4;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-9.415-.316C-12.69-.338-15.37 2.14-15.39 5.207c-.017 2.716 1.326 4.041 2.78 5.477 1.013 1 2.081 2.055 2.78 3.67l.092.076a.34.34 0 0 0 .225.086.34.34 0 0 0 .227-.083l.019-.01c.022-.009.057-.024.074-.064.697-1.6 1.78-2.64 2.814-3.634 1.473-1.414 2.847-2.733 2.864-5.44.02-3.067-2.627-5.58-5.901-5.601m-.057 8.784c1.621.011 2.944-1.315 2.955-2.96.01-1.646-1.295-2.988-2.916-2.999-1.622-.01-2.945 1.315-2.955 2.96s1.295 2.989 2.916 3' style='clip-rule:evenodd;fill:%23e1e3e9;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3Cpath d='M-11.594 15.465c-.27-.002-.492.297-.494.668l-.012 1.876c-.003.371.214.673.485.675l4.14.027c.271.002.492-.298.495-.668l.012-1.877c.003-.37-.215-.672-.485-.674z' style='clip-rule:evenodd;fill:%23fff;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.47727823;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:.4' transform='translate(15.553 2.85)scale(.88807)'/%3E%3C/g%3E%3C/svg%3E")}}.maplibregl-ctrl.maplibregl-ctrl-attrib{background-color:hsla(0,0%,100%,.5);margin:0;padding:0 5px}@media screen{.maplibregl-ctrl-attrib.maplibregl-compact{background-color:#fff;border-radius:12px;box-sizing:content-box;color:#000;margin:10px;min-height:20px;padding:2px 24px 2px 0;position:relative}.maplibregl-ctrl-attrib.maplibregl-compact-show{padding:2px 28px 2px 8px;visibility:visible}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact-show,.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact-show{border-radius:12px;padding:2px 8px 2px 28px}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-inner{display:none}.maplibregl-ctrl-attrib-button{background-color:hsla(0,0%,100%,.5);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E");border:0;border-radius:12px;box-sizing:border-box;cursor:pointer;display:none;height:24px;outline:none;position:absolute;right:0;top:0;width:24px}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button{-webkit-appearance:none;-moz-appearance:none;appearance:none;list-style:none}.maplibregl-ctrl-attrib summary.maplibregl-ctrl-attrib-button::-webkit-details-marker{display:none}.maplibregl-ctrl-bottom-left .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-top-left .maplibregl-ctrl-attrib-button{left:0}.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button,.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-inner{display:block}.maplibregl-ctrl-attrib.maplibregl-compact-show .maplibregl-ctrl-attrib-button{background-color:rgba(0,0,0,.05)}.maplibregl-ctrl-bottom-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;right:0}.maplibregl-ctrl-top-right>.maplibregl-ctrl-attrib.maplibregl-compact:after{right:0;top:0}.maplibregl-ctrl-top-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{left:0;top:0}.maplibregl-ctrl-bottom-left>.maplibregl-ctrl-attrib.maplibregl-compact:after{bottom:0;left:0}}@media screen and (forced-colors:active){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='%23fff' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}@media screen and (forced-colors:active) and (prefers-color-scheme:light){.maplibregl-ctrl-attrib.maplibregl-compact:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill-rule='evenodd' viewBox='0 0 20 20'%3E%3Cpath d='M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0'/%3E%3C/svg%3E")}}.maplibregl-ctrl-attrib a{color:rgba(0,0,0,.75);text-decoration:none}.maplibregl-ctrl-attrib a:hover{color:inherit;text-decoration:underline}.maplibregl-attrib-empty{display:none}.maplibregl-ctrl-scale{background-color:hsla(0,0%,100%,.75);border:2px solid #333;border-top:#333;box-sizing:border-box;color:#333;font-size:10px;padding:0 5px;white-space:nowrap}.maplibregl-popup{display:flex;left:0;pointer-events:none;position:absolute;top:0;will-change:transform}.maplibregl-popup-anchor-top,.maplibregl-popup-anchor-top-left,.maplibregl-popup-anchor-top-right{flex-direction:column}.maplibregl-popup-anchor-bottom,.maplibregl-popup-anchor-bottom-left,.maplibregl-popup-anchor-bottom-right{flex-direction:column-reverse}.maplibregl-popup-anchor-left{flex-direction:row}.maplibregl-popup-anchor-right{flex-direction:row-reverse}.maplibregl-popup-tip{border:10px solid transparent;height:0;width:0;z-index:1}.maplibregl-popup-anchor-top .maplibregl-popup-tip{align-self:center;border-bottom-color:#fff;border-top:none}.maplibregl-popup-anchor-top-left .maplibregl-popup-tip{align-self:flex-start;border-bottom-color:#fff;border-left:none;border-top:none}.maplibregl-popup-anchor-top-right .maplibregl-popup-tip{align-self:flex-end;border-bottom-color:#fff;border-right:none;border-top:none}.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{align-self:center;border-bottom:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-start;border-bottom:none;border-left:none;border-top-color:#fff}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-end;border-bottom:none;border-right:none;border-top-color:#fff}.maplibregl-popup-anchor-left .maplibregl-popup-tip{align-self:center;border-left:none;border-right-color:#fff}.maplibregl-popup-anchor-right .maplibregl-popup-tip{align-self:center;border-left-color:#fff;border-right:none}[dir=rtl] .maplibregl-popup-anchor-left{flex-direction:row-reverse}[dir=rtl] .maplibregl-popup-anchor-right{flex-direction:row}[dir=rtl] .maplibregl-popup-anchor-top-left .maplibregl-popup-tip{align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-top-right .maplibregl-popup-tip{align-self:flex-start}[dir=rtl] .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip{align-self:flex-end}[dir=rtl] .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip{align-self:flex-start}.maplibregl-popup-close-button{background-color:transparent;border:0;border-radius:0 3px 0 0;cursor:pointer;position:absolute;right:0;top:0}.maplibregl-popup-close-button:hover{background-color:rgba(0,0,0,.05)}.maplibregl-popup-content{background:#fff;border-radius:3px;box-shadow:0 1px 2px rgba(0,0,0,.1);padding:15px 10px;pointer-events:auto;position:relative}.maplibregl-popup-anchor-top-left .maplibregl-popup-content{border-top-left-radius:0}.maplibregl-popup-anchor-top-right .maplibregl-popup-content{border-top-right-radius:0}.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content{border-bottom-left-radius:0}.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content{border-bottom-right-radius:0}.maplibregl-popup-track-pointer{display:none}.maplibregl-popup-track-pointer *{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.maplibregl-map:hover .maplibregl-popup-track-pointer{display:flex}.maplibregl-map:active .maplibregl-popup-track-pointer{display:none}.maplibregl-marker{left:0;position:absolute;top:0;transition:opacity .2s;will-change:transform}.maplibregl-user-location-dot,.maplibregl-user-location-dot:before{background-color:#1da1f2;border-radius:50%;height:15px;width:15px}.maplibregl-user-location-dot:before{animation:maplibregl-user-location-dot-pulse 2s infinite;content:"";position:absolute}.maplibregl-user-location-dot:after{border:2px solid #fff;border-radius:50%;box-shadow:0 0 3px rgba(0,0,0,.35);box-sizing:border-box;content:"";height:19px;left:-2px;position:absolute;top:-2px;width:19px}@media (prefers-reduced-motion:reduce){.maplibregl-user-location-dot:before{animation:none}}@keyframes maplibregl-user-location-dot-pulse{0%{opacity:1;transform:scale(1)}70%{opacity:0;transform:scale(3)}to{opacity:0;transform:scale(1)}}.maplibregl-user-location-dot-stale{background-color:#aaa}.maplibregl-user-location-dot-stale:after{display:none}.maplibregl-user-location-accuracy-circle{background-color:#1da1f233;border-radius:100%;height:1px;width:1px}.maplibregl-crosshair,.maplibregl-crosshair .maplibregl-interactive,.maplibregl-crosshair .maplibregl-interactive:active{cursor:crosshair}.maplibregl-boxzoom{background:#fff;border:2px dotted #202020;height:0;left:0;opacity:.5;position:absolute;top:0;width:0}.maplibregl-cooperative-gesture-screen{align-items:center;background:rgba(0,0,0,.4);color:#fff;display:flex;font-size:1.4em;inset:0;justify-content:center;line-height:1.2;opacity:0;padding:1rem;pointer-events:none;position:absolute;transition:opacity 1s ease 1s;z-index:99999}.maplibregl-cooperative-gesture-screen.maplibregl-show{opacity:1;transition:opacity .05s}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:none}@media (hover:none),(pointer:coarse){.maplibregl-cooperative-gesture-screen .maplibregl-desktop-message{display:none}.maplibregl-cooperative-gesture-screen .maplibregl-mobile-message{display:block}}.maplibregl-pseudo-fullscreen{height:100%!important;left:0!important;position:fixed!important;top:0!important;width:100%!important;z-index:99999}/* MapView — full-bleed basemap + Waystone dark/gold restyle of the
   default MapLibre GL JS controls (which ship light/white). */

.ws-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--background); /* prevents any white flash before tiles paint */
}

/* ── Control group: glass-dark surface with a 1px gold border (design skill:
   map controls use rgba(10,15,26,0.82) + 1px gold border). ── */
.ws-map .maplibregl-ctrl-group {
  background: var(--glass);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Hairline gold divider between stacked buttons (design skill list rule). */
.ws-map .maplibregl-ctrl-group button + button {
  border-top: 1px solid var(--rule);
}

.ws-map .maplibregl-ctrl-group button {
  width: 36px;
  height: 36px;
  background-color: transparent;
  transition: background-color 0.2s var(--ease-out);
}

.ws-map .maplibregl-ctrl-group button:hover {
  background-color: rgba(244, 213, 141, 0.10);
}

.ws-map .maplibregl-ctrl-group button:active {
  background-color: rgba(244, 213, 141, 0.18);
}

.ws-map .maplibregl-ctrl-group button:focus,
.ws-map .maplibregl-ctrl-group button:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}

.ws-map .maplibregl-ctrl-group button:focus:not(:focus-visible) {
  box-shadow: none;
}

/* Disabled (e.g. zoom-in at max zoom) — dim the gold icon. */
.ws-map .maplibregl-ctrl-group button:disabled .maplibregl-ctrl-icon {
  opacity: 0.3;
}

/* ── Gold icons (override MapLibre's dark default SVGs) ──
   gold-soft #F4D58D reads warm on the near-black map, matching the pin gold. */
.ws-map .maplibregl-ctrl-zoom-in .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5 10h10' stroke='%23F4D58D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.ws-map .maplibregl-ctrl-zoom-out .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M5 10h10' stroke='%23F4D58D' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Compass needle — gold north half, mist-grey south half. MapLibre rotates
   this icon with the map bearing, so the arrow tracks north. */
.ws-map .maplibregl-ctrl-compass .maplibregl-ctrl-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M10 2.5l3.4 7.5H6.6z' fill='%23F4D58D'/%3E%3Cpath d='M10 17.5l-3.4-7.5h6.8z' fill='%237A8090'/%3E%3C/svg%3E");
}

/* ── Attribution — dark glass to match. ── */
.ws-map .maplibregl-ctrl-attrib {
  background: var(--glass);
  color: var(--fg2);
  border-radius: var(--r-sm) 0 0 0;
  font-family: var(--font-body);
  font-size: 10px;
}

.ws-map .maplibregl-ctrl-attrib a {
  color: var(--fg2);
}

.ws-map .maplibregl-ctrl-attrib-button {
  filter: invert(1) opacity(0.5);
}
/* GroundProbe — the reading card. Vellum held up to the lantern: one gold sentence,
   quiet margin notes beneath. Follows the cursor, so it must stay light — no blur,
   no shadow spread, hairline border only. */
.gprobe {
  position: absolute;
  z-index: 30;
  width: 286px;
  padding: 10px 12px;
  pointer-events: none;                 /* never steal the map's cursor… */
  background: rgba(10, 15, 26, 0.92);
  border: 1px solid rgba(244, 213, 141, 0.18);
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
}
/* Pinned stays pointer-transparent TOO (review finding: a 286px card was eating drags and
   wheel-zoom over its whole area). Only the ✕ needs a pointer, and a child can re-enable
   events under a pointer-events:none parent. */
.gprobe__close { pointer-events: auto; }

/* The one gold thing: the sentence. Heritage voice — this is the narration register. */
.gprobe__sentence {
  margin: 0 0 6px;
  font-family: var(--font-display, 'Cormorant Garamond', Georgia, serif);
  font-size: 15px;
  line-height: 1.45;
  color: #f4d58d;
}
.gprobe__sentence--dim { color: rgba(237, 233, 226, 0.4); }

.gprobe__rows { display: grid; gap: 2px; }
.gprobe__row {
  display: grid;
  grid-template-columns: 96px auto 1fr;
  gap: 8px;
  align-items: baseline;
}
.gprobe__k { font-size: 11px; color: rgba(237, 233, 226, 0.55); }
.gprobe__v { font-size: 12px; color: rgba(237, 233, 226, 0.88); font-variant-numeric: tabular-nums; }
/* Provenance is the honesty column — always present, deliberately quiet. */
.gprobe__p { font-size: 10px; color: rgba(237, 233, 226, 0.34); text-align: right; }

.gprobe__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 7px;
  padding-top: 5px;
  background: linear-gradient(90deg, rgba(244, 213, 141, 0.18), transparent) top left / 100% 1px no-repeat;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(237, 233, 226, 0.45);
}
.gprobe__close {
  border: 0;
  background: none;
  color: rgba(237, 233, 226, 0.55);
  font-size: 11px;
  cursor: pointer;
  padding: 2px 4px;
}
.gprobe__close:hover { color: #f4d58d; }
/* ProfileChart — the cut, in the console's material.
   The chart is something you READ, so it is cut INTO the sheet: the plot is the well
   recipe (`.inst__plate`), never a pressed key. Gold appears once, on the cursor, because
   the cursor is the one live thing on the plot. Everything else is resting ink. */

.xs-plot {
  border-radius: 12px;
  padding: 8px 10px 9px;
  background: rgba(4, 6, 12, 0.5);
  box-shadow:
    inset  3px  3px 9px rgba(0, 0, 0, 0.8),
    inset -1px -1px 3px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.035);
}

/* Uniform scale into whatever width the sheet gives it. `height: auto` with an unmodified
   viewBox is what keeps vertical exaggeration equal to the printed number — a non-uniform
   fit would silently change the ratio with the window. */
.xs-plot__svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  touch-action: none;              /* a drag along the chart reads the ground, not the page */
}

.xs-plot--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
}
.xs-plot__empty {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: rgba(237, 233, 226, 0.4);
}

/* ── the ground ───────────────────────────────────────────────────────────────────────── */

/* Resting ink, not gold. The trace is the subject but it is not a STATE, and gold here
   would leave nothing left to say "live" with. */
.xs-plot__trace {
  fill: none;
  stroke: rgba(237, 233, 226, 0.74);
  stroke-width: 1;
  stroke-linejoin: miter;
  vector-effect: none;             /* the box is fixed, so the line scales with it, as it should */
}

/* The min/max envelope under the trace, where a chart pixel holds more than one post.
   Same ink, well down, so it reads as the same substance seen less sharply. */
.xs-plot__band {
  fill: rgba(237, 233, 226, 0.16);
  stroke: none;
}

/* Local relief along the line — a different measurement, so a different voice. Cyan is
   already the house's "we computed this from the ground" colour (Ancient Ground). */
.xs-plot__relief {
  fill: none;
  stroke: var(--ancient-blue);
  stroke-width: 1;
  opacity: 0.72;
}

/* ── the frame ────────────────────────────────────────────────────────────────────────── */

/* Datum hairlines, at the same weight as the dividers cut into a readout plate. No
   vertical rules: a graph-paper ground is a banned pattern, and it would also imply a
   horizontal precision the posts do not have. */
.xs-plot__datums line {
  stroke: rgba(255, 255, 255, 0.055);
  stroke-width: 1;
}
.xs-plot__datums text,
.xs-plot__axis text {
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: var(--tr-label, 0.08em);
  font-variant-numeric: tabular-nums;
  fill: rgba(237, 233, 226, 0.36);
}

/* True-length scale bars. The vertical one being far longer than its label is the point:
   it shows the exaggeration rather than asking the reader to take it on trust. */
.xs-plot__bars line {
  stroke: rgba(237, 233, 226, 0.3);
  stroke-width: 1;
}
.xs-plot__bars text {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: var(--tr-label, 0.08em);
  font-variant-numeric: tabular-nums;
  fill: rgba(237, 233, 226, 0.34);
}

/* Where the ground is not reported, and why. Two reasons that must never look alike:
   waiting is temporary and resolves itself; no coverage never will. */
.xs-plot__gap { stroke-width: 2; stroke-linecap: round; }
.xs-plot__gap--pending  { stroke: rgba(237, 233, 226, 0.26); }
.xs-plot__gap--nocover  { stroke: rgba(232, 93, 93, 0.42); }

/* ── the one live thing ───────────────────────────────────────────────────────────────── */

.xs-plot__cursor {
  stroke: var(--gold-soft);
  stroke-width: 1;
  opacity: 0.8;
  filter: drop-shadow(0 0 5px rgba(244, 213, 141, 0.4));
}

.xs-plot__note {
  margin: 7px 2px 0;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: rgba(237, 233, 226, 0.34);
}

@media (prefers-reduced-motion: reduce) {
  .xs-plot__cursor { filter: none; }
}
/* CrossSectionOverlay — the cut, over the map rather than on it.
   See the header of CrossSectionOverlay.jsx for the measurement that put it here: as a
   draped MapLibre layer every update cost 3.3-3.6 s of terrain re-render at a 6x throttle,
   against 101-138 ms in the DOM. */

.xs-ov {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;                 /* over the canvas, under every panel and the search dock */
  /* The sheet is the instrument; the line is a drawing OF it. Only the handles take the
     pointer, or the overlay would swallow every pan and click across the whole map. */
  pointer-events: none;
  overflow: visible;
}

/* Gold, because a cut is live state — the one thing on the map the reader is working on.
   Non-scaling stroke so the line keeps its weight through a pinch-zoom, where the SVG is
   re-projected per frame rather than transformed. */
.xs-ov__line {
  fill: none;
  stroke: var(--gold-soft);
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: butt;
  opacity: 0.92;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 3px rgba(0, 0, 0, 0.55));
}

.xs-ov__end {
  pointer-events: auto;
  cursor: grab;
  fill: #0B0D12;
  stroke: var(--gold-soft);
  stroke-width: 1.6;
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
  transition: r 0.16s ease;
}
.xs-ov__end:hover { r: 8; }
.xs-ov__end:active { cursor: grabbing; }

@media (prefers-reduced-motion: reduce) {
  .xs-ov__end { transition: none; }
}
/* CrossSectionSheet — the cut's reading surface, bottom-centre above the search dock.
   Material: CONSOLE-UI.md §2.6 (glass card), §2.7 (the head), §2.3 (the well — the chart
   itself, in ProfileChart.css). Geometry follows TourPanel.css: same axis, same recipe, so
   the map's floating chrome reads as one column rather than a scatter of boxes.

   The width is WIDER than the tour panel's 660px cap, and that is a measurement rather than
   a preference: the plot box is 720px of chart, and it is fixed so that vertical
   exaggeration stays a property of the ground instead of the window. The SVG scales
   uniformly below that, which preserves the ratio exactly — only a non-uniform fit would
   change it, which is why the chart has no preserveAspectRatio="none".

   Unlike the tour panel this sheet does NOT drive the map's viewport padding, so its height
   is free to follow its content. It is still bounded, and the body scrolls inside it. */

.xs {
  position: fixed;
  bottom: 88px;                 /* clears the 52px search dock at bottom: 24, +12 gap */
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;                  /* over the map + shield (59), under the AG viewer */
  display: flex;
  flex-direction: column;
  gap: 9px;

  /* Same escape from an open sidebar the tour panel makes. `--ws-sidebar-right` is only
     published while the sidebar is open, so every use carries the 0px fallback. */
  --xs-w: min(clamp(360px, calc(100vw - 620px), 812px),
              calc(100vw - var(--ws-sidebar-right, 0px) - 24px));
  width: var(--xs-w);
  margin-left: max(0px, calc(var(--ws-sidebar-right, 0px) + 12px - (50vw - var(--xs-w) / 2)));
  max-height: min(560px, calc(100vh - 160px));
  padding: 12px 14px 13px;

  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background:
    linear-gradient(176deg, rgba(58, 64, 82, 0.16) 0%, rgba(8, 11, 20, 0) 38%),
    linear-gradient(180deg, rgba(10, 13, 23, 0.82) 0%, rgba(5, 8, 16, 0.92) 100%);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.58),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  animation: xs-in 380ms cubic-bezier(0.16, 1, 0.3, 1) both;

  overflow-y: auto;
  /* A scroll here must not chain into the map underneath it. */
  overscroll-behavior: contain;
  touch-action: pan-y;
}
/* The lamp — without it a heavy backdrop-filter over a dark map is just grey. */
.xs::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 70% at 26% -10%, rgba(244, 213, 141, 0.12), transparent 62%);
}
.xs > * { position: relative; z-index: 1; }

@keyframes xs-in {
  from { opacity: 0; transform: translate(-50%, 14px) scale(0.985); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* ── the head: rule · title · rule, with the close button out of the flow so the grid
      reference centres on the panel and not on whatever sits beside it ── */
.xs__head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 0 30px;
}
.xs__head::before,
.xs__head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 213, 141, 0.26));
}
.xs__head::after { background: linear-gradient(90deg, rgba(244, 213, 141, 0.26), transparent); }
.xs__head h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.055em;
  /* A grid reference is copied down digit by digit, so its columns must not shift. */
  font-variant-numeric: tabular-nums;
  color: var(--gold);
  white-space: nowrap;
}
.xs__close {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

/* ── what to do next, and what went wrong ── */
.xs__prompt {
  margin: 2px 0;
  padding: 14px 4px;
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: rgba(237, 233, 226, 0.62);
}
.xs__prompt--bad { color: rgba(232, 93, 93, 0.86); }

/* ── how the line gets drawn: two points, or a point and a bearing ── */
.xs__how {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 2px 0;
}
.xs__seg { align-self: center; }

.xs__fields {
  display: flex;
  justify-content: center;
  gap: 14px;
}
/* A readout you type into is still a readout, so the input sits in a well rather than
   standing proud like a key. */
.xs__field {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label, 0.12em);
  color: rgba(237, 233, 226, 0.4);
}
.xs__field input {
  width: 72px;
  border: 0;
  border-radius: 8px;
  padding: 5px 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  /* A bearing is copied off a map and typed back in; its digits must not shift column. */
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(237, 233, 226, 0.9);
  background: rgba(4, 6, 12, 0.5);
  box-shadow:
    inset  2px  2px 6px rgba(0, 0, 0, 0.6),
    inset -1px -1px 3px rgba(255, 255, 255, 0.03);
}
.xs__field input:focus {
  outline: none;
  box-shadow:
    inset  2px  2px 6px rgba(0, 0, 0, 0.6),
    inset -1px -1px 3px rgba(255, 255, 255, 0.03),
    0 0 0 1px rgba(244, 213, 141, 0.35);
}
.xs__unit {
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(237, 233, 226, 0.5);
}

/* ── four slots that never move ── */
.xs__gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.xs__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 2px;
}
.xs__gauge + .xs__gauge { border-left: 1px solid rgba(255, 255, 255, 0.055); }
.xs__gaugelabel {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label, 0.12em);
  color: rgba(237, 233, 226, 0.36);
}
.xs__gaugeval {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: rgba(237, 233, 226, 0.82);
}

/* Provenance stays on screen rather than behind a disclosure: an export is evidence, and so
   is the thing on the glass it was exported from. */
.xs__prov {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(237, 233, 226, 0.3);
}

.xs__actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}
/* A key: pressed OUT of the sheet, edged with light rather than a border. */
.xs__btn {
  border: 0;
  border-radius: 13px;
  padding: 7px 15px;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(237, 233, 226, 0.74);
  background: linear-gradient(145deg, rgba(58, 65, 84, 0.72), rgba(15, 20, 32, 0.86));
  box-shadow:
    -2px -2px 5px rgba(255, 255, 255, 0.045),
     3px  3px 8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: transform 0.16s ease, color 0.16s ease;
}
.xs__btn:hover { color: var(--gold-soft); transform: translateY(-1.5px); }
.xs__btn:active { transform: translateY(1.5px); }
/* Live: both lights inverted and the key sunk into the sheet, with a gold bloom in the
   hollow. Gold is STATE here and nowhere else on this row — a second gold key would leave
   nothing to say "on" with. */
.xs__btn.is-on {
  color: var(--gold-soft);
  transform: translateY(1px);
  background: linear-gradient(145deg, rgba(8, 12, 21, 0.9), rgba(36, 42, 58, 0.6));
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.04),
    inset  3px  3px 8px rgba(0, 0, 0, 0.75),
    inset  0    0  16px rgba(244, 213, 141, 0.22),
    0 0 14px rgba(244, 213, 141, 0.12);
}
.xs__btn.is-on:hover { transform: translateY(1px); }

@media (max-width: 860px) {
  .xs {
    left: 12px;
    right: 12px;
    width: auto;
    margin-left: 0;
    transform: none;
    max-height: calc(100vh - 190px);
  }
  @keyframes xs-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  .xs__gauges { grid-template-columns: repeat(2, 1fr); row-gap: 8px; }
  .xs__gauge:nth-child(3) { border-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .xs { animation: none; }
  .xs__btn { transition: color 0.16s ease; }
  .xs__btn:hover, .xs__btn:active { transform: none; }
}

/* The window's own caption. It carries the warning that the widest setting is a landscape
   reading rather than an earthwork one, so it is never hidden behind a disclosure. */
.xs__hint {
  margin: 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(237, 233, 226, 0.42);
}

/* The lid reuses the LiDAR page's own glossary material (.lidarc-guide / .lidarc-glossary),
   so the two surfaces teach in one voice rather than two. Only the margin differs, because
   this sheet is a card and that one is a column. */
.xs__guide { margin-top: 2px; }
/* Share Feedback dialog — web port of the iOS sheet (FeedbackContext.jsx).
   Waystone glass: navy ground, gold hairline edges, warm gold accents. */

.fbk-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;            /* above the sidebar (95) and login modal (100) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 7, 14, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fbk-fade 0.2s var(--ease-out);
}
@keyframes fbk-fade { from { opacity: 0; } to { opacity: 1; } }

.fbk-modal {
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 55% at 50% 0%, rgba(244, 213, 141, 0.05), transparent 60%),
    rgba(10, 14, 24, 0.96);
  border: 1px solid rgba(244, 213, 141, 0.16);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-modal), 0 0 40px rgba(244, 213, 141, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  animation: fbk-rise 0.32s var(--ease-out);
}
@keyframes fbk-rise { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }

.fbk-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 13px;
  border-bottom: 1px solid rgba(244, 213, 141, 0.08);
}
.fbk-title { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: 0.3px; color: var(--gold); }
.fbk-close {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--gold-soft); opacity: 0.7;
  border-radius: var(--r-sm); cursor: pointer;
  transition: background 0.15s var(--ease-out), opacity 0.15s var(--ease-out);
}
.fbk-close:hover { background: rgba(244, 213, 141, 0.08); opacity: 1; }

.fbk-body { flex: 1 1 auto; overflow-y: auto; padding: 20px; }

/* Hero — the "Field Note" framing */
.fbk-hero {
  display: flex; flex-direction: column;
  position: relative; overflow: hidden;
  padding: 20px;
  border: 1px solid rgba(244, 213, 141, 0.18);
  border-radius: var(--r-xl);
  background:
    linear-gradient(135deg, rgba(244, 213, 141, 0.1), rgba(244, 213, 141, 0.02) 50%, transparent),
    rgba(244, 213, 141, 0.03);
}
.fbk-badge {
  display: inline-flex; align-items: center; gap: 7px;
  align-self: flex-start;
  padding: 6px 10px; margin-bottom: 16px;
  border: 1px solid rgba(244, 213, 141, 0.16); border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.03);
  color: var(--gold);
  font: 600 11px/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
}
.fbk-hero-title { margin: 0 0 8px; font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1.08; color: var(--gold); }
.fbk-hero-body { margin: 0 0 18px; font: 400 15px/1.5 var(--font-body); color: var(--fg2); }
.fbk-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.fbk-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-radius: var(--r-pill);
  border: 1px solid rgba(244, 213, 141, 0.12); background: rgba(10, 15, 26, 0.5);
  color: var(--fg2); font: 400 13px/1 var(--font-body);
}
.fbk-pill svg { color: var(--gold); flex: 0 0 auto; }

/* Gilt ornament */
.fbk-orn { display: flex; align-items: center; gap: 16px; margin: 18px 24px; }
.fbk-orn i { flex: 1; height: 1px; background: rgba(244, 213, 141, 0.16); }
.fbk-orn b { font-weight: 400; font-size: 11px; color: var(--gold); opacity: 0.5; }

/* Editor */
.fbk-editor {
  padding: 18px;
  border: 1px solid rgba(244, 213, 141, 0.1); border-radius: var(--r-xl);
  background: rgba(255, 255, 255, 0.025);
}
.fbk-editor-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.fbk-label { font: 600 11px/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg3); }
.fbk-counter { font: 400 11px/1 var(--font-body); color: var(--mist); opacity: 0.85; }
.fbk-input {
  width: 100%; box-sizing: border-box;
  min-height: 200px; max-height: 320px; resize: vertical;
  padding: 14px; border-radius: var(--r-md);
  border: 1px solid rgba(244, 213, 141, 0.1); background: rgba(10, 15, 26, 0.52);
  font: 400 15px/1.5 var(--font-body); color: var(--fg1);
  outline: none; transition: border-color 0.2s var(--ease-out);
}
.fbk-input::placeholder { color: var(--fg3); }
.fbk-input:focus { border-color: rgba(244, 213, 141, 0.4); }
.fbk-helper { display: flex; align-items: center; gap: 8px; margin-top: 14px; color: var(--mist); }
.fbk-helper svg { color: var(--gold); flex: 0 0 auto; }
.fbk-helper span { font: 400 13px/1.4 var(--font-body); }

/* Response cards */
.fbk-resp {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 12px 14px; border-radius: var(--r-md);
  border: 1px solid rgba(244, 213, 141, 0.12); background: rgba(255, 255, 255, 0.025);
  font: 400 13px/1.4 var(--font-body);
}
.fbk-resp--err { color: var(--error); border-color: rgba(232, 93, 93, 0.3); }
.fbk-resp--ok { color: var(--gold-bright); }
.fbk-resp svg { flex: 0 0 auto; }

/* Action bar */
.fbk-foot {
  flex: 0 0 auto;
  padding: 14px 20px 18px;
  border-top: 1px solid rgba(244, 213, 141, 0.1);
  background: rgba(10, 15, 26, 0.5);
}
.fbk-send {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px; border: 0; border-radius: var(--r-pill);
  background: var(--gold); color: var(--background);
  font: 700 15px/1 var(--font-body); cursor: pointer;
  box-shadow: 0 10px 24px rgba(201, 168, 76, 0.2);
  transition: filter 0.18s var(--ease-out), transform 0.12s var(--ease-out);
}
.fbk-send:hover:not(:disabled) { filter: brightness(1.06); }
.fbk-send:active:not(:disabled) { transform: scale(0.99); }
.fbk-send:disabled { background: rgba(244, 213, 141, 0.25); color: rgba(10, 15, 26, 0.6); box-shadow: none; cursor: default; }
.fbk-foot-note { margin: 12px 0 0; text-align: center; font: 400 11px/1.4 var(--font-body); color: var(--mist); opacity: 0.85; }
/* Filter legend content — rehoused inside the Sidebar panel (the standalone
   sidebar wrapper, hamburger toggle, and header now live in Sidebar). */
.filterpanel {
  display: flex;
  flex-direction: column;
}

/* ── Gilt ornament — the page opens / closes ── */
.filters__ornament {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-sm) var(--sp-lg) var(--sp-xs);
}
.filters__rule {
  flex: 1;
  height: 1px;
  background: rgba(244, 213, 141, 0.15);
}
.filters__star {
  font-size: var(--fs-xs);
  color: var(--gold);
  opacity: 0.4;
}

/* ── Count whisper — cartographer's margin note (Cormorant light) ── */
.filters__whisper {
  margin: 0 0 var(--sp-sm);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-sm);
  color: var(--fg2);
  letter-spacing: 0.02em;
}

/* ── Legend grid — cartographic icon cards, 2-up ── */
.filters__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.filtercard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px 8px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  cursor: pointer;
  overflow: hidden;
  transition: background 0.22s var(--ease-out), border-color 0.22s var(--ease-out);
}
.filtercard:hover { background: rgba(244, 213, 141, 0.05); }
.filtercard.is-on {
  background: rgba(244, 213, 141, 0.06);
  border-color: rgba(244, 213, 141, 0.18);
}

/* Radial gold wash on active cards (CSS, mirrors the app's glow PNG). */
.filtercard__glow {
  position: absolute;
  inset: -30% -30% auto -30%;
  height: 170%;
  background: radial-gradient(ellipse at 50% 28%, rgba(244, 213, 141, 0.18), transparent 62%);
  opacity: 0;
  transition: opacity 0.22s var(--ease-out);
  pointer-events: none;
}
.filtercard.is-on .filtercard__glow { opacity: 1; }

/* Cartographic illustration — gold (active) / dim grey (inactive). */
.filtercard__icon {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(42%); /* dim grey */
  opacity: 0.7;
  transition: filter 0.22s var(--ease-out), opacity 0.22s var(--ease-out);
}
.filtercard.is-on .filtercard__icon {
  filter: brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(620%) hue-rotate(2deg) brightness(96%); /* gold */
  opacity: 1;
}

/* Caption — tiny Cormorant cartographic label. */
.filtercard__label {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--fg3);
  text-align: center;
  line-height: 1.1;
}
.filtercard.is-on .filtercard__label { color: var(--fg2); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .filtercard__icon { width: 36px; height: 36px; }
}
@media (max-height: 720px) {
  .filtercard { padding: 9px 4px 7px; }
  .filters__ornament { padding-top: var(--sp-xs); }
}
/* LayersPanel — the console, and the two idioms the side panels borrow from it:
   the engraved row (a line of type with a channel switch) and the legend key.

   The console itself is a plate of physical keys. A key is not a box drawn on the
   sheet, it is a shape pressed OUT of it: same material, lifted by two lights — a cool
   highlight from the upper left, a deep shadow to the lower right — with no border
   anywhere, because the edge is made of light. Switching a layer on inverts both
   lights, so the key sinks into the sheet, and the indented filament at its foot
   fills with the gold. */

/* ══════════════════════════════════════════════════════════════════════
   THE CONSOLE
   ══════════════════════════════════════════════════════════════════════ */

.console { display: flex; flex-direction: column; }

/* The head. Centred to share the masthead's axis, but carried on a rule so it is the
   head of a plate rather than a word floating in the space above one. */
.console__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 5px 0 14px;
}
.console__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 213, 141, 0.26));
}
.console__head .console__rule:last-child {
  background: linear-gradient(90deg, rgba(244, 213, 141, 0.26), transparent);
}
.console__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold);
  white-space: nowrap;
}

.console__plate {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* ── A key ── A face you press, with a well at its right end for the tab. The well is
   reserved on EVERY key, whether or not that layer has controls, so the plate has one
   straight right-hand edge and the filaments all end on the same line. ── */
.ck { position: relative; display: flex; }

.ck__face {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 46px 13px 14px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  /* Warm and readable at rest, not the cool grey captions use: this is the product's
     central control surface and it should not read as fainter than the menu above it. */
  color: rgba(237, 233, 226, 0.74);
  /* The extrusion. A shallow diagonal tone shift is what makes the face read as a
     curved surface rather than a flat fill. */
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.60), rgba(12, 17, 28, 0.76));
  box-shadow:
    -5px -5px 11px rgba(255, 255, 255, 0.035),
     6px  6px 15px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    box-shadow 0.3s var(--ease-out),
    background 0.3s var(--ease-out),
    transform 0.16s var(--ease-out),
    color 0.24s var(--ease-out);
}

/* Hover — the key rises a touch and warms, the way brass does under a lamp. */
.ck__face:not(:disabled):hover {
  transform: translateY(-1.5px);
  color: var(--fg1);
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 0.05),
     8px  8px 19px rgba(0, 0, 0, 0.57),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 0 20px rgba(244, 213, 141, 0.09);
}
.ck__face:not(:disabled):active { transform: translateY(1.5px); }
.ck__face:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 3px; }

/* Live — both lights invert, the key sinks, and a bloom gathers in the hollow. */
.ck.is-on .ck__face {
  transform: translateY(1px);
  color: var(--gold-soft);
  background: linear-gradient(145deg, rgba(9, 13, 23, 0.88), rgba(33, 39, 54, 0.56));
  box-shadow:
    inset -4px -4px 9px rgba(255, 255, 255, 0.035),
    inset  5px  5px 12px rgba(0, 0, 0, 0.72),
    inset  0    0   26px rgba(244, 213, 141, 0.13),
    0 0 16px rgba(244, 213, 141, 0.06);
}
.ck.is-on .ck__face:not(:disabled):hover {
  box-shadow:
    inset -4px -4px 9px rgba(255, 255, 255, 0.045),
    inset  5px  5px 12px rgba(0, 0, 0, 0.72),
    inset  0    0   30px rgba(244, 213, 141, 0.18),
    0 0 22px rgba(244, 213, 141, 0.11);
}
/* Tuning — its controls are the page open beside the panel. */
.ck.is-tuning .ck__face { box-shadow:
    inset -4px -4px 9px rgba(255, 255, 255, 0.045),
    inset  5px  5px 12px rgba(0, 0, 0, 0.72),
    inset  0    0   30px rgba(244, 213, 141, 0.2),
    0 0 24px rgba(244, 213, 141, 0.13); }

.ck.is-soon .ck__face { cursor: default; opacity: 0.42; }

/* The layer's own map ink — desaturated while the layer sleeps, its true colour when
   it wakes, and glowing faintly in that colour once it is drawing on the map. */
.ck__mark {
  display: flex;
  flex: 0 0 auto;
  opacity: 0.68;
  filter: saturate(0.55) brightness(0.9);
  transition: opacity 0.28s var(--ease-out), filter 0.28s var(--ease-out);
}
.ck__face:hover .ck__mark { opacity: 0.9; filter: saturate(0.85) brightness(0.98); }
.ck.is-on .ck__mark { opacity: 1; filter: drop-shadow(0 0 7px currentColor); }

.ck__name {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.15;
  letter-spacing: 0.012em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The filament. A channel cut along the key's lower edge; the ember runs into it and
   fills it when the layer goes live. Along the edge rather than as a stub at the right,
   so it lines up on every key whether or not that key carries a tab — and so the lit
   state reads as the whole key catching light, not as a small meter filling up. */
.ck__filament {
  position: absolute;
  left: 52px;
  right: 46px;
  bottom: 7px;
  height: 2.5px;
  border-radius: 2px;
  /* Shallow when dark: six of these stacked should read as grooves in the plate, not as
     six ruled underlines. The drama belongs to the lit state. */
  background: rgba(3, 5, 11, 0.5);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.7),
    0 1px 0 rgba(255, 255, 255, 0.035);
}
.ck__ember {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.5), var(--gold-soft) 55%, var(--gold-soft));
  box-shadow: 0 0 6px rgba(244, 213, 141, 0.5), 0 0 13px rgba(244, 213, 141, 0.2);
  opacity: 0;
  transform: scaleX(0.04);
  transform-origin: left center;
  transition:
    opacity 0.24s var(--ease-out),
    transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.ck:not(.is-on) .ck__face:hover .ck__ember { opacity: 0.26; transform: scaleX(0.16); }
.ck.is-on .ck__ember { opacity: 1; transform: scaleX(1); }

.ck__soon {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--fg3);
}

/* The tab. Its own narrow key beside the face, present on every layer that has controls
   whether or not that layer is lit — a way IN, in a fixed place, rather than a mark that
   only appears once you have already switched something on. */
.ck__tab {
  position: absolute;
  right: 8px;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: var(--gold-dim);
  /* A small disc standing proud of the key face, so it stays legible whether the face
     beneath it is raised or pressed. */
  background: linear-gradient(145deg, rgba(58, 65, 84, 0.72), rgba(15, 20, 32, 0.86));
  box-shadow:
    -2px -2px 5px rgba(255, 255, 255, 0.045),
     3px  3px 8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition:
    box-shadow 0.28s var(--ease-out),
    background 0.28s var(--ease-out),
    color 0.22s var(--ease-out),
    transform 0.16s var(--ease-out);
}
.ck__tab svg { transition: transform 0.22s var(--ease-out); }
.ck__tab:hover {
  color: var(--gold-soft);
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.06),
     4px  4px 10px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 14px rgba(244, 213, 141, 0.16);
}
.ck__tab:hover svg { transform: translateX(1.5px); }
.ck__tab:active { transform: translateY(1.5px); }
.ck__tab:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 3px; }
/* Its page is the one open beside the panel: the disc is held down and lit. */
.ck.is-tuning .ck__tab {
  color: var(--gold-soft);
  background: linear-gradient(145deg, rgba(8, 12, 21, 0.9), rgba(36, 42, 58, 0.6));
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.04),
    inset  3px  3px 8px rgba(0, 0, 0, 0.75),
    inset  0    0  16px rgba(244, 213, 141, 0.22),
    0 0 14px rgba(244, 213, 141, 0.12);
}
.ck.is-tuning .ck__tab svg { transform: translateX(1px); }

/* Attribution — present exactly while the layer it belongs to is drawing, and absent
   otherwise. Digital Britannia's line is a licence condition, not a courtesy. */
.console__credits {
  margin: 7px 0 0;
  font-family: var(--font-body);
  font-size: 9.5px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--gold-dim);
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  .ck__face { transition: box-shadow 0.2s var(--ease-out), color 0.2s var(--ease-out); }
  .ck__face:hover, .ck__face:active, .ck.is-on .ck__face,
  .ck__tab:active, .ck__tab svg { transform: none; }
  .ck__ember { transition: opacity 0.2s var(--ease-out); }
}

/* ══════════════════════════════════════════════════════════════════════
   THE ENGRAVED ROW — used by the side panels (Roman, Aerial), where a list is
   the right shape because the entries are members of one family rather than
   separate instruments. A row is a line of type with a channel switch cut into
   the sheet at its right edge.
   ══════════════════════════════════════════════════════════════════════ */

.lp { display: flex; flex-direction: column; gap: 7px; }
.lp__entry { display: flex; flex-direction: column; }

/* A sub-layer row is the same object as a key on the console — same material, same
   two lights, same filament — because it does the same job one level down. */
.lp__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 13px 15px;
  border: 0;
  border-radius: 13px;
  text-align: left;
  cursor: pointer;
  color: rgba(237, 233, 226, 0.74);
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.6), rgba(12, 17, 28, 0.76));
  box-shadow:
    -5px -5px 11px rgba(255, 255, 255, 0.035),
     6px  6px 15px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out),
              transform 0.16s var(--ease-out), color 0.22s var(--ease-out);
}
.lp__row:hover { transform: translateY(-1.5px); color: var(--fg1); }
.lp__row:active { transform: translateY(1.5px); }
.lp__row:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 3px; }
.lp__row.is-on {
  transform: translateY(1px);
  color: var(--gold-soft);
  background: linear-gradient(145deg, rgba(9, 13, 23, 0.88), rgba(33, 39, 54, 0.56));
  box-shadow:
    inset -4px -4px 9px rgba(255, 255, 255, 0.035),
    inset  5px  5px 12px rgba(0, 0, 0, 0.72),
    inset  0    0   26px rgba(244, 213, 141, 0.13),
    0 0 16px rgba(244, 213, 141, 0.06);
}
.lp__row.is-off-limits { cursor: default; opacity: 0.45; }

.lp__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lp__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: inherit;
}
.lp__desc {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--fg3);
}
.lp__row.is-on .lp__desc { color: rgba(237, 233, 226, 0.72); }

/* The layer's own map ink, for rows that carry one. */
.lp__ink {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 2px;
  opacity: 0.55;
  transition: opacity 0.18s var(--ease-out);
}
.lp__row.is-on .lp__ink { opacity: 1; }
/* Site extents draw in every period's own colour, so the key is a hollow ring — an
   outline standing for outlines — rather than a swatch pretending one colour is true. */
.lp__ink--hollow {
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(237, 233, 226, 0.5);
}

/* The filament, in the same place and to the same rule as on the plate: a groove along
   the key's lower edge that fills with gold when the sub-layer is drawing. The pill
   switch this replaces was the last control in the product speaking a different
   language from the console. */
.lp__filament {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 6px;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(3, 5, 11, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.035);
}
.lp__ember {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.5), var(--gold-soft) 55%, var(--gold-soft));
  box-shadow: 0 0 6px rgba(244, 213, 141, 0.5), 0 0 13px rgba(244, 213, 141, 0.2);
  opacity: 0;
  transform: scaleX(0.04);
  transform-origin: left center;
  transition: opacity 0.24s var(--ease-out), transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.lp__row:not(.is-on):hover .lp__ember { opacity: 0.26; transform: scaleX(0.16); }
.lp__row.is-on .lp__ember { opacity: 1; transform: scaleX(1); }

.lp__soon {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--fg3);
}

/* The panel's opening note. Roman Britain's is a licence condition, so it is set to be
   read, not to be tucked away — body colour, not the faint tone captions use. */
.lp__credit {
  font-family: var(--font-body);
  font-size: 11.5px;
  line-height: 1.58;
  color: var(--fg2);
  margin: 0 0 12px;
}

@media (prefers-reduced-motion: reduce) {
  .lp__ember { transition: opacity 0.2s var(--ease-out); }
  .lp__row:hover, .lp__row:active, .lp__row.is-on { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   THE LEGEND KEY — shown under a live sub-layer in a side panel, indented so
   it reads as belonging to its row rather than as a new section.
   ══════════════════════════════════════════════════════════════════════ */

/* The legend, in the compartment under the key it explains. */
.layers__key {
  margin: 7px 0 0;
  padding: 11px 13px 12px;
  border-radius: 11px;
  background: rgba(4, 6, 12, 0.4);
  box-shadow:
    inset  2px  2px 6px rgba(0, 0, 0, 0.6),
    inset -1px -1px 3px rgba(255, 255, 255, 0.03);
}
.layers__keyrow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.layers__keyswatch { flex: 0 0 34px; width: 34px; height: 8px; align-self: center; }
/* Section heading inside a key — used where a legend has enough entries to need
   grouping (the Roman sites key runs to ten). */
.layers__keyhead {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: var(--tr-cap, 0.1em);
  color: var(--mist, #7a8090);
  margin: 8px 0 4px;
}
.layers__keyhead:first-child { margin-top: 0; }
/* The rule the family teaches, set as an aside on the heading line — this is the
   sentence that makes the whole symbol set readable, so it sits with the heading. */
.layers__keygloss {
  display: block;
  margin-top: 1px;
  font-family: var(--font-display);
  font-size: 10.5px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mist, #7a8090);
  opacity: 0.9;
}
/* Drawn site symbols. Same 34px column as the line swatches so the rows align whichever
   key is open; height is free so a pillar and a square both sit on the centre line. */
.layers__keyicon {
  flex: 0 0 34px;
  width: 34px;
  height: 17px;
  object-fit: contain;
  align-self: center;
  image-rendering: auto;
}
.layers__keyname {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--moonlight, #ede9e2);
}
.layers__keynote {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--mist, #7a8090);
}
.layers__keyfoot {
  margin: 7px 0 0;
  font-family: var(--font-display);
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--mist, #7a8090);
  opacity: 0.85;
}


/* Legend text, on the recessed compartment ground — same reasoning as the caption
   tiers in LidarControls.css: these are sentences, and mist tested invisible. */
.layers__keyhead  { color: rgba(237, 233, 226, 0.52); }
.layers__keygloss { color: rgba(237, 233, 226, 0.56); opacity: 1; }
.layers__keyname  { color: rgba(237, 233, 226, 0.88); }
.layers__keynote  { color: rgba(237, 233, 226, 0.56); }
.layers__keyfoot  { color: rgba(237, 233, 226, 0.56); opacity: 1; }
.lp__credit       { color: rgba(237, 233, 226, 0.66); }
/* SidePanels — shared styling for the sidebar detail pages (Style, Bookmarks,
   History, Profile, About). Faithful to the iOS sheets: Cormorant headings,
   gilt ✦ ornaments, soft-gold (#f4d58d) accents, understated rows. */

.sp { display: flex; flex-direction: column; }

/* ── Gilt ✦ ornament ── */
.sp-ornament {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
  padding: var(--sp-xs) var(--sp-lg);
}
.sp-ornament__rule { flex: 1; height: 1px; background: rgba(244, 213, 141, 0.15); }
.sp-ornament__star { font-size: var(--fs-xs); color: var(--gold); opacity: 0.4; }

/* ── Section caption ── */
/* The console's head idiom at caption scale: the label, then a hairline running out to
   the margin. It is what makes a page read as part of the same document as the plate. */
.sp-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 16px 0 10px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 0.05em;
  text-align: center;
}
.sp-section::before,
.sp-section::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 213, 141, 0.24));
}
.sp-section::after {
  background: linear-gradient(90deg, rgba(244, 213, 141, 0.24), transparent);
}
.sp-section:first-child { margin-top: 2px; }

/* ── Empty state (Bookmarks / History) ── */
.sp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-xl) var(--sp-md);
  gap: var(--sp-xs);
}
.sp-empty__star { font-size: 18px; color: var(--gold); opacity: 0.5; margin-bottom: var(--sp-xs); }
.sp-empty__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--fg2);
  letter-spacing: 0.01em;
}
.sp-empty__body {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: var(--fs-sm);
  line-height: 1.45;
  color: var(--fg3);
  max-width: 230px;
}

/* ── Narrator cards (Style) ── */
.sp-narrators { display: flex; flex-direction: column; gap: 7px; }

/* A chosen card is the same object as a lit key on the console: a shape pressed out of
   the sheet by two lights, with no border anywhere, that sinks and gathers a bloom when
   you choose it, and lights the filament along its lower edge. */
.sp-narrator {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 13px 13px 16px 6px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.60), rgba(12, 17, 28, 0.76));
  box-shadow:
    -5px -5px 11px rgba(255, 255, 255, 0.035),
     6px  6px 15px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    box-shadow 0.3s var(--ease-out),
    background 0.3s var(--ease-out),
    transform 0.16s var(--ease-out);
}
/* The groove, and the ember that fills it. */
.sp-narrator::before,
.sp-narrator::after {
  content: '';
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 7px;
  height: 2.5px;
  border-radius: 2px;
  pointer-events: none;
}
.sp-narrator::before {
  background: rgba(3, 5, 11, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.035);
}
.sp-narrator::after {
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.5), var(--gold-soft) 55%, var(--gold-soft));
  box-shadow: 0 0 6px rgba(244, 213, 141, 0.5), 0 0 13px rgba(244, 213, 141, 0.2);
  opacity: 0;
  transform: scaleX(0.04);
  transform-origin: left center;
  transition: opacity 0.24s var(--ease-out), transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.sp-narrator:hover {
  transform: translateY(-1.5px);
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 0.05),
     8px  8px 19px rgba(0, 0, 0, 0.57),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 0 20px rgba(244, 213, 141, 0.09);
}
.sp-narrator:not(.is-on):hover::after { opacity: 0.26; transform: scaleX(0.16); }
.sp-narrator:active { transform: translateY(1.5px); }
.sp-narrator:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 3px; }
.sp-narrator.is-on {
  transform: translateY(1px);
  background: linear-gradient(145deg, rgba(9, 13, 23, 0.88), rgba(33, 39, 54, 0.56));
  box-shadow:
    inset -4px -4px 9px rgba(255, 255, 255, 0.035),
    inset  5px  5px 12px rgba(0, 0, 0, 0.72),
    inset  0    0   26px rgba(244, 213, 141, 0.13),
    0 0 16px rgba(244, 213, 141, 0.06);
}
.sp-narrator.is-on::after { opacity: 1; transform: scaleX(1); }

/* Medallion — a centred area; the illustration is contained (never cropped). */
.sp-narrator__medallion {
  flex: 0 0 76px;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Tinted like the iOS tintColor: dim grey when resting, gold when chosen
   (same recolour technique as the category icons — normalises any source). */
.sp-narrator__portrait {
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(48%);
  opacity: 0.75;
  transition: filter 0.22s var(--ease-out), opacity 0.22s var(--ease-out);
}
.sp-narrator.is-on .sp-narrator__portrait {
  filter: brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(620%) hue-rotate(2deg) brightness(96%);
  opacity: 1;
}

.sp-narrator__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sp-narrator__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  color: var(--moonlight);
  letter-spacing: 0.01em;
}
.sp-narrator.is-on .sp-narrator__name { color: var(--gold-soft); }
.sp-narrator__desc {
  /* DM Sans for small descriptive copy — Cormorant (serif display) is muddy at
     this size. Brighter than mist so it's comfortably readable on the dark card. */
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12.5px;
  line-height: 1.55;
  letter-spacing: 0.005em;
  color: rgba(237, 233, 226, 0.64);
}
.sp-narrator.is-on .sp-narrator__desc { color: rgba(237, 233, 226, 0.9); }
.sp-narrator__check {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.5px;
  color: var(--gold-soft);
  border-radius: 50%;
  background: rgba(6, 9, 16, 0.6);
  box-shadow:
    inset -1px -1px 3px rgba(255, 255, 255, 0.05),
    inset  2px  2px 5px rgba(0, 0, 0, 0.8),
    0 0 10px rgba(244, 213, 141, 0.18);
}

/* ── Bookmark list ── */
.sp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.sp-bookmark {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgba(244, 213, 141, 0.08);
}
.sp-bookmark:last-child { border-bottom: none; }
.sp-bookmark__main {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: 10px var(--sp-xs);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  min-width: 0;
}
.sp-bookmark__main:hover .sp-bookmark__name { color: var(--gold-soft); }
.sp-bookmark__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(620%) hue-rotate(2deg) brightness(96%);
  opacity: 0.9;
}
.sp-bookmark__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sp-bookmark__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--moonlight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.15s var(--ease-out);
}
.sp-bookmark__cat {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-cap);
  color: var(--fg3);
}
.sp-bookmark__remove {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--gold-soft);
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.sp-bookmark__remove:hover { background: rgba(244, 213, 141, 0.08); color: var(--gold-bright); }

/* ── Profile: bookplate name ── */
.sp-bookplate { display: flex; flex-direction: column; align-items: center; gap: var(--sp-xs); padding: var(--sp-sm) 0; }
/* A field is a place to write, so it is cut INTO the sheet rather than raised out of
   it — the inverse of a key, and the same well the segmented control sits in. */
.sp-bookplate__input {
  width: 100%;
  text-align: center;
  padding: 11px var(--sp-md);
  border: 0;
  border-radius: 12px;
  background: rgba(4, 6, 12, 0.55);
  box-shadow:
    inset -1px -1px 3px rgba(255, 255, 255, 0.045),
    inset  3px  3px 8px rgba(0, 0, 0, 0.8);
  color: var(--moonlight);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-ui-heading);
  letter-spacing: 0.01em;
  outline: none;
  transition: box-shadow 0.24s var(--ease-out);
}
.sp-bookplate__input::placeholder { color: rgba(237, 233, 226, 0.4); }
.sp-bookplate__input:focus {
  box-shadow:
    inset -1px -1px 3px rgba(255, 255, 255, 0.05),
    inset  3px  3px 8px rgba(0, 0, 0, 0.8),
    inset  0    0  18px rgba(244, 213, 141, 0.16),
    0 0 14px rgba(244, 213, 141, 0.1);
}
.sp-bookplate__help {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(237, 233, 226, 0.56);
}

/* ── Profile: interests pills ── */
.sp-interests { display: flex; flex-wrap: wrap; gap: 6px; }
/* Not pills: soft-cornered keys in the plate material. */
.sp-interest {
  padding: 7px 13px;
  border: 0;
  border-radius: 10px;
  color: rgba(237, 233, 226, 0.74);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.6), rgba(12, 17, 28, 0.76));
  box-shadow:
    -3px -3px 7px rgba(255, 255, 255, 0.03),
     4px  4px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.24s var(--ease-out), background 0.24s var(--ease-out), color 0.2s var(--ease-out);
}
.sp-interest:hover { color: var(--fg1); }
.sp-interest.is-on {
  color: var(--gold-soft);
  background: linear-gradient(145deg, rgba(9, 13, 23, 0.88), rgba(33, 39, 54, 0.56));
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.035),
    inset  3px  3px 8px rgba(0, 0, 0, 0.72),
    inset  0    0  16px rgba(244, 213, 141, 0.16),
    0 0 12px rgba(244, 213, 141, 0.07);
}

/* ── Profile: narrator card (→ Style) ── */
.sp-narratorcard {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: 10px var(--sp-sm);
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.6), rgba(12, 17, 28, 0.76));
  box-shadow:
    -5px -5px 11px rgba(255, 255, 255, 0.035),
     6px  6px 15px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.28s var(--ease-out), transform 0.16s var(--ease-out);
}
.sp-narratorcard:hover {
  transform: translateY(-1.5px);
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 0.05),
     8px  8px 19px rgba(0, 0, 0, 0.57),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    0 0 20px rgba(244, 213, 141, 0.09);
}
.sp-narratorcard:active { transform: translateY(1.5px); }
.sp-narratorcard__portrait {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  object-fit: contain; /* contained illustration, never cropped/stretched */
  filter: brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(620%) hue-rotate(2deg) brightness(96%);
}
.sp-narratorcard__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.sp-narratorcard__name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg); color: var(--gold-soft); }
.sp-narratorcard__desc {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(237, 233, 226, 0.6);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sp-narratorcard__chev { flex: 0 0 auto; font-size: 22px; color: var(--gold-soft); line-height: 1; }

/* ── Profile: AI engine segmented control ── */
/* A channel cut into the sheet with one key standing proud inside it — the chosen
   option is the raised one, which is the reading a physical selector gives you. */
.sp-segment {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 0;
  border-radius: 12px;
  background: rgba(4, 6, 12, 0.55);
  box-shadow:
    inset -1px -1px 3px rgba(255, 255, 255, 0.045),
    inset  3px  3px 8px rgba(0, 0, 0, 0.8);
}
.sp-segment__opt {
  flex: 1;
  min-width: 0;
  padding: 8px 4px;
  background: none;
  border: none;
  border-radius: 9px;
  color: rgba(237, 233, 226, 0.62);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.24s var(--ease-out), background 0.24s var(--ease-out), color 0.2s var(--ease-out);
}
.sp-segment__opt:hover { color: var(--fg1); }
.sp-segment__opt.is-on {
  color: var(--gold-soft);
  background: linear-gradient(145deg, rgba(44, 50, 67, 0.85), rgba(16, 21, 33, 0.9));
  box-shadow:
    -2px -2px 5px rgba(255, 255, 255, 0.04),
     3px  3px 8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 12px rgba(244, 213, 141, 0.08);
}
/* No italics: hard to read at this size, and the tone is carried by the colour and the
   face rather than by the slant. */
.sp-segment__desc {
  margin: var(--sp-xs) 0 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--fg3);
  letter-spacing: 0.01em;
}

/* ── Profile: reset + guest note ── */
.sp-reset {
  width: 100%;
  padding: 10px;
  background: none;
  border: 1px solid rgba(232, 93, 93, 0.25);
  border-radius: var(--r-md);
  color: var(--error);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-body);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s var(--ease-out);
}
.sp-reset:hover { background: rgba(232, 93, 93, 0.08); }
.sp-guestnote {
  margin: var(--sp-sm) 0 0;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: rgba(237, 233, 226, 0.56);
}

/* ── About ── */
.sp-about__hero { display: flex; flex-direction: column; align-items: center; text-align: center; padding: var(--sp-sm) 0 var(--sp-md); }
.sp-about__compass { font-size: 40px; filter: drop-shadow(0 0 16px rgba(244, 213, 141, 0.3)); }
.sp-about__title {
  margin: var(--sp-sm) 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  color: var(--gold);
}
.sp-about__subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--fg2);
  letter-spacing: 0.22em;
}
.sp-about__mission {
  margin: 0 0 var(--sp-lg);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--fg2);
  letter-spacing: 0.01em;
}
.sp-about__sources { list-style: none; margin: 0 0 var(--sp-md); padding: 0; }
.sp-about__source {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-sm);
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.sp-about__sourcename { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-body); color: var(--moonlight); }
.sp-about__sourcelicence { font-family: var(--font-display); font-weight: 300; font-size: var(--fs-xs); color: var(--fg3); text-align: right; flex: 0 0 auto; }
.sp-about__source--statement { flex-direction: column; align-items: flex-start; gap: 2px; }
.sp-about__statement { font-size: var(--fs-xs); line-height: 1.45; color: var(--fg3); }
.sp-about__body {
  margin: 0 0 var(--sp-md);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--fg2);
}
.sp-about__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-lg);
  color: var(--gold);
  text-decoration: none;
}
.sp-about__link:hover { color: var(--gold-bright); }
.sp-about__version {
  margin: var(--sp-md) 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg3);
}

/* ── Account (Profile tab) ── */
.sp-account {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: var(--sp-sm);
}
.sp-account__name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--gold);
}
.sp-account .sp-reset { margin-top: var(--sp-xs); }

/* ── Journal (HistoryPanel) ───────────────────────────────────────────────────
   Reuses the bookmark row grammar; only the count, the excerpt line and the
   device-storage note are new. */
.sp-journal__count {
  margin: 0 0 10px;
  font-family: var(--font-body);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-dim, rgba(232, 230, 225, 0.55));
}
.sp-journal__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 3px;
  font-family: var(--font-display, Georgia, serif);
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-dim, rgba(232, 230, 225, 0.5));
}
.sp-journal__note {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-dim, rgba(232, 230, 225, 0.4));
  text-align: center;
}


/* Same pass over the shared panel captions. */
.sp-empty__body   { color: rgba(237, 233, 226, 0.58); }
.sp-bookmark__cat { color: rgba(237, 233, 226, 0.54); }
.sp-segment__desc { color: rgba(237, 233, 226, 0.58); }
.sp-guestnote     { color: rgba(237, 233, 226, 0.58); }
/* SidebarInstruments — the survey readout and the pin dials, in the console's material:
   plates cut INTO the sheet for things you read, keys pressed OUT of it for things you
   operate, and the same rule-and-title head the plate above uses. */

.inst { display: flex; flex-direction: column; }

.inst__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 13px 0 8px;
}
.inst__rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 213, 141, 0.26));
}
.inst__head .inst__rule:last-child {
  background: linear-gradient(90deg, rgba(244, 213, 141, 0.26), transparent);
}
.inst__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.06em;
  color: var(--gold);
  white-space: nowrap;
}

/* ── The readout. A window cut into the sheet — you read through it, you do not
   press it, so it is the inverse of a key. ── */
.inst__plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 12px 11px;
  border-radius: 12px;
  text-align: center;
  background: rgba(4, 6, 12, 0.5);
  box-shadow:
    inset  3px  3px 9px rgba(0, 0, 0, 0.8),
    inset -1px -1px 3px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.035);
}
/* Tabular figures: a grid reference that shifts its own columns as you pan is unreadable,
   and this is a number people copy down digit by digit. */
.inst__ref {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15.5px;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-soft);
  text-shadow: 0 0 12px rgba(244, 213, 141, 0.28);
}
.inst__sub {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: rgba(237, 233, 226, 0.4);
}
/* Three gauges under the reference, divided by hairlines cut into the plate. The caption
   sits in a fixed slot and never moves; only the value under it changes. */
.inst__gauges {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.055);
}
.inst__gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 0 2px;
}
.inst__gauge + .inst__gauge { border-left: 1px solid rgba(255, 255, 255, 0.055); }
.inst__gaugelabel {
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: rgba(237, 233, 226, 0.36);
}
.inst__gaugeval {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: rgba(237, 233, 226, 0.76);
  white-space: nowrap;
}

/* ── Dials. The same channel the panels use, at sidebar scale. ── */
.inst__dial {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 7px 0;
}
.inst__diallabel {
  flex: 0 0 58px;
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(237, 233, 226, 0.66);
}
.inst__range {
  flex: 1 1 auto;
  min-width: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  background:
    linear-gradient(90deg,
      rgba(201, 168, 76, 0.85) 0,
      var(--gold-soft) var(--fill, 0%),
      transparent var(--fill, 0%)),
    rgba(4, 6, 12, 0.72);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.85),
    0 1px 0 rgba(255, 255, 255, 0.05);
}
.inst__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(145deg, var(--gold-bright), var(--gold-soft-dark));
  box-shadow:
    -1px -1px 2px rgba(255, 255, 255, 0.35),
     2px  2px 5px rgba(0, 0, 0, 0.6),
     0 0 11px rgba(244, 213, 141, 0.6);
}
.inst__range::-moz-range-thumb {
  width: 14px; height: 14px;
  border: none; border-radius: 50%;
  cursor: pointer;
  background: linear-gradient(145deg, var(--gold-bright), var(--gold-soft-dark));
  box-shadow:
    -1px -1px 2px rgba(255, 255, 255, 0.35),
     2px  2px 5px rgba(0, 0, 0, 0.6),
     0 0 11px rgba(244, 213, 141, 0.6);
}
.inst__dialval {
  flex: 0 0 40px;
  text-align: right;
  font-family: var(--font-body);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--gold-soft);
}

/* ── The hover key. A console key, so it presses and lights like every other. ── */
.inst__key {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
  padding: 8px 13px 13px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  text-align: left;
  color: rgba(237, 233, 226, 0.74);
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.6), rgba(12, 17, 28, 0.76));
  box-shadow:
    -5px -5px 11px rgba(255, 255, 255, 0.035),
     6px  6px 15px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out),
              transform 0.16s var(--ease-out), color 0.22s var(--ease-out);
}
.inst__key:hover { transform: translateY(-1.5px); color: var(--fg1); }
.inst__key:active { transform: translateY(1.5px); }
.inst__key:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 3px; }
.inst__key.is-on {
  transform: translateY(1px);
  color: var(--gold-soft);
  background: linear-gradient(145deg, rgba(9, 13, 23, 0.88), rgba(33, 39, 54, 0.56));
  box-shadow:
    inset -4px -4px 9px rgba(255, 255, 255, 0.035),
    inset  5px  5px 12px rgba(0, 0, 0, 0.72),
    inset  0    0   26px rgba(244, 213, 141, 0.13),
    0 0 16px rgba(244, 213, 141, 0.06);
}
.inst__keyname {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.012em;
}
.inst__keynote {
  font-family: var(--font-body);
  font-size: 10.5px;
  line-height: 1.35;
  color: rgba(237, 233, 226, 0.5);
}
.inst__filament {
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 6px;
  height: 2.5px;
  border-radius: 2px;
  background: rgba(3, 5, 11, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(255, 255, 255, 0.035);
}
.inst__ember {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.5), var(--gold-soft) 55%, var(--gold-soft));
  box-shadow: 0 0 6px rgba(244, 213, 141, 0.5), 0 0 13px rgba(244, 213, 141, 0.2);
  opacity: 0;
  transform: scaleX(0.04);
  transform-origin: left center;
  transition: opacity 0.24s var(--ease-out), transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
}
.inst__key:not(.is-on):hover .inst__ember { opacity: 0.26; transform: scaleX(0.16); }
.inst__key.is-on .inst__ember { opacity: 1; transform: scaleX(1); }

@media (prefers-reduced-motion: reduce) {
  .inst__key:hover, .inst__key:active, .inst__key.is-on { transform: none; }
  .inst__ember { transition: opacity 0.2s var(--ease-out); }
}
/* Sidebar — master–detail. Two panels of Waystone "glass": navy-black ground,
   gold hairline edges, a specular top highlight and a faint grain — vibrant
   material, not a heavy frost. Gold returns as warmth (edges, the search lens,
   accents) over the navy; the blue-black + gold pairing is the signature. */

.sidebar {
  position: absolute;
  top: var(--sp-md);
  left: var(--sp-md);
  bottom: var(--sp-md);
  /* Above the Ancient Ground viewer (90) so its detail tabs stay usable while
     the viewer is open (below the login modal at 100). The home panel never
     overlaps the centred viewer; only an open detail tab briefly reaches into
     the viewer's left margin. */
  z-index: 95;
  display: flex;
  align-items: stretch;
  gap: var(--sp-sm);
  pointer-events: none;
}
.sidebar > * { pointer-events: auto; }

/* ── Panel shells — Waystone glass (navy ground, gold edge, grain) ── */
.sidepanel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  padding: var(--sp-md);
  /* GLASS — dark and moody. Smoked, not clear: the map is present behind it as
     depth and colour rather than as legible detail. The heavy blur is what makes
     it read as glass; the deep fill is what keeps it serious. */
  background:
    linear-gradient(176deg, rgba(58, 64, 82, 0.15) 0%, rgba(8, 11, 20, 0) 36%),
    linear-gradient(180deg, rgba(10, 13, 23, 0.74) 0%, rgba(5, 8, 16, 0.85) 100%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  /* The pane's edge catches light along its top and inner-left, the way a real
     sheet of glass does; the cast beneath sets it off the map. */
  box-shadow:
    0 18px 56px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(34px) saturate(155%) brightness(1.04);
  -webkit-backdrop-filter: blur(34px) saturate(155%) brightness(1.04);
  overflow: hidden;
}
/* The lamp. A warm pool resting on the head of the page — present at rest, not
   on hover. This is the magical energy the product is lit by; it is deliberately
   low and wide so it reads as light in the room rather than a glowing UI part. */
.sidepanel::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  /* Bokeh behind the frost: three soft out-of-focus orbs — one warm at the head
     where the lamp sits, two cooler and deeper down the sheet. They are the only
     colour under the glass, and they are what gives the blur something to blur. */
  background:
    radial-gradient(120% 92% at 28% -16%, rgba(244, 213, 141, 0.15), transparent 64%),
    radial-gradient(58% 26% at 88% 34%, rgba(120, 150, 200, 0.085), transparent 70%),
    radial-gradient(70% 30% at 6% 72%, rgba(201, 168, 76, 0.07), transparent 72%);
}
/* Faint film grain — keeps the translucent surface from banding (premium feel) */
.sidepanel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sidepanel > * { position: relative; z-index: 1; }

.sidepanel--home { width: 322px; flex: 0 0 322px; }
/* The detail panel opens like a page turning out from under the home panel:
   it is unmasked from the left edge while sliding, rather than merely fading,
   so the motion reads as one sheet emerging from behind another. */
.sidepanel--detail {
  width: 308px;
  flex: 0 0 308px;
  animation: detail-in 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes detail-in {
  from {
    opacity: 0;
    transform: translateX(-26px) scale(0.985);
    clip-path: inset(0 0 0 30% round var(--r-lg));
  }
  55% { opacity: 1; }
  to {
    opacity: 1;
    transform: none;
    clip-path: inset(0 0 0 0 round var(--r-lg));
  }
}
/* The page inside the shell. Keyed on which page is open, so moving between pages
   turns the leaf without the panel itself moving — the shell is furniture, the page
   is the thing you came for. It comes up a beat after the shell has arrived. */
.sidepanel__page {
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: page-in 0.4s var(--ease-out) 0.1s both;
}
@keyframes page-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* Masthead — centred, like a title page. Wordmark over its edition line. */
.sidepanel__masthead {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-bottom: 12px;
}

/* Wordmark — gold "stone" with a slow luminance shimmer (book in the hands) */
.sidepanel__brand {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.015em;
  color: var(--fg1);
  user-select: none;
}

/* Edition mark — the imprint line of a title page. Roman numeral because a
   second edition is set that way, and because "Beta 2" in a sans reads as a
   software badge rather than a printing. Gilt hairline box, pressed in. */
/* Edition line — the imprint under a title, set open and unenclosed. */
.sidepanel__beta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--gold-dim);
  user-select: none;
}
.sidepanel__brand span {
  color: var(--gold);
  animation: ws-shimmer 3.6s ease-in-out infinite alternate;
}
@keyframes ws-shimmer {
  from { filter: brightness(1); }
  to   { filter: brightness(1.18); }
}
.sidepanel__rule {
  width: 34px;
  height: 1px;
  background: rgba(244, 213, 141, 0.4);
  margin: 10px 0 var(--sp-md);
}

/* ONE surface. This used to be a recessed well with its own dark border and inner
   shadow, which read as a second panel bolted under the first — the menu and the
   layers looked like two products. The body is now simply the lower part of the
   same sheet of glass: no border, no inset, no negative margins. */
.sidepanel__body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  overflow-y: auto;
  /* The scroller is widened to the panel's padding edge and its content pushed back
     in. Without the gutter the scroller clips at the content edge, and every glow
     that spills off a lit key or switch is sheared flat down the right-hand side. */
  padding: 9px 14px 0;
  margin-inline: -14px;
  /* On-brand scrollbar. Firefox: gold thumb, transparent track. (No `scrollbar-width:
     thin` — in current Chromium that standard keyword wins over the ::-webkit width
     below and forces a ~10px bar; Firefox `thin` isn't needed once the thumb is gold.) */
  scrollbar-color: rgba(244, 213, 141, 0.28) transparent;
}
/* WebKit/Chromium: a gold pill that claims its own 14px lane (the styled bar reserves
   layout width when content overflows, so the dials never sit under it); brightens on
   hover; no track chrome. Wider than before so the thumb reads clearly and clears the
   content. (No scrollbar-gutter here — it reserved only a 10px system gutter, too narrow
   for the 14px thumb, which then spilled over the controls.) */
.sidepanel__body::-webkit-scrollbar { width: 14px; }
.sidepanel__body::-webkit-scrollbar-track { background: transparent; }
.sidepanel__body::-webkit-scrollbar-thumb {
  background: rgba(244, 213, 141, 0.2);
  border-radius: 10px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
.sidepanel__body::-webkit-scrollbar-thumb:hover { background: rgba(244, 213, 141, 0.38); background-clip: padding-box; }

/* ══════════════════════════════════════════════════════════════════════
   NEUMORPHIC KEYS
   A key is not a box drawn on the sheet — it is a shape pressed OUT of it.
   Same material as the panel, lifted by two lights: a cool highlight from the
   upper left, a deep shadow to the lower right. No border anywhere; the edge
   is made of light. Pressing inverts both, so the key sinks into the sheet and
   a gold bloom gathers in the hollow.
   ══════════════════════════════════════════════════════════════════════ */
.sidenav {
  flex: 0 0 auto;              /* frozen — never scrolls away from the layers */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sidenav__row { display: flex; gap: 10px; }

.nkey {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 9px;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  color: var(--fg1);
  /* The extrusion. A shallow diagonal tone shift is what makes the face read as
     a curved surface rather than a flat fill. */
  background: linear-gradient(145deg, rgba(38, 44, 60, 0.62), rgba(14, 19, 30, 0.72));
  box-shadow:
    -5px -5px 11px rgba(255, 255, 255, 0.035),
     6px  6px 15px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    box-shadow 0.26s var(--ease-out),
    background 0.26s var(--ease-out),
    transform 0.14s var(--ease-out),
    color 0.2s var(--ease-out);
}

/* Hover — the key rises a touch and warms, the way brass does under a lamp. */
.nkey:not(.is-soon):hover {
  transform: translateY(-1px);
  color: var(--gold-soft);
  box-shadow:
    -6px -6px 13px rgba(255, 255, 255, 0.045),
     7px  7px 18px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 18px rgba(244, 213, 141, 0.10);
}

/* Pressed / open — the key sinks, both lights invert, and the bloom gathers
   inside the hollow. This is the satisfying half of the motion. */
.nkey:not(.is-soon):active,
.nkey.is-on {
  transform: translateY(1px);
  color: var(--gold-soft);
  background: linear-gradient(145deg, rgba(11, 15, 25, 0.85), rgba(30, 36, 50, 0.6));
  box-shadow:
    inset -4px -4px 9px rgba(255, 255, 255, 0.035),
    inset  5px  5px 11px rgba(0, 0, 0, 0.68),
    inset  0    0   22px rgba(244, 213, 141, 0.16),
    0 0 14px rgba(244, 213, 141, 0.07);
}
.nkey:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 3px; }

.nkey svg { flex: 0 0 auto; color: var(--gold-soft); opacity: 0.7; transition: opacity 0.2s var(--ease-out); }
.nkey:hover svg, .nkey.is-on svg { opacity: 1; }

.nkey__t {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ask Waystone — the hero key. Wider face, left-aligned, deeper press. */
.nkey--hero {
  justify-content: flex-start;
  gap: 13px;
  padding: 13px 15px;
  border-radius: 15px;
}
.nkey__hero { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.nkey__herotitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16.5px;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
}
.nkey__herosub { font-family: var(--font-body); font-size: 11.5px; color: var(--fg3); }

/* The library door wears a rim of gold light — an inset catch-light and a
   quiet bloom, never a border. The mark and title carry the same warmth. */
.nkey--library { color: var(--gold-dim); }
.nkey--library .nkey__herotitle { color: var(--gold-soft); }
.nkey--library {
  box-shadow:
    -5px -5px 11px rgba(255, 255, 255, 0.035),
     6px  6px 15px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 0 1px rgba(244, 213, 141, 0.28),
    0 0 16px rgba(244, 213, 141, 0.07);
}
.nkey--library:hover {
  color: var(--gold-soft);
  box-shadow:
    -6px -6px 14px rgba(255, 255, 255, 0.05),
     8px  8px 19px rgba(0, 0, 0, 0.57),
    inset 0 1px 0 rgba(255, 255, 255, 0.075),
    inset 0 0 0 1px rgba(244, 213, 141, 0.45),
    0 0 24px rgba(244, 213, 141, 0.14);
}

.nkey.is-soon { opacity: 0.5; cursor: default; }
.nkey__tag {
  position: absolute;
  top: 6px;
  right: 10px;
  font-family: var(--font-body);
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--fg3);
}
.nkey__tag--exp { color: var(--gold-dim); }

@media (prefers-reduced-motion: reduce) {
  .nkey { transition: box-shadow 0.2s var(--ease-out), color 0.2s var(--ease-out); }
  .nkey:not(.is-soon):hover,
  .nkey:not(.is-soon):active,
  .nkey.is-on { transform: none; }
}

/* ── Cycling tips — the marginalia at the panel's foot. Set as the closing plate of
   the same document the masthead opens: the console's rule-fleuron-rule ornament,
   a gilt kicker, and the tip itself in the display face with room to breathe. ── */
.sidehome__tips {
  margin-top: auto;                  /* absorb the slack; sit at the foot */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 14px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.sidehome__tips-orn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  margin-bottom: 11px;
}
.sidehome__tips-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 213, 141, 0.26));
}
.sidehome__tips-orn .sidehome__tips-rule:last-child {
  background: linear-gradient(90deg, rgba(244, 213, 141, 0.26), transparent);
}
.sidehome__tips-mark {
  font-size: 11px;
  line-height: 1;
  color: var(--gold-soft);
  opacity: 0.6;
  transition: opacity 0.25s var(--ease-out), transform 0.4s var(--ease-out);
}
.sidehome__tips-kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--gold-dim);
  margin-bottom: 9px;
  transition: color 0.25s var(--ease-out);
}
.sidehome__tips-text {
  margin: 0;
  min-height: 50px;                  /* ~3 lines — no jump as tip length varies */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: var(--tr-display);
  color: var(--fg2);
  transition:
    opacity 260ms var(--ease-out),
    transform 320ms var(--ease-out),
    color 0.2s var(--ease-out);
}
/* The turn: the new line comes up from under the old one, the way a page settles. */
.sidehome__tips-text.is-in  { opacity: 1; transform: none; }
.sidehome__tips-text.is-out { opacity: 0; transform: translateY(5px); }
.sidehome__tips:hover .sidehome__tips-text { color: var(--fg1); }
.sidehome__tips:hover .sidehome__tips-kicker { color: var(--gold-soft); }
.sidehome__tips:hover .sidehome__tips-mark { opacity: 0.95; transform: rotate(90deg); }

@media (prefers-reduced-motion: reduce) {
  .sidehome__tips-text { transition: color 0.2s var(--ease-out); }
  .sidehome__tips-text.is-out { transform: none; }
  .sidehome__tips:hover .sidehome__tips-mark { transform: none; }
}

/* ── Detail header — the recto page of an opened book.
   A drop-rule under the title, and a fleuron in the margin, so the side panel
   reads as the continuation of the same document rather than a second window. */
/* The page's head, set the way every other head in the product is: centred, on a rule
   that runs out to both margins. It used to be left-aligned over a full-width hairline
   with a short heavy gilt stroke under one end — a chapter-head device that belonged to
   an earlier language and was the only title in the app doing its own thing. */
.sidepanel__subhead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  /* Symmetric gutters so the title centres on the PANEL, with the close button living in
     the right-hand one rather than pushing the title off centre. */
  padding: 0 30px;
  margin-bottom: 14px;
}
.sidepanel__subhead::before,
.sidepanel__subhead::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 213, 141, 0.26));
}
.sidepanel__subhead::after {
  background: linear-gradient(90deg, rgba(244, 213, 141, 0.26), transparent);
}
.sidepanel__subtitle {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0.03em;
  white-space: nowrap;
}
/* Out of the flow, in the right-hand gutter — the title's centre must not depend on what
   the page happens to put beside it. */
.sidepanel__subactions {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
}
.sidepanel__showall {
  background: none;
  border: none;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  color: var(--gold-soft);
  letter-spacing: 0.02em;
  cursor: pointer;
}
.sidepanel__showall:hover { color: var(--gold-bright); }
.sidepanel__close {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--fg3);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.sidepanel__close:hover { background: rgba(244, 213, 141, 0.08); color: var(--gold-soft); }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .sidepanel--home { width: 290px; flex-basis: 290px; }
  .sidepanel--detail { width: 280px; flex-basis: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  .sidepanel--detail { animation: none; }
  .sidepanel__page { animation: none; }
  .sidepanel__brand span { animation: none; }
  .sidehome__pill,
  .sidehome__btn { transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out); }
  .sidehome__pill:not(.is-soon):active,
  .sidehome__btn:not(.is-soon):active { transform: none; }
}
/* SearchDock — floating bottom-centre search over the map. Two distinct glass
   treatments: the BAR is light transparent frosted glass with the gold lens rim;
   the RESULTS pop-up is a separate dark glass card floating above it. */

.searchdock {
  position: absolute;
  bottom: var(--sp-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 18;
  display: flex;
  flex-direction: column;
  width: 420px;
  max-width: calc(100vw - 2 * var(--sp-lg));
  transition: width 0.26s var(--ease-out);
}
.searchdock.is-active { width: 500px; }

/* ── The bar — genuinely transparent frosted glass; the gold rim is a masked
   pseudo-element so it doesn't fill the interior. ── */
.searchdock__bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  background: rgba(221, 233, 255, 0.11);
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
  overflow: hidden;
  transition: box-shadow 0.22s var(--ease-out);
}
/* Gold gradient rim — only the 1.5px edge (interior masked out) */
.searchdock__bar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold-soft-dark));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.searchdock__bar::after {
  /* lens highlight — light catching the top-left of the glass */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.14), transparent 46%);
  pointer-events: none;
}
.searchdock.is-active .searchdock__bar,
.searchdock__bar:hover {
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.36),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 22px rgba(244, 213, 141, 0.16);
}

.searchdock__searchicon { position: relative; z-index: 1; display: flex; color: var(--gold-soft); flex: 0 0 auto; }
.searchdock__input {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.02em;
  color: var(--gold-soft-light);
}
.searchdock__input::placeholder { color: var(--moonlight); opacity: 0.6; }

/* ── Results pop-up — separate dark glass card, floating above the bar ── */
.searchdock__results {
  margin: 0 0 10px;
  padding: 6px;
  list-style: none;
  max-height: 46vh;
  overflow-y: auto;
  background: rgba(10, 14, 24, 0.86);
  border: 1px solid rgba(244, 213, 141, 0.13);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  animation: dock-results-in 0.2s var(--ease-out);
}
@keyframes dock-results-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Empty / error notice. Shares the results panel's surface so it reads as the same
   object, but is quieter — it is an answer, not a list of things to click. */
.searchdock__notice {
  margin: 0 0 10px;
  padding: 14px 16px;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-dim, rgba(232, 230, 225, 0.66));
  background: rgba(10, 14, 24, 0.86);
  border: 1px solid rgba(244, 213, 141, 0.13);
  border-radius: var(--r-lg);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(22px) saturate(120%);
  -webkit-backdrop-filter: blur(22px) saturate(120%);
  animation: dock-results-in 0.2s var(--ease-out);
}

.searchdock__row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
  padding: 9px 12px;
  background: none;
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s var(--ease-out);
}
.searchdock__row:hover { background: rgba(244, 213, 141, 0.08); }
.searchdock__icon {
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Category illustration — gold-tinted, contained (replaces the old emoji) */
.searchdock__icon--cat {
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(78%) sepia(28%) saturate(620%) hue-rotate(2deg) brightness(96%);
  opacity: 0.92;
}
.searchdock__icon--glyph { color: var(--fg2); }
.searchdock__text { display: flex; flex-direction: column; min-width: 0; }
.searchdock__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--moonlight);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.searchdock__meta {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-cap);
  color: var(--fg3);
  margin-top: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .searchdock { transition: none; }
  .searchdock__results { animation: none; }
  .searchdock__notice { animation: none; }
}
/* RightDock — reserved right-hand column for chat / narration (dormant in v1).
   A glass column docked to the right edge, mirroring the left sidebar's
   materiality so the future conversational surface lands consistent. The map
   sits behind; this only occupies space once the feature is built and active. */

.rightdock {
  position: absolute;
  top: var(--sp-md);
  right: var(--sp-md);
  bottom: var(--sp-md);
  z-index: 16;
  width: 360px;
  max-width: 34vw;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card), var(--inner-top-dark);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

@media (max-width: 1100px) {
  .rightdock { width: 320px; }
}
/* Pin-anchored callout — the console's material at card scale.
   Frosted glass over the map (the same smoked fill and heavy blur as the sidebar), a
   plate of type inside it, and the action bar built from keys rather than tinted
   rectangles. Restyled 2026-08-10 with the rest of the product. */

.callout {
  position: absolute;
  transform: translate(-50%, calc(-100% - 18px));
  /* The wrapper's width tracks the card's scale so translate(-50%) keeps centring on
     the pin. See the 4K block at the foot of this file for why the scale lives on the
     card and not on this element. */
  width: calc(274px * var(--callout-scale, 1));
  z-index: 20;
  pointer-events: none; /* wrapper transparent; card re-enables */
  animation: callout-in 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.callout__card,
.callout__tail { pointer-events: auto; }

/* A PREVIEW is what the pointer is resting on, not what you chose. It is inert: the
   moment it took a click it would fight the pin underneath it, and it disappears the
   instant you move — so there is nothing to reach for anyway. Click the pin to keep it. */
.callout.is-preview,
.callout.is-preview .callout__card,
.callout.is-preview .callout__tail { pointer-events: none; }

@keyframes callout-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% - 4px)) scale(0.97); }
  to   { opacity: 1; transform: translate(-50%, calc(-100% - 18px)) scale(1); }
}

/* The card. Same glass as the sidebar, so a card opened over the map reads as the same
   material as the panel beside it rather than as a different product's tooltip. */
.callout__card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background:
    linear-gradient(176deg, rgba(58, 64, 82, 0.16) 0%, rgba(8, 11, 20, 0) 38%),
    linear-gradient(180deg, rgba(10, 13, 23, 0.8) 0%, rgba(5, 8, 16, 0.9) 100%);
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  overflow: hidden;
}
/* The lamp, as on the panels: one warm pool at the head of the card. */
.callout__card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 26% -14%, rgba(244, 213, 141, 0.13), transparent 62%);
}
.callout__card > * { position: relative; z-index: 1; }

/* The card's chrome: close over bookmark, in one column at the top right. They both
   used to claim that corner independently and overlapped whenever a card had no image. */
.callout__tools {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* A small disc standing proud of the card, like the tabs on the plate. */
.callout__close {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  color: var(--gold-dim);
  background: linear-gradient(145deg, rgba(58, 65, 84, 0.72), rgba(15, 20, 32, 0.86));
  box-shadow:
    -2px -2px 5px rgba(255, 255, 255, 0.045),
     3px  3px 8px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  transition: color 0.2s var(--ease-out), box-shadow 0.24s var(--ease-out), transform 0.16s var(--ease-out);
}
.callout__close:hover {
  color: var(--gold-soft);
  box-shadow:
    -2px -2px 6px rgba(255, 255, 255, 0.06),
     4px  4px 10px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 0 14px rgba(244, 213, 141, 0.18);
}
.callout__close:active { transform: translateY(1.5px); }

/* The plate. An engraved window: inset, with the image sitting in it rather than on it,
   and a fade at its foot so the type below is never fighting a bright edge. */
.callout__plate {
  position: relative;
  height: 96px;
  margin: 9px 9px 0;
  border-radius: 11px;
  overflow: hidden;
  background: rgba(4, 6, 12, 0.55);
  box-shadow:
    inset  2px  2px 7px rgba(0, 0, 0, 0.8),
    inset -1px -1px 3px rgba(255, 255, 255, 0.04);
}
.callout__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.86) brightness(0.9);
}
.callout__plate::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 42%, rgba(6, 9, 17, 0.72) 100%);
}

.callout__entry {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Clear of the tool column, so a long title never runs under the close button. */
  padding: 11px 46px 10px 12px;
}
/* With an image above it there is no collision to avoid, so the type takes the width. */
.callout__plate ~ .callout__entry { padding-right: 12px; }
.callout__vignette {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  object-fit: contain; /* never stretch non-square category art */
  opacity: 0.8;
  filter:
    brightness(0) saturate(100%) invert(72%) sepia(38%) saturate(518%) hue-rotate(3deg) brightness(93%) contrast(88%)
    drop-shadow(0 0 8px rgba(244, 213, 141, 0.3));
}
.callout__body { flex: 1; min-width: 0; }

.callout__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.18;
  color: var(--gold-soft);
  letter-spacing: 0.01em;
}
.callout__meta {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 8.5px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: rgba(237, 233, 226, 0.5);
  margin-top: 4px;
}
.callout__distance {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(237, 233, 226, 0.58);
  margin-top: 3px;
}

/* Bookmark — a key, so pressing it does what every other key here does. */
.callout__bookmark {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  color: var(--gold-dim);
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.6), rgba(12, 17, 28, 0.76));
  box-shadow:
    -3px -3px 7px rgba(255, 255, 255, 0.03),
     4px  4px 10px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.26s var(--ease-out), background 0.26s var(--ease-out),
              color 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}
.callout__bookmark:hover { color: var(--gold-soft); transform: translateY(-1.5px); }
.callout__bookmark:active { transform: translateY(1.5px); }
.callout__bookmark.is-on {
  color: var(--gold-soft);
  transform: translateY(1px);
  background: linear-gradient(145deg, rgba(9, 13, 23, 0.88), rgba(33, 39, 54, 0.56));
  box-shadow:
    inset -2px -2px 5px rgba(255, 255, 255, 0.035),
    inset  3px  3px 8px rgba(0, 0, 0, 0.72),
    inset  0    0  16px rgba(244, 213, 141, 0.18),
    0 0 12px rgba(244, 213, 141, 0.08);
}

/* Footer — keys, not tinted rectangles. Stacked, because the labels are sentences
   ("View Ancient Ground") and two of them side by side truncated both. */
.callout__footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 9px 10px;
}
.callout__action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 12px;
  border: 0;
  border-radius: 11px;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.03em;
  color: rgba(237, 233, 226, 0.8);
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.6), rgba(12, 17, 28, 0.76));
  box-shadow:
    -4px -4px 9px rgba(255, 255, 255, 0.03),
     5px  5px 13px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: box-shadow 0.26s var(--ease-out), background 0.26s var(--ease-out),
              color 0.2s var(--ease-out), transform 0.16s var(--ease-out);
}
.callout__action:hover {
  color: var(--gold-soft);
  transform: translateY(-1.5px);
  box-shadow:
    -5px -5px 12px rgba(255, 255, 255, 0.045),
     7px  7px 17px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 18px rgba(244, 213, 141, 0.1);
}
.callout__action:active { transform: translateY(1.5px); }
.callout__action:focus-visible { outline: 1px solid var(--gold-soft); outline-offset: 3px; }
.callout__action-arr {
  font-size: 16px;
  line-height: 1;
  transition: transform 0.22s var(--ease-out);
}
.callout__action:hover .callout__action-arr { transform: translateX(3px); }

/* The doors are coloured glass rather than plain keys: a wash of their own colour lit
   from inside, over the card's blur. Explore is the gold door, Ancient Ground the blue
   one — the same two colours those destinations wear everywhere else in the product.
   One rule, driven by --tint / --tint-lit, so a third door is a colour and nothing more. */
.callout__action--door {
  color: var(--tint-lit);
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, var(--tint-a), var(--tint-b));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 22px var(--tint-inner),
    0 4px 14px rgba(0, 0, 0, 0.4);
}
.callout__action--door:hover {
  color: #fff;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0) 44%),
    linear-gradient(180deg, var(--tint-a-hi), var(--tint-b-hi));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 0 26px var(--tint-inner-hi),
    0 6px 20px rgba(0, 0, 0, 0.45),
    0 0 22px var(--tint-glow);
}
.callout__action--door:active {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.4),
    inset 0 0 24px var(--tint-inner-hi);
}

/* Explore — gold. */
.callout__action--explore {
  --tint-a: rgba(201, 168, 76, 0.26);
  --tint-b: rgba(140, 112, 40, 0.2);
  --tint-a-hi: rgba(226, 190, 96, 0.38);
  --tint-b-hi: rgba(158, 126, 44, 0.3);
  --tint-inner: rgba(244, 213, 141, 0.14);
  --tint-inner-hi: rgba(244, 213, 141, 0.24);
  --tint-glow: rgba(244, 213, 141, 0.3);
  --tint-lit: #f7e6bd;
}
/* Provenance — the origin line: which register, what licence, where the
   official record lives. Quiet by design; the link warms on hover only. */
.callout__origin {
  display: block;
  margin-top: 3px;
  font-size: 10px;
  letter-spacing: 0.02em;
  color: var(--mist);
  text-decoration: none;
  transition: color 0.2s var(--ease-out);
}
a.callout__origin:hover { color: var(--gold-soft); }
.callout__origin-arr { opacity: 0.75; }

/* The Library — bound leather. Browner and darker than the gold door on
   purpose: the reading room is quieter than the storyteller. */
.callout__action--library {
  --tint-a: rgba(148, 108, 74, 0.26);
  --tint-b: rgba(96, 68, 46, 0.22);
  --tint-a-hi: rgba(176, 132, 92, 0.38);
  --tint-b-hi: rgba(114, 82, 54, 0.32);
  --tint-inner: rgba(214, 178, 140, 0.14);
  --tint-inner-hi: rgba(214, 178, 140, 0.24);
  --tint-glow: rgba(214, 178, 140, 0.28);
  --tint-lit: #ecd9c3;
}
/* Ancient Ground — the blue that door wears everywhere else. */
.callout__action--ag {
  --tint-a: rgba(74, 138, 186, 0.26);
  --tint-b: rgba(40, 82, 122, 0.22);
  --tint-a-hi: rgba(96, 166, 216, 0.38);
  --tint-b-hi: rgba(48, 96, 142, 0.32);
  --tint-inner: rgba(150, 205, 240, 0.14);
  --tint-inner-hi: rgba(150, 205, 240, 0.24);
  --tint-glow: rgba(120, 185, 230, 0.32);
  --tint-lit: #cbe7f8;
}

/* The preview footer: one quiet line instead of buttons that cannot be pressed. */
.callout__hint {
  margin: 0;
  padding: 2px 12px 11px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tr-label);
  color: var(--gold-dim);
}

.callout__soon {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 7px;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--fg3);
  align-self: center;
}

/* Pointer tail — a shard of the same glass, pointing at the pin. */
.callout__tail {
  width: 14px;
  height: 14px;
  margin: -8px auto 0;
  transform: rotate(45deg);
  border-radius: 0 0 3px 0;
  background: rgba(6, 9, 17, 0.9);
  border-right: 1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
}

@media (prefers-reduced-motion: reduce) {
  .callout { animation: none; }
  .callout__action:hover, .callout__action:active,
  .callout__bookmark:hover, .callout__bookmark:active,
  .callout__close:active { transform: none; }
  .callout__action:hover .callout__action-arr { transform: none; }
}

/* ── 4K console scale — applied to the CONTENTS, never to this wrapper ──────────────
   index.css scales the UI surfaces 1.3x on a large console. This card cannot be scaled
   the same way, and the reason is worth writing down because the failure was silent.

   `.callout` is positioned by JS in MAP-CANVAS PIXELS: POICallout.jsx writes
   `el.style.left = map.project([lng, lat]).x`. CSS `zoom` scales an element's entire
   coordinate system, and that includes the used value of `left` and `top` — measured in
   Chrome, an element written to left:1000px/top:500px under `zoom: 1.3` lands at
   x=1300, y=650. Zooming this wrapper therefore moved every card away from its own pin
   by (zoom − 1) × the pin's distance from the map origin: right at the top-left corner
   of the map and progressively wrong across the screen. It was reported as callouts no
   longer opening above their pins on a wide monitor.

   So the positioned element stays at scale 1 and what is INSIDE it scales. The wrapper's
   width follows via --callout-scale so the -50% centring still lands on the pin, and the
   card's layout width resolves against that width, so it fills the wrapper exactly.

   The breakpoint here MUST match the one in index.css. */
@media (min-width: 2800px) and (min-height: 1700px) {
  .callout { --callout-scale: 1.3; }
  .callout__card,
  .callout__tail { zoom: 1.3; }
}
/* OverlayTooltip — AAME polygon metadata card. Top-centre glass card with a
   period-coloured edge accent, gold border + soft glow. Interactive (so the
   record link works); auto-dismiss pauses on hover. */

.overlaytip {
  position: absolute;
  top: var(--sp-lg);
  left: 50%;
  /* Base transform matches the animation's end state so the resting card stays
     centred — without this it jumps sideways when the animation fill reverts. */
  transform: translateX(-50%);
  z-index: 30;
  width: 300px;
  max-width: calc(100vw - 2 * var(--sp-md));
  padding: 12px 14px 13px 18px;
  background: rgba(10, 15, 26, 0.9);
  border: 1px solid rgba(200, 160, 80, 0.28);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card), var(--inner-top-dark), 0 0 22px rgba(201, 168, 76, 0.14);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  animation: overlaytip-in 0.22s var(--ease-out);
}
@keyframes overlaytip-in {
  from { opacity: 0; transform: translate(-50%, -8px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Period-coloured edge accent */
.overlaytip__accent {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: var(--period, var(--gold));
  opacity: 0.9;
}

.overlaytip__close {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  color: var(--fg3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
.overlaytip__close:hover { background: rgba(244, 213, 141, 0.1); color: var(--gold); }

/* ── Header ── */
.overlaytip__head { padding-right: 20px; }
.overlaytip__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.15;
  letter-spacing: 0.01em;
  color: var(--moonlight);
}

/* ── Details ── */
.overlaytip__details {
  margin: 10px 0 0;
  padding-top: 9px;
  border-top: 1px solid rgba(244, 213, 141, 0.08);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.overlaytip__detail {
  display: flex;
  align-items: baseline;
  gap: var(--sp-sm);
}
.overlaytip__detail dt {
  flex: 0 0 58px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: var(--tr-cap);
  color: var(--fg3);
  padding-top: 2px;
}
.overlaytip__detail dd {
  margin: 0;
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.3;
  color: var(--fg2);
}
/* Reference-style data (area, source) in mono — precision contexts (brand). */
.overlaytip__detail--mono dd {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg2);
  word-break: break-word;
}
/* Period value tinted to its layer colour — ties to the edge accent, no kicker. */
.overlaytip__detail--period dd {
  color: var(--period, var(--gold));
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .overlaytip { animation: none; }
}
/* RomanSiteCard — the record behind a Roman site mark, in the console language.
   Rebuilt 2026-08-13 (BETA-4): the old card predated CONSOLE-UI.md and carried the
   banned left accent bar and two italic faces. Now: the glass card recipe, a rule-
   centred head, wells for everything read (inscription, through-time), keys for
   everything pressed (record links), and the Latin name set as SPACED CAPITALS —
   epigraphy's own convention, which is how you honour VERCOVICIVM without italics. */

.romansite {
  position: absolute;
  top: var(--sp-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  width: 372px;
  max-width: calc(100vw - 2 * var(--sp-md));
  max-height: calc(100vh - 2 * var(--sp-lg) - 80px);
  overflow-y: auto;
  /* Widened scroller so outward key glows are not sheared at the content edge. */
  padding: 0 14px 14px;
  margin-inline: -14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(244, 213, 141, 0.18) transparent;

  /* The card glass — same material as the tour panel (blur 26), deeper fill. */
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-top-color: rgba(255, 255, 255, 0.16);
  border-radius: 15px;
  background:
    linear-gradient(176deg, rgba(58, 64, 82, 0.15) 0%, rgba(8, 11, 20, 0) 36%),
    linear-gradient(180deg, rgba(10, 13, 23, 0.82) 0%, rgba(5, 8, 16, 0.90) 100%);
  box-shadow:
    0 18px 56px rgba(0, 0, 0, 0.55),
    0 2px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 1px 0 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(26px) saturate(150%);
  animation: romansite-in 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes romansite-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .romansite { animation: none; }
}

/* Grain + bokeh — what gives the frost something to blur (see CONSOLE-UI.md §2.6). */
.romansite::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.romansite::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(220px 130px at 50% 0%, rgba(224, 58, 78, 0.10), transparent 70%),
    radial-gradient(180px 160px at 12% 62%, rgba(58, 74, 112, 0.14), transparent 70%),
    radial-gradient(200px 170px at 92% 88%, rgba(40, 52, 84, 0.12), transparent 70%);
}
.romansite > * { position: relative; z-index: 1; }

/* ── Head: rule · KIND · rule, close disc out of the flow ──────────────────── */
.romansite__head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  padding: 13px 40px 2px;   /* symmetric gutters so the kind centres on the CARD */
}
.romansite__head::before,
.romansite__head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244, 213, 141, 0.26));
}
.romansite__head::after {
  background: linear-gradient(90deg, rgba(244, 213, 141, 0.26), transparent);
}
.romansite__kicker {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  white-space: nowrap;
}
.romansite__hedge {
  margin-left: 8px;
  font-size: 10.5px;
  letter-spacing: 0.09em;
  color: rgba(216, 195, 154, 0.8);   /* stone, not gold — a hedge is not a live state */
}

.romansite__close {
  position: absolute;
  top: 9px;
  right: 10px;
  z-index: 2;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: rgba(237, 233, 226, 0.6);
  font-size: 15px;
  line-height: 1;
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.60), rgba(12, 17, 28, 0.76));
  box-shadow:
    -3px -3px 7px rgba(255, 255, 255, 0.035),
     4px  4px 9px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition: color 0.22s var(--ease-out), transform 0.16s var(--ease-out);
}
.romansite__close:hover { color: var(--fg1); transform: translateY(-1px); }
.romansite__close:active { transform: translateY(1px); }

/* ── Names ──────────────────────────────────────────────────────────────────── */
.romansite__title {
  margin: 6px 18px 0;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: 0.01em;
  color: var(--fg1);
}
/* The Latin name in SPACED CAPITALS — the inscriptional convention itself, which is
   what the stones actually carry. Stone-coloured: it is an artefact, not a state. */
.romansite__roman {
  margin: 3px 18px 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d8c39a;
}
.romansite__place {
  margin: 4px 18px 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: rgba(237, 233, 226, 0.55);
}

/* ── The inscription — a readout, so a well; mono because it is a transcription ── */
.romansite__inscription {
  margin: 12px 16px 0;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(4, 6, 12, 0.5);
  box-shadow:
    inset  2px  2px 6px rgba(0, 0, 0, 0.6),
    inset -1px -1px 3px rgba(255, 255, 255, 0.03);
}
.romansite__latin {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: #d8c39a;
  white-space: pre-wrap;
}
.romansite__translation {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(237, 233, 226, 0.78);
}

/* ── Details — fixed slots: the label column never moves ────────────────────── */
.romansite__details {
  margin: 10px 16px 0;
  display: grid;
  grid-template-columns: 86px 1fr;
  row-gap: 5px;
  column-gap: 10px;
}
.romansite__detail { display: contents; }
.romansite__detail dt {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, 0.42);
  padding-top: 1.5px;
}
.romansite__detail dd {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(237, 233, 226, 0.82);
}
.romansite__detail--accent dd { color: #d8c39a; }

/* ── Through time — a readout plate with fixed slots ────────────────────────── */
.romansite__periods {
  margin: 12px 16px 0;
  padding: 9px 12px 10px;
  border-radius: 11px;
  background: rgba(4, 6, 12, 0.42);
  box-shadow:
    inset  2px  2px 6px rgba(0, 0, 0, 0.6),
    inset -1px -1px 3px rgba(255, 255, 255, 0.03);
}
.romansite__periodshead {
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(237, 233, 226, 0.45);
  margin-bottom: 6px;
}
.romansite__period {
  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: 10px;
  padding: 2px 0;
}
.romansite__periodwhen {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.03em;
  color: rgba(216, 195, 154, 0.85);
}
.romansite__periodwhat {
  font-size: 12.5px;
  color: rgba(237, 233, 226, 0.82);
}

/* ── Records — things you press, so keys ────────────────────────────────────── */
.romansite__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 13px 16px 0;
}
.romansite__links a {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: rgba(237, 233, 226, 0.74);
  background: linear-gradient(145deg, rgba(41, 47, 63, 0.60), rgba(12, 17, 28, 0.76));
  box-shadow:
    -4px -4px 9px rgba(255, 255, 255, 0.035),
     5px  5px 12px rgba(0, 0, 0, 0.52),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  transition:
    box-shadow 0.3s var(--ease-out),
    transform 0.16s var(--ease-out),
    color 0.22s var(--ease-out);
}
.romansite__links a:hover {
  transform: translateY(-1.5px);
  color: var(--fg1);
  box-shadow:
    -5px -5px 11px rgba(255, 255, 255, 0.05),
     7px  7px 16px rgba(0, 0, 0, 0.57),
    inset 0 1px 0 rgba(255, 255, 255, 0.075);
}
.romansite__links a:active { transform: translateY(1px); }

/* ── Attribution — a licence condition, quiet but present on every card ─────── */
.romansite__credit {
  margin: 13px 16px 0;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: rgba(237, 233, 226, 0.4);
}
.romansite__credit a {
  color: rgba(237, 233, 226, 0.55);
  text-decoration: none;
  border-bottom: 1px solid rgba(237, 233, 226, 0.25);
}
.romansite__credit a:hover { color: var(--fg1); }
/* NarrationPanel — right-hand reading window + editorial reading surface.
   Palette mirrors the iOS SheetChat READING_SURFACE (warm parchment greys on
   the dark glass), not the cooler app chrome. */

.np-panel {
  --np-text: #EDE9E2;
  --np-text-2: #9A9080;
  --np-text-3: #6A6459;
  --np-gold: #C9A84C;
  --np-gold-muted: rgba(201, 168, 76, 0.35);

  position: absolute;
  top: var(--sp-md);
  right: var(--sp-md);
  bottom: var(--sp-md);
  z-index: 22; /* above the POI callout (20) and docks (16) */
  width: 520px;
  max-width: 46vw;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-modal), var(--inner-top-dark);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;

  /* Slide-in: parked off the right edge, eased in when open. Always mounted so
     both directions animate. */
  transform: translateX(calc(100% + var(--sp-lg)));
  opacity: 0;
  pointer-events: none;
  transition: transform 0.46s var(--ease-out), opacity 0.36s var(--ease-out);
}
.np-panel.is-open {
  transform: translateX(0);
  opacity: 1;
  pointer-events: auto;
}

@media (max-width: 1100px) {
  .np-panel { width: 440px; max-width: 80vw; }
}
@media (prefers-reduced-motion: reduce) {
  .np-panel { transition: opacity 0.2s linear; transform: none; }
  .np-panel:not(.is-open) { opacity: 0; pointer-events: none; }
}

/* ── Header ── */
.np-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-sm) var(--sp-md);
  border-bottom: 1px solid rgba(201, 168, 76, 0.08);
  flex: 0 0 auto;
}
.np-header-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--np-text-3);
}
.np-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Shown only when the Ancient Ground viewer was closed but its narration is
   still open — a one-tap way back into the 3D terrain. */
.np-reopen-ag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(201, 168, 76, 0.32);
  background: rgba(201, 168, 76, 0.08);
  color: var(--np-gold);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.np-reopen-ag:hover {
  background: rgba(201, 168, 76, 0.16);
  border-color: rgba(201, 168, 76, 0.5);
}
.np-close {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--np-gold);
  font-size: 15px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s var(--ease-out);
}
.np-close:hover { background: rgba(201, 168, 76, 0.12); }

/* ── Body (scroll viewport + floating header overlay) ── */
.np-body {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}
.np-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  padding: 16px var(--sp-lg) var(--sp-md);
  scrollbar-width: thin;
  scrollbar-color: rgba(201, 168, 76, 0.3) transparent;
}
.np-scroll::-webkit-scrollbar { width: 8px; }
.np-scroll::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.22);
  border-radius: 4px;
}

/* ── Chapter title page (in-flow) ── */
.np-chapter {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 24px;
}
/* In-flow name reserves the title's vertical space; the visible title is the
   floating overlay (so it can pin on scroll). */
.np-ch-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0.5px;
  color: var(--np-gold);
  opacity: 0;
}
.np-ch-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: opacity, transform;
}
/* Gold-tinted splash engraving — alpha silhouette filled gold (mirrors the iOS
   tintColor), letterboxed in a fixed band so nothing reflows as it loads. */
.np-ch-illus {
  width: 80%;
  height: 168px;
  margin-top: var(--sp-sm);
  background-color: var(--np-gold);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: np-illus-in 0.5s var(--ease-out) both;
}
@keyframes np-illus-in { from { opacity: 0; } to { opacity: 1; } }
.np-chapter-rule {
  width: 40px;
  height: 1px;
  background: var(--np-gold-muted);
  margin: var(--sp-sm) 0;
}
.np-chapter-cat {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--np-text-3);
}

/* ── Ornamental divider ── */
.np-divider {
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: 12px;
  padding: 0 var(--sp-xl);
  margin: var(--sp-md) 0 var(--sp-sm);
}
.np-divider-inline { margin: var(--sp-lg) 0; }
.np-divider-rule {
  flex: 1;
  height: 1px;
  background: var(--np-gold-muted);
  opacity: 0.25;
}
.np-divider-star {
  font-size: 12px;
  color: var(--np-gold);
  opacity: 0.4;
}

/* ── Floating header overlay (scroll choreography) ── */
.np-fh-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  pointer-events: none;
}
/* Gradient backdrop that fades in once the title pins, so prose scrolls under
   it cleanly. */
.np-fh-fade {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 96px;
  background: linear-gradient(to bottom, rgba(10, 15, 26, 1) 0%, rgba(10, 15, 26, 1) 55%, rgba(10, 15, 26, 0) 100%);
  opacity: 0;
}
.np-fh {
  position: absolute;
  left: 0;
  right: 0;
  top: 40px; /* overridden imperatively: max(40 - scroll, 14) */
  display: flex;
  flex-direction: column;
  align-items: center;
  will-change: top;
}
.np-fh-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: 0.5px;
  color: var(--np-gold);
  text-align: center;
  padding: 0 var(--sp-md);
}
.np-fh-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 0 var(--sp-xl);
  margin-top: 6px;
}
.np-fh-rule {
  flex: 1;
  height: 1px;
  background: var(--np-gold-muted);
  opacity: 0;
  transform: scaleX(0);
}
.np-fh-rule--l { transform-origin: right center; }
.np-fh-rule--r { transform-origin: left center; }
.np-fh-star {
  font-size: 12px;
  color: var(--np-gold);
  opacity: 0;
}

/* ── Assistant prose ── */
.np-assistant { margin-bottom: var(--sp-md); }
.np-para {
  margin: 0 0 16px;
  font-family: var(--font-display);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.62;
  letter-spacing: 0.2px;
  color: var(--np-text);
}
.np-para:last-child { margin-bottom: 0; }
.np-para-first { font-weight: 400; }

/* Drop cap (first paragraph of the first narration) */
.np-dropcap-wrap { overflow: hidden; }
.np-dropcap-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 52px;
  line-height: 0.86;
  color: var(--np-gold);
  padding: 4px 10px 0 0;
}

/* Word-by-word reveal */
.np-word {
  opacity: 0;
  animation-name: np-word-in;
  animation-fill-mode: forwards;
  animation-timing-function: ease-out;
}
@keyframes np-word-in { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .np-word { opacity: 1; animation: none; }
}

/* Pull quotes */
.np-pullquote {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 var(--sp-xl);
  margin: var(--sp-md) 0;
}
.np-pullquote-rule {
  width: 60%;
  height: 1px;
  background: var(--np-gold-muted);
  margin: var(--sp-md) 0;
}
.np-pullquote-text {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.55;
  text-align: center;
  color: var(--np-text);
}

/* Token usage footer */
.np-tokens {
  margin-top: var(--sp-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--np-text-3);
}

/* User annotation bubble */
.np-user-bubble {
  align-self: flex-end;
  max-width: 82%;
  margin: 0 0 var(--sp-md) auto;
  padding: 10px 14px;
  border: 1px solid rgba(74, 144, 217, 0.2);
  background: rgba(74, 144, 217, 0.12);
  border-radius: 14px 14px 4px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--np-text);
}

/* ── Shimmer loading ── */
.np-shimmer { margin: var(--sp-md) 0; }
.np-shimmer-bar {
  position: relative;
  height: 2px;
  border-radius: 1px;
  background: rgba(201, 168, 76, 0.08);
  overflow: hidden;
  margin-bottom: var(--sp-sm);
}
.np-shimmer-sweep {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  background: linear-gradient(90deg, rgba(201,168,76,0.04), rgba(201,168,76,0.4), rgba(201,168,76,0.04));
  animation: np-sweep 1.8s ease-in-out infinite;
}
@keyframes np-sweep {
  0% { left: -120px; }
  100% { left: 100%; }
}
.np-shimmer-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  text-align: center;
  color: var(--np-text-3);
}
.np-skeleton {
  margin-top: var(--sp-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: np-pulse 2s ease-in-out infinite;
}
.np-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
@keyframes np-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .np-shimmer-sweep, .np-skeleton { animation: none; }
}

/* ── Image carousel (FIXED-SIZE box) ── */
.np-carousel { margin: 0 0 var(--sp-md); }
.np-carousel-frame { position: relative; }
.np-carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: 50%;
  background: rgba(10, 15, 26, 0.72);
  color: var(--np-gold);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.np-carousel-arrow--prev { left: 8px; }
.np-carousel-arrow--next { right: 8px; }
.np-carousel-arrow:hover:not(:disabled) { background: rgba(10, 15, 26, 0.9); }
.np-carousel-arrow:disabled { opacity: 0.25; cursor: default; }
.np-carousel-track {
  display: flex;
  height: 220px;            /* constant — the image never resizes the box */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: var(--r-sm);
  scrollbar-width: none;
}
.np-carousel-track::-webkit-scrollbar { display: none; }
.np-carousel-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  background: rgba(201, 168, 76, 0.04);
}
.np-carousel-img {
  width: 100%;
  height: 100%;
  object-fit: contain;      /* letterbox inside the fixed frame */
  display: block;
  border-radius: var(--r-sm);
}
.np-carousel-source {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--np-text-2);
  background: rgba(10, 15, 26, 0.7);
  padding: 2px 5px;
  border-radius: 4px;
}
.np-carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.np-carousel-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: none;
  appearance: none;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.25);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.np-carousel-dot.is-active {
  width: 6px;
  height: 6px;
  background: var(--np-gold);
}
.np-carousel-caption {
  font-family: var(--font-body);
  font-size: 11px;
  color: var(--np-text-3);
  text-align: right;
  margin-top: 4px;
}

/* ── Follow-up pills ── */
/* ── Nearby, related ──────────────────────────────────────────────────────────
   Sits between the images and "Keep exploring": images close the current story,
   these open the next one, and the follow-up pills stay on this site. Deliberately
   card-shaped rather than pill-shaped — a pill asks a question, a card goes
   somewhere. */
.np-related {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--sp-md) 0;
}
.np-related-header {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--np-text-3);
  text-align: center;
}
.np-related-card {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 11px 14px;
  border: 1px solid rgba(244, 213, 141, 0.18);
  border-radius: var(--r-lg);
  background: rgba(244, 213, 141, 0.04);
  color: var(--np-text);
  font-family: var(--font-body);
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.np-related-card:hover {
  border-color: rgba(244, 213, 141, 0.4);
  background: rgba(244, 213, 141, 0.09);
}
.np-related-icon { width: 20px; height: 20px; flex: 0 0 20px; opacity: 0.9; }
.np-related-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.np-related-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--gold, #f4d58d);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-related-reason {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--np-text-3);
  /* The model's reason can run long — two lines, then clamp. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-related-go { color: var(--np-text-3); flex: 0 0 auto; font-size: 14px; }
.np-related-card:hover .np-related-go { color: var(--gold, #f4d58d); }

.np-followups {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: var(--sp-md) 0;
}
.np-followups-header {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--np-text-3);
  text-align: center;
}
.np-followup-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 11px 16px;
  border: 1px solid rgba(244, 213, 141, 0.18);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--np-text);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}
.np-followup-pill:hover {
  border-color: var(--np-gold-muted);
  background: rgba(201, 168, 76, 0.06);
}
.np-followup-arrow { color: var(--np-gold); }

/* ── Sources ── */
.np-sources {
  margin-top: var(--sp-md);
  border-top: 1px solid var(--surface-border);
  padding-top: var(--sp-sm);
}
.np-sources-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--sp-sm) 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--np-gold);
}
.np-sources-chevron { font-size: 10px; }
.np-sources-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-md);
  margin-top: var(--sp-sm);
}
.np-source-row {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-md);
  padding: var(--sp-md);
}
.np-source-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  color: var(--np-gold);
}
.np-source-sub {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--np-text-3);
  margin-top: 2px;
}
.np-source-passage {
  display: block;
  text-align: left;
  background: transparent;
  border: none;
  padding: var(--sp-sm) 0 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--np-text);
  cursor: default;
}
.np-source-passage[disabled] { cursor: default; }
.np-source-passage:not([disabled]) { cursor: pointer; }
.np-source-toggle {
  display: block;
  margin-top: var(--sp-xs);
  font-weight: 500;
  font-size: var(--fs-xs);
  color: var(--np-gold);
}
.np-source-link {
  display: block;
  margin-top: var(--sp-sm);
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  color: var(--np-gold);
  word-break: break-all;
  text-decoration: none;
}
.np-source-link:hover { text-decoration: underline; }

/* ── Rating row ── */
.np-rating { padding: var(--sp-sm) 0 var(--sp-md); }
.np-rating-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--np-text-3);
  margin-bottom: var(--sp-sm);
}
.np-rating-actions { display: flex; gap: var(--sp-sm); }
.np-rating-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid rgba(201, 168, 76, 0.18);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.02);
  color: var(--np-gold);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.np-rating-btn.is-active {
  background: var(--np-gold);
  border-color: var(--np-gold);
  color: var(--background);
}

/* ── Access gate (auth / credits) ── */
.np-access {
  border: 1px solid rgba(244, 213, 141, 0.16);
  background: rgba(244, 213, 141, 0.05);
  border-radius: var(--r-lg);
  padding: var(--sp-md);
  margin-top: var(--sp-md);
}
.np-access-eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--np-text-3);
  margin-bottom: var(--sp-sm);
}
.np-access-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--np-gold);
  margin-bottom: var(--sp-xs);
}
.np-access-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--np-text-2);
}
.np-access-hint {
  margin: var(--sp-sm) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--np-text-3);
}
.np-access-hint code {
  font-family: var(--font-mono);
  color: var(--np-gold);
  background: rgba(201, 168, 76, 0.1);
  padding: 1px 4px;
  border-radius: 3px;
}
.np-access-btn {
  margin-top: var(--sp-md);
  padding: 8px 16px;
  border: 1px solid rgba(244, 213, 141, 0.22);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--np-gold);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  cursor: pointer;
}
.np-access-btn:hover { background: rgba(201, 168, 76, 0.08); }

/* ── Error ── */
.np-error {
  padding: var(--sp-md) 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--error);
  text-align: center;
}

/* ── Input bar ── */
.np-input-row {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-md) var(--sp-md);
  border-top: 1px solid rgba(201, 168, 76, 0.08);
  flex: 0 0 auto;
}
.np-input {
  flex: 1;
  height: 40px;
  padding: 0 var(--sp-md);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--np-text);
  font-family: var(--font-body);
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s var(--ease-out);
}
.np-input:focus { border-color: var(--np-gold-muted); }
.np-input::placeholder { color: var(--np-text-3); }
.np-input:disabled { opacity: 0.6; }
.np-send {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(244, 213, 141, 0.15);
  background: var(--surface);
  color: var(--np-gold);
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
.np-send:disabled { color: var(--shadow-fg); cursor: default; }
.np-send:not(:disabled):hover { background: rgba(201, 168, 76, 0.12); }

/* Secondary action on the access gate — present but not competing with the primary. */
.np-access-btn--quiet {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--np-text-3);
  margin-top: 8px;
}
.np-access-btn--quiet:hover {
  border-color: rgba(244, 213, 141, 0.22);
  color: var(--np-text);
}
/* LoginModal — centered sign-in box over a gently blurred, dimmed app. */

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 100; /* above every panel/callout */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-lg);
  background: rgba(6, 9, 14, 0.55);
  backdrop-filter: blur(8px) saturate(0.9);
  -webkit-backdrop-filter: blur(8px) saturate(0.9);
  animation: login-fade 0.3s var(--ease-out);
}

@keyframes login-fade { from { opacity: 0; } to { opacity: 1; } }

.login-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--sp-xl) var(--sp-lg) var(--sp-lg);
  background: var(--glass);
  border: 1px solid var(--surface-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-modal), var(--inner-top-dark);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: login-rise 0.42s var(--ease-out);
}

@keyframes login-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.login-close {
  position: absolute;
  top: var(--sp-sm);
  right: var(--sp-sm);
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--mist);
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out);
}
.login-close:hover { background: rgba(255, 255, 255, 0.06); color: var(--moonlight); }

.login-brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: 0.5px;
  color: var(--gold-soft);
}
.login-brand span { color: var(--moonlight); }

.login-rule {
  width: 44px;
  height: 1px;
  background: var(--rule-strong);
  margin: var(--sp-sm) 0 var(--sp-md);
}

.login-tagline {
  margin: 0 0 var(--sp-lg);
  font-family: var(--font-display);
  font-size: 16px;
  font-style: italic;
  line-height: 1.5;
  color: var(--mist);
  max-width: 300px;
}

.login-providers {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm);
  width: 100%;
}

.login-apple {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 320px;
  max-width: 100%;
  height: 44px;
  border: none;
  border-radius: var(--r-pill);
  background: #f5f5f7;
  color: #111;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s var(--ease-out), transform 0.1s var(--ease-out);
}
.login-apple:hover:not(:disabled) { background: #fff; }
.login-apple:active:not(:disabled) { transform: scale(0.985); }
.login-apple:disabled { opacity: 0.6; cursor: default; }

/* Google renders its own button inside this container. */
.login-google {
  width: 320px;
  max-width: 100%;
  display: flex;
  justify-content: center;
  min-height: 44px;
}

.login-google-fallback {
  width: 320px;
  max-width: 100%;
  height: 44px;
  border: 1px solid var(--surface-border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 15px;
  cursor: default;
}

.login-error {
  margin: var(--sp-md) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--error);
}
.login-busy {
  margin: var(--sp-sm) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--mist);
}

.login-guest {
  margin-top: var(--sp-lg);
  border: none;
  background: transparent;
  color: var(--gold-soft);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(244, 213, 141, 0.4);
}
.login-guest:hover { text-decoration-color: var(--gold-soft); }

.login-fineprint {
  margin: var(--sp-sm) 0 0;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--shadow-fg);
  max-width: 300px;
}

@media (prefers-reduced-motion: reduce) {
  .login-overlay, .login-box { animation: none; }
}
/* LidarSunDial — a compass disc (drag the glowing "sun"), ported from the Ancient
   Ground viewer's ag-lightdial so the LiDAR overlay shares the same instrument. */
.lidar-sundial {
  position: absolute;
  z-index: 5;
  right: 16px;
  top: 140px;                 /* just below the top-right zoom/compass nav controls (the Instruments button that used to sit here moved to the sidebar) */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;       /* only the disc itself is interactive */
}
.lidar-sundial__disc {
  position: relative;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 1px solid rgba(244, 213, 141, 0.28);
  background: radial-gradient(circle at 50% 38%, rgba(40, 46, 60, 0.5), rgba(10, 15, 26, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 6px 18px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: grab;
  pointer-events: auto;
}
.lidar-sundial__disc:active { cursor: grabbing; }
.lidar-sundial__cross {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(244, 213, 141, 0.5);
  transform: translate(-50%, -50%);
}
.lidar-sundial__dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff, var(--gold-soft, #f4d58d) 70%);
  box-shadow: 0 0 9px 2px rgba(244, 213, 141, 0.6);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.lidar-sundial__label {
  font-family: var(--font-caption, 'Cormorant', Georgia, serif);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(244, 213, 141, 0.72);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  user-select: none;
}
.app-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Chrome (left sidebar, right dock, POI callout) is owned by its own
   components; the shell is just the full-bleed map stage. */

/* Hidden container for SVG filter defs (the turbulence filter). */
.ws-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Ancient Ground — gentle blur of the MAP ONLY. Sits above the map but below
   all chrome (sidebar z16, callout z20, etc.), so backdrop-filter blurs the
   map behind it while every UI panel paints on top, sharp and untouched. */
.ag-map-blur {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: ag-blur-in 0.3s var(--ease-out);
}
@keyframes ag-blur-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ag-map-blur { animation: none; }
}

/* ── Subtle gold hover glow — reusable utility ──
   Drop `ws-wisp` on any button. The previous churning gold "smoke" (an animated
   SVG turbulence layer) is replaced by a quiet inset gold glow that lifts in on
   hover — matching the rest of the sidebar's buttons. */
.ws-wisp { position: relative; overflow: hidden; transition: box-shadow 0.22s var(--ease-out); }
.ws-wisp > * { position: relative; z-index: 1; }
.ws-wisp:not(.is-soon):hover {
  box-shadow: inset 0 0 12px rgba(244, 213, 141, 0.2);
}