/* Chronas-inspired chrome: warm dark charcoal surfaces, parchment ink,
   muted gold secondary, coral accent. The map itself stays a light
   pastel atlas so the political colours and dark labels read well. */

:root {
  --ink: #e8e3d6;          /* primary text on dark */
  --ink-strong: #f2ecdc;
  --ink-soft: #c9c0aa;
  --gold: #c8b990;
  --gold-dim: #9a8f6e;
  --coral: #ff7f6e;
  --coral-soft: #ff9585;
  --teal: #6fa8a0;         /* places (settlements + sites) — hex mirrored
                              in the app.js places-dot paint */
  --chrome: rgba(31, 29, 24, 0.92);
  --chrome-solid: #1f1d18;
  --surface: #26221b;      /* raised solid surfaces (modals, dropdowns) */
  --surface-2: #2b2620;    /* cards, chips */
  --line: rgba(200, 185, 144, 0.22);
  --line-strong: rgba(200, 185, 144, 0.4);
  --shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; font-family: Georgia, 'Times New Roman', serif; }

#map { position: absolute; inset: 0; background: #9db1c0; }

#brand {
  position: absolute; top: 16px; left: 16px; z-index: 5;
  background: var(--chrome); border: 1px solid var(--line);
  border-radius: 10px; padding: 11px 16px 12px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#brand h1 {
  font-size: 19px; color: var(--ink-strong); letter-spacing: 0.05em;
  font-weight: normal;
}
#brand p { font-size: 12px; color: var(--gold-dim); margin-top: 3px; }

/* search */
#search-wrap { position: relative; margin-top: 10px; width: min(268px, 72vw); }
#search-input {
  width: 100%; font-family: Georgia, serif; font-size: 13.5px;
  color: var(--ink); background: rgba(255, 250, 238, 0.07);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; outline: none;
}
#search-input:focus { border-color: var(--coral); }
#search-input::placeholder { color: #8d8266; }
#search-results {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 20;
  width: min(340px, 90vw); max-height: min(58vh, 460px); overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow);
}
#search-results.hidden { display: none; }
.sr-group {
  font-family: sans-serif; font-size: 10.5px; font-weight: bold;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold);
  background: var(--chrome-solid); padding: 5px 10px 3px;
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0;
}
.sr-item {
  padding: 6px 10px; cursor: pointer;
  border-bottom: 1px solid rgba(200, 185, 144, 0.1);
}
.sr-item:hover, .sr-item.active { background: rgba(255, 127, 110, 0.1); }
.sr-name { font-size: 13.5px; color: var(--ink); display: block; }
.sr-meta { font-size: 11px; color: var(--gold-dim); display: block; margin-top: 1px; }
.sr-empty { font-size: 12.5px; color: var(--gold-dim); font-style: italic; padding: 10px; }
/* which tier a result group comes from, on the group header itself */
.sr-tier {
  float: right; font-size: 8.5px; letter-spacing: 0.1em;
  color: var(--coral); border: 1px solid rgba(255, 127, 110, 0.4);
  background: rgba(255, 127, 110, 0.12);
  border-radius: 8px; padding: 0 6px; line-height: 13px;
}
.sr-tier-auto {
  color: var(--gold-dim); border-color: var(--line);
  background: var(--surface-2);
}

/* stats */
#stats-btn {
  margin-top: 8px; border: none; background: none; cursor: pointer;
  font-family: sans-serif; font-size: 11px; color: var(--gold);
  text-decoration: underline dotted; padding: 0;
}
#stats-btn:hover { color: var(--coral); }
#guide-index-link {
  display: inline-block; margin-top: 8px; margin-left: 10px;
  font-family: sans-serif; font-size: 11px; color: var(--gold);
  text-decoration: underline dotted;
}
#guide-index-link:hover { color: var(--coral); }
#stats-modal {
  position: absolute; inset: 0; z-index: 30;
  background: rgba(12, 10, 8, 0.6);
  display: flex; align-items: center; justify-content: center;
}
#stats-modal.hidden { display: none; }
#stats-card {
  position: relative; width: min(480px, 92vw); max-height: 84vh;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 22px 26px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); color: var(--ink);
}
#stats-close {
  position: absolute; top: 8px; right: 12px; border: none;
  background: none; font-size: 24px; color: var(--gold-dim); cursor: pointer;
}
#stats-close:hover { color: var(--ink); }
#stats-card h2 { font-size: 20px; color: var(--ink-strong); margin-bottom: 10px; font-weight: normal; }
.stats-lead { font-size: 13.5px; line-height: 1.5; color: var(--ink); margin-bottom: 10px; }
.stats-table { border-collapse: collapse; margin: 6px 0 12px; width: 100%; }
.stats-table td { padding: 3.5px 0; font-size: 13.5px; color: var(--ink);
  border-bottom: 1px solid rgba(200, 185, 144, 0.14); }
.stats-table td.n { text-align: right; padding-right: 12px; width: 58px;
  font-variant-numeric: tabular-nums; font-weight: bold; color: var(--coral); }
.stats-table .hint { font-size: 11.5px; color: var(--gold-dim); }
.stats-domains { font-size: 12px; color: var(--gold); line-height: 1.5; }

/* search-jump target card */
.card.hl { border-color: var(--coral); box-shadow: 0 0 0 1px rgba(255, 127, 110, 0.3); }

/* under-construction banner + feedback form */
#construction-banner {
  position: absolute; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 6; max-width: min(620px, 92vw);
  display: flex; align-items: flex-start; gap: 8px;
  background: rgba(43, 37, 32, 0.95); border: 1px solid var(--line-strong);
  border-radius: 10px; padding: 9px 12px 9px 16px;
  box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.45; color: var(--ink);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#construction-banner.hidden { display: none; }
#construction-banner a { color: var(--coral); font-weight: bold; }
#banner-close {
  border: none; background: none; font-size: 18px; line-height: 1;
  color: var(--gold-dim); cursor: pointer; padding: 0 2px; flex-shrink: 0;
}
#banner-close:hover { color: var(--ink); }

#feedback-modal {
  position: absolute; inset: 0; z-index: 40;
  background: rgba(12, 10, 8, 0.6);
  display: flex; align-items: center; justify-content: center;
}
#feedback-modal.hidden { display: none; }
#feedback-card {
  position: relative; width: min(440px, 92vw); max-height: 84vh;
  overflow-y: auto; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 22px 26px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); color: var(--ink);
}
#feedback-close {
  position: absolute; top: 8px; right: 12px; border: none;
  background: none; font-size: 24px; color: var(--gold-dim); cursor: pointer;
}
#feedback-close:hover { color: var(--ink); }
#feedback-card h2 { font-size: 20px; color: var(--ink-strong); margin-bottom: 6px; font-weight: normal; }
.fb-lead { font-size: 13px; color: var(--gold); margin-bottom: 14px; line-height: 1.45; }
#feedback-form label {
  display: block; font-family: sans-serif; font-size: 11px; font-weight: bold;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim);
  margin: 10px 0 4px;
}
#fb-email, #fb-message {
  width: 100%; font-family: Georgia, serif; font-size: 13.5px;
  color: var(--ink); background: rgba(255, 250, 238, 0.06);
  border: 1px solid var(--line);
  border-radius: 8px; padding: 7px 10px; outline: none; resize: vertical;
}
#fb-email:focus, #fb-message:focus { border-color: var(--coral); }
#fb-website { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#fb-status { font-size: 12.5px; margin-top: 10px; min-height: 1em; }
#fb-status.ok { color: #9fd08a; }
#fb-status.err { color: var(--coral-soft); }
#fb-send {
  margin-top: 10px; border: 1px solid var(--coral); background: var(--coral);
  color: #33211d; font-family: Georgia, serif; font-size: 14px; font-weight: bold;
  padding: 7px 22px; border-radius: 8px; cursor: pointer;
}
#fb-send:hover { background: var(--coral-soft); border-color: var(--coral-soft); }
#fb-send:disabled { opacity: 0.6; cursor: default; }

/* year control: non-linear slider with era ticks + type-in year box */
#year-control {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; align-items: center; gap: 10px;
  background: var(--chrome); border: 1px solid var(--line);
  border-radius: 12px; padding: 10px 18px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#slider-wrap {
  position: relative; width: min(46vw, 520px); padding-bottom: 15px;
}
#year-slider { width: 100%; display: block; accent-color: var(--coral); }
#slider-ticks {
  position: absolute; left: 8px; right: 8px; bottom: 0; height: 14px;
}
.tick {
  position: absolute; transform: translateX(-50%); padding-top: 4px;
  font-family: sans-serif; font-size: 9.5px; letter-spacing: 0.04em;
  color: var(--gold-dim); white-space: nowrap; cursor: pointer; line-height: 1;
}
.tick::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 1px;
  height: 3px; background: rgba(200, 185, 144, 0.45);
}
.tick:first-child { transform: none; }
.tick:first-child::before { left: 0; }
.tick:last-child { transform: translateX(-100%); }
.tick:last-child::before { left: 100%; }
.tick:hover { color: var(--coral); }
#year-box { min-width: 96px; text-align: center; }
#year-label {
  font-size: 26px; color: var(--coral);
  text-align: center; font-variant-numeric: tabular-nums;
  cursor: pointer; border-radius: 6px; padding: 0 6px;
  letter-spacing: 0.02em;
}
#year-label:hover, #year-label:focus-visible {
  background: rgba(255, 127, 110, 0.12); outline: none;
}
#year-label.hidden, #year-input.hidden { display: none; }
#year-input {
  width: 96px; font-family: Georgia, serif; font-size: 22px;
  font-weight: bold; color: var(--ink); text-align: center;
  background: rgba(255, 250, 238, 0.08); border: 1px solid var(--coral);
  border-radius: 6px; padding: 2px 4px; outline: none;
}
#year-minus, #year-plus {
  border: 1px solid var(--line-strong); background: none; color: var(--ink);
  width: 28px; height: 28px; border-radius: 50%; font-size: 16px;
  cursor: pointer; line-height: 1; flex-shrink: 0;
}
#year-minus:hover, #year-plus:hover {
  background: rgba(255, 127, 110, 0.14); border-color: var(--coral);
}

/* autoplay (J583): play/pause, a years-per-second speed picker, and an
   optional loop over a reader-set year range */
#play-btn {
  border: 1px solid var(--coral); background: rgba(255, 127, 110, 0.12);
  color: var(--coral); width: 30px; height: 30px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
#play-btn:hover { background: rgba(255, 127, 110, 0.26); }
#play-btn svg { width: 15px; height: 15px; fill: currentColor; }
#play-btn .ic-pause { display: none; }
#play-btn.playing .ic-play { display: none; }
#play-btn.playing .ic-pause { display: block; }

#playback-bar {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  font-family: sans-serif; font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-dim);
}
#speed-group { display: flex; gap: 3px; }
.speed-btn {
  border: 1px solid var(--line-strong); background: none; color: var(--ink);
  font-family: sans-serif; font-size: 11px; line-height: 1;
  padding: 4px 6px; border-radius: 5px; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.speed-btn:hover { border-color: var(--coral); color: var(--coral); }
.speed-btn[aria-pressed="true"] {
  background: rgba(255, 127, 110, 0.18); border-color: var(--coral);
  color: var(--coral);
}
#loop-btn {
  border: 1px solid var(--line-strong); background: none; color: var(--ink);
  font-family: sans-serif; font-size: 10.5px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 4px 8px; border-radius: 5px;
  cursor: pointer; margin-left: 4px;
}
#loop-btn:hover { border-color: var(--coral); color: var(--coral); }
#loop-btn[aria-pressed="true"] {
  background: rgba(255, 127, 110, 0.18); border-color: var(--coral);
  color: var(--coral);
}
#loop-range { display: flex; align-items: center; gap: 4px; }
#loop-range.hidden { display: none; }
#loop-range input {
  width: 62px; font-family: Georgia, serif; font-size: 12px;
  color: var(--ink); text-align: center;
  background: rgba(255, 250, 238, 0.08); border: 1px solid var(--line-strong);
  border-radius: 5px; padding: 3px 2px; outline: none;
}
#loop-range input:focus { border-color: var(--coral); }
.pb-dash { color: var(--gold-dim); }

@media (max-width: 640px) {
  #year-control {
    /* J683: #credits is pinned to bottom:6px and, below 640px, wraps to
       two lines (~28px tall) - so the card's bottom edge has to clear
       6+28=34px plus a real gap, not the 12px this used to be. That old
       12px is what put the credits footer ON TOP of the slider row
       itself (not just the speed buttons the comment below already
       accounts for) at 360/390/640px - confirmed by getBoundingClientRect
       before this fix, see jobs/reports/J683.md. 44px clears the two-line
       wrap at every width in this query with margin to spare. */
    bottom: 44px; width: calc(100vw - 16px); box-sizing: border-box;
    padding: 8px 10px; gap: 7px;
    /* the playback bar takes a row of its own: a phone-width track has
       no room for the speed picker beside the slider */
    flex-wrap: wrap;
  }
  /* the row goes ON TOP of the slider row, not under it: the credits
     footer sits over the bottom of the year control at this width (it
     did before this control existed too), and the speed buttons must
     not be the thing it covers */
  #playback-bar {
    order: -1; width: 100%; justify-content: center; margin-bottom: 3px;
  }
  #play-btn { width: 34px; height: 34px; }
  #play-btn svg { width: 17px; height: 17px; }
  #slider-wrap { flex: 1; width: auto; min-width: 0; }
  #year-box { min-width: 68px; }
  #year-label { font-size: 19px; }
  #year-input { width: 68px; font-size: 17px; }
  #year-minus, #year-plus { width: 34px; height: 34px; font-size: 18px; }
  .tick { font-size: 8.5px; }
  /* a phone-width track only fits three signposts: 3000 BCE, 1500, 2010 */
  .tick:nth-child(2), .tick:nth-child(3), .tick:nth-child(4),
  .tick:nth-child(6) { display: none; }
}

/* ---------- data-tier points ---------- */

/* small caption above the year control: the point layer's time window
   and count, so the window is transparent to the reader */
#points-caption {
  position: absolute; bottom: calc(100% + 7px); left: 50%;
  transform: translateX(-50%);
  font-family: sans-serif; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold);
  background: var(--chrome); border: 1px solid var(--line);
  border-radius: 12px; padding: 3px 11px; white-space: nowrap;
  box-shadow: var(--shadow);
}
#points-caption.hidden { display: none; }

/* MapLibre popup, restyled to the dark chrome */

/* J1020 - THE POPUP WINS (Gergely's ruling, 2026-09-06).
   A MapLibre popup is a child of #map, and #map is position:absolute with
   z-index:auto - so it creates no stacking context and the popup paints at
   the document's base level. Every piece of chrome is a LATER sibling with
   a z-index (#brand/the category menu 5, #year-control 5, #credits 5,
   #construction-banner 6), so all of them painted OVER the popup and hid
   its text. Lifting the popup to 8 puts it above all of that. It stays
   BELOW the side panel (10), the story rail (11) and the modals (30-40),
   which are deliberate full-height surfaces - keepPopupClear() in app.js
   pans those cases into the free area instead. */
.maplibregl-popup { z-index: 8; }

/* on a phone the free map band between the header card and the year
   control can be shorter than the popup (an image popup is ~380px tall):
   cap it and let it scroll, so the text is always reachable */
.pt-popup .maplibregl-popup-content {
  max-height: min(72vh, 560px); overflow-y: auto;
}
.pt-popup .maplibregl-popup-content {
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.55);
  padding: 13px 15px 11px; font-family: Georgia, serif;
}
.pt-popup.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.pt-popup.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.pt-popup.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  border-top-color: var(--surface);
}
.pt-popup.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.pt-popup.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.pt-popup.maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
  border-bottom-color: var(--surface);
}
.pt-popup.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  border-right-color: var(--surface);
}
.pt-popup.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-left-color: var(--surface);
}
.pt-popup .maplibregl-popup-close-button {
  color: var(--gold-dim); font-size: 18px; padding: 2px 7px;
}
.pt-popup .maplibregl-popup-close-button:hover {
  color: var(--ink); background: none;
}
.pt-name {
  font-size: 15px; font-weight: bold; color: var(--ink-strong);
  padding-right: 16px; line-height: 1.3;
}
/* the modern name of a place the slider is showing under an older one -
   "Leningrad" is only useful if the reader can place it */
.pt-alias {
  margin-top: 2px; font-size: 11.5px; color: var(--ink-soft);
  font-style: italic;
}
.pt-meta { margin-top: 3px; display: flex; align-items: center; gap: 8px; }
.pt-date { font-size: 12.5px; color: var(--coral); font-weight: bold; }
.pt-date-person { color: var(--gold); }  /* matches the gold person dots */
.pt-date-place { color: var(--teal); }   /* matches the teal place dots */
.pt-date-undated {                       /* dateless places: muted note */
  color: var(--gold-dim); font-weight: normal; font-style: italic;
}
.pt-class {
  font-family: sans-serif; font-size: 9.5px; font-weight: bold;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 1.5px 7px;
}
.pt-extract {
  font-size: 13px; line-height: 1.5; color: var(--ink-soft);
  margin-top: 7px;
  display: -webkit-box; -webkit-line-clamp: 6;
  -webkit-box-orient: vertical; overflow: hidden;
}
/* a hand-estimated founding year has to say so in words. It sits OUTSIDE
   the clamped extract for the same reason the provenance line does: the
   caveat must never be the part that scrolls away. */
.pt-note {
  margin-top: 7px; font-size: 12.5px; line-height: 1.5;
  color: var(--gold-dim);
}
.pt-approx {
  margin-top: 7px; font-size: 11.5px; line-height: 1.45;
  color: var(--gold-dim); font-style: italic;
}
/* why this town is here: the categories it inherited from its people.
   Never inside the clamp - an unexplained category chip is what it
   exists to prevent. */
.pt-why {
  margin-top: 8px; font-size: 12px; line-height: 1.45;
  color: var(--ink-soft);
  border-left: 2px solid var(--gold-dim); padding-left: 8px;
}
.pt-why b { color: var(--gold); font-weight: 600; }
/* provenance is the point of the data tier: always visible, never
   inside the clamp */
.pt-prov {
  margin-top: 9px; padding-top: 7px;
  border-top: 1px solid rgba(200, 185, 144, 0.16);
  font-family: sans-serif; font-size: 11px; color: var(--gold-dim);
}
.pt-prov a { color: var(--gold); text-decoration: none;
  border-bottom: 1px dotted var(--gold-dim); }
.pt-prov a:hover { color: var(--coral); border-bottom-color: var(--coral); }
.pt-lic { display: block; margin-top: 3px; font-size: 10px;
  color: #8d8266; }
.pt-src { display: block; margin-top: 3px; }

/* J582/J610: a Commons thumbnail, hotlinked, with visible per-file
   attribution — never a tooltip. The wrap's fixed height IS the
   placeholder (reserved by CSS, not by the image's own natural size),
   so a slow or failed load never shifts the layout; onerror removes the
   whole wrap (image + credit line together) rather than leaving a
   broken icon or an orphaned credit with nothing to credit. */
.pt-img-wrap {
  margin: 8px 0 2px; border-radius: 7px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line);
}
/* J1017: the wrap's fixed height (comment above) reserves the space, but
   a flat surface-2 box with only a credit line under it reads as "no
   picture", not "picture coming" - measured against the 25-60s of
   main-thread work in J1003/J1005 that can sit between paint and the
   image's onload. A slow gold-toned shimmer says "this is a picture,
   still arriving" instead. app.js removes .pt-img-loading the moment the
   real <img> fires onload (or onerror drops the whole wrap), so the
   shimmer is never seen once there is something to show instead. */
.pt-img-wrap.pt-img-loading .pt-img-btn {
  background: linear-gradient(100deg,
    var(--surface-2) 35%, rgba(200, 185, 144, 0.14) 50%,
    var(--surface-2) 65%);
  background-size: 250% 100%;
  animation: pt-img-shimmer 1.6s ease-in-out infinite;
}
.pt-img-wrap.pt-img-loading .pt-img { opacity: 0; }
@keyframes pt-img-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pt-img-wrap.pt-img-loading .pt-img-btn { animation: none; }
}
/* J1052: the box now takes the IMAGE's OWN aspect ratio (--pt-ar, written
   inline from the index's w/h), so a portrait is no longer centre-cropped
   into a wide strip with the face cut through the middle. The height is
   still fully known before a single pixel arrives — aspect-ratio +
   max-height are pure CSS on a 100%-width box — so J1020's no-jump
   guarantee holds exactly as before. max-height caps how tall a popup can
   get; when it bites, object-position keeps the crop off the TOP of the
   frame, where faces sit. A record with no w/h falls back to 4/3, close
   to the old strip. */
.pt-img-btn {
  display: block; width: 100%; padding: 0; border: 0; background: none;
  font: inherit; color: inherit; cursor: zoom-in; position: relative;
}
.pt-img-btn:focus-visible {
  outline: 2px solid var(--gold); outline-offset: -2px;
}
/* the "this opens bigger" affordance — always visible, because a phone
   has no hover state to reveal it on */
.pt-img-btn::after {
  content: "\2922"; position: absolute; right: 6px; top: 6px;
  font-family: sans-serif; font-size: 12px; line-height: 1;
  color: var(--ink); background: rgba(0, 0, 0, 0.45);
  border-radius: 4px; padding: 3px 4px; pointer-events: none;
}
.pt-img-btn:hover::after { background: rgba(0, 0, 0, 0.7); }
.pt-img {
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--pt-ar, 4 / 3);
  max-height: 240px; object-fit: cover; object-position: center 15%;
  background: var(--surface-2);
  transition: opacity 0.15s ease;
}
.pt-img-lg .pt-img { max-height: 380px; }
/* a very tall source (an obelisk, a tower, a full-length portrait) would
   lose most of itself to any crop at all: show it whole, matted on the
   card surface, instead of cropping it */
.pt-img-tall .pt-img { object-fit: contain; }
/* J1534: a guide card's picture is the WORK the card is about (a painting,
   a manuscript page, a tapestry) - the reader sees all of it, matted on
   the card surface, never a centre crop of it */
.card .pt-img { object-fit: contain; }
.pt-img-credit {
  font-family: sans-serif; font-size: 9.5px; line-height: 1.4;
  color: #8d8266; padding: 3px 8px; background: rgba(0, 0, 0, 0.22);
}
.pt-img-credit a { color: var(--gold); text-decoration: none;
  border-bottom: 1px dotted var(--gold-dim); }
.pt-img-credit a:hover { color: var(--coral); border-bottom-color: var(--coral); }

/* J1053: the full-size viewer. z-index 50 puts it above every other
   surface (panel 10, story 11, modals 30-40) — it is opened FROM those,
   so it has to sit on top of them. The same attribution the inline
   credit line carries travels with it: artist, licence, Commons file
   page. Never a bare image with no credit. */
#lightbox {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(10, 9, 7, 0.88);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 16px 16px;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
#lightbox.hidden { display: none; }
.lb-fig {
  display: flex; flex-direction: column; align-items: center;
  max-width: 100%; max-height: 100%;
}
.lb-img {
  display: block; max-width: min(1100px, 92vw); max-height: 78vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--surface-2);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7);
}
.lb-cap {
  margin-top: 9px; max-width: min(1100px, 92vw);
  font-family: sans-serif; font-size: 11.5px; line-height: 1.5;
  color: var(--ink-soft); text-align: center;
}
.lb-cap b {
  display: block; font-family: Georgia, serif; font-size: 14px;
  font-weight: normal; color: var(--ink-strong); margin-bottom: 2px;
}
.lb-cap a { color: var(--gold); text-decoration: none;
  border-bottom: 1px dotted var(--gold-dim); }
.lb-cap a:hover { color: var(--coral); border-bottom-color: var(--coral); }
.lb-close {
  position: absolute; top: 8px; right: 14px; border: none;
  background: none; font-size: 30px; line-height: 1;
  color: var(--gold-dim); cursor: pointer;
}
.lb-close:hover { color: var(--ink); }
.lb-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (max-width: 640px) {
  #lightbox { padding: 38px 8px 10px; }
  .lb-img { max-height: 66vh; }
  .lb-cap { font-size: 11px; }
}

.pt-more {
  display: inline-block; margin-bottom: 2px; font-weight: bold;
  font-size: 11.5px; color: var(--coral) !important;
  border-bottom: 1px dotted rgba(255, 127, 110, 0.5) !important;
}
.pt-more:hover { color: var(--coral-soft) !important; }

#credits {
  position: absolute; bottom: 6px; left: 10px; z-index: 5;
  font-size: 11px; color: var(--gold-dim); font-family: sans-serif;
  background: rgba(31, 29, 24, 0.75); padding: 2px 8px; border-radius: 6px;
}
#credits a { color: var(--gold); }

/* MapLibre zoom control, restyled to match the chrome */
.maplibregl-ctrl-group {
  background: var(--chrome) !important;
  border: 1px solid var(--line);
  box-shadow: var(--shadow) !important;
}
.maplibregl-ctrl-group button + button { border-top: 1px solid var(--line) !important; }
.maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(0.85) sepia(0.2); }

/* World basemap labels (count scales with zoom).
   SIZE IS NOT SET HERE. app.js writes an inline font-size per label from
   the territory it names (polityFontSize): 10.5px for a 1,000 km2 duchy
   up to 26px for a continental empire. The 11px below is the fallback for
   a label file cached from before that shipped -- change it and you are
   changing that fallback, not the map. */
.world-label {
  font-family: Georgia, serif; font-size: 11px; color: #4a3d26;
  text-shadow: 0 0 3px rgba(255, 252, 243, 0.9), 0 0 3px rgba(255, 252, 243, 0.9),
               0 0 3px rgba(255, 252, 243, 0.9);
  pointer-events: none; white-space: nowrap; text-align: center;
  letter-spacing: 0.03em;
}
/* the great-power tier: WEIGHT and ink only, no size of its own. Above
   400,000 km2 a name is printed bold in the darker brown, the way an
   atlas prints the handful of names that own a continent's ground. */
.world-label.major { font-weight: bold; color: #332917; }
/* the Trecento-Italy overlay's city-states. Tighter tracking than a
   country name; the SIZE comes from their territory like everyone
   else's (see the note above). */
.world-label.italy-state { letter-spacing: 0.02em; }
/* a label the collision pass rejected. A class, not an inline style, so it
   cannot fight applyYear() for the display property -- and VISIBILITY, not
   display, so the element keeps its box. A display:none marker measures zero,
   and MapLibre re-measures markers as it positions them, which kept the map
   re-rendering and it never reached 'idle'. */
.world-label.lbl-clash { visibility: hidden; }
/* J1372: GROUND -- a desert or other stateless expanse (Sahara,
   Antarctica, ...) named on the basemap. It borrows the geography
   layer's typography (.pl-terrain's ink, .pl-area's spaced caps, see
   below) instead of a state name's, so a 9,000,000 km2 desert does not
   read as a quietly-coloured empire. Never bold -- .major is a state's
   tier, not ground's -- so this rule comes after it and overrides. */
.world-label.ground {
  font-weight: normal; color: #6b4f2a;
  text-transform: uppercase; letter-spacing: 0.16em; opacity: 0.9;
}

/* side panel */
#panel {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 10;
  width: min(460px, 96vw); overflow-y: auto;
  background: rgba(31, 29, 24, 0.96); border-left: 1px solid var(--line);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.5);
  padding: 18px 20px 30px; color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#panel.hidden { display: none; }
#panel-close {
  position: absolute; top: 10px; right: 12px; border: none;
  background: none; font-size: 26px; color: var(--gold-dim); cursor: pointer;
}
#panel-close:hover { color: var(--ink); }

#panel h2 {
  font-size: 22px; color: var(--ink-strong); margin-bottom: 2px;
  padding-right: 30px; font-weight: normal; letter-spacing: 0.02em;
}
#panel .polity-meta { font-size: 12px; color: var(--gold-dim); margin-bottom: 10px; }
#panel .polity-meta a { color: var(--gold); }
#panel .approx-note {
  font-size: 11px; color: #8d8266; font-style: italic; margin-bottom: 14px;
}

.panel-year {
  font-size: 13px; color: var(--coral); font-weight: bold;
  font-family: sans-serif; letter-spacing: 0.15em; margin-bottom: 2px;
}
.overview {
  font-size: 14.5px; line-height: 1.55; color: #ddd5c2;
  margin: 10px 0 14px; padding: 10px 13px;
  background: rgba(200, 185, 144, 0.07);
  border-left: 3px solid var(--gold); border-radius: 4px;
}
/* the nearest-era fallback: dimmer and dashed, so it never reads as prose
   written about the year on the slider */
.era-stamp {
  font-family: sans-serif; font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-dim);
  margin: 10px 0 -6px; padding: 0 2px;
}
.overview.out-of-era {
  border-left-style: dashed; border-left-color: var(--gold-dim);
  color: #c8c0ae;
}

.tabs { display: flex; gap: 4px; margin: 4px 0 14px; flex-wrap: wrap; }
.tab {
  border: 1px solid var(--line); background: var(--surface-2); color: var(--gold);
  font-family: sans-serif; font-size: 12.5px; padding: 6px 13px;
  border-radius: 16px; cursor: pointer;
}
.tab:hover { border-color: var(--line-strong); color: var(--ink); }
.tab.active {
  background: rgba(255, 127, 110, 0.14); border-color: var(--coral);
  color: var(--coral); font-weight: bold;
}

.pope-chip {
  font-size: 13px; color: var(--ink); margin-bottom: 12px;
  background: var(--surface-2); border-radius: 6px; padding: 6px 10px;
  border: 1px solid var(--line);
}
.pope-chip a { color: var(--gold); }
.pope-chip span { color: var(--gold-dim); font-size: 12px; }

.cards { display: flex; flex-direction: column; gap: 10px; }
.card {
  background: var(--surface-2); border: 1px solid rgba(200, 185, 144, 0.16);
  border-radius: 8px; padding: 10px 13px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.card header { font-size: 15px; font-weight: bold; color: var(--ink-strong); }
.card header a {
  color: var(--ink-strong); text-decoration: none;
  border-bottom: 1px dotted var(--gold-dim);
}
.card header a:hover { color: var(--coral); }
.card .yrs { font-weight: normal; font-size: 12px; color: var(--gold-dim); margin-left: 4px; }
.card p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin-top: 4px; }
.card.auto { opacity: 0.85; border-style: dashed; }

.empty-note {
  font-size: 13.5px; color: var(--gold-dim); font-style: italic;
  padding: 14px 4px;
}

/* J1239 - the unmapped-ground panel. Deliberately quieter than a real
   polity panel (no curated badge, no tabs, dashed rule) so it can never
   be mistaken for prose written about this ground. */
.unmapped-note {
  font-style: normal; color: #c8c0ae; line-height: 1.55;
  margin: 8px 0 4px; padding: 10px 13px;
  background: rgba(200, 185, 144, 0.05);
  border-left: 3px dashed var(--gold-dim); border-radius: 4px;
}
.unmapped-near {
  font-family: sans-serif; font-size: 11.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold-dim);
  margin: 14px 0 6px; padding: 0 2px;
}
.near-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.near-chip {
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--gold); font-family: inherit; font-size: 13px;
  padding: 5px 12px; border-radius: 16px; cursor: pointer;
}
.near-chip:hover { border-color: var(--coral); color: var(--coral); }
.unmapped-hint {
  font-size: 12.5px; color: var(--gold-dim); font-style: italic;
  margin-top: 14px; padding: 0 2px;
}

/* entity articles + in-blurb entity links */
.ent-link {
  color: var(--gold); text-decoration: none; cursor: pointer;
  border-bottom: 1px dotted var(--gold-dim);
}
.ent-link:hover { color: var(--coral); border-bottom-color: var(--coral); }
#panel-back {
  display: inline-block; font-family: sans-serif; font-size: 12px;
  color: var(--gold); text-decoration: none; margin-bottom: 8px;
}
#panel-back:hover { color: var(--coral); }
.ent-desc {
  font-size: 14.5px; line-height: 1.55; color: #ddd5c2;
  margin: 10px 0 12px; padding: 10px 13px;
  background: rgba(200, 185, 144, 0.07);
  border-left: 3px solid var(--gold); border-radius: 4px;
}
.ent-guides {
  font-size: 12.5px; color: var(--ink-soft); margin: 2px 0 12px; line-height: 1.5;
}
.card-ctx a { margin-right: 10px; }
.ent-guides a { color: var(--gold); }
.ent-refs-head {
  font-family: sans-serif; font-size: 11.5px; font-weight: bold;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dim);
  margin: 16px 0 8px;
}
.card-ctx { margin-top: 6px; font-family: sans-serif; font-size: 11.5px; }
.card-ctx a { color: var(--gold-dim); text-decoration: none; }
.card-ctx a:hover { color: var(--coral); }

/* dark, unobtrusive scrollbars on the dark surfaces */
#panel::-webkit-scrollbar, #search-results::-webkit-scrollbar,
#stats-card::-webkit-scrollbar, #feedback-card::-webkit-scrollbar { width: 9px; }
#panel::-webkit-scrollbar-thumb, #search-results::-webkit-scrollbar-thumb,
#stats-card::-webkit-scrollbar-thumb, #feedback-card::-webkit-scrollbar-thumb {
  background: rgba(200, 185, 144, 0.25); border-radius: 5px;
}
#panel::-webkit-scrollbar-track, #search-results::-webkit-scrollbar-track,
#stats-card::-webkit-scrollbar-track, #feedback-card::-webkit-scrollbar-track {
  background: transparent;
}


/* ---------- content-tier badges ---------- */

.panel-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 2px;
  padding-right: 30px;
}
.panel-head .panel-year { margin-bottom: 0; }
.tier-badge {
  font-family: sans-serif; font-size: 9px; font-weight: bold;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 10px; border: 1px solid;
  white-space: nowrap; cursor: help;
}
.tier-curated {
  color: var(--coral); border-color: rgba(255, 127, 110, 0.45);
  background: rgba(255, 127, 110, 0.12);
}
.tier-auto {
  color: var(--gold-dim); border-color: var(--line-strong);
  background: var(--surface-2);
}
.stats-tiers {
  font-size: 12.5px; line-height: 1.9; color: var(--ink-soft);
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
}

/* ---------- data-tier detail article ---------- */

.pd-desc {
  font-family: sans-serif; font-size: 12px; color: var(--gold);
  letter-spacing: 0.02em; margin: 2px 0 12px;
}
.pd-body p {
  font-size: 14.5px; line-height: 1.6; color: #ddd5c2; margin-bottom: 9px;
}
.pd-body p:first-child {
  padding: 10px 13px; background: rgba(200, 185, 144, 0.07);
  border-left: 3px solid var(--gold-dim); border-radius: 4px;
}
.pd-lic {
  font-family: sans-serif; font-size: 10.5px; color: #8d8266;
  margin-bottom: 4px;
}
.pd-lic a, .pd-links a, .pd-ctx a, .pd-actions a {
  color: var(--gold); text-decoration: none;
  border-bottom: 1px dotted var(--gold-dim);
}
.pd-lic a:hover, .pd-links a:hover, .pd-ctx a:hover, .pd-actions a:hover {
  color: var(--coral); border-bottom-color: var(--coral);
}
.pd-links { font-family: sans-serif; font-size: 12.5px; }
.pd-note {
  font-family: sans-serif; font-size: 11px; color: var(--gold-dim);
  margin-top: 5px; cursor: help;
}
.pd-ctx {
  font-size: 13.5px; line-height: 1.6; color: var(--ink-soft);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; margin-bottom: 8px;
}
.pd-ctx .tier-badge { margin-left: 2px; }
/* the people who earned a place its category, each a link to their pin */
.pd-ctx .pd-rel {
  font-family: sans-serif; font-size: 10.5px; color: var(--gold-dim);
  margin-left: 4px;
}
.pd-waiting {
  font-size: 13.5px; color: var(--gold-dim); font-style: italic;
  padding: 10px 4px;
}
.pd-actions {
  margin-top: 16px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: sans-serif; font-size: 12.5px;
}


/* ---------- place labels: the atlas layer ----------
   Natural features have no dot at all - the label IS the feature, drawn
   over Natural Earth's water geometry. Conventional atlas typography:
   water in blue italic, terrain in brown, coastal features in slate,
   built places upright and dark. All of it sits on the light pastel
   basemap, so these are dark inks with a light halo, NOT the dark-chrome
   palette used by the UI surfaces. */
.pl-label {
  /* NO position rule here: MapLibre's .maplibregl-marker sets
     position:absolute and this rule loads later with equal specificity.
     A position:relative here put every label into document flow, so each
     one was displaced by the stacked height of the labels before it and
     the whole layer drifted with every zoom (fixed 2026-08-23). */
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 11px; line-height: 1.1; white-space: nowrap;
  cursor: pointer; pointer-events: auto;
  text-shadow: 0 0 3px rgba(255, 252, 243, 0.95),
               0 0 3px rgba(255, 252, 243, 0.95),
               0 0 3px rgba(255, 252, 243, 0.95);
}
.pl-label:hover { text-decoration: underline; }
.pl-water   { color: #2f6d8c; font-style: italic; }
.pl-coastal { color: #3d5f6b; font-style: italic; }
.pl-terrain { color: #6b4f2a; }
.pl-built   { color: #33302a; font-size: 10.5px; }
/* the story layer: people in the coral the event dots wear, events in a
   deeper red, both upright so they read as happenings rather than
   geography */
.pl-person  { color: #7d5a2a; font-size: 10.5px; font-style: italic; }
.pl-event   { color: #9c3521; font-size: 10.5px; }
/* the geography layer: basemap furniture, printed the way an atlas
   prints it. Area features (ranges, deserts, straits, plateaus) get
   spaced caps across the thing they name; summits get the triangle.
   All of it sits quieter than the content names drawn over it. */
.pl-geo { opacity: 0.9; }
.pl-area {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.16em;
}
.pl-peak::before {
  content: '\25B2';  /* solid triangle */
  font-size: 7.5px; margin-right: 3px; vertical-align: 1px; opacity: 0.8;
}
@media (max-width: 640px) {
  .pl-label { font-size: 10px; }
  .pl-built, .pl-person, .pl-event { font-size: 9.5px; }
  .pl-area { font-size: 9px; letter-spacing: 0.12em; }
}

/* ---------- the Layers panel: category menu + item types + legend ----------
   One row of category buttons (each with its icon, lit in its own colour
   when active) and, under the chosen category, its item types as
   checkbox-like toggles. Each toggle shows the exact marker the map draws,
   so the panel IS the legend. */
#layers { margin: 8px 0 2px; max-width: 360px; }
#layer-cats { display: flex; flex-wrap: wrap; gap: 4px; }
.cat {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: sans-serif; font-size: 10.5px; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--gold); --cat: var(--coral);
}
.cat:hover { border-color: var(--line-strong); color: var(--ink); }
.cat.active {
  background: color-mix(in srgb, var(--cat) 22%, transparent);
  border-color: var(--cat); color: var(--ink-strong); font-weight: bold;
}
.cat-ic { display: inline-block; flex: none; }
.cat-ic svg, .mk svg { width: 100%; height: 100%; display: block; }
.cat.active .cat-ic { color: var(--cat); }
/* the marker as inline markup: disc in the category colour, white glyph
   at 60%, the same darker rim the canvas draws */
.mk {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none; border-radius: 50%; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.45);
}
/* the panel doubles as the legend, so these three numbers must track
   GLYPH_FRAC / GLYPH_STROKE / the rim in app.js drawMarker (J1454) */
.mk svg { width: 66%; height: 66%; stroke-width: 2.5; }
#layer-types.hidden, #layer-types-toggle.hidden { display: none; }
#layer-types {
  list-style: none; margin: 6px 0 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px 10px;
  max-height: 40vh; overflow-y: auto;
}
#layer-types .lt-head {
  grid-column: 1 / -1; font-family: sans-serif; font-size: 10px;
  color: var(--gold-dim); margin: 0 0 2px; display: flex; gap: 4px;
}
#layer-types .lt-head span { flex: 1; }
#layer-types .lt-head a { color: var(--gold); text-decoration: none; }
#layer-types .lt-head a:hover { color: var(--ink); }
.lt {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font-family: sans-serif; font-size: 11px; text-align: left;
  padding: 2px 2px; border: 0; background: none; color: var(--ink);
  cursor: pointer; border-radius: 4px; opacity: 0.45;
}
.lt:hover { background: var(--surface-2); }
.lt.on { opacity: 1; }
.lt:not(.on) .mk { filter: grayscale(1); }
.lt .lt-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt .n { font-size: 10px; color: var(--gold-dim); font-variant-numeric: tabular-nums; }
#layer-types-toggle {
  margin-top: 6px; font-family: sans-serif; font-size: 10.5px;
  padding: 3px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--gold);
}
/* popups and the detail header: the primary type in front of the class line */
.pt-type { display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.panel-year .pt-type { text-transform: none; }
@media (max-width: 640px) {
  /* the header is shrink-to-fit, and a non-wrapping category row would
     stretch it past the phone's edge: pin it to the viewport instead */
  #brand { right: 16px; max-width: calc(100vw - 32px); box-sizing: border-box; }
  #layers { max-width: 100%; min-width: 0; }
  /* the category row scrolls sideways instead of wrapping */
  #layer-cats { flex-wrap: nowrap; overflow-x: auto; gap: 3px; padding-bottom: 2px;
                -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  #layer-cats::-webkit-scrollbar { display: none; }
  .cat { font-size: 10px; padding: 3px 7px; white-space: nowrap; }
  #layer-types { grid-template-columns: 1fr; max-height: 32vh; }
}

/* ---------- the faceted browse modal (J691) ----------
   A list view over web/data/facets/, filtered in a Web Worker. Rows are
   virtualised: #browse-spacer is the full scroll height, #browse-rows is
   translated to the visible window, so a 100k-row result renders ~30 DOM
   nodes. Row height is FIXED (--brow-h) because virtualisation depends on
   it — every line inside a row must stay on one line. */
#browse-btn {
  display: block; margin-top: 8px; padding: 0; border: 0; background: none;
  font-family: sans-serif; font-size: 11px; color: var(--gold);
  cursor: pointer; text-align: left; text-decoration: underline dotted;
}
#browse-btn:hover { color: var(--coral); }
#browse-modal {
  position: absolute; inset: 0; z-index: 32;
  background: rgba(12, 10, 8, 0.65);
  display: flex; align-items: center; justify-content: center;
}
#browse-modal.hidden { display: none; }
#browse-card {
  position: relative; width: min(760px, 94vw); max-height: 88vh;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; padding: 20px 22px 14px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); color: var(--ink);
}
#browse-close {
  position: absolute; top: 6px; right: 12px; border: none;
  background: none; font-size: 24px; color: var(--gold-dim); cursor: pointer;
}
#browse-close:hover { color: var(--ink); }
#browse-card h2 {
  font-size: 20px; color: var(--ink-strong); margin-bottom: 4px;
  font-weight: normal;
}
.browse-lead { font-size: 12.5px; color: var(--gold); margin-bottom: 10px; }
#browse-filters { display: flex; flex-direction: column; gap: 6px; }
.bf-row { display: flex; align-items: flex-start; gap: 8px; }
.bf-label {
  flex: none; width: 62px; padding-top: 4px;
  font-family: sans-serif; font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--gold-dim);
}
.bf-chips {
  /* tall enough that all 23 region chips are visible without scrolling on
     a desktop card - a chip the reader has to discover by scrolling might
     as well not be there */
  flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px;
  max-height: 116px; overflow-y: auto;
}
.bf-chip {
  font-family: sans-serif; font-size: 10.5px; letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--gold); white-space: nowrap;
}
.bf-chip:hover { border-color: var(--line-strong); color: var(--ink); }
.bf-chip.on {
  background: color-mix(in srgb, var(--coral) 22%, transparent);
  border-color: var(--coral); color: var(--ink-strong); font-weight: bold;
}
.bf-inline {
  flex: 1; min-width: 0; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap;
}
.bf-inline input[type="text"], .bf-inline input[type="search"] {
  width: 118px; font-family: inherit; font-size: 12.5px; padding: 4px 7px;
  color: var(--ink); background: rgba(255, 250, 238, 0.07);
  border: 1px solid var(--line); border-radius: 6px; outline: none;
}
.bf-inline input:focus { border-color: var(--coral); }
.bf-dash { color: var(--gold-dim); }
.bf-check {
  font-family: sans-serif; font-size: 10.5px; color: var(--gold-dim);
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
}
#bf-sort {
  font-family: sans-serif; font-size: 11px; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 5px;
}
#bf-clear {
  font-family: sans-serif; font-size: 10.5px; padding: 3px 9px;
  border-radius: 12px; cursor: pointer; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--gold);
}
#bf-clear:hover { color: var(--ink); border-color: var(--line-strong); }
#browse-status {
  margin: 10px 0 4px; font-family: sans-serif; font-size: 11px;
  color: var(--gold); border-top: 1px solid var(--line); padding-top: 8px;
}
#browse-status b { color: var(--coral); font-variant-numeric: tabular-nums; }
#browse-list {
  --brow-h: 54px;
  flex: 1; min-height: 180px; overflow-y: auto; position: relative;
  border: 1px solid var(--line); border-radius: 8px;
  background: rgba(12, 10, 8, 0.25);
}
#browse-list:focus { outline: 1px solid var(--line-strong); }
#browse-spacer { position: relative; }
#browse-rows { position: absolute; left: 0; right: 0; top: 0; }
.brow {
  height: 54px; box-sizing: border-box; display: flex; align-items: center;
  gap: 8px; padding: 6px 10px; cursor: pointer;
  border-bottom: 1px solid rgba(200, 185, 144, 0.12);
}
.brow:hover { background: var(--surface-2); }
.brow-main { flex: 1; min-width: 0; }
.brow-n {
  display: block; font-size: 13.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brow-m {
  display: block; font-size: 11px; color: var(--gold-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brow-m .brow-flag { color: var(--coral-soft); }
.brow-side { flex: none; display: flex; align-items: center; gap: 6px; }
.bt {
  font-family: sans-serif; font-size: 9px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--gold-dim);
  background: var(--surface-2); white-space: nowrap;
}
.bt-cur { color: var(--coral); border-color: rgba(255, 127, 110, 0.4); }
.brow-src {
  font-family: sans-serif; font-size: 10px; color: var(--gold);
  text-decoration: none; border-bottom: 1px dotted var(--gold-dim);
}
.brow-src:hover { color: var(--coral); }
.brow-empty, .brow-busy {
  padding: 16px 12px; font-size: 12.5px; color: var(--gold-dim);
  font-style: italic;
}
#browse-foot {
  margin-top: 8px; font-size: 10.5px; line-height: 1.5; color: var(--gold-dim);
}
#browse-foot .bt { font-style: normal; }
@media (max-width: 640px) {
  #browse-card { width: 96vw; max-height: 92vh; padding: 16px 12px 10px; }
  .bf-row { flex-direction: column; gap: 3px; }
  .bf-label { width: auto; padding-top: 0; }
  /* two full rows plus a sliver of the third: the sliver is the scroll
     affordance, so the remaining regions are visibly there to be found */
  .bf-chips { max-height: 68px; }
  #browse-list { --brow-h: 62px; }
  .brow { height: 62px; }
  .brow-side { flex-direction: column; align-items: flex-end; gap: 2px; }
  #browse-foot { display: none; }
}

/* ---------- the story engine (J584) ---------- */

/* Entry point: one more dotted link in the brand box, exactly like
   "Browse". A reader who never clicks it sees nothing new on the map. */
#stories-btn {
  display: block; margin-top: 6px; padding: 0; border: 0; background: none;
  font-family: sans-serif; font-size: 11px; color: var(--gold);
  cursor: pointer; text-align: left; text-decoration: underline dotted;
}
#stories-btn:hover { color: var(--coral); }

/* the picker */
#stories-modal {
  position: absolute; inset: 0; z-index: 32;
  background: rgba(12, 10, 8, 0.65);
  display: flex; align-items: center; justify-content: center;
}
#stories-modal.hidden { display: none; }
#stories-card {
  position: relative; width: min(620px, 94vw); max-height: 84vh;
  overflow-y: auto; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow); padding: 20px 22px 22px; color: var(--ink);
}
#stories-close {
  position: absolute; top: 8px; right: 12px; border: none; background: none;
  font-size: 26px; line-height: 1; color: var(--gold-dim); cursor: pointer;
}
#stories-close:hover { color: var(--ink); }
#stories-card h2 {
  font-size: 21px; font-weight: normal; color: var(--ink-strong);
  letter-spacing: 0.03em;
}
.stories-lead {
  font-family: sans-serif; font-size: 12px; color: var(--gold-dim);
  margin: 6px 0 14px; line-height: 1.5;
}
#stories-list { display: flex; flex-direction: column; gap: 10px; }
.st-status {
  font-family: sans-serif; font-size: 12px; color: var(--gold-dim);
}
.story-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 9px; padding: 12px 14px; color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
}
.story-card:hover { border-color: var(--line-strong); background: #322c24; }
.sc-title {
  display: block; font-size: 17px; color: var(--ink-strong);
  letter-spacing: 0.02em;
}
.sc-sub {
  display: block; font-size: 12.5px; color: var(--gold); margin-top: 2px;
}
.sc-blurb {
  display: block; font-size: 13px; color: var(--ink-soft); margin-top: 6px;
  line-height: 1.5;
}
.sc-meta {
  display: block; font-family: sans-serif; font-size: 10.5px;
  color: var(--gold-dim); margin-top: 7px; letter-spacing: 0.04em;
}

/* the rail */
#story {
  position: absolute; top: 0; right: 0; bottom: 0; z-index: 11;
  width: min(400px, 96vw); display: flex; flex-direction: column;
  background: rgba(31, 29, 24, 0.96); border-left: 1px solid var(--line);
  box-shadow: -6px 0 24px rgba(0, 0, 0, 0.5); color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
#story.hidden { display: none; }
#story-head {
  position: relative; flex: 0 0 auto; padding: 16px 20px 10px;
  border-bottom: 1px solid var(--line);
}
#story-close {
  position: absolute; top: 8px; right: 12px; border: none; background: none;
  font-size: 26px; line-height: 1; color: var(--gold-dim); cursor: pointer;
}
#story-close:hover { color: var(--ink); }
#story-title {
  font-size: 20px; font-weight: normal; color: var(--ink-strong);
  padding-right: 30px; letter-spacing: 0.02em;
}
#story-sub {
  font-size: 12.5px; color: var(--gold); margin-top: 3px; line-height: 1.45;
}
#story-sub.hidden { display: none; }
#story-progress {
  height: 3px; background: rgba(200, 185, 144, 0.18); border-radius: 2px;
  margin: 11px 0 8px; overflow: hidden;
}
#story-progress-fill {
  display: block; height: 100%; width: 0; background: var(--coral);
  transition: width 260ms ease;
}
#story-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-family: sans-serif; font-size: 11px;
}
#story-nav button {
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--gold); border-radius: 6px; padding: 4px 10px; cursor: pointer;
  font-family: sans-serif; font-size: 11px;
}
#story-nav button:hover:not(:disabled) {
  color: var(--coral); border-color: var(--line-strong);
}
#story-nav button:disabled { opacity: 0.35; cursor: default; }
#story-count { color: var(--gold-dim); letter-spacing: 0.06em; }
/* J2310: this codebase hides an element by its OWN id.hidden rule, not a
   shared .hidden class -- #story-play needs its own, same as #story-sub. */
#story-play.hidden { display: none; }

/* the scroller: the card crossing the middle band is the active step */
#story-steps {
  flex: 1 1 auto; overflow-y: auto; padding: 16px 20px 0;
  scroll-behavior: smooth;
}
.story-step {
  border-left: 2px solid transparent; padding: 2px 0 2px 12px;
  margin-bottom: 26px; opacity: 0.45; cursor: pointer;
  transition: opacity 220ms ease, border-color 220ms ease;
}
.story-step.on { opacity: 1; border-left-color: var(--coral); cursor: default; }
.story-step h3 {
  font-size: 16px; font-weight: normal; color: var(--ink-strong);
  letter-spacing: 0.02em; margin-bottom: 6px;
}
.story-step p { font-size: 14px; line-height: 1.62; margin-bottom: 8px; }
.story-step figure { margin: 0 0 9px; }
.story-step figure img { display: block; width: 100%; border-radius: 6px; }
.story-step figcaption {
  font-family: sans-serif; font-size: 10.5px; color: var(--gold-dim);
  margin-top: 4px;
}
/* J1709: the step's work, from the works store (tall altarpieces capped) */
.story-step figure.st-work img {
  width: auto; max-width: 100%; height: auto; max-height: 300px;
  margin: 0 auto; background: var(--surface-2, rgba(255,255,255,0.04));
}
.story-step .st-work-title { color: var(--ink-strong); font-style: italic; }
.story-step .st-work-credit { display: block; margin-top: 2px; }
.story-step figcaption a,
.story-step .st-credit a { color: var(--gold); }
.story-step figcaption a:hover,
.story-step .st-credit a:hover { color: var(--coral); }
.story-step audio { width: 100%; margin: 4px 0 8px; }
.story-step .st-credit,
.story-step .st-prov {
  font-family: sans-serif; font-size: 10.5px; color: var(--gold-dim);
}
.st-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 6px;
}
.st-foot a {
  font-family: sans-serif; font-size: 11px; color: var(--gold);
}
.st-foot a:hover { color: var(--coral); }
.st-open {
  border: 1px solid var(--line); background: none; color: var(--gold);
  border-radius: 6px; padding: 3px 9px; cursor: pointer;
  font-family: sans-serif; font-size: 11px;
}
.st-open:hover { color: var(--coral); border-color: var(--line-strong); }
.story-credit {
  font-family: sans-serif; font-size: 10.5px; color: var(--gold-dim);
  line-height: 1.5; border-top: 1px solid var(--line); padding-top: 10px;
}
/* the last chapter has to be able to reach the middle band too */
.story-tail { height: 55vh; }

/* ---------- J2310 / J3446: presentation mode ---------- */
/* J3446 (Gergely 2026-09-27: "the pictures are small ... replacing the
   Panchronica menu on the left"): a presentation story is a LEFT column --
   step title and player controls on top, the step's picture as large as
   the column allows (contain-fit, click to enlarge), its caption, credit
   and licence under it, then the prose. The map canvas itself moves
   beside the column (body.story-pres #map), so the camera centre is the
   centre of the map the reader sees. --stage-w MUST match build_stories.py
   PRES_STAGE (min 340px, 42vw, max 680px). On a phone the column becomes
   the top of the screen and the map the bottom (--stage-h). */
:root { --stage-w: clamp(340px, 42vw, 680px); --stage-h: 56vh; }
body.story-pres #map { left: var(--stage-w); width: auto; }
/* the year still shows, as a quiet badge over the map: the slider itself
   would steer the map out from under the narration */
body.story-pres #year-control {
  left: calc(var(--stage-w) + (100vw - var(--stage-w)) / 2); padding: 6px 14px;
}
body.story-pres #year-control > :not(#year-box) { display: none !important; }
#story.presentation {
  top: 0; left: 0; right: auto; bottom: 0; width: var(--stage-w);
  height: auto; max-height: none; flex-direction: column;
  border-left: none; border-right: 1px solid var(--line);
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.5);
}
#story.presentation #story-head { padding: 12px 16px 10px; }
#story.presentation #story-title { font-size: 15px; padding-right: 24px; }
#story.presentation #story-close { top: 6px; right: 8px; font-size: 22px; }
#story.presentation #story-nav { flex-wrap: wrap; }
#story.presentation #story-play {
  order: -1; color: var(--ink-strong); border-color: var(--line-strong);
}
#pres-timeline {
  display: flex; align-items: center; gap: 6px; margin: 6px 0;
  font-family: sans-serif; font-size: 10.5px; color: var(--gold-dim);
}
#pres-timeline.hidden { display: none; }
#pres-bar {
  flex: 1 1 auto; height: 3px; background: rgba(200, 185, 144, 0.18);
  border-radius: 2px; overflow: hidden;
}
#pres-bar-fill {
  display: block; height: 100%; width: 0; background: var(--gold);
  transition: width 200ms linear;
}
#story.presentation #story-steps {
  flex: 1 1 auto; display: block; padding: 12px 18px 16px; overflow-y: auto;
}
#story.presentation .story-step {
  opacity: 1; border-left: none; padding: 0; margin: 0; cursor: default;
  display: block; width: 100%;
}
#story.presentation .story-step h3 { font-size: 18px; margin-bottom: 10px; }
#story.presentation .pres-fig, #story.presentation .pres-track {
  width: 100%; margin: 0 0 12px;
}
#story.presentation .pres-frame {
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.28); border-radius: 8px; overflow: hidden;
}
#story.presentation .pres-img {
  display: block; max-width: 100%; max-height: 58vh; width: auto; height: auto;
  object-fit: contain; cursor: zoom-in; border-radius: 0;
}
#story.presentation .pres-fig figcaption { margin-top: 6px; }
.pres-cap { display: block; }
.pres-credit {
  display: block; margin-top: 2px; font-family: sans-serif; font-size: 10.5px;
  color: var(--gold-dim);
}
.pres-credit a { color: var(--gold); }
#story.presentation .story-step p { font-size: 15px; line-height: 1.62; }
#story.presentation .pres-caption {
  font-family: sans-serif; font-size: 12px; color: var(--gold-dim);
  margin: 0 0 8px;
}
#story.presentation .story-credit,
#story.presentation .story-tail { display: none; }

@media (max-width: 720px) {
  body.story-pres #map { left: 0; top: var(--stage-h); }
  body.story-pres #year-control { left: 50%; bottom: 10px; }
  #story.presentation {
    right: 0; bottom: auto; width: 100%; height: var(--stage-h);
    border-right: none; border-bottom: 1px solid var(--line);
  }
  #story.presentation #story-head { padding: 8px 12px 6px; }
  #story.presentation #story-steps { padding: 8px 12px 12px; }
  #story.presentation .pres-img { max-height: 28vh; }
  #story.presentation .story-step h3 { font-size: 16px; }
  #story.presentation .story-step p { font-size: 14px; }
}

/* J3446: the picture, enlarged to the whole screen */
#story-lightbox {
  position: fixed; inset: 0; z-index: 45; background: rgba(8, 7, 5, 0.94);
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 16px; cursor: zoom-out;
}
#story-lightbox.hidden { display: none; }
#story-lightbox img {
  max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain;
}
#story-lightbox .slb-cap {
  max-width: 900px; margin-top: 10px; text-align: center; color: var(--ink);
  font-size: 13px; line-height: 1.5;
}
#story-lightbox .slb-cap a { color: var(--gold); }

/* J3446: a quiet map while a story is open -- only the basemap and the
   story's own highlight. The data-tier symbol layers are switched off in
   app.js (storyQuietOn); every DOM label and marker the map carries is
   hidden here, except the story's points and a quest's own guess pin. */
body.story-quiet #brand,
body.story-quiet #construction-banner,
body.story-quiet #points-caption,
body.story-quiet .maplibregl-popup,
body.story-quiet .maplibregl-marker:not(.story-point):not(.quest-guess) {
  display: none !important;
}

/* J1287: a quest's rail - played missions above, the open mission last */
.quest-card { cursor: default; }
.q-played { cursor: pointer; }
.q-kind {
  font-family: sans-serif; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold-dim); margin-bottom: 6px;
}
.q-prompt {
  font-size: 16px !important; line-height: 1.45 !important;
  color: var(--ink-strong);
}
.q-hint, .q-note {
  font-family: sans-serif; font-size: 11.5px !important; line-height: 1.5;
  color: var(--gold-dim);
}
.q-note { color: var(--coral); }
/* J2312/J3164: the pre-reveal painter/composer clue (image or audio). */
.q-clue img { max-width: 100%; max-height: 40vh; }
.q-clue figcaption {
  font-family: sans-serif; font-size: 11px; color: var(--gold-dim); margin-top: 4px;
}
.q-year-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
.q-year { flex: 1 1 auto; accent-color: var(--coral); }
.q-year-val {
  font-family: sans-serif; font-size: 12px; color: var(--ink-strong);
  min-width: 62px; text-align: right;
}
.q-actions { display: flex; gap: 8px; margin-top: 8px; }
.q-actions button, .q-item, .q-opt, .q-go {
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--gold); border-radius: 6px; padding: 5px 11px; cursor: pointer;
  font-family: sans-serif; font-size: 12px;
}
.q-actions button:hover:not(:disabled), .q-item:hover, .q-opt:hover:not(:disabled),
.q-go:hover { color: var(--coral); border-color: var(--line-strong); }
.q-actions button:disabled, .q-opt:disabled { opacity: 0.35; cursor: default; }
.q-submit { color: var(--ink-strong); }
.q-pool, .q-options { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.q-options { flex-direction: column; align-items: stretch; }
.q-opt { text-align: left; }
.q-picked {
  margin: 4px 0 8px 18px; font-family: sans-serif; font-size: 12.5px;
  color: var(--ink-strong); line-height: 1.6;
}
.q-result {
  font-family: sans-serif; font-size: 11.5px !important; color: var(--gold);
  margin-bottom: 6px !important;
}
.q-stars { color: var(--coral); letter-spacing: 0.06em; }
.q-stars .q-dim { opacity: 0.3; }
.q-next { margin-bottom: 26px; }
.q-done {
  font-family: sans-serif; font-size: 12px; color: var(--gold);
  margin-bottom: 26px;
}
.q-tail { height: 30vh; }
/* the player's pin: a plain marker, unlabelled - it is a guess, not a name */
.quest-guess {
  width: 14px; height: 14px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); background: #f0eadc;
  border: 2px solid #2b2620; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* the panel steps aside for the rail on a wide screen; on a narrow one it
   keeps its old full-width behaviour and simply covers the rail */
@media (min-width: 980px) {
  body.story-open #panel { right: min(400px, 96vw); }
  body.story-pres #panel { right: 0; }   /* J3446: no right rail */
}

/* a highlighted point: a pulsed ring plus the label our own store carries.
   J3446: larger and brighter now that it is the ONLY thing on the map, and
   it fades in/out on an inner .sp-body (MapLibre owns the root's opacity). */
.story-point { pointer-events: none; white-space: nowrap; }
.story-point .sp-body {
  display: flex; align-items: center; gap: 8px;
  transition: opacity 420ms ease;
}
.story-point.sp-enter .sp-body, .story-point.sp-leave .sp-body { opacity: 0; }
.story-point .sp-ring {
  width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto;
  background: var(--coral); border: 2px solid #fff4ee;
  box-shadow: 0 0 0 3px rgba(255, 127, 110, 0.35), 0 0 14px rgba(255, 127, 110, 0.8);
  animation: sp-pulse 1.9s ease-out infinite;
}
.story-point .sp-label {
  font-family: sans-serif; font-size: 11.5px; color: #2b2620;
  background: rgba(250, 244, 232, 0.95); border-radius: 4px;
  padding: 2px 6px; letter-spacing: 0.02em;
  /* the coral edge is a shadow, not a border: it adds no width, so the
     builder's label-width model (PIN_LABEL_CHAR_PX) still holds */
  box-shadow: 0 0 0 1.5px var(--coral), 0 1px 6px rgba(0, 0, 0, 0.45);
}
/* the presentation map is quiet and beside a big column: a bigger name
   (build_stories.py PIN_LABEL_CHAR_PX_PRES) */
body.story-pres .story-point .sp-label {
  font-size: 13px; font-weight: bold; padding: 3px 6px; letter-spacing: 0.01em;
}
@keyframes sp-pulse {
  0%   { box-shadow: 0 0 0 2px rgba(255, 127, 110, 0.6), 0 0 14px rgba(255, 127, 110, 0.8); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 127, 110, 0), 0 0 14px rgba(255, 127, 110, 0.8); }
  100% { box-shadow: 0 0 0 0 rgba(255, 127, 110, 0), 0 0 14px rgba(255, 127, 110, 0.8); }
}
@media (prefers-reduced-motion: reduce) {
  .story-point .sp-ring { animation: none; }
  .story-point .sp-body { transition: none; }
  #story-steps { scroll-behavior: auto; }
}

/* J1097 — the curated place history of a person. Gergely's ruling (J1095):
   the pin follows the person across TOWNS ONLY, and the popup lists every
   place they were linked to, countries included. The kind column is
   load-bearing, not decoration: it is how a reader tells the town the pin
   is standing on from the realm it sat inside. */
.pt-places, .pd-places {
  margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line);
}
.pd-places { margin-top: 16px; }
.pp-head {
  font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-dim); margin-bottom: 5px;
}
.pp-list { margin: 0; padding: 0; list-style: none; }
.pp-list li {
  display: flex; gap: 6px; align-items: baseline;
  font-size: 12px; line-height: 1.5; color: var(--ink-soft);
}
.pp-list li + li { border-top: 1px solid rgba(200, 185, 144, 0.1); }
.pp-kind {
  font-size: 10px; color: var(--gold-dim); text-transform: lowercase;
  white-space: nowrap;
}
.pp-yrs {
  margin-left: auto; font-variant-numeric: tabular-nums;
  color: var(--gold); white-space: nowrap;
}
.pp-note {
  margin-top: 6px; font-size: 11px; line-height: 1.45;
  color: var(--gold-dim); font-style: italic;
}

/* ---------- J1342: the composer's recordings ----------
   The player sits under the portrait in a person article. Audio is
   hotlinked from Wikimedia Commons and every track carries its own
   credit, licence and file-page link, the same contract as an image. */
.pd-audio { margin: 4px 0 14px; }
.pd-track {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 8px; padding: 9px 11px 7px;
}
.pd-track-t {
  font-size: 13px; line-height: 1.45; color: var(--ink-soft);
  margin-bottom: 6px;
}
.pd-track-d {
  font-family: sans-serif; font-size: 10.5px; color: var(--gold-dim);
  font-variant-numeric: tabular-nums; margin-left: 4px;
}
.pd-audio-el {
  width: 100%; height: 34px; display: block; margin-bottom: 6px;
  /* the native control chrome is white-on-white in a dark panel */
  filter: invert(0.88) hue-rotate(180deg) saturate(0.5);
}
.pd-audio-more { margin-top: 7px; }
.pd-audio-more summary {
  font-family: sans-serif; font-size: 11.5px; color: var(--gold);
  cursor: pointer; list-style: none;
}
.pd-audio-more summary::-webkit-details-marker { display: none; }
.pd-audio-more summary::before { content: '▸ '; }
.pd-audio-more[open] summary::before { content: '▾ '; }
.pd-audio-list {
  list-style: none; margin: 6px 0 0; padding: 0;
  max-height: 210px; overflow-y: auto;
}
.pd-audio-list li {
  padding: 3px 0; font-size: 12px; line-height: 1.4;
  border-bottom: 1px solid var(--line);
}
.pd-audio-list li:last-child { border-bottom: none; }
.pd-audio-list li.audio-on button { color: var(--coral); }
.pd-audio-list button.audio-pick {
  background: none; border: none; padding: 0; text-align: left;
  font: inherit; color: var(--gold); cursor: pointer;
}
.pd-audio-list button.audio-pick:hover { color: var(--coral); }
/* J1529: the copyright fallback - why we cannot play it, and where to */
.pd-elsewhere .pd-links { margin-bottom: 3px; }