/* ══════════════════════════════════════════════════════
   Lifta map — sage-green light theme
   ──────────────────────────────────────────────────────
   Typography
     --font-display   Cormorant Garamond (high-contrast classical
                      serif; project title, h1/h2/h3 headings)
     --font-body      Spectral (transitional serif designed for
                      digital reading; body prose, popups, narrative)
     --font-ui        IBM Plex Sans (humanist sans; buttons,
                      labels, tooltips, layer chrome)
     --font-mono      IBM Plex Mono (matched mono; kbd, codes,
                      coordinates, photo numbers)
     --font-arabic    Amiri (classical naskh by Khaled Hosny,
                      based on Bulaq Press faces; all Arabic text)

   Palette
     Page bg          #e8eed8   (soft sage green)
     Header bg        #c8d4ad   (deeper sage)
     Panel/card bg    #f2f4e2   (near-cream sage)
     Button rest      #d8e0bf
     Button hover     #c0cfa0
     Border subtle    #a8b888
     Border firm      #85956c
     Text primary     #262b1c   (ink-olive near-black)
     Text secondary   #565c42
     Text tertiary    #6f7752
     Accent ink       #3f4b2b   (deep olive; active states)
     Accent hover     #5c6840
   ══════════════════════════════════════════════════════ */

:root {
  --font-display: 'Cormorant Garamond', 'Hoefler Text', 'Garamond', 'Georgia', serif;
  --font-body:    'Spectral', 'Georgia', 'Charter', 'Times New Roman', serif;
  --font-ui:      'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  --font-arabic:  'Amiri', 'Scheherazade New', 'Traditional Arabic', 'Georgia', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-body);
  font-feature-settings: 'kern', 'liga', 'calt';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #e8eed8;
  color: #262b1c;
}

/* Headings use the display face. Cormorant has a smaller x-height
   than Georgia so we add a touch of weight (500) to compensate. */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; }

/* Arabic blocks pick up the Amiri face automatically. Marked at the
   class level rather than via :lang() because the markup uses HTML
   entities rather than Arabic Unicode in the source. */
.intro-title-ar,
.lm-ar,
.oh-speaker-ar,
.popup-ar,
[dir="rtl"] {
  font-family: var(--font-arabic);
  font-weight: 400;
}

/* UI chrome uses the sans face: buttons, labels, panel headers,
   keyboard glyphs. Body prose (paragraphs, narrative text, photo
   captions, popup descriptions) stays in the serif body font. */
.layer-btn,
#btn-help,
#btn-a11y,
#btn-fs,
#btn-search,
.layer-btn,
.sub,
.lp-lbl,
.lp-leg-txt,
.stat-lbl,
.a11y-label,
.a11y-toggle-lbl,
.a11y-hint,
#a11y-panel h3,
.help-section h4,
.help-section p,
.help-section li,
.help-p,
.help-hint,
.kbd-list li,
#help-panel h3,
.help-btn-cta,
.cmp-lbl,
.cmp-vs,
.cmp-hint,
.cmp-exit,
#compare-panel select,
#search-input,
#search-status,
.sr-title,
.sr-snippet,
#photo-count,
.cite-style,
.cite-copy,
.cite-button,
.cite-row .cite-style,
.intro-stat .is-lbl,
.intro-tip,
.intro-btn,
.intro-credit,
.lm-status-txt,
.lm-en,
.lm-btn,
.popup-coords,
.popup-btn,
.popup-btn-info,
.popup-btn-full,
.idn-btn,
#idn-counter,
.g-coords,
.g-source-label,
.g-source-link,
.oh-role,
.mat-meta,
.mat-photog,
.mat-date,
.mat-cta,
.mat-loc-link,
.mat-rights {
  font-family: var(--font-ui);
}

/* Tabular numbers for stats and coordinates — IBM Plex Sans has
   excellent tabular figures via font-feature-settings. */
.stat-val,
.intro-stat .is-val,
.popup-coords,
.g-coords,
#idn-counter,
.marker-num,
#lightbox-meta {
  font-feature-settings: 'tnum';
  font-variant-numeric: tabular-nums;
}

/* ── Intro screen ─────────────────────────────────────── */

#intro-screen {
  position: fixed;
  inset: 0;
  background: #e8eed8;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  transition: opacity .35s ease;
}
#intro-screen.is-leaving { opacity: 0; pointer-events: none; }
#intro-screen.is-gone    { display: none; }
html.intro-skip #intro-screen { display: none !important; }

.intro-card {
  max-width: 720px;
  width: 100%;
  background: #f4f6e0;
  border: 1px solid #85956c;
  border-radius: 3px;
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
  padding: 40px 44px 36px;
  margin: auto;
}

@media (max-width: 600px) {
  .intro-card { padding: 28px 22px 24px; }
}

.intro-header {
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid #c0cfa0;
}
.intro-title-ar {
  font-size: 3rem;
  color: #262b1c;
  letter-spacing: 0;            /* Amiri ligatures suffer from spacing */
  line-height: 1;
  margin-bottom: 10px;
  direction: rtl;
}
.intro-title-en {
  font-size: 2rem;              /* bumped for Cormorant's smaller x-height */
  font-weight: 500;
  color: #262b1c;
  letter-spacing: .015em;
  line-height: 1.15;
  margin-bottom: 8px;
}
.intro-subtitle {
  font-size: .85rem;
  color: #5f6647;
  font-style: italic;
  letter-spacing: .04em;
  font-family: var(--font-body);  /* italic Spectral renders elegantly here */
}

.intro-para {
  font-size: 1rem;
  line-height: 1.78;
  color: #262b1c;
  margin-bottom: 16px;
}
.intro-para:last-of-type { margin-bottom: 24px; }

.intro-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 28px;
  background: #e8eed8;
  border: 1px solid #c0cfa0;
  border-radius: 4px;
  padding: 14px 18px;
  margin-bottom: 22px;
}
@media (max-width: 480px) {
  .intro-stats { grid-template-columns: 1fr; }
}
.intro-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 4px 0;
  font-size: .82rem;
}
.intro-stat .is-lbl { color: #565c42; }
.intro-stat .is-val { color: #262b1c; font-family: var(--font-mono); letter-spacing: .02em; }

.intro-tip {
  font-size: .8rem;
  color: #565c42;
  line-height: 1.65;
  background: #e8eed8;
  border-left: 3px solid #3f4b2b;
  padding: 10px 14px;
  border-radius: 0 3px 3px 0;
  margin-bottom: 24px;
}
.intro-tip kbd {
  font-family: var(--font-mono);
  background: #c0cfa0;
  border: 1px solid #85956c;
  border-radius: 3px;
  padding: 1px 6px;
  font-size: .82em;
  color: #262b1c;
}

.intro-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.intro-btn {
  font-family: var(--font-body);
  font-size: .9rem;
  letter-spacing: .04em;
  border: none;
  border-radius: 4px;
  padding: 10px 22px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  line-height: 1.2;
  transition: background .15s, color .15s, transform .15s;
}
.intro-btn-primary {
  background: #3f4b2b;
  color: #f0f2e3;
}
.intro-btn-primary:hover { background: #5c6840; transform: translateX(2px); }
.intro-btn-secondary {
  background: #d8e0bf;
  color: #343a26;
  border: 1px solid #85956c;
}
.intro-btn-secondary:hover { background: #c0cfa0; color: #262b1c; }

.intro-credit {
  font-size: .7rem;
  color: #5f6647;
  letter-spacing: .03em;
  padding-top: 14px;
  border-top: 1px solid #c0cfa0;
  text-align: center;
}

#header {
  padding: 13px 22px; background: #c8d4ad; border-bottom: 1px solid #85956c;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.header-left { display: flex; align-items: baseline; gap: 12px; }
#header h1 { font-size: 1.5rem; font-weight: 500; letter-spacing: .015em; color: #262b1c; }
.sub { font-size: .8rem; color: #565c42; letter-spacing: .05em; }
#header-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.layer-group { display: flex; border: 1px solid #85956c; border-radius: 4px; overflow: hidden; background: #d8e0bf; }
.layer-btn {
  background: #d8e0bf; color: #434a33; border: none; padding: 5px 10px;
  font-size: .73rem; cursor: pointer; letter-spacing: .04em;
  border-right: 1px solid #a8b888; transition: background .15s, color .15s;
}
.layer-btn:last-child { border-right: none; }
.layer-btn:hover { background: #c0cfa0; color: #262b1c; }
.layer-btn.active { background: #3f4b2b; color: #f0f2e3; }
.h-div { width: 1px; height: 20px; background: #85956c; margin: 0 2px; }
#btn-fs {
  background: #d8e0bf; color: #434a33; border: 1px solid #85956c; border-radius: 4px;
  padding: 5px 9px; font-size: .82rem; cursor: pointer; transition: background .15s, color .15s; line-height: 1;
}
#btn-fs:hover { background: #c0cfa0; color: #262b1c; }
#btn-fs.active { background: #3f4b2b; color: #f0f2e3; }

#map { width: 100%; height: calc(100vh - 56px); }
.leaflet-control-layers { display: none; }

.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
  background-color: rgba(63,75,43,.7) !important;
}
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div {
  background-color: rgba(63,75,43,.92) !important; color: #f0f2e3 !important;
  font-family: var(--font-body); font-size: .78rem; font-weight: normal;
}

.photo-marker { border: none; background: transparent; overflow: visible; }
.marker-inner {
  position: relative; width: 52px; height: 52px; border-radius: 4px; overflow: hidden;
  border: 2px solid rgba(255,255,255,.9); box-shadow: 0 2px 8px rgba(0,0,0,.35);
  cursor: pointer; transition: transform .15s, box-shadow .15s;
}
.marker-inner:hover { transform: scale(1.12); box-shadow: 0 4px 16px rgba(0,0,0,.55); }
.marker-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.marker-num {
  position: absolute; bottom: 2px; right: 3px; font-size: 9px; font-family: var(--font-mono);
  color: rgba(255,255,255,.95); background: rgba(0,0,0,.5); border-radius: 2px;
  padding: 0 2px; line-height: 1.4; pointer-events: none;
}

/* Halo around the photo currently shown in the drawer.
   The radius (32 px on screen, since circleMarker radius is in
   pixels) extends just past the 26 px-radius photo thumbnail,
   so the photo sits cleanly inside a warm-brown ring. */
.active-halo {
  filter: drop-shadow(0 0 4px rgba(63,75,43,.35));
}
.active-halo.halo-pulsing {
  animation: halo-pulse .65s ease-out;
}
@keyframes halo-pulse {
  0%   { stroke-width: 9;  stroke-opacity: 0.35; }
  40%  { stroke-width: 7;  stroke-opacity: 0.95; }
  100% { stroke-width: 3;  stroke-opacity: 0.9;  }
}

/* Camera-direction arrow — rotated by the photo's GPSImgDirection bearing.
   Drawn outside the thumbnail, pointing in the direction the camera was facing. */
.marker-arrow {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  pointer-events: none;
  z-index: 1;
}
.marker-arrow::before {
  content: "";
  position: absolute;
  top: -42px;          /* push outward from the marker center */
  left: -7px;          /* center the 14px-wide triangle */
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 12px solid #f0c068;       /* warm gold to read on any basemap */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.7));
}

.lm-icon {
  width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-size: 15px; border: 2px solid;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); cursor: pointer; transition: transform .15s;
}
.lm-icon:hover { transform: scale(1.15); }

.leaflet-popup-content-wrapper {
  background: #f2f4e2; border: 1px solid #85956c; border-radius: 3px;
  color: #262b1c; box-shadow: 0 2px 10px rgba(0,0,0,.16); padding: 0;
}
.leaflet-popup-tip { background: #f2f4e2; }
.leaflet-popup-content { margin: 0; width: 305px !important; }
.popup-img {
  width: 100%; height: 204px; object-fit: cover;
  border-radius: 5px 5px 0 0; cursor: pointer; display: block;
}
.popup-caption {
  padding: 10px 12px 7px; font-size: .9rem; color: #343a26;
  line-height: 1.55; border-bottom: 1px solid #c0cfa0; font-style: italic;
}
.popup-coords {
  padding: 5px 12px 6px; font-size: .68rem; color: #5f6647;
  letter-spacing: .02em; font-family: var(--font-mono); border-bottom: 1px solid #c0cfa0;
}
.popup-footer {
  padding: 8px 10px 10px; display: flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.popup-btn { font-size: .72rem; border: none; border-radius: 3px; padding: 4px 10px; cursor: pointer; }
.popup-btn-full { background: #d8e0bf; color: #343a26; }
.popup-btn-full:hover { background: #c0cfa0; }
.popup-btn-info { background: #3f4b2b; color: #f0f2e3; }
.popup-btn-info:hover { background: #5c6840; }

.lm-wrap { padding: 11px 13px 12px; }
.lm-ar { font-size: .95rem; color: #262b1c; direction: rtl; text-align: right; margin-bottom: 2px; }
.lm-en { font-size: .75rem; color: #565c42; margin-bottom: 7px; }
.lm-status { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.lm-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lm-status-txt { font-size: .7rem; }
.lm-btn {
  width: 100%; font-size: .72rem; background: #3f4b2b; color: #f0f2e3;
  border: none; border-radius: 3px; padding: 5px 10px; cursor: pointer;
}
.lm-btn:hover { background: #5c6840; }

#layer-panel {
  position: fixed; top: 70px; left: 12px; width: 210px;
  background: #f2f4e2; border: 1px solid #85956c; border-radius: 3px;
  z-index: 7000; padding: 12px 14px 14px;
  box-shadow: 0 2px 10px rgba(0,0,0,.16); display: none;
}
#layer-panel.open { display: block; }
#layer-panel h3 {
  font-size: .65rem; letter-spacing: .1em; color: #5f6647;
  text-transform: uppercase; margin-bottom: 10px;
}
.lp-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; user-select: none; }
.lp-row:last-child { margin-bottom: 0; }
.lp-row:hover .lp-lbl { color: #262b1c; }
.lp-row-with-action { cursor: default; gap: 6px; }
.lp-row-with-action .lp-row-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; flex: 1; }
.lp-row-with-action .lp-row-toggle:hover .lp-lbl { color: #262b1c; }
.lp-action {
  background: #d8e0bf;
  border: 1px solid #85956c;
  border-radius: 3px;
  color: #3f4b2b;
  cursor: pointer;
  padding: 2px 7px;
  font-size: .68rem;
  line-height: 1;
  transition: background .12s, color .12s;
  flex-shrink: 0;
}
.lp-action:hover { background: #c0cfa0; color: #262b1c; }
.lp-action.is-playing { background: #3f4b2b; color: #f0f2e3; }
.lp-lbl { font-size: .78rem; color: #434a33; flex: 1; }
.chk {
  width: 14px; height: 14px; border: 1px solid #7a8a5c; border-radius: 2px;
  background: #e8eed8; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.chk.on { background: #3f4b2b; border-color: #5c6840; }
.chk.on::after { content: '\2713'; font-size: 8px; color: #f0f2e3; }
.sw { width: 11px; height: 11px; border-radius: 2px; flex-shrink: 0; }
.lp-sep { height: 1px; background: #c0cfa0; margin: 8px 0; }
.lp-legend { margin-top: 6px; }
.lp-leg-row { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.lp-leg-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lp-leg-txt { font-size: .7rem; color: #565c42; }
#layer-close {
  position: absolute; top: 7px; right: 9px; background: none; border: none;
  color: #5f6647; font-size: .95rem; cursor: pointer;
}
#layer-close:hover { color: #262b1c; }

#info-drawer {
  position: fixed; top: 0; right: -490px; width: 470px; max-width: 100vw; height: 100%;
  background: #f2f4e2; border-left: 1px solid #85956c;
  z-index: 8000; transition: right .28s ease;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: -2px 0 10px rgba(0,0,0,.10);
}
#info-drawer.open { right: 0; }
#info-drawer-header {
  padding: 12px 14px 10px; border-bottom: 1px solid #c0cfa0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-shrink: 0;
}
#info-drawer-meta { font-size: .72rem; color: #565c42; line-height: 1.6; }
#info-drawer-close {
  background: none; border: none; color: #565c42; font-size: 1.2rem;
  cursor: pointer; flex-shrink: 0; margin-top: 1px;
}
#info-drawer-close:hover { color: #262b1c; }
#info-drawer-img { width: 100%; display: block; flex-shrink: 0; max-height: 250px; object-fit: cover; }
#info-drawer-body { flex: 1; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
#info-drawer-caption {
  font-size: 1rem; color: #262b1c; line-height: 1.6; font-style: italic;
  border-left: 3px solid #3f4b2b; padding-left: 12px;
}
#info-drawer-context {
  font-size: 1rem; color: #262b1c; line-height: 1.78;
}
#info-drawer-context p { margin-bottom: 1em; }
#info-drawer-context p:last-child { margin-bottom: 0; }

/* Inline citation superscripts — used in narratives via
   the [ID] / [ID p.42] tokens (see js/narratives.js) */
.cite {
  font-size: .68em;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
}
.cite a {
  color: #3f4b2b;
  text-decoration: none;
  border-bottom: 1px dotted #8e9670;
  padding: 0 1px;
  transition: color .15s, border-color .15s;
}
.cite a:hover {
  color: #5c6840;
  border-bottom-color: #3f4b2b;
}
.cite > span,
.cite[title] {
  color: #5f6647;
  border-bottom: 1px dotted #8e9670;
  padding: 0 1px;
}
#info-drawer-source {
  font-size: .78rem; color: #5f6647; padding-top: 8px;
  border-top: 1px solid #c0cfa0; line-height: 1.55;
}

/* Source list rendered below each narrative — see renderSourceList() */
.narrative-sources {
  margin-top: 1.5em;
  padding-top: .85em;
  border-top: 1px solid rgba(0,0,0,.12);
}
.narrative-sources ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.narrative-sources li {
  font-family: var(--font-body);
  font-size: .72rem;
  line-height: 1.55;
  color: #5f6647;
  padding: .1em 0;
}
.narrative-sources a {
  color: #3f4b2b;
  text-decoration: none;
  border-bottom: 1px dotted #8e9670;
}
.narrative-sources a:hover {
  color: #5c6840;
  border-bottom-color: #3f4b2b;
}
/* High-contrast mode */
html.hc .narrative-sources li  { color: #1a3038; }
html.hc .narrative-sources a   { color: #1a3038; border-bottom-color: #1a3038; }

/* "Cite this photograph" button at the foot of each drawer */
#info-drawer-cite { margin-top: 4px; }
.cite-button {
  font-family: var(--font-body);
  font-size: .76rem;
  color: #3f4b2b;
  background: #e8eed8;
  border: 1px solid #85956c;
  border-radius: 3px;
  padding: 7px 12px;
  cursor: pointer;
  letter-spacing: .03em;
  transition: background .15s, color .15s;
}
.cite-button:hover { background: #d8e0bf; color: #262b1c; }

/* ── Citation modal ─────────────────────────────────────── */

#cite-modal {
  display: none;
  position: fixed; inset: 0;
  background: rgba(46, 40, 24, 0.45);
  z-index: 9500;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
#cite-modal.open { display: flex; }

#cite-card {
  background: #f4f6e0;
  border: 1px solid #85956c;
  border-radius: 3px;
  box-shadow: 0 12px 36px rgba(0,0,0,.3);
  padding: 22px 26px 20px;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  position: relative;
}

#cite-close {
  position: absolute;
  top: 10px; right: 12px;
  background: none; border: none;
  color: #565c42; font-size: 1.05rem;
  cursor: pointer; padding: 4px 6px;
  line-height: 1;
}
#cite-close:hover { color: #262b1c; }

#cite-title {
  font-size: 1rem;
  font-weight: normal;
  color: #262b1c;
  letter-spacing: .04em;
  margin: 0 0 4px;
}
#cite-subtitle {
  font-size: .72rem;
  color: #5f6647;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  margin-bottom: 16px;
}

#cite-list { display: flex; flex-direction: column; gap: 14px; }

.cite-row {
  background: #fbfcef;
  border: 1px solid #c0cfa0;
  border-radius: 4px;
  padding: 10px 12px 12px;
}

.cite-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.cite-style {
  font-size: .65rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #5f6647;
}

.cite-copy {
  font-size: .72rem;
  font-family: var(--font-body);
  background: #d8e0bf;
  border: 1px solid #85956c;
  color: #343a26;
  padding: 3px 12px;
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, color .15s;
  letter-spacing: .03em;
}
.cite-copy:hover { background: #c0cfa0; color: #262b1c; }

.cite-text {
  font-family: var(--font-body);
  font-size: .82rem;
  color: #262b1c;
  line-height: 1.55;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

#cite-toast {
  position: absolute;
  bottom: 14px; right: 14px;
  font-size: .72rem;
  color: #f0f2e3;
  background: #3f4b2b;
  padding: 5px 12px;
  border-radius: 3px;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
#cite-toast.show { opacity: 1; }

/* Prev / Next photo navigation inside the drawer */
#info-drawer-nav {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-top: 1px solid #85956c;
  background: #e8eed8;
  gap: 10px;
}
.idn-btn {
  background: #d8e0bf;
  border: 1px solid #85956c;
  border-radius: 4px;
  padding: 6px 14px;
  font-size: .82rem;
  color: #343a26;
  cursor: pointer;
  font-family: var(--font-body);
  letter-spacing: .03em;
  transition: background .15s, color .15s;
}
.idn-btn:hover  { background: #c0cfa0; color: #262b1c; }
.idn-btn:active { background: #3f4b2b; color: #f0f2e3; }
#idn-counter {
  font-size: .72rem;
  color: #565c42;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

#about-panel {
  position: fixed; bottom: 56px; right: 16px; width: 300px;
  background: #f2f4e2; border: 1px solid #85956c; border-radius: 3px;
  z-index: 7000; padding: 14px 16px; display: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
#about-panel.open { display: block; }
#about-panel h2 {
  font-size: .9rem; font-weight: normal; color: #262b1c;
  letter-spacing: .06em; margin-bottom: 8px;
}
#about-panel p { font-size: .85rem; color: #343a26; line-height: 1.65; margin-bottom: 8px; }
.about-stat { display: flex; justify-content: space-between; margin-bottom: 5px; }
.stat-lbl { font-size: .76rem; color: #565c42; }
.stat-val { font-size: .76rem; color: #262b1c; font-family: var(--font-mono); }
#about-close {
  position: absolute; top: 8px; right: 10px; background: none; border: none;
  color: #5f6647; font-size: 1rem; cursor: pointer;
}
#about-close:hover { color: #262b1c; }

/* ── Search panel ─────────────────────────────────────── */
#search-panel {
  position: fixed;
  top: 70px;
  right: 12px;
  width: 380px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 90px);
  background: #f2f4e2;
  border: 1px solid #85956c;
  border-radius: 3px;
  z-index: 7500;
  display: none;
  flex-direction: column;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  overflow: hidden;
}
#search-panel.open { display: flex; }
#search-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 8px;
  border-bottom: 1px solid #c0cfa0;
  flex-shrink: 0;
}
#search-input {
  flex: 1;
  background: #e8eed8;
  border: 1px solid #85956c;
  border-radius: 4px;
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: #262b1c;
  outline: none;
}
#search-input:focus { border-color: #3f4b2b; background: #ffffff; }
#search-close {
  background: none;
  border: none;
  color: #565c42;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0 6px;
}
#search-close:hover { color: #262b1c; }
#search-status {
  font-size: .7rem;
  color: #5f6647;
  padding: 8px 12px;
  border-bottom: 1px solid #c0cfa0;
  flex-shrink: 0;
}
#search-results {
  flex: 1;
  overflow-y: auto;
}
#search-results::-webkit-scrollbar { width: 6px; }
#search-results::-webkit-scrollbar-track { background: #e8eed8; }
#search-results::-webkit-scrollbar-thumb { background: #a8b888; border-radius: 3px; }

.sr-item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #d8e0bf;
  cursor: pointer;
  transition: background .12s;
}
.sr-item:last-child { border-bottom: none; }
.sr-item:hover,
.sr-item.active { background: #e8eed8; }

.sr-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
  background: #c0cfa0;
}
.sr-meta { flex: 1; min-width: 0; }
.sr-title {
  font-size: .68rem;
  color: #5f6647;
  font-family: var(--font-mono);
  letter-spacing: .04em;
  margin-bottom: 3px;
}
.sr-caption {
  font-size: .82rem;
  color: #262b1c;
  font-style: italic;
  line-height: 1.4;
  margin-bottom: 4px;
}
.sr-snippet {
  font-size: .72rem;
  color: #565c42;
  line-height: 1.5;
}
.sr-snippet mark,
.sr-caption mark,
.sr-title mark {
  background: #f4e08b;
  color: #262b1c;
  padding: 0 2px;
  border-radius: 2px;
}

#status-bar { position: fixed; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 6px; z-index: 6000; }
#photo-count {
  background: rgba(242,244,226,.95); border: 1px solid #85956c;
  border-radius: 4px; padding: 5px 11px; font-size: .76rem; color: #343a26;
  cursor: pointer; transition: background .15s;
}
#photo-count:hover { background: rgba(216,224,191,.98); color: #262b1c; }

/* Lightbox: keeps a dark backdrop because photos look better that way */
#lightbox {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.94); z-index: 9999;
  align-items: center; justify-content: center; flex-direction: column; gap: 10px;
}
#lightbox.open { display: flex; }
#lightbox-img { max-width: 90vw; max-height: 84vh; border-radius: 4px; object-fit: contain; }
#lightbox-caption-txt {
  font-size: .9rem; color: #f0f2e3; max-width: 720px; text-align: center;
  line-height: 1.55; padding: 0 20px; font-style: italic;
}
#lightbox-meta { font-size: .68rem; color: #b0a878; font-family: var(--font-mono); letter-spacing: .04em; }
#lightbox-close {
  position: fixed; top: 16px; right: 22px; font-size: 1.7rem;
  color: #f0f2e3; cursor: pointer; background: none; border: none; opacity: .8;
}
#lightbox-close:hover { opacity: 1; }
#lightbox-nav {
  position: fixed; top: 50%; transform: translateY(-50%);
  display: flex; justify-content: space-between; width: 100%; padding: 0 12px; pointer-events: none;
}
.nav-btn {
  pointer-events: all; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25); color: #f0f2e3;
  font-size: 1.4rem; border-radius: 4px; padding: 7px 14px; cursor: pointer;
}
.nav-btn:hover { background: rgba(255,255,255,.22); }

/* ── Help panel ──────────────────────────────────────────
   Floats below the "?" button in the header. A scrollable
   summary of every feature on the map page, organized by
   section. Mirrors the a11y panel's visual treatment so
   they read as part of the same family.
   ────────────────────────────────────────────────────── */

#btn-help {
  background: #d8e0bf;
  color: #434a33;
  border: 1px solid #85956c;
  border-radius: 4px;
  padding: 4px 11px;
  font-size: .9rem;
  font-weight: bold;
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s, color .15s;
  line-height: 1;
  font-family: var(--font-body);
}
#btn-help:hover  { background: #c0cfa0; color: #262b1c; }
#btn-help.active { background: #3f4b2b; color: #f0f2e3; }

#help-panel {
  position: fixed;
  top: 62px;
  right: 16px;
  width: 360px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: #f2f4e2;
  border: 1px solid #85956c;
  border-radius: 3px;
  z-index: 8500;
  padding: 14px 18px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  display: none;
  font-family: var(--font-body);
}
#help-panel.open { display: block; }

.help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
#help-panel h3 {
  font-size: .68rem;
  letter-spacing: .12em;
  color: #5f6647;
  text-transform: uppercase;
  margin: 0;
}
#help-close {
  background: transparent;
  border: none;
  color: #6f7752;
  font-size: 1.05rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
#help-close:hover { color: #262b1c; }

.help-section {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid #c0cfa0;
}
.help-section:last-of-type {
  border-bottom: none;
  padding-bottom: 4px;
}
.help-section h4 {
  font-size: .82rem;
  color: #262b1c;
  margin: 0 0 6px 0;
  font-weight: bold;
  letter-spacing: .01em;
}
.help-section p,
.help-p {
  font-size: .78rem;
  color: #343a26;
  line-height: 1.55;
  margin: 0 0 6px 0;
}
.help-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.help-section li {
  font-size: .78rem;
  color: #343a26;
  line-height: 1.55;
  margin-bottom: 4px;
  padding-left: 12px;
  position: relative;
}
.help-section li::before {
  content: '\2022';
  position: absolute;
  left: 2px;
  color: #6f7752;
}
.help-section b {
  color: #262b1c;
}
.help-section code {
  font-family: var(--font-mono);
  font-size: .72rem;
  background: #e8eed8;
  border: 1px solid #c0cfa0;
  border-radius: 2px;
  padding: 0 4px;
  color: #3f4b2b;
}
.help-section kbd,
.help-hint kbd {
  font-family: var(--font-mono);
  font-size: .68rem;
  background: #ffffff;
  border: 1px solid #85956c;
  border-bottom-width: 2px;
  border-radius: 3px;
  padding: 1px 5px;
  color: #262b1c;
  margin: 0 1px;
}
.kbd-list li::before { content: ''; }
.kbd-list li        { padding-left: 0; }
.help-hint {
  font-size: .7rem;
  color: #5f6647;
  margin-top: 6px;
  font-style: italic;
}

/* High-contrast variant */
html.hc #btn-help            { background: #e0e8c8; color: #000; border-color: #4a5a30; }
html.hc #btn-help:hover      { background: #b8c8a0; }
html.hc #btn-help.active     { background: #272d1c; color: #ffffff; border-color: #11150b; }
html.hc #help-panel          { background: #ffffff; border: 2px solid #23291a; }
html.hc #help-panel h3       { color: #23291a; }
html.hc .help-section h4     { color: #000; }
html.hc .help-section p,
html.hc .help-section li,
html.hc .help-p              { color: #161a10; }
html.hc .help-section b      { color: #000; }
html.hc .help-section        { border-bottom-color: #4a5a30; }
html.hc .help-section code   { background: #f0f4dc; border-color: #4a5a30; color: #11150b; }
html.hc .help-section kbd,
html.hc .help-hint kbd       { background: #ffffff; border-color: #23291a; color: #000; }
html.hc .help-hint           { color: #161a10; }

/* CTA button inside the help panel (KML download, etc.) */
.help-btn-cta {
  display: inline-block;
  background: #3f4b2b;
  color: #f0f2e3;
  border: 1px solid #3f4b2b;
  border-radius: 3px;
  padding: 7px 12px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: bold;
  cursor: pointer;
  margin-top: 8px;
  margin-bottom: 4px;
  transition: background .12s, color .12s;
}
.help-btn-cta:hover { background: #5c6840; }
html.hc .help-btn-cta { background: #11150b; color: #ffffff; border-color: #11150b; }
html.hc .help-btn-cta:hover { background: #000; }

/* ── MiniMap (locator inset) theming ─────────────────────
   Plugin styles default to a generic white card with a
   blue aiming rectangle. Re-skin to fit the sage-brown
   theme; the aiming rectangle is configured in JS.
   ────────────────────────────────────────────────────── */
.leaflet-control-minimap {
  border: 2px solid #f2f4e2 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  border-radius: 4px !important;
  background: #f2f4e2 !important;
}
.leaflet-control-minimap-toggle-display {
  background-color: #d8e0bf !important;
  border-radius: 0 0 0 3px !important;
  width: 19px !important;
  height: 19px !important;
}
.leaflet-control-minimap a:hover .leaflet-control-minimap-toggle-display {
  background-color: #c0cfa0 !important;
}
html.hc .leaflet-control-minimap {
  border: 2px solid #11150b !important;
  background: #ffffff !important;
}
html.hc .leaflet-control-minimap-toggle-display {
  background-color: #e0e8c8 !important;
}

/* ── Oral history popup ─────────────────────────────────
   Styling for testimony markers (deep teal) and the
   in-popup card showing speaker, role, paraphrased notes,
   optional excerpt + audio, and source link.
   ───────────────────────────────────────────────────── */
.oh-pop {
  padding: 8px 4px 2px;
  min-width: 240px;
  max-width: 300px;
  font-family: var(--font-body);
}
.oh-speaker-ar {
  font-size: 1.05rem;
  color: #262b1c;
  text-align: right;
  margin-bottom: 2px;
}
.oh-speaker-en {
  font-size: .9rem;
  color: #262b1c;
  font-weight: bold;
  margin-bottom: 4px;
}
.oh-role {
  font-size: .72rem;
  color: #2e7080;
  font-weight: bold;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 9px;
}
.oh-excerpt {
  font-size: .86rem;
  color: #262b1c;
  font-style: italic;
  border-left: 3px solid #2e7080;
  padding: 2px 0 2px 10px;
  margin: 0 0 10px 0;
  line-height: 1.45;
}
.oh-notes {
  font-size: .82rem;
  color: #343a26;
  line-height: 1.5;
  margin-bottom: 10px;
}
.oh-audio {
  display: block;
  width: 100%;
  margin-bottom: 10px;
  height: 32px;
}
.oh-source-link {
  display: inline-block;
  font-size: .76rem;
  color: #2e7080;
  text-decoration: none;
  border-bottom: 1px solid #2e7080;
  padding-bottom: 1px;
  margin-bottom: 8px;
}
.oh-source-link:hover { color: #1a4a58; border-bottom-color: #1a4a58; }
.oh-loc-note {
  font-size: .68rem;
  color: #6f7752;
  font-style: italic;
  margin-top: 4px;
}

/* High-contrast variant */
html.hc .oh-speaker-ar,
html.hc .oh-speaker-en,
html.hc .oh-excerpt,
html.hc .oh-notes        { color: #000; }
html.hc .oh-role,
html.hc .oh-source-link  { color: #1a3038; border-bottom-color: #1a3038; }
html.hc .oh-source-link:hover { color: #000; border-bottom-color: #000; }
html.hc .oh-excerpt      { border-left-color: #1a3038; border-left-width: 4px; }
html.hc .oh-loc-note     { color: #161a10; }

/* ── Matson Collection popup ─────────────────────────────
   Sepia-amber marker, popup with thumbnail, LoC metadata,
   and a "View 2017 photo nearby" CTA that opens the closest
   modern photograph — the project's before/after pivot.
   ────────────────────────────────────────────────────── */
.mat-pop {
  font-family: var(--font-body);
  width: 280px;
  padding: 4px 2px 2px;
}
.mat-img-link {
  display: block;
  margin-bottom: 8px;
  border: 1px solid #a3ad84;
  background: #23291a;
  text-decoration: none;
  line-height: 0;
}
.mat-img {
  width: 100%;
  height: auto;
  display: block;
  filter: sepia(0.18) saturate(0.9);
}
.mat-img-link:hover .mat-img {
  filter: sepia(0.05) saturate(1);
}
.mat-title {
  font-size: .92rem;
  color: #262b1c;
  font-style: italic;
  margin-bottom: 3px;
  line-height: 1.3;
}
.mat-meta {
  font-size: .72rem;
  color: #565c42;
  margin-bottom: 8px;
}
.mat-photog { color: #4d5635; font-weight: bold; }
.mat-date   { color: #4d5635; }
.mat-loc-note {
  font-size: .68rem;
  color: #6f7752;
  font-style: italic;
  line-height: 1.45;
  margin-bottom: 9px;
  padding-left: 8px;
  border-left: 2px solid #a3ad84;
}
.mat-cta {
  display: block;
  width: 100%;
  background: #a87a3a;
  color: #fbfcf4;
  border: none;
  border-radius: 3px;
  padding: 7px 10px;
  font-family: var(--font-body);
  font-size: .82rem;
  font-weight: bold;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background .12s;
}
.mat-cta:hover { background: #8a5e25; }
.mat-links {
  margin-bottom: 6px;
}
.mat-loc-link {
  font-size: .76rem;
  color: #4d5635;
  text-decoration: none;
  border-bottom: 1px solid #a3ad84;
  padding-bottom: 1px;
}
.mat-loc-link:hover { color: #262b1c; border-bottom-color: #262b1c; }
.mat-rights {
  font-size: .65rem;
  color: #6f7752;
  font-style: italic;
  margin-top: 4px;
}

/* High-contrast variant */
html.hc .mat-title       { color: #000; }
html.hc .mat-meta        { color: #161a10; }
html.hc .mat-photog,
html.hc .mat-date        { color: #11150b; }
html.hc .mat-img-link    { border: 2px solid #11150b; }
html.hc .mat-img         { filter: none; }
html.hc .mat-loc-note    { color: #23291a; border-left-color: #11150b; border-left-width: 4px; }
html.hc .mat-cta         { background: #272d1c; color: #ffffff; }
html.hc .mat-cta:hover   { background: #11150b; }
html.hc .mat-loc-link    { color: #11150b; border-bottom-color: #11150b; }
html.hc .mat-rights      { color: #161a10; }

/* ── Compare-mode panel ──────────────────────────────────
   Floating control bar that appears at top-center of the
   map while side-by-side comparison is active. Lets the
   visitor pick which layer is on each side and exit.
   ────────────────────────────────────────────────────── */
#compare-panel {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  background: #f2f4e2;
  border: 1px solid #85956c;
  border-radius: 3px;
  padding: 8px 14px;
  display: none;
  align-items: center;
  gap: 10px;
  z-index: 8400;
  box-shadow: 0 2px 8px rgba(0,0,0,.13);
  font-family: var(--font-body);
  font-size: .85rem;
  max-width: calc(100vw - 24px);
  flex-wrap: wrap;
}
#compare-panel.open { display: flex; }

.cmp-lbl {
  color: #565c42;
  font-weight: bold;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
#compare-panel select {
  background: #ffffff;
  border: 1px solid #85956c;
  border-radius: 3px;
  padding: 4px 6px;
  font-family: var(--font-body);
  font-size: .82rem;
  color: #262b1c;
  cursor: pointer;
}
#compare-panel select:hover  { border-color: #3f4b2b; }
#compare-panel select:focus  { outline: 2px solid #3f4b2b; outline-offset: 1px; }

.cmp-vs {
  color: #6f7752;
  font-size: 1rem;
  font-weight: bold;
}
.cmp-exit {
  background: #d8e0bf;
  color: #434a33;
  border: 1px solid #85956c;
  border-radius: 3px;
  padding: 4px 12px;
  font-size: .8rem;
  font-family: var(--font-body);
  font-weight: bold;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.cmp-exit:hover {
  background: #3f4b2b;
  color: #f0f2e3;
}
.cmp-hint {
  color: #6f7752;
  font-size: .7rem;
  font-style: italic;
  margin-left: 4px;
}

/* ── leaflet-side-by-side: required base styles ─────────
   Bundled here because we vendor the plugin (no separate
   stylesheet to load). Theme overrides follow below.
   ───────────────────────────────────────────────────── */
.leaflet-sbs-range {
  position: absolute;
  top: 50%;
  width: 100%;
  z-index: 999;
  -webkit-appearance: none;
  display: inline-block !important;
  vertical-align: middle;
  height: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.25);
  min-width: 100px;
  cursor: pointer;
  pointer-events: none;
}
.leaflet-sbs-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -2px;
  width: 4px;
  background-color: #fff;
  pointer-events: none;
  z-index: 999;
}
.leaflet-sbs-range::-ms-fill-upper { background: transparent; }
.leaflet-sbs-range::-ms-fill-lower { background: rgba(255, 255, 255, 0.25); }
.leaflet-sbs-range::-moz-range-track { opacity: 0; }
.leaflet-sbs-range::-ms-track        { opacity: 0; }
.leaflet-sbs-range::-ms-tooltip      { display: none; }
.leaflet-sbs-range::-webkit-slider-thumb,
.leaflet-sbs-range::-moz-range-thumb,
.leaflet-sbs-range::-ms-thumb {
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  height: 40px;
  width: 40px;
  border-radius: 20px;
  cursor: ew-resize;
  pointer-events: auto;
}
.leaflet-sbs-range:focus { outline: none !important; }
.leaflet-sbs-range::-moz-focus-outer { border: 0; }

/* leaflet-side-by-side: theme the divider + thumb to the brown accent */
.leaflet-sbs-divider { background-color: #3f4b2b; width: 3px; margin-left: -1.5px; }
.leaflet-sbs-range::-webkit-slider-thumb {
  background: #3f4b2b;
  border: 3px solid #f2f4e2;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.leaflet-sbs-range::-moz-range-thumb {
  background: #3f4b2b;
  border: 3px solid #f2f4e2;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}

/* High-contrast variant */
html.hc #compare-panel    { background: #ffffff; border: 2px solid #23291a; }
html.hc #compare-panel select { background: #ffffff; color: #000; border: 2px solid #4a5a30; }
html.hc .cmp-lbl          { color: #161a10; }
html.hc .cmp-vs           { color: #161a10; }
html.hc .cmp-hint         { color: #23291a; }
html.hc .cmp-exit         { background: #e0e8c8; color: #000; border-color: #4a5a30; }
html.hc .cmp-exit:hover   { background: #272d1c; color: #ffffff; }
html.hc .leaflet-sbs-divider { background: #11150b; width: 4px; }

/* ── Timeline panel (js/data/timeline.js) ──────────────────────── */
#timeline-panel{
  position: fixed; top: 62px; right: 16px;
  width: 384px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px); overflow-y: auto;
  background: #f2f4e2; border: 1px solid #85956c; border-radius: 3px;
  z-index: 8500; padding: 14px 18px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  display: none; font-family: var(--font-body);
}
#timeline-panel.open{ display: block; }
.tl-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
#timeline-panel h3{
  font-size:.68rem; letter-spacing:.12em; color:#5f6647;
  text-transform:uppercase; margin:0; font-family:var(--font-ui);
}
#timeline-close{ background:transparent; border:none; color:#6f7752; font-size:1.05rem; cursor:pointer; padding:0 4px; line-height:1; }
#timeline-close:hover{ color:#262b1c; }
#timeline-list{ list-style:none; margin:0; padding:0; }
.tl-item{ position:relative; padding:0 0 15px 18px; border-left:2px solid #c0cfa0; }
.tl-item:last-child{ padding-bottom:2px; }
.tl-item::before{
  content:''; position:absolute; left:-5px; top:5px;
  width:8px; height:8px; border-radius:50%;
  background:#3f4b2b; border:1px solid #f2f4e2;
}
.tl-date{
  display:block; font-family:var(--font-mono); font-size:.66rem;
  letter-spacing:.03em; color:#5c6840; margin-bottom:3px;
}
.tl-text{ font-size:.82rem; line-height:1.58; color:#262b1c; }
.tl-foot{
  margin-top:8px; padding-top:9px; border-top:1px solid #c0cfa0;
  font-size:.68rem; color:#5f6647; line-height:1.5; font-family:var(--font-ui);
}
html.hc #timeline-panel{ background:#fff; border-color:#000; }
html.hc .tl-text, html.hc .tl-date{ color:#000; }

/* ── Statistics panel (js/data/stats.js) ───────────────────────── */
#stats-panel{
  position: fixed; top: 62px; right: 16px;
  width: 320px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px); overflow-y: auto;
  background: #f2f4e2; border: 1px solid #85956c; border-radius: 3px;
  z-index: 8500; padding: 14px 18px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  display: none; font-family: var(--font-body);
}
#stats-panel.open{ display: block; }
#stats-close{ background:transparent; border:none; color:#6f7752; font-size:1.05rem; cursor:pointer; padding:0 4px; line-height:1; }
#stats-close:hover{ color:#262b1c; }
.st-sec{ margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid #c0cfa0; }
.st-sec:last-child{ border-bottom:none; padding-bottom:2px; }
.st-sec h4{ font-family:var(--font-ui); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:#5c6840; margin:0 0 7px; font-weight:600; }
.st-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:3px 0; }
.st-k{ font-size:.82rem; color:#343a26; }
.st-v{ font-family:var(--font-mono); font-size:.8rem; color:#262b1c; white-space:nowrap; font-variant-numeric:tabular-nums; }
html.hc #stats-panel{ background:#fff; border-color:#000; }
html.hc .st-k, html.hc .st-v{ color:#000; }

/* ── Sources colophon (js/data/sources.js) ─────────────────────── */
#sources-panel{
  position: fixed; top: 62px; right: 16px;
  width: 384px; max-width: calc(100vw - 24px);
  max-height: calc(100vh - 80px); overflow-y: auto;
  background: #f2f4e2; border: 1px solid #85956c; border-radius: 3px;
  z-index: 8500; padding: 14px 18px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.16);
  display: none; font-family: var(--font-body);
}
#sources-panel.open{ display: block; }
#sources-panel h3{
  font-size:.68rem; letter-spacing:.12em; color:#5f6647;
  text-transform:uppercase; margin:0; font-family:var(--font-ui);
}
#sources-close{ background:transparent; border:none; color:#6f7752; font-size:1.05rem; cursor:pointer; padding:0 4px; line-height:1; }
#sources-close:hover{ color:#262b1c; }
#sources-list{ display:flex; flex-direction:column; }
.src-row{
  display:flex; gap:11px; align-items:baseline;
  padding:7px 0; border-bottom:1px solid #d8e0bf;
}
.src-row:last-child{ border-bottom:none; }
.src-tok{
  flex:0 0 auto; min-width:48px;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em;
  color:#5c6840; text-transform:uppercase; padding-top:1px;
}
.src-lbl{ font-size:.8rem; line-height:1.5; color:#262b1c; }
.src-lbl a{ color:#262b1c; text-decoration:none; border-bottom:1px solid #99a479; }
.src-lbl a:hover{ color:#3f4b2b; border-bottom-color:#3f4b2b; }
html.hc #sources-panel{ background:#fff; border-color:#000; }
html.hc .src-lbl, html.hc .src-tok{ color:#000; }
html.hc .src-lbl a{ color:#000; border-bottom-color:#000; }

/* ══ Bilingual interface · Arabic (RTL) ════════════════════════════
   Draft styling for the Arabic UI; the English site is untouched.
   Fine-grained RTL polish (the photo drawer slides from the right,
   not yet mirrored) is a known review item. */

/* Arabic renders in Amiri, an elegant Naskh face already loaded. */
html[lang="ar"],
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] h1, html[lang="ar"] h2,
html[lang="ar"] h3, html[lang="ar"] h4 {
  font-family: 'Amiri', Georgia, 'Times New Roman', serif;
}

/* Map internals, coordinates, filenames, code, and key caps stay LTR. */
[dir="rtl"] .leaflet-container,
[dir="rtl"] #info-drawer-meta,
[dir="rtl"] code,
[dir="rtl"] kbd,
[dir="rtl"] .cite { direction: ltr; }
[dir="rtl"] #info-drawer-meta { text-align: right; }

/* Right-anchored panels move to the left edge in RTL. */
[dir="rtl"] #timeline-panel,
[dir="rtl"] #stats-panel,
[dir="rtl"] #sources-panel,
[dir="rtl"] #a11y-panel,
[dir="rtl"] #help-panel { right: auto; left: 16px; }

/* Rows whose label/value should swap sides under RTL. */
/* Layer panel and a11y rows carry translated labels: swap sides. */
[dir="rtl"] .lp-row,
[dir="rtl"] .lp-row-toggle,
[dir="rtl"] .lp-leg-row,
[dir="rtl"] .a11y-toggle-row { flex-direction: row-reverse; }

/* The statistics, timeline, and sources panel bodies hold English data
   (figures, dates, bibliographic titles, citation tokens), so their
   content stays left-to-right even under an Arabic interface; only the
   panel title and footnote (which are translated) follow RTL. The same
   holds for the photo drawer, whose narrative currently falls back to
   English. When an Arabic narrative or dataset is supplied, drop the
   relevant rule so it follows the page direction. */
[dir="rtl"] #stats-list,
[dir="rtl"] #timeline-list,
[dir="rtl"] #sources-list,
[dir="rtl"] #info-drawer-body { direction: ltr; text-align: left; }

/* The "n / 100" photo counter is numeric: keep it left-to-right. */
[dir="rtl"] #idn-counter { direction: ltr; }