/* ---------- Map view (js/map/) ----------
   The globe fills the panel (the same --panel sheet as the timeline and the Data view); the controls float over it
   on the theme's own sheets: filters along the top, "Around the world" at the right, zoom at the right edge, the time
   bar along the bottom. Shared here: layout, motion and the principles. A theme sets only the --map-* tokens (its
   palette for the globe; defaults below are built from the theme tokens, so a new theme gets a globe at once) in its
   own skin file, and restyles the controls through the shared .seg and .btn classes like everywhere else. */
.mapview {
  /* the globe's palette (read into WebGL by js/map/index.js; colours any CSS colour, alphas 0-1) */
  --map-sea: color-mix(in oklab, var(--accent) 7%, var(--surface-2));
  --map-land: var(--surface);
  --map-coast: var(--text); --map-coast-a: .5;
  --map-border: var(--muted); --map-border-a: .28;
  --map-grid: var(--muted); --map-grid-a: .12;
  --map-halo: var(--accent); --map-halo-a: .18;   /* the glow round the globe; 0 = none */
  --map-limb: var(--line-strong);                  /* the globe's edge, a hairline */
  --map-shade: .35; --map-sea-grad: .12;   /* light on the sphere, sea darker toward the edge (no relief: only sharp shapes) */
  --map-war: var(--danger); --map-war-a: .9;       /* the pulse round a war while it lasts */
  --map-edge: var(--text); --map-icon: var(--on-accent); --map-hot: var(--accent);   /* a marker's rim, its icon, the hovered/selected ring */
  --map-ring-a: .8; --map-ghost: .2;               /* the ring as an entry appears; what is left of it after it ends */
  --map-arc: var(--tie-close, var(--accent)); --map-arc-hot: var(--tie-conflict, var(--danger)); --map-arc-a: .85;
  --map-realm-1: oklch(.72 .09 30); --map-realm-2: oklch(.72 .09 140); --map-realm-3: oklch(.72 .08 230);
  --map-realm-4: oklch(.74 .1 80); --map-realm-5: oklch(.7 .08 300); --map-realm-6: oklch(.72 .07 190);
  --map-realm-a: .7;                               /* how strongly realms colour their land (borders: --map-border) */
  --map-pic: 44px; --map-shadow: var(--text); --map-shadow-a: .26;   /* a picture on the globe: its size, the soft shadow under it */
  --map-pic-mono: 0;                               /* 1: pictures in grey (a theme of one ink) */
  --map-sheet: color-mix(in srgb, var(--surface) 94%, transparent);   /* the floating controls' sheet */
  --map-gap: 12px; --map-time-b: var(--map-gap); --map-time-h: 66px;   /* where the time bar sits, its height: the zoom buttons stand on it */

  display: none; grid-column: 1 / -1; grid-row: 2; position: relative; min-width: 0; min-height: 0; overflow: hidden;
  contain: strict;
}
body[data-view="map"] :is(.side, .stage, .rmap, .tl-only:not(.map-too, .map-also)) { display: none; }   /* map-also: on the map only (Settings, the keys) */
body[data-view="map"] .mapview { display: block; }
.map-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: var(--cur-grab, grab); -webkit-tap-highlight-color: transparent; }
.map-gl:active { cursor: var(--cur-grabbing, grabbing); }
.map-probe { position: absolute; visibility: hidden; pointer-events: none; }
.map-msg { display: none; position: absolute; inset: 40% 24px auto; text-align: center; color: var(--muted); }
.mapview.map-nogl .map-msg { display: block; }
.mapview.map-nogl > :not(.map-msg) { display: none; }
.mapview:not(.map-ready) > :not(.map-gl, .map-msg) { visibility: hidden; }

/* the floating controls: the theme's sheet, one hairline, its corner */
:is(.map-top .seg, .map-now, .map-zoom, .map-time) {
  background: var(--map-sheet); box-shadow: inset 0 0 0 var(--hair, 1px) var(--line), var(--shadow-pop, none);
  contain: layout paint; will-change: transform;   /* each its own layer: words changing in them never repaint the globe under them */
}   /* no backdrop blur: over a globe that redraws every frame, Safari would blur it again each frame */
.map-top { position: absolute; left: var(--map-gap); right: var(--map-gap); top: var(--map-gap); display: flex; justify-content: center; align-items: center; gap: 8px; pointer-events: none; }
/* Topic: the shared topic lens (js/topiclens.js), its chips as in Settings */
.map-lens { pointer-events: auto; flex: none; max-width: 220px; }
.map-lens .map-lens-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-lens.on { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.map-lens-pop {
  position: absolute; top: calc(100% + 6px); left: 50%; translate: -50% 0; z-index: 4; width: min(440px, 100%); max-height: min(60dvh, 470px);
  overflow-y: auto; overscroll-behavior: contain; padding: 4px 12px 12px; pointer-events: auto;
  border-radius: var(--r-ui, 14px); background: var(--surface); box-shadow: inset 0 0 0 var(--hair, 1px) var(--line), var(--shadow-pop, none);
}
.map-lens-pop[hidden] { display: none; }
.map-lens-pop .lens-chip { min-height: 36px; }   /* a full touch target, as everything on the map */
.map-top .seg { pointer-events: auto; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.map-top .seg::-webkit-scrollbar { display: none; }
.mapview .seg button { height: 36px; padding-block: 0; }   /* a full 36px target, 38 on touch */
@media (pointer: coarse) { .mapview .seg button { height: 38px; } .mapview .btn { min-height: 38px; } }
.mapview .btn { height: 36px; }
.map-presets button { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map-presets button svg { flex: none; }

/* Around the world: the best known of the year, a quiet list */
.map-now {
  position: absolute; right: var(--map-gap); top: calc(var(--map-gap) + 52px); width: 240px; padding: 10px 6px 6px;
  border-radius: var(--r-ui, 14px);
}
.map-now h3 { margin: 0 8px 6px; font: 600 var(--t-meta, 11px) / 1.2 var(--font-label, var(--font-ui)); text-transform: var(--label-case, uppercase); letter-spacing: .08em; color: var(--muted); }
.map-now ol { margin: 0; padding: 0; list-style: none; }
.map-now button {
  display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 9px; align-items: center;
  width: 100%; min-height: 40px; padding: 4px 8px; border: 0; border-radius: var(--r-ui, 10px); background: none; text-align: left; color: var(--text);
  cursor: var(--cur-pointer, pointer);
}
.map-now button:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.map-now .map-pic { grid-row: 1 / 3; }
.map-nm { font: 600 13px / 1.25 var(--font-name, var(--font-ui)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-sub { font: 12px / 1.25 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-now li.fresh { animation: map-in .35s var(--ease-out, ease-out) backwards; }
.map-now li[hidden] { display: none; }
@keyframes map-in { from { opacity: 0; translate: 0 4px; } }
/* the category's own shape (its header icon, bar pictures and search results: css/style.css), tinted in its colour */
.map-pic.has-pic { width: 34px; height: 34px; background: var(--pic-bg, var(--surface-2)) center 30% / cover no-repeat; }
.map-pic.has-pic.portrait { box-shadow: 0 0 0 2px var(--c); }
.map-pic { width: 26px; height: 26px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); clip-path: var(--clip, none); border-radius: 50%; }
.map-pic:is(.shield, .hex, .signpost, .diamond, .pentagon, .pennant, .octagon, .trapezoid, .banknote, .banner, .book, .cloud, .wave, .canvas, .photo, .tile, .arch, .capsule, .semicircle) { border-radius: 4px; }

/* zoom: three small buttons at the right edge */
.map-zoom { position: absolute; right: var(--map-gap); bottom: calc(var(--map-time-b) + var(--map-time-h) + 10px); display: flex; flex-direction: column; gap: 4px; padding: 4px; border-radius: var(--r-ui, 999px); }
.map-zoom .btn { width: 36px; height: 36px; padding: 0; justify-content: center; }

/* the time bar */
.map-time {
  position: absolute; left: var(--map-gap); right: var(--map-gap); bottom: var(--map-time-b); display: flex; align-items: center; gap: 20px;
  min-height: 104px; padding: 12px 20px; box-sizing: border-box; border-radius: var(--r-ui, 16px);
}
.mapview .map-play { width: 54px; height: 54px; padding: 0; justify-content: center; flex: none; border-radius: var(--r-ui, 999px); box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 32%, transparent); }
.map-play .map-i-pause, .map-play.on .map-i-play { display: none; }
.map-play.on .map-i-pause { display: block; }
.map-year { display: flex; flex-direction: column; gap: 6px; flex: none; width: 150px; }
.map-y { display: flex; align-items: baseline; gap: 6px; color: var(--text); white-space: nowrap; }
.map-yn { font: 700 40px / 1 var(--font-title, var(--font-head, var(--font-ui))); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.map-yu { font: 600 13px / 1 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); }
.map-era { font: 11.5px / 1.3 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-track { position: relative; flex: 1 1 auto; min-width: 80px; height: 66px; cursor: var(--cur-pointer, pointer); touch-action: none; outline-offset: 4px; }
.map-track:focus-visible { outline: 2px solid var(--accent); border-radius: 4px; }
.map-eras { position: absolute; left: 0; right: 0; top: 0; height: 16px; }
.map-band { position: absolute; top: 0; height: 16px; overflow: hidden; border-left: var(--hair, 1px) solid var(--line-strong); }
.map-band i .ico { margin-right: 4px; vertical-align: -1.5px; }   /* the era's mark (js/icons.js eraIcon) */
.map-band i { display: block; padding-left: 5px; font: 600 10px / 16px var(--font-label, var(--font-ui)); font-style: normal; text-transform: var(--label-case, uppercase); letter-spacing: .1em; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-dens { position: absolute; left: 0; right: 0; top: 20px; width: 100%; height: 26px; color: color-mix(in srgb, var(--muted) 40%, transparent); }
/* the years already passed: the same bars, darker, up to the thumb */
.map-done { position: absolute; left: 0; right: 0; top: 20px; height: 26px; overflow: hidden; pointer-events: none; will-change: transform; }
.map-done .map-dens-done { will-change: transform; }
.map-done .map-dens { top: 0; left: 0; right: auto; color: color-mix(in srgb, var(--text) 58%, transparent); }
.map-track::after { content: ""; position: absolute; left: 0; right: 0; top: 47px; height: var(--hair, 1px); background: var(--line-strong); }
.map-ticks span { position: absolute; top: 52px; translate: -50% 0; font: 10.5px / 12px var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--faint); white-space: nowrap; }
.map-thumb { position: absolute; left: 0; top: 14px; width: 2px; height: 34px; margin-left: -1px; background: var(--accent); pointer-events: none; }
.map-thumb::after { content: ""; position: absolute; left: 50%; top: 27px; width: 16px; height: 16px; translate: -50% 0; border-radius: var(--r-ui, 50%); background: var(--accent); box-shadow: 0 0 0 3px var(--map-sheet); transition: scale .15s; }
.map-track.drag .map-thumb::after { scale: 1.25; }
.map-speed { flex: none; }
.map-speed button { min-width: 38px; font-variant-numeric: tabular-nums; }
.map-follow { flex: none; }
.map-follow[aria-pressed="true"] { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

/* names on the globe: the best known of the moment beside their marker, realms in spaced capitals over their land */
.map-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: strict; }
.map-lbl, .map-realm { position: absolute; left: 0; top: 0; white-space: nowrap; will-change: transform; }
.map-lbl {
  margin: -15px 0 0 var(--off, 12px);   /* beside its marker, or beside its picture (js/map/index.js sets --off) */ padding: 2px 6px; max-width: 190px; overflow: hidden; text-overflow: ellipsis; border-radius: var(--r-ui, 6px);
  font: 600 12px / 15px var(--font-name, var(--font-ui)); color: var(--text); background: var(--map-sheet);
  box-shadow: inset 0 0 0 var(--hair, 1px) var(--line);
  opacity: 0; transition: opacity .35s ease;
}
.map-lbl b, .map-lbl i { display: block; overflow: hidden; text-overflow: ellipsis; }
.map-lbl b { font-weight: inherit; }
.map-lbl i { font: 10.5px / 13px var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); }
.map-lbl i:empty { display: none; }
/* the lifeline: a hairline under the name that fills as the life or event passes while history plays, in the colour of
   the timeline's year counter (--years-tint: the theme's, else the category's) */
.map-life { display: block; height: 2px; margin: 3px 0 1px; overflow: hidden; background: color-mix(in srgb, var(--years-tint, var(--c, var(--accent))) 20%, transparent); }
.map-life > span { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--years-tint, var(--c, var(--accent))); will-change: transform; }
.map-lbl.on { opacity: 1; }
.map-lbl.war { box-shadow: inset 0 0 0 var(--hair, 1px) color-mix(in srgb, var(--map-war) 60%, transparent); }
.map-realm {
  translate: -50% -50%; font: 600 13px / 1 var(--font-head, var(--font-ui)); text-transform: uppercase; letter-spacing: .18em;
  color: color-mix(in srgb, var(--text) 62%, transparent); text-shadow: 0 0 3px var(--map-land), 0 0 6px var(--map-land);
}
.map-realm.mid { font-size: 14px; letter-spacing: .2em; }
.map-realm.big { font-size: 16px; letter-spacing: .24em; }
/* how to use it: a short line the first times the map opens (js/map/index.js showHint) */
.map-hint {
  position: absolute; bottom: calc(100% + 6px); z-index: 2; translate: 14px 6px; max-width: 320px;
  margin: 0; padding: 6px 11px; pointer-events: none; border-radius: var(--r-ui, 999px); white-space: nowrap;
  font: 600 11.5px / 1.2 var(--font-ui); color: var(--text); background: var(--map-sheet); box-shadow: inset 0 0 0 var(--hair, 1px) var(--line), var(--shadow-pop, none);
  opacity: 0; transition: opacity .35s var(--ease-out, ease-out), translate .35s var(--ease-out, ease-out);
}
.map-hint::before { content: "⟷"; margin-right: 7px; }
.map-hint.on { opacity: 1; translate: 14px 0; }
/* close in: forty years spread out above the thumb, with the battles of the place in view (js/map/index.js placeLens) */
.map-tlens {
  position: absolute; bottom: calc(100% + 10px); z-index: 2; translate: -50% 0; width: 340px; height: 58px; box-sizing: border-box; padding: 8px 14px;
  pointer-events: none; border-radius: var(--r-ui, 10px); color: var(--text); background: var(--map-sheet); box-shadow: inset 0 0 0 var(--hair, 1px) var(--line), var(--shadow-pop, none);
}
.map-tlens[hidden] { display: none; }
.map-tl-m { position: absolute; left: 14px; right: 14px; top: 30px; height: var(--hair, 1px); background: var(--line-strong); }
.map-tl-m::after { content: ""; position: absolute; left: 50%; top: -6px; width: 12px; height: 12px; margin-left: -6px; border-radius: var(--r-ui, 50%); background: var(--map-sheet); box-shadow: 0 0 0 3px var(--accent); }
.map-tl-d { position: absolute; top: -4px; width: 8px; height: 8px; margin-left: -4px; rotate: 45deg; background: var(--accent); }
.map-tl-d b { position: absolute; bottom: 10px; left: 50%; rotate: -45deg; translate: -50% -4px; transform-origin: 0 100%; font: 600 10.5px / 1 var(--font-ui); white-space: nowrap; }
.map-tl-a, .map-tl-b { position: absolute; top: 37px; font: 10px / 1 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); opacity: .7; }
.map-tl-a { left: 14px; } .map-tl-b { right: 14px; }
.map-hint[hidden] { display: none; }
/* a realm's card: under the filters, at the left (js/map/index.js showRealm) */
.map-realmcard {
  position: absolute; left: var(--map-gap); top: calc(var(--map-gap) + 58px); z-index: 2; width: 260px; padding: 16px; box-sizing: border-box;
  border-radius: var(--r-ui, 14px); background: var(--map-sheet); box-shadow: inset 0 0 0 var(--hair, 1px) var(--line), var(--shadow-pop, none);
  contain: layout paint;
}
.map-realmcard[hidden] { display: none; }
.map-rc-k { margin: 0; font: 600 10.5px / 1 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.map-rc-n { margin: 8px 0 0; font: 700 22px / 1.05 var(--font-title, var(--font-head, var(--font-ui))); letter-spacing: .05em; text-transform: var(--label-case, uppercase); color: var(--text); }
.map-rc-y { margin: 4px 0 0; font: 12px / 1.3 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); }
.map-rc-chart { display: block; width: 100%; height: 64px; margin-top: 12px; overflow: visible; }
.map-rc-chart .l { fill: none; stroke: var(--text); stroke-opacity: .3; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.map-rc-chart .d { fill: none; stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-rc-chart .a { fill: var(--accent); fill-opacity: .14; }
.map-rc-chart circle { fill: var(--accent); }
.map-rc-t { margin: 10px 0 0; font: 13px / 1.45 var(--font-ui); color: var(--text); }
/* close in: a scale bar and how close */
.map-scale {
  position: absolute; left: var(--map-gap); bottom: calc(var(--map-time-b) + var(--map-time-h) + 10px); z-index: 1; display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: var(--r-ui, 10px); background: var(--map-sheet); box-shadow: inset 0 0 0 var(--hair, 1px) var(--line); pointer-events: none;
}
.map-scale[hidden] { display: none; }
.map-scale i { display: block; height: 6px; border: 1.5px solid var(--text); border-top: 0; box-sizing: border-box; }
.map-scale span { font: 10.5px / 1.2 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--text); white-space: nowrap; }
.map-scale .map-scale-z { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* the borders' source, as its licence asks: small, in the corner left of the zoom buttons */
.map-credit {
  position: absolute; right: calc(var(--map-gap) + 52px); bottom: calc(var(--map-time-b) + var(--map-time-h) - 2px); z-index: 1;
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 6px;   /* a full touch target, the words small */
  font: 10.5px / 1.2 var(--font-ui); color: var(--faint); text-decoration: none; white-space: nowrap;
}
.map-credit:hover { color: var(--muted); text-decoration: underline; }
/* small screens: the bottom is full (time bar, version bar), so it sits under the filters at the top right */
@media (max-width: 760px), (max-height: 500px) { .map-credit { right: var(--map-gap); bottom: auto; top: calc(var(--map-gap) + 40px); } }
/* the hover tip: name, then category and dates */
.map-tip {
  position: absolute; left: 0; top: 0; z-index: 3; margin: 14px 0 0 14px; padding: 7px 10px; display: grid; gap: 2px; pointer-events: none;
  border-radius: var(--r-ui, 8px); background: var(--surface); box-shadow: inset 0 0 0 var(--hair, 1px) var(--line), var(--shadow-pop, none);
}
.map-tip b { font: 600 13px / 1.25 var(--font-name, var(--font-ui)); color: var(--text); }
.map-tip span { font: 12px / 1.25 var(--font-date, var(--font-ui)); font-style: var(--date-style, normal); color: var(--muted); }
.map-tip[hidden] { display: none; }

/* the version bar (served copies, fixed at the bottom right) keeps its corner: the time bar ends before it */
@media (min-width: 761px) { body:has(> .vbar) .map-time { right: calc(var(--map-gap) + 184px); } }
/* narrower screens: the list goes, the bar keeps everything on one row while it can */
@media (max-width: 1180px) { .map-now { display: none; } .map-year { width: 118px; } .map-yn { font-size: 32px; } .mapview .map-time { gap: 16px; } }
/* below a laptop the realm card and the time lens would crowd the globe: the card shows only when a realm is tapped */
@media (max-width: 1100px) {
  .map-tlens { display: none; }
  body[data-view="map"] .hdr-keys { display: none; }   /* the header keeps room: keys don't apply on touch, Settings shows as its icon */
  body[data-view="map"] #settingsBtn .hdr-tx { display: none; }
}
@media (max-width: 900px) { .map-lens .map-lens-nm { display: none; } .map-lens { width: 36px; padding: 0; justify-content: center; } .map-follow span { display: none; } .map-follow { width: 36px; padding: 0; justify-content: center; } .map-presets button span { display: none; } .map-presets button { padding-inline: 10px; } }
/* phones: the drawer still holds the view switch (as in the Data view); the time bar takes two rows, the track below */
@media (max-width: 760px) {
  body[data-view="map"] .side { display: flex; bottom: auto; padding-bottom: 0; border-bottom-right-radius: 16px; }
  body[data-view="map"] .side > :not(.side-brand) { display: none; }
  body[data-view="map"] .side-brand { margin: 0; border: 0; }
  .mapview { --map-gap: 8px; --map-time-h: 104px; }
  body:has(> .vbar) .mapview { --map-time-b: 96px; }   /* the version bar (served copies) keeps the bottom edge */
  .map-time { flex-wrap: wrap; row-gap: 4px; column-gap: 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
  .map-track { order: 9; flex-basis: 100%; height: 44px; }
  .map-year { flex: 1 1 0; width: auto; min-width: 0; }
  .map-yn { font-size: 24px; } .map-y { overflow: hidden; }
  .map-time { min-height: 0; } .mapview .map-play { box-shadow: none; }
  .map-realmcard { left: var(--map-gap); right: calc(var(--map-gap) + 50px); width: auto; top: auto; bottom: calc(var(--map-time-b) + var(--map-time-h) + 8px); padding: 12px 14px; }
  .map-rc-chart { height: 44px; margin-top: 8px; } .map-rc-n { font-size: 18px; }
  .mapview .map-play { width: 40px; height: 40px; }
  .map-speed button { min-width: 36px; padding-inline: 4px; }
  .map-zoom :is(.map-zin, .map-zout) { display: none; }   /* pinch zooms */
  .map-band i { display: none; }
  .map-realm, .map-realm.mid { font-size: 11px; letter-spacing: .14em; } .map-realm.big { font-size: 12.5px; letter-spacing: .16em; }
}
@media (max-width: 360px) { .map-speed button[data-speed="0.5"], .map-follow { display: none; } }   /* the narrowest phones: play, the year and 1-4x keep one row (Follow stays on as it was) */
@media (max-height: 500px) {
  .mapview { --map-time-h: 56px; }
  .map-time { padding-block: 6px; gap: 10px; }
  .map-era { display: none; }
  .map-year { width: auto; }
  .map-yn { font-size: 24px; } .map-time { min-height: 0; }
  .map-realmcard { top: auto; bottom: calc(var(--map-time-b) + var(--map-time-h) + 8px); width: 260px; padding: 10px 12px; } .map-rc-chart, .map-rc-t, .map-rc-k { display: none; } .map-rc-n { margin: 0; font-size: 17px; }
  .map-scale { display: none; }
  .map-speed button { min-width: 36px; padding-inline: 4px; }
  .map-follow span { display: none; } .map-follow { width: 36px; padding: 0; justify-content: center; }
  .map-track { height: 40px; }
  .map-zoom { display: none; }
  .map-band i { display: none; }
}
/* while history plays, names come and go several times a second: they switch at once (fades there cost Safari frames) */
.mapview.playing :is(.map-lbl, .map-now li) { transition: none; animation: none; }
@media (prefers-reduced-motion: reduce) { .map-lbl, .map-now li { transition: none; animation: none; } }