:root {
  --bg: #06101d;
  --bg-2: #0a1422;
  --panel: #0d1828;
  --panel-2: #111f31;
  --border: #26364a;
  --border-soft: #1c2a3c;
  --text: #eef3f7;
  --muted: #9aa9ba;
  --muted-2: #6f8196;
  --accent: #d7a64a;
  --accent-strong: #e3b95f;
  --accent-ink: #1c1407;
  --danger: #ef7a7a;
  --shadow: 0 18px 44px rgba(0,0,0,.3);
  --radius: 16px;
  --header-h: 150px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); }
body {
  min-height: 100dvh;
  overflow: hidden;
  font-family: Inter, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  font-size: 15px;
}
button, input { font: inherit; }
button { color:inherit; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible, summary:focus-visible {
  outline: 3px solid rgba(215,166,74,.55);
  outline-offset: 2px;
}
.hidden { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; left:12px; top:-60px; z-index:99999; background:#fff; color:#111; padding:10px 14px; border-radius:8px; }
.skip-link:focus { top:12px; }

.site-header {
  position:relative;
  z-index:1200;
  min-height:var(--header-h);
  padding:18px 22px 16px;
  border-bottom:1px solid var(--border-soft);
  display:grid;
  grid-template-columns:minmax(245px,1fr) minmax(380px,680px) auto;
  gap:22px;
  align-items:start;
}
.brand-block h1 { margin:2px 0 2px; font:700 clamp(1.25rem,2vw,1.75rem)/1.2 Georgia,"Noto Serif TC",serif; letter-spacing:.02em; }
.brand-kicker, .eyebrow { color:var(--accent); font-size:.73rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.brand-tagline { margin:5px 0 0; color:var(--muted); }
.search-shell { position:relative; z-index:1500; }
.search-row { display:flex; align-items:center; gap:8px; border:1px solid #40516a; background:#0b1727; border-radius:14px; min-height:52px; padding:0 8px 0 14px; box-shadow:0 8px 25px rgba(0,0,0,.2); }
.search-row:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(215,166,74,.12); }
.search-icon { color:var(--accent); font-size:1.6rem; line-height:1; transform:rotate(-20deg); }
#global-search { flex:1; min-width:0; border:0; outline:0; background:transparent; color:var(--text); font-size:1rem; }
#global-search::placeholder { color:#75859a; }
.search-hint { margin:7px 4px 0; color:var(--muted-2); font-size:.8rem; }
.search-results {
  position:absolute; top:58px; left:0; right:0; max-height:min(64vh,560px); overflow:auto;
  background:#0d1929; border:1px solid #3c4c61; border-radius:14px; box-shadow:var(--shadow); padding:8px;
}
.search-group + .search-group { border-top:1px solid var(--border-soft); margin-top:8px; padding-top:8px; }
.search-group-title { padding:7px 9px 5px; color:var(--muted); font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.search-result { width:100%; border:0; background:transparent; text-align:left; border-radius:10px; padding:10px; cursor:pointer; display:grid; grid-template-columns:1fr auto; gap:5px 10px; }
.search-result:hover, .search-result.active { background:#162538; }
.search-group-title-article { color:#caa7ff; }
.search-result.is-article { border:1px solid rgba(202,167,255,.22); background:rgba(85,54,130,.12); }
.search-result.is-article:hover, .search-result.is-article.active { background:rgba(104,70,155,.2); }
.search-result.is-article strong { color:#efe6ff; }
.search-result.is-article .result-kind { color:#caa7ff; }
.search-result.is-article .result-meta { color:#d8c7f7; }
.search-result.is-article .result-desc { color:#d8d0ea; }
.search-result strong { font-size:.95rem; }
.search-result .result-meta { color:var(--muted); font-size:.78rem; }
.search-result .result-kind { color:var(--accent); font-size:.72rem; align-self:start; }
.search-result .result-desc { grid-column:1/-1; color:#b7c2ce; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.search-empty { padding:18px 14px; color:#c7d0da; }
.search-empty p { margin:0 0 6px; }
.search-empty small { color:var(--muted); }
.search-more { width:100%; border:0; color:var(--accent); background:transparent; padding:9px; cursor:pointer; font-weight:700; }

.mode-switch { display:flex; background:#0b1726; border:1px solid var(--border); border-radius:12px; padding:4px; }
.mode-button { border:0; background:transparent; color:var(--muted); border-radius:9px; padding:9px 12px; cursor:pointer; white-space:nowrap; font-weight:750; }
.mode-button.active { background:#24344a; color:#fff; }

.app-shell { height:calc(100dvh - var(--header-h)); display:grid; grid-template-columns:minmax(330px,390px) 1fr; min-height:0; }
.sidebar { background:#0a1524; border-right:1px solid var(--border-soft); overflow:auto; min-height:0; position:relative; z-index:700; }
.panel-section { padding:22px; }
.section-heading-row, .reader-saga-head, .reader-place-row, .detail-head, .dialog-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
h2,h3,p { overflow-wrap:anywhere; }
.panel-section h2 { margin:3px 0 9px; font:700 1.35rem/1.3 Georgia,"Noto Serif TC",serif; }
.muted { color:var(--muted); line-height:1.65; }
.text-button { border:0; background:transparent; color:var(--accent); cursor:pointer; padding:4px 0; font-weight:750; }
.primary-button, .secondary-button { min-height:42px; padding:9px 14px; border-radius:10px; cursor:pointer; font-weight:800; }
.primary-button { border:1px solid var(--accent-strong); background:var(--accent); color:var(--accent-ink); }
.primary-button:hover { background:var(--accent-strong); }
.secondary-button { border:1px solid #41516a; background:#152337; color:#e7edf3; }
.secondary-button:hover { background:#1a2d45; }
.secondary-button:disabled, .primary-button:disabled { opacity:.4; cursor:not-allowed; }
.full-width { width:100%; }
.icon-button { width:38px; height:38px; display:grid; place-items:center; border:1px solid transparent; background:transparent; border-radius:10px; cursor:pointer; color:#b9c4cf; font-size:1.5rem; line-height:1; }
.icon-button:hover { background:#17273a; color:#fff; }
.recommended-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0 16px; }
.saga-card { border:1px solid var(--border); border-left:4px solid var(--saga-color,#8292a5); background:#101d2e; border-radius:12px; padding:13px; text-align:left; cursor:pointer; min-height:94px; }
.saga-card:hover { border-color:#53657d; transform:translateY(-1px); }
.saga-card strong { display:block; line-height:1.4; margin-bottom:5px; }
.saga-card span { display:block; color:var(--muted); font-size:.76rem; }
.browse-panel { margin-top:12px; border-top:1px solid var(--border-soft); padding-top:12px; }
.category-block + .category-block { margin-top:15px; }
.category-title { font-size:.78rem; color:var(--muted); font-weight:800; margin:0 0 7px; }
.saga-list-button, .explore-row { width:100%; border:0; background:transparent; border-radius:9px; padding:9px; text-align:left; color:#d8e0e8; cursor:pointer; }
.saga-list-button:hover, .explore-row:hover { background:#13243a; }
.saga-list-button small { display:block; color:var(--muted-2); margin-top:2px; }

.reader-saga-head { align-items:center; }
.status-chip, .counter-chip, .confidence-chip { display:inline-flex; align-items:center; border:1px solid #43536a; background:#152337; color:#bcc7d3; border-radius:999px; padding:5px 9px; font-size:.72rem; font-weight:800; white-space:nowrap; }
.reader-description { font-size:.88rem; margin-bottom:16px; }
.reader-progress-card { border:1px solid #33445a; border-radius:14px; padding:16px; }
.reader-place-row h3 { margin:3px 0; font-size:1.1rem; }
.original-name { color:var(--muted-2); margin:3px 0 0; font-size:.82rem; }
.reader-summary, .detail-summary { color:#d0d8e1; line-height:1.7; }
.reader-summary { max-height:8.4em; overflow:hidden; display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; }
.distance-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:14px 0; }
.distance-card { padding:10px; background:#0b1726; border:1px solid var(--border-soft); border-radius:10px; }
.distance-card span { display:block; color:var(--muted-2); font-size:.72rem; margin-bottom:4px; }
.distance-card strong { font-size:.88rem; }
.reader-nav { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.narrative-note { margin-top:14px; padding:12px 13px; border:1px dashed #5d4b2b; background:#171609; border-radius:10px; color:#d7cfbd; font-size:.8rem; line-height:1.55; }
.narrative-note strong { color:#e8bd69; }
.narrative-note p { margin:4px 0 0; }
.explore-browser { margin-top:14px; }
.explore-row { display:flex; align-items:flex-start; gap:9px; }
.explore-row input { margin-top:3px; accent-color:var(--accent); }
.explore-row span { flex:1; }
.explore-row small { display:block; color:var(--muted-2); margin-top:2px; }

.map-region { position:relative; min-width:0; min-height:0; }
#main-map { width:100%; height:100%; background:#06101d; }
.leaflet-container { font-family:inherit; background:#06101d; }
.leaflet-control-attribution { background:rgba(6,16,29,.78) !important; color:#8999aa !important; }
.leaflet-control-attribution a { color:#c9d4df !important; }
.map-message { position:absolute; z-index:900; left:50%; top:50%; transform:translate(-50%,-50%); background:#0d1929; border:1px solid #3a4b61; border-radius:12px; padding:14px 16px; box-shadow:var(--shadow); color:#d7e0e9; }
.map-message.error { display:flex; gap:12px; align-items:center; }
.map-legend { position:absolute; z-index:650; right:14px; bottom:14px; max-width:340px; background:rgba(8,18,31,.9); border:1px solid #33445a; border-radius:10px; padding:9px 11px; color:#c3ced9; font-size:.72rem; line-height:1.4; backdrop-filter:blur(8px); }
.map-legend > div { display:flex; align-items:center; gap:8px; }
.map-legend > div + div { margin-top:5px; }
.legend-line { width:30px; border-top:2px dashed #d7a64a; opacity:.75; }
.legend-confidence { color:#98a8ba; }

.saga-marker-wrap { background:transparent !important; border:0 !important; }
.saga-marker { width:18px; height:18px; display:block; position:relative; border-radius:50%; background:#8593a5; border:3px solid #e5ebf0; box-shadow:0 2px 9px rgba(0,0,0,.48); transition:transform .15s ease,opacity .15s ease; }
.saga-marker.marker-high { background:var(--marker-color,#d7a64a); border-style:solid; }
.saga-marker.marker-medium { background:transparent; border:4px solid var(--marker-color,#d7a64a); }
.saga-marker.marker-low { background:rgba(8,18,31,.8); border:3px dashed var(--marker-color,#d7a64a); }
.saga-marker.marker-literary { border-radius:2px; transform:rotate(45deg); background:var(--marker-color,#d7a64a); border:2px solid #f0e7d0; }
.saga-marker.marker-unknown { background:#8794a5; border:3px solid #e5ebf0; }
.saga-marker.is-dim { opacity:.28; transform:scale(.8); }
.saga-marker.is-adjacent { opacity:.82; transform:scale(1.08); }
.saga-marker.is-current { opacity:1; transform:scale(1.55); box-shadow:0 0 0 4px rgba(215,166,74,.28),0 3px 14px rgba(0,0,0,.6); z-index:2; }
.saga-marker.marker-literary.is-current { transform:rotate(45deg) scale(1.45); }
.mini-marker { width:12px; height:12px; display:inline-block; border-radius:50%; }

.detail-sheet {
  position:fixed; z-index:1800; top:var(--header-h); right:0; bottom:0; width:min(440px,42vw); overflow:auto;
  background:#0c1726; border-left:1px solid #33445a; box-shadow:-18px 0 42px rgba(0,0,0,.25); padding:20px 20px 40px;
}
.detail-sheet h2 { margin:3px 0; font:700 1.35rem/1.35 Georgia,"Noto Serif TC",serif; }
.sheet-handle { display:none; }
.detail-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin:16px 0 10px; }
.detail-stat { border:1px solid var(--border-soft); border-radius:10px; padding:10px; background:#0a1422; }
.detail-stat span { display:block; color:var(--muted-2); font-size:.71rem; margin-bottom:4px; }
.detail-stat strong { font-size:.85rem; }
.detail-distance { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.detail-summary { border-left:3px solid #6d5631; padding-left:12px; margin:14px 0; }
details { border-top:1px solid var(--border-soft); }
summary { cursor:pointer; padding:14px 2px; font-weight:800; color:#edf1f4; }
.detail-copy { color:#c5d0db; line-height:1.75; white-space:pre-wrap; padding:0 2px 16px; }
.detail-copy .empty-note { color:var(--muted); font-style:italic; }
.reference-card { border:1px solid var(--border-soft); background:#0a1422; border-radius:10px; padding:10px; margin-bottom:8px; }
.reference-card strong { color:#e7edf3; }
.photo-grid { display:grid; grid-template-columns:1fr; gap:10px; padding-bottom:16px; }
.photo-card { margin:0; border:1px solid var(--border-soft); border-radius:11px; overflow:hidden; background:#0a1422; }
.photo-card img { display:block; width:100%; height:auto; max-height:280px; object-fit:cover; background:#0a1422; }
.photo-card figcaption { padding:8px 10px 10px; color:var(--muted); font-size:.76rem; display:grid; gap:4px; }
.photo-caption-title { color:#ffe8ce; font-size:.8rem; font-weight:700; }
.photo-caption-body { display:block; line-height:1.6; }
.photo-placeholder { min-height:150px; display:grid; place-items:center; text-align:center; padding:18px; color:#9aa9ba; }

.about-dialog { width:min(600px,calc(100vw - 28px)); border:1px solid #3c4c61; background:#0d1929; color:var(--text); border-radius:16px; padding:0; box-shadow:var(--shadow); }
.about-dialog::backdrop { background:rgba(0,0,0,.62); backdrop-filter:blur(4px); }
.dialog-card { padding:22px; }
.dialog-card h2 { margin:2px 0 0; }
.dialog-card p { color:#c3ced9; line-height:1.75; }
.toast { position:fixed; z-index:3000; left:50%; bottom:24px; transform:translateX(-50%); background:#132237; border:1px solid #40516a; color:#e8edf2; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow); }

@media (max-width: 1100px) {
  :root { --header-h: 178px; }
  .site-header { grid-template-columns:1fr auto; }
  .search-shell { grid-column:1/-1; grid-row:2; }
  .mode-switch { grid-column:2; grid-row:1; }
  .app-shell { grid-template-columns:320px 1fr; }
}

@media (max-width: 760px) {
  :root { --header-h: 186px; }
  body { overflow:hidden; }
  .site-header { padding:13px 12px 10px; gap:10px; grid-template-columns:1fr auto; }
  .brand-kicker { font-size:.63rem; }
  .brand-block h1 { font-size:1.18rem; }
  .brand-tagline { font-size:.79rem; }
  .mode-button { padding:7px 8px; font-size:.78rem; }
  .search-row { min-height:46px; }
  .search-hint { display:none; }
  .search-results { top:50px; max-height:48vh; }
  .app-shell { display:block; height:calc(100dvh - var(--header-h)); position:relative; }
  .map-region { position:absolute; inset:0; }
  .sidebar {
    position:absolute; z-index:720; left:8px; right:8px; top:8px; width:auto; max-height:36%; overflow:auto;
    border:1px solid rgba(55,73,96,.88); border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,.24); background:rgba(10,21,36,.95); backdrop-filter:blur(10px);
  }
  .panel-section { padding:13px; }
  #home-panel .section-heading-row { align-items:center; }
  #home-panel .eyebrow, #home-panel h2 { display:none; }
  .recommended-grid { display:none; }
  #browse-toggle { min-height:38px; }
  #reader-panel { max-height:34vh; }
  .reader-description, .reader-summary, .narrative-note { display:none; }
  .reader-progress-card { padding:10px; }
  .distance-grid { margin:8px 0; }
  .map-legend { left:10px; right:auto; bottom:calc(10px + env(safe-area-inset-bottom)); max-width:calc(100vw - 20px); }
  .map-legend .legend-confidence { display:none; }
  .detail-sheet {
    top:auto; left:0; right:0; bottom:0; width:100%; max-height:69dvh;
    border-left:0; border-top:1px solid #465770; border-radius:18px 18px 0 0; padding:10px 16px calc(22px + env(safe-area-inset-bottom));
    box-shadow:0 -16px 36px rgba(0,0,0,.34);
  }
  .sheet-handle { display:block; width:48px; height:5px; border-radius:99px; background:#4b5b70; margin:0 auto 10px; }
  .detail-summary-grid, .detail-distance { grid-template-columns:1fr 1fr; }
  .photo-card img { max-height:220px; }
  .toast { bottom:calc(18px + env(safe-area-inset-bottom)); max-width:calc(100vw - 30px); }
}

@media (max-width: 420px) {
  :root { --header-h: 194px; }
  .brand-tagline { max-width:210px; }
  .mode-switch { align-self:start; }
  .mode-button { padding:6px 7px; font-size:.72rem; }
  .distance-grid { grid-template-columns:1fr; }
  .reader-nav { grid-template-columns:1fr 1fr; }
  .detail-summary-grid, .detail-distance { grid-template-columns:1fr; }
}
.saga-marker.marker-literary.is-dim { transform: rotate(45deg) scale(.8); }
.saga-marker.marker-literary.is-adjacent { transform: rotate(45deg) scale(1.08); }

/* R3 search result semantics and progressive disclosure */
.search-result .result-original { color:#d5dde6; font-size:.78rem; font-family:Georgia,"Noto Serif TC",serif; }
.search-result .result-meta { text-align:right; }

/* Reader navigation shows the actual adjacent place names, not only generic buttons. */
.reader-nav-button { display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; text-align:left; }
.reader-nav-button#reader-next { text-align:right; align-items:flex-end; }
.reader-nav-kicker { display:block; font-size:.72rem; opacity:.78; }
.reader-nav-place { display:block; width:100%; font-size:.82rem; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Confidence legend mirrors the five non-colour-only marker forms. */
.confidence-legend { width:100%; border-top:1px solid rgba(80,99,122,.45); margin-top:7px; padding-top:2px; }
.confidence-legend summary { padding:6px 0 3px; font-size:.72rem; color:#aebbc8; font-weight:800; }
.confidence-legend-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px 12px; padding:5px 0 2px; }
.confidence-legend-grid > span { display:flex; align-items:center; gap:7px; color:#aab7c4; white-space:nowrap; }
.mini-marker { flex:0 0 12px; border:2px solid #e5ebf0; background:#8794a5; box-shadow:0 1px 3px rgba(0,0,0,.35); }
.mini-marker.marker-high { background:#d7a64a; border-style:solid; border-color:#d7a64a; }
.mini-marker.marker-medium { background:transparent; border:3px solid #d7a64a; }
.mini-marker.marker-low { background:#08121f; border:2px dashed #d7a64a; }
.mini-marker.marker-literary { border-radius:2px; transform:rotate(45deg) scale(.8); background:#d7a64a; border:2px solid #f0e7d0; }
.mini-marker.marker-unknown { background:#8794a5; border:2px solid #e5ebf0; }
.detail-sheet { overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }

@media (max-width: 760px) {
  .search-result { padding:9px; gap:4px 8px; }
  .search-result .result-original, .search-result .result-meta { font-size:.74rem; }
  .reader-nav-place { max-width:38vw; }
  .confidence-legend-grid { grid-template-columns:1fr 1fr; }
}

@media (max-width: 420px) {
  .confidence-legend-grid { grid-template-columns:1fr; }
}

.detail-nav { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 4px; }
.detail-nav-button { display:flex; flex-direction:column; gap:3px; min-width:0; text-align:left; }
.detail-nav-button#detail-next { text-align:right; align-items:flex-end; }
.detail-nav-button small { display:block; width:100%; font-size:.72rem; line-height:1.3; opacity:.8; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:420px) { .detail-nav { grid-template-columns:1fr 1fr; } }

.file-mode-help{display:block;margin:.45rem 0 .8rem;color:var(--muted,#9aa9bd);font-size:.9rem;line-height:1.5}
.reference-card p { margin:.45rem 0 0; line-height:1.65; }
.reference-card cite { font-style:italic; }
.reference-card a { color:#b9cfee; text-decoration-thickness:1px; text-underline-offset:2px; overflow-wrap:anywhere; }
.reference-card a:hover { color:#e7edf3; }

/* R32 — manuscript-inspired UI refresh, onboarding, and photo lightbox */
:root {
  --parchment: #e8dcc2;
  --parchment-2: #f3ebd8;
  --parchment-edge: #cbb48a;
  --ink: #2f2318;
  --ink-soft: #5f5043;
  --ink-faint: #7b6a58;
  --gold-line: rgba(128, 95, 44, 0.45);
  --vellum-shadow: 0 16px 34px rgba(35, 23, 10, 0.22);
}

html, body {
  }

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

.site-header {
  }

.site-header::before {
  content: "";
  position: absolute;
  inset: 10px 16px auto;
  height: 1px;
  pointer-events: none;
}

.brand-block h1,
.panel-section h2,
.detail-sheet h2,
.dialog-card h2,
.lightbox-head h2 {
  font-family: "Palatino Linotype", "Book Antiqua", "Noto Serif TC", Georgia, serif;
  letter-spacing: 0.015em;
}

.guide-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.compact-button {
  min-height: 36px;
  padding: 7px 12px;
  font-size: 0.82rem;
}

.intro-card,
.sidebar,
.detail-sheet,
.dialog-card,
.about-dialog,
.tour-dialog,
.reference-card,
.reader-progress-card,
.distance-card,
.detail-stat,
.saga-card,
.map-legend {
  position: relative;
}

.sidebar,
.detail-sheet,
.about-dialog,
.tour-dialog {
  color: var(--ink);
}

.sidebar {
  border-right: 1px solid rgba(106, 79, 42, 0.2);
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.25);
}

.detail-sheet {
  border-left: 1px solid rgba(106, 79, 42, 0.24);
  box-shadow: -18px 0 42px rgba(28, 20, 11, 0.18);
}

.sidebar::before,
.detail-sheet::before,
.dialog-card::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(132, 101, 55, 0.18);
  border-radius: calc(var(--radius) - 4px);
  pointer-events: none;
}

.panel-section h2,
.detail-sheet h2,
.dialog-card h2,
.sidebar strong,
.detail-sheet strong,
.sidebar summary,
.detail-sheet summary {
  color: var(--ink);
}

.sidebar .muted,
.detail-sheet .muted,
.dialog-card p,
.intro-card,
.intro-card-list,
.original-name,
.detail-copy,
.photo-card figcaption,
.detail-stat span,
.distance-card span,
.saga-card span,
.explore-row small,
.category-title,
.reference-card p,
.reference-card strong,
.map-legend,
.confidence-legend summary,
.confidence-legend-grid > span,
.search-hint {
  color: var(--ink-soft);
}

.brand-tagline { color: #b9c0cb; }

.intro-card {
  margin: 0 0 14px;
  padding: 14px 15px;
  border: 1px solid rgba(132, 101, 55, 0.25);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}

.intro-card-lead {
  margin: 0 0 10px;
  line-height: 1.72;
  color: var(--ink);
}

.intro-card-list {
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.7;
}

.text-button {
  color: #7a5420;
}

.sidebar .secondary-button,
.detail-sheet .secondary-button,
.dialog-card .secondary-button,
.lightbox-toolbar .secondary-button {
  border-color: rgba(114, 83, 46, 0.32);
  color: var(--ink);
}

.sidebar .secondary-button:hover,
.detail-sheet .secondary-button:hover,
.dialog-card .secondary-button:hover,
.lightbox-toolbar .secondary-button:hover {
  }

.sidebar .primary-button,
.detail-sheet .primary-button,
.dialog-card .primary-button,
.lightbox-toolbar .primary-button {
  border-color: rgba(122, 84, 32, 0.6);
  color: #281a0d;
}

.status-chip,
.counter-chip,
.confidence-chip {
  border-color: rgba(122, 84, 32, 0.28);
  background: rgba(255, 250, 241, 0.8);
  color: var(--ink-soft);
}

.reader-progress-card,
.saga-card,
.distance-card,
.detail-stat,
.reference-card,
.photo-card,
.map-legend {
  border-color: rgba(132, 101, 55, 0.24);
  box-shadow: var(--vellum-shadow);
}

.reader-summary,
.detail-summary {
  color: #392b1f;
}

.narrative-note {
  border-color: rgba(125, 88, 39, 0.45);
  color: #5d4322;
}

.saga-list-button,
.explore-row {
  color: var(--ink);
}

.saga-list-button:hover,
.explore-row:hover {
  background: rgba(128, 95, 44, 0.08);
}

.map-legend {
  background: rgba(244, 235, 215, 0.92);
  color: var(--ink);
  border-color: rgba(132, 101, 55, 0.28);
  backdrop-filter: blur(10px);
}

.legend-line { border-top-color: #8f6426; }

.mini-marker.marker-high { background: #b8862d; border-color: #b8862d; }
.mini-marker.marker-medium { border-color: #b8862d; }
.mini-marker.marker-low { border-color: #8f6426; }

.about-dialog,
.tour-dialog {
  width: min(760px, calc(100vw - 24px));
  max-width: 760px;
  border: 1px solid rgba(132, 101, 55, 0.28);
  border-radius: 20px;
  padding: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,0.32);
}

.about-dialog::backdrop,
.tour-dialog::backdrop,
.photo-lightbox::backdrop {
  background: rgba(10, 9, 12, 0.68);
  backdrop-filter: blur(5px);
}

.dialog-card {
  color: var(--ink);
}

.tour-card {
  padding-bottom: 18px;
}

.tour-lead {
  margin: 8px 0 16px;
  line-height: 1.72;
  color: var(--ink);
}

.tour-steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.tour-step {
  padding: 14px;
  border: 1px solid rgba(132, 101, 55, 0.22);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
}

.tour-step-number {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #27180d;
  font-weight: 800;
  margin-bottom: 8px;
}

.tour-step h3 {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--ink);
}

.tour-step p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.7;
}

.tour-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  color: var(--ink-soft);
}

.tour-toggle input {
  accent-color: #b8862d;
}

.tour-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.photo-card {
  overflow: hidden;
}

.photo-trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

.photo-trigger img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 280px;
  object-fit: cover;
  background: rgba(255,255,255,0.4);
}

.photo-trigger:hover img {
  filter: saturate(1.03) contrast(1.02);
}

.photo-zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(39, 29, 16, 0.8);
  color: #f2ead7;
  font-size: 0.74rem;
  letter-spacing: 0.03em;
}

.photo-lightbox {
  width: min(1120px, calc(100vw - 16px));
  max-width: 1120px;
  max-height: calc(100dvh - 16px);
  border: 0;
  background: transparent;
  padding: 0;
}

.lightbox-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(1120px, calc(100vw - 16px));
  max-height: calc(100dvh - 16px);
  padding: 16px;
  border-radius: 18px;
  color: #f3f0ea;
  box-shadow: 0 24px 68px rgba(0,0,0,0.42);
}

.lightbox-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.lightbox-head .eyebrow,
.lightbox-caption {
  color: #cbbeb0;
}

.lightbox-head h2 {
  margin: 2px 0 0;
  color: #fff8ea;
}

.lightbox-stage {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 10px;
  border-radius: 14px;
  }

#lightbox-image {
  display: block;
  max-width: 100%;
  max-height: min(72vh, 900px);
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.16s ease;
  will-change: transform;
}

.lightbox-toolbar {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.lightbox-toolbar button {
  min-width: 92px;
}

.lightbox-caption {
  margin: 0;
  line-height: 1.65;
  font-size: 0.9rem;
}

@media (max-width: 1100px) {
  .guide-actions {
    justify-content: flex-start;
  }

  .tour-steps {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .sidebar {
    border-color: rgba(132, 101, 55, 0.26);
  }

  .guide-actions {
    width: 100%;
    justify-content: space-between;
  }

  .intro-card {
    margin-bottom: 10px;
    padding: 12px;
  }

  .intro-card-list {
    padding-left: 1rem;
  }

  .tour-steps {
    grid-template-columns: 1fr;
  }

  .tour-actions {
    justify-content: stretch;
  }

  .tour-actions button {
    flex: 1 1 180px;
  }

  .photo-trigger img {
    max-height: 220px;
  }

  .lightbox-card {
    width: calc(100vw - 10px);
    max-height: calc(100dvh - 10px);
    padding: 12px;
    gap: 10px;
  }

  .lightbox-toolbar button {
    flex: 1 1 0;
    min-width: 0;
  }

  #lightbox-image {
    max-height: 58vh;
  }
}

@media (max-width: 420px) {
  .guide-actions {
    gap: 8px;
  }

  .compact-button {
    padding: 6px 10px;
    font-size: 0.78rem;
  }

  .tour-step {
    padding: 12px;
  }

  .lightbox-stage {
    padding: 6px;
  }

  .photo-zoom-hint {
    font-size: 0.7rem;
    padding: 4px 8px;
  }
}
.search-hint { color: #99a6b5; }
.reference-card strong { color: var(--ink); }

/* R33 — cohesive Norse palette + route contrast and highlight */
:root {
  --bg: #07111d;
  --bg-2: #0b1726;
  --panel: #0d1a29;
  --panel-2: #122234;
  --border: rgba(133, 157, 186, 0.22);
  --border-soft: rgba(133, 157, 186, 0.14);
  --text: #ecf1f6;
  --muted: #a9b7c6;
  --muted-2: #8193a6;
  --accent: #cda157;
  --accent-strong: #ddb874;
  --accent-ink: #1f1408;
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
  --header-h: 150px;
}

html, body {
  color: var(--text);
}

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

.site-header,
.sidebar,
.detail-sheet,
.about-dialog,
.tour-dialog,
.dialog-card,
.lightbox-card,
.map-legend,
.search-results,
.reader-progress-card,
.saga-card,
.distance-card,
.detail-stat,
.reference-card,
.photo-card,
.intro-card,
.search-row {
  background-image: none !important;
}

.site-header {
  border-bottom: 1px solid rgba(121, 145, 170, 0.14);
}

.brand-block h1,
.panel-section h2,
.detail-sheet h2,
.dialog-card h2,
.lightbox-head h2 {
  color: #f3f0e8;
}

.brand-tagline,
.search-hint,
.muted,
.original-name,
.reader-description,
.reader-summary,
.detail-summary,
.detail-copy,
.reference-card p,
.photo-card figcaption,
.intro-card,
.intro-card-lead,
.intro-card-list,
.map-legend,
.confidence-legend-grid > span,
.confidence-legend summary,
.distance-card span,
.detail-stat span,
.saga-card span,
.explore-row small,
.category-title {
  color: var(--muted);
}

.sidebar,
.detail-sheet {
  color: var(--text);
  border-color: var(--border-soft);
}

.sidebar::before,
.detail-sheet::before,
.dialog-card::before {
  border-color: rgba(205, 161, 87, 0.08);
}

.sidebar,
.detail-sheet,
.about-dialog,
.tour-dialog,
.dialog-card,
.reference-card,
.reader-progress-card,
.distance-card,
.detail-stat,
.saga-card,
.map-legend,
.intro-card,
.photo-card {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

.text-button {
  color: var(--accent-strong);
}

.primary-button {
  border-color: rgba(205, 161, 87, 0.72);
  color: #23180b;
}

.secondary-button {
  border-color: rgba(125, 147, 174, 0.24);
  color: var(--text);
}

.secondary-button:hover,
.icon-button:hover,
.saga-list-button:hover,
.explore-row:hover,
.search-result:hover,
.search-result.active,
.mode-button.active {
  background: rgba(37, 57, 82, 0.96);
}

.status-chip,
.counter-chip,
.confidence-chip {
  border-color: rgba(133, 157, 186, 0.22);
  background: rgba(18, 32, 49, 0.84);
  color: #d9e0e8;
}

.reader-progress-card,
.saga-card,
.distance-card,
.detail-stat,
.reference-card,
.photo-card,
.intro-card,
.search-results,
.map-legend {
  border-color: rgba(133, 157, 186, 0.16);
  color: var(--text);
}

.reader-summary,
.detail-summary,
.detail-copy,
.reference-card strong,
.detail-sheet strong,
.sidebar strong,
.sidebar summary,
.detail-sheet summary {
  color: var(--text);
}

.intro-card {
  border-left: 3px solid rgba(205, 161, 87, 0.7);
}

.photo-zoom-hint {
  background: rgba(8, 13, 22, 0.82);
  border: 1px solid rgba(205, 161, 87, 0.25);
}

.about-dialog,
.tour-dialog,
.dialog-card {
  color: var(--text);
  border-color: rgba(133, 157, 186, 0.18);
}

.tour-step {
  border-color: rgba(133, 157, 186, 0.18);
}

.tour-step h3,
.tour-lead,
.tour-step p,
.tour-toggle,
.dialog-card p,
.dialog-card strong,
.lightbox-caption,
.lightbox-head .eyebrow {
  color: var(--text);
}

.tour-step-number {
  }

.map-legend {
  background: rgba(10, 19, 31, 0.9) !important;
  backdrop-filter: blur(10px);
}

.leaflet-overlay-pane svg path.saga-route {
  transition: opacity 180ms ease, stroke-width 180ms ease, filter 180ms ease;
}

.leaflet-overlay-pane svg path.saga-route {
  filter: drop-shadow(0 0 4px rgba(0,0,0,0.48));
}

.leaflet-overlay-pane svg path.saga-route-muted {
  opacity: 0.22;
  filter: grayscale(0.15) saturate(0.8) drop-shadow(0 0 2px rgba(0,0,0,0.35));
}

.leaflet-overlay-pane svg path.saga-route-active {
  opacity: 1;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 14px rgba(255,255,255,0.1));
  animation: none;
}


.saga-marker.is-explore-default {
  opacity: 0.92;
  transform: scale(1.04);
}

.saga-marker.is-other-saga {
  opacity: 0.36;
  transform: scale(0.92);
}

.saga-marker.is-current-saga {
  opacity: 1;
  transform: scale(1.2);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.08), 0 0 0 7px color-mix(in srgb, var(--marker-color,#d7a64a) 24%, transparent), 0 0 18px color-mix(in srgb, var(--marker-color,#d7a64a) 48%, transparent);
}

.saga-card,
.explore-row,
.saga-list-button {
  border-color: rgba(133, 157, 186, 0.16);
}

.explore-row input { accent-color: var(--accent); }

#main-map {
  background: #08111d;
}

@media (max-width: 760px) {
  .sidebar {
    border-color: rgba(133, 157, 186, 0.18);
  }
}

/* R34 — no gradients, strict palette unification, visible detail sidebar, airports */
:root {
  --bg: #232423;
  --bg-2: #232423;
  --panel: #403024;
  --panel-2: #403024;
  --border: #cbb193;
  --border-soft: rgba(203, 177, 147, 0.34);
  --text: #efeff0;
  --muted: #cbb193;
  --muted-2: #cbb193;
  --accent: #cbb193;
  --accent-strong: #ffe8ce;
  --accent-ink: #232423;
  --danger: #ffe8ce;
  --shadow: 0 14px 28px rgba(0,0,0,.28);
}

html,
body,
.site-header,
.sidebar,
.detail-sheet,
.about-dialog,
.tour-dialog,
.dialog-card,
.lightbox-card,
.search-row,
.search-results,
.reader-progress-card,
.saga-card,
.distance-card,
.detail-stat,
.reference-card,
.photo-card,
.intro-card,
.map-legend,
.map-message,
.narrative-note,
.tour-step,
.photo-placeholder {
  background-image: none !important;
}

html,
body {
  background: #232423 !important;
  color: #efeff0 !important;
}

body {
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
}

.site-header {
  background: #232423 !important;
  border-bottom: 1px solid #403024 !important;
}

.site-header::before,
.sidebar::before,
.detail-sheet::before,
.dialog-card::before {
  display: none !important;
}

.brand-block h1,
.panel-section h2,
.detail-sheet h2,
.dialog-card h2,
.lightbox-head h2,
.search-result strong,
.reader-place-row h3,
.sidebar strong,
.detail-sheet strong,
summary {
  color: #ffe8ce !important;
}

.brand-kicker,
.eyebrow,
.text-button,
.search-icon {
  color: #cbb193 !important;
}

.brand-tagline,
.search-hint,
.muted,
.original-name,
.reader-description,
.reader-summary,
.detail-summary,
.detail-copy,
.reference-card p,
.photo-card figcaption,
.intro-card,
.intro-card-lead,
.intro-card-list,
.map-legend,
.confidence-legend-grid > span,
.confidence-legend summary,
.distance-card span,
.detail-stat span,
.saga-card span,
.explore-row small,
.category-title,
.search-result .result-meta,
.search-result .result-desc,
.search-result .result-original,
.file-mode-help,
.lightbox-caption,
.dialog-card p,
.tour-step p,
.tour-lead,
.tour-toggle,
.reference-card strong,
.legend-confidence {
  color: #efeff0 !important;
}

.search-row,
.search-results,
.reader-progress-card,
.saga-card,
.distance-card,
.detail-stat,
.reference-card,
.photo-card,
.intro-card,
.map-legend,
.map-message,
.narrative-note,
.tour-step,
.photo-placeholder {
  background: #403024 !important;
  border: 1px solid #cbb193 !important;
  color: #efeff0 !important;
  box-shadow: none !important;
}

.sidebar,
.detail-sheet,
.about-dialog,
.tour-dialog,
.dialog-card {
  background: #403024 !important;
  color: #efeff0 !important;
  border-color: #cbb193 !important;
}

.sidebar {
  border-right: 1px solid #cbb193 !important;
}

.detail-sheet {
  position: fixed !important;
  z-index: 1900 !important;
  top: var(--header-h) !important;
  right: 0 !important;
  bottom: 0 !important;
  width: min(420px, 34vw) !important;
  max-width: 420px !important;
  min-width: 320px !important;
  background: #403024 !important;
  border-left: 1px solid #cbb193 !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  box-shadow: -8px 0 18px rgba(0,0,0,.22) !important;
}

.hidden.detail-sheet {
  display: none !important;
}

.icon-button,
.mode-switch,
.mode-button,
.secondary-button,
.primary-button,
.saga-list-button,
.explore-row,
.search-result,
.search-more {
  background-image: none !important;
}

.mode-switch {
  background: #403024 !important;
  border: 1px solid #cbb193 !important;
}

.mode-button {
  color: #efeff0 !important;
}

.mode-button.active,
.saga-list-button:hover,
.explore-row:hover,
.search-result:hover,
.search-result.active,
.icon-button:hover,
.secondary-button:hover {
  background: #232423 !important;
  color: #ffe8ce !important;
}

.search-row {
  background: #232423 !important;
  border: 1px solid #cbb193 !important;
}

#global-search {
  background: transparent !important;
  color: #efeff0 !important;
}

#global-search::placeholder {
  color: #cbb193 !important;
}

.primary-button {
  background: #cbb193 !important;
  border: 1px solid #cbb193 !important;
  color: #232423 !important;
}

.secondary-button,
.icon-button {
  background: #403024 !important;
  border: 1px solid #cbb193 !important;
  color: #efeff0 !important;
}

.status-chip,
.counter-chip,
.confidence-chip {
  background: #232423 !important;
  border: 1px solid #cbb193 !important;
  color: #ffe8ce !important;
}

.leaflet-container,
#main-map {
  background: #232423 !important;
}

.map-legend {
  background: #232423 !important;
}

.legend-line {
  border-top: 2px dashed #cbb193 !important;
}

.legend-airport-dot {
  width: 12px;
  height: 12px;
  display: inline-block;
  border-radius: 999px;
  margin-right: 8px;
  background: #cbb193;
  border: 1px solid #efeff0;
  flex: 0 0 12px;
}

.mini-marker {
  box-shadow: none !important;
}

.photo-trigger {
  background: #232423 !important;
}

.photo-trigger img {
  background: #232423 !important;
}

.photo-zoom-hint {
  background: #232423 !important;
  color: #ffe8ce !important;
  border: 1px solid #cbb193 !important;
}

.lightbox-card,
.lightbox-stage {
  background: #232423 !important;
  color: #efeff0 !important;
  border: 1px solid #cbb193 !important;
}

#lightbox-image {
  background: #232423 !important;
}

.airport-label {
  background: #232423 !important;
  border: 1px solid #cbb193 !important;
  color: #ffe8ce !important;
  box-shadow: none !important;
  padding: 2px 6px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

.airport-label:before {
  display: none !important;
}

.leaflet-overlay-pane svg path.saga-route {
  transition: opacity 180ms ease, stroke-width 180ms ease;
  filter: none !important;
}

.leaflet-overlay-pane svg path.saga-route-muted {
  opacity: 0.2 !important;
}

.leaflet-overlay-pane svg path.saga-route-active {
  opacity: 1 !important;
  animation: none;
}

.saga-marker.is-explore-default {
  opacity: 0.95 !important;
  transform: scale(1.02) !important;
}

.saga-marker.is-other-saga {
  opacity: 0.34 !important;
  transform: scale(.92) !important;
}

.saga-marker.is-current-saga {
  opacity: 1 !important;
  transform: scale(1.28) !important;
  box-shadow: 0 0 0 3px rgba(239,239,240,.22), 0 0 10px rgba(255,232,206,.24) !important;
}

@media (max-width: 760px) {
  .sidebar {
    background: #403024 !important;
    border: 1px solid #cbb193 !important;
  }

  .detail-sheet {
    top: auto !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    max-height: 72dvh !important;
    border-top: 1px solid #cbb193 !important;
    border-left: 0 !important;
    border-radius: 16px 16px 0 0 !important;
  }
}

/* R35 — airport labels and Vitivar article cross-links */
.airport-marker-wrap {
  background: transparent !important;
  border: 0 !important;
}

.airport-marker {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  color: #efeff0;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.airport-symbol {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid #efeff0;
  background: #cbb193;
  color: #232423;
  font-size: 10px;
  flex: 0 0 18px;
}

.airport-code {
  display: inline-block;
  padding: 3px 5px;
  border: 1px solid #cbb193;
  background: #232423;
  color: #ffe8ce;
}

.airport-marker:hover .airport-code,
.airport-marker:focus-visible .airport-code {
  background: #403024;
  color: #efeff0;
}

.airport-marker:focus-visible {
  outline: 2px solid #ffe8ce;
  outline-offset: 2px;
  border-radius: 999px;
}

.airport-popup-shell .leaflet-popup-content-wrapper,
.airport-popup-shell .leaflet-popup-tip {
  background: #403024;
  color: #efeff0;
  box-shadow: none;
  border: 1px solid #cbb193;
}

.airport-popup {
  min-width: 128px;
  line-height: 1.55;
}

.airport-popup strong {
  color: #ffe8ce;
}

.airport-popup-sub {
  color: #cbb193;
  font-size: 12px;
}

.vitivar-article-link {
  display: inline;
  padding: 0 2px;
  background: #cbb193;
  color: #232423 !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  font-weight: 800;
  border-radius: 2px;
}

.vitivar-article-link:hover,
.vitivar-article-link:focus-visible {
  background: #ffe8ce;
  color: #232423 !important;
}



/* Legacy active-route emphasis; R73 final rules below keep it static. */
.leaflet-overlay-pane svg path.saga-route-active,
.leaflet-overlay-pane svg path.saga-route-reading {
  opacity: 1 !important;
  stroke-width: 4px !important;
  filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 10px currentColor);
  animation: none;
}

.leaflet-overlay-pane svg path.saga-route-reading {
  stroke-width: 4px !important;
}

@media (max-width: 760px) {
  .airport-marker {
    font-size: 10px;
  }
  .airport-symbol {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
    font-size: 9px;
  }
  .airport-code {
    padding: 2px 4px;
  }
}

/* R37 — map layers, route legend, synchronized focus, modern travel layer */
.airport-layer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid #403024;
  color: #efeff0;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}

.airport-layer-toggle input {
  margin: 0;
  accent-color: #cbb193;
}

.airport-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.explore-route-legend {
  margin: 12px 0 14px;
  padding: 10px;
  border: 1px solid #cbb193;
  background: #232423;
  color: #efeff0;
}

.explore-route-title {
  margin: 0 0 8px;
  color: #ffe8ce;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
}

.explore-route-empty {
  margin: 0;
  color: #cbb193;
  font-size: .78rem;
  line-height: 1.55;
}

.route-legend-button {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 7px 8px;
  border: 1px solid transparent;
  background: #232423;
  color: #efeff0;
  text-align: left;
  cursor: pointer;
}

.route-legend-button + .route-legend-button {
  margin-top: 4px;
}

.route-legend-button:hover,
.route-legend-button:focus-visible,
.route-legend-button.is-selected {
  border-color: #cbb193;
  background: #403024;
  color: #ffe8ce;
}

.route-swatch {
  width: 24px;
  height: 5px;
  border-radius: 0;
  flex: 0 0 24px;
  box-shadow: 0 0 5px currentColor;
}

.route-legend-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.explore-row.is-selected {
  background: #232423 !important;
  border: 1px solid #cbb193;
  color: #ffe8ce !important;
}

.travel-existing {
  white-space: pre-wrap;
}

.modern-travel-card {
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #cbb193;
  background: #232423;
  color: #efeff0;
}

.modern-travel-card > strong {
  display: block;
  color: #ffe8ce !important;
  margin-bottom: 6px;
}

.modern-travel-note {
  margin: 0;
  color: #cbb193 !important;
  font-size: .78rem;
  line-height: 1.65;
}

.nearest-airport-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.nearest-airport-row {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 9px;
  padding: 8px;
  border: 1px solid #403024;
  background: #403024;
}

.nearest-airport-row.is-nearest {
  border-color: #cbb193;
}

.nearest-airport-code {
  min-width: 42px;
  padding: 5px 6px;
  border: 1px solid #cbb193;
  background: #232423;
  color: #ffe8ce;
  font-weight: 800;
  text-align: center;
  letter-spacing: .06em;
}

.nearest-airport-copy {
  min-width: 0;
}

.nearest-airport-copy strong,
.nearest-airport-copy small {
  display: block;
}

.nearest-airport-copy strong {
  color: #efeff0 !important;
  font-size: .84rem;
}

.nearest-airport-copy small {
  margin-top: 2px;
  color: #cbb193;
  font-size: .72rem;
}

@media (max-width: 760px) {
  .explore-route-legend {
    margin: 8px 0 10px;
    padding: 8px;
  }

  .route-legend-button {
    min-height: 36px;
  }

  .modern-travel-card {
    padding: 10px;
  }
}

/* R38 — event-level explore navigation, travel-link layer, mobile exploration hierarchy */
.explore-mobile-section {
  border: 0;
  margin: 0;
  padding: 0;
}

.explore-mobile-section > summary {
  display: none;
}

.explore-event-nav {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #403024;
}

.explore-event-title {
  margin: 0 0 7px;
  color: #ffe8ce;
  font-size: .74rem;
  font-weight: 800;
  line-height: 1.45;
}

.explore-event-list {
  display: grid;
  gap: 4px;
  max-height: 240px;
  overflow: auto;
  overscroll-behavior: contain;
}

.explore-event-button {
  width: 100%;
  min-height: 34px;
  display: grid;
  grid-template-columns: 26px minmax(0,1fr);
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border: 1px solid transparent;
  background: #232423;
  color: #efeff0;
  text-align: left;
  cursor: pointer;
}

.explore-event-button:hover,
.explore-event-button:focus-visible,
.explore-event-button.is-selected {
  border-color: #cbb193;
  background: #403024;
  color: #ffe8ce;
}

.explore-event-number {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid #cbb193;
  color: #cbb193;
  font-size: .68rem;
  font-weight: 800;
}

.explore-event-button.is-selected .explore-event-number {
  background: #cbb193;
  color: #232423;
}

.explore-event-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .77rem;
}

.leaflet-overlay-pane svg path.modern-travel-link {
  stroke: #efeff0;
  opacity: .78;
  filter: none !important;
}

@media (max-width: 760px) {
  #explore-panel {
    max-height: 44dvh;
    overflow: auto;
  }

  .explore-mobile-section {
    border: 1px solid #cbb193;
    background: #232423;
    margin-top: 8px;
  }

  .explore-mobile-section > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 40px;
    padding: 8px 10px;
    color: #ffe8ce;
    background: #232423;
    cursor: pointer;
    font-size: .8rem;
    font-weight: 800;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .explore-mobile-section[open] > summary {
    border-bottom: 1px solid #403024;
  }

  .explore-route-legend,
  .explore-browser {
    margin: 0;
    border: 0 !important;
  }

  .explore-route-legend {
    padding: 8px;
  }

  .explore-browser {
    padding: 8px;
  }

  .explore-event-list {
    max-height: 180px;
  }
}

/* R39 — visible map controls, unclipped legend, event metadata, visual-regression fixes */
.header-controls {
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  gap: 8px;
  min-width: max-content;
}

.airport-header-toggle {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid #cbb193;
  background: #403024;
  color: #efeff0;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  white-space: nowrap;
}

.airport-header-toggle:hover,
.airport-header-toggle:focus-visible {
  background: #232423;
  color: #ffe8ce;
}

.airport-header-toggle.is-active {
  background: #cbb193;
  color: #232423;
}

.airport-header-toggle.is-active .airport-toggle-state {
  color: #232423;
}

.airport-toggle-icon {
  font-size: 1rem;
}

.airport-toggle-label {
  font-size: .8rem;
}

.airport-toggle-state {
  min-width: 24px;
  padding-left: 7px;
  border-left: 1px solid currentColor;
  color: #ffe8ce;
  text-align: center;
  font-size: .76rem;
}

/* The old bottom floating legend is moved to the map's upper-right corner. */
.map-legend {
  position: absolute !important;
  z-index: 650 !important;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  left: auto !important;
  width: auto !important;
  max-width: min(320px, calc(100% - 76px)) !important;
  padding: 0 !important;
  background: #232423 !important;
  border: 1px solid #cbb193 !important;
  color: #efeff0 !important;
  overflow: visible !important;
}

.map-legend-details {
  border: 0 !important;
  margin: 0 !important;
}

.map-legend-details > summary {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 8px 11px !important;
  color: #ffe8ce !important;
  background: #232423 !important;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 800;
  list-style-position: inside;
}

.map-legend-details[open] > summary {
  border-bottom: 1px solid #403024;
}

.map-legend-body {
  display: grid;
  gap: 9px;
  padding: 10px 11px 11px;
  color: #efeff0;
  font-size: .72rem;
  line-height: 1.5;
}

.map-legend-body > div,
.airport-legend-row,
.travel-legend-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.legend-travel-line {
  width: 30px;
  flex: 0 0 30px;
  margin-top: .5em;
  border-top: 2px dotted #efeff0;
}

.travel-map-status {
  position: absolute;
  z-index: 660;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: min(520px, calc(100% - 420px));
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid #cbb193;
  background: #403024;
  color: #efeff0;
  font-size: .74rem;
  line-height: 1.4;
  pointer-events: none;
}

.travel-map-status strong {
  color: #ffe8ce !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keep transient messages away from the viewport bottom. */
.toast {
  top: calc(var(--header-h) + 14px) !important;
  bottom: auto !important;
  max-width: min(520px, calc(100vw - 30px));
}

.explore-event-button {
  grid-template-columns: 26px minmax(0,1fr);
  align-items: start;
}

.explore-event-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.explore-event-name {
  display: block;
  width: 100%;
}

.explore-event-meta {
  display: block;
  color: #cbb193;
  font-size: .66rem;
  line-height: 1.35;
  white-space: normal;
  overflow-wrap: anywhere;
}

.explore-event-button.is-selected .explore-event-meta {
  color: #efeff0;
}

@media (max-width: 1100px) {
  .header-controls {
    grid-column: 2;
    grid-row: 1;
  }

  .mode-switch {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  .travel-map-status {
    max-width: min(420px, calc(100% - 360px));
  }
}

@media (max-width: 760px) {
  .header-controls {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    min-width: 0;
  }

  .airport-header-toggle {
    min-height: 32px;
    justify-content: center;
    padding: 4px 7px;
    font-size: .72rem;
  }

  .airport-toggle-label,
  .airport-toggle-state {
    font-size: .7rem;
  }

  .map-legend {
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    max-width: min(230px, calc(100% - 74px)) !important;
  }

  .map-legend-details > summary {
    min-height: 34px;
    padding: 6px 9px !important;
    font-size: .7rem;
  }

  .map-legend-body {
    max-height: 44dvh;
    overflow: auto;
    padding: 8px 9px 9px;
    font-size: .68rem;
  }

  .travel-map-status {
    top: 48px;
    left: auto;
    right: 8px;
    transform: none;
    max-width: min(250px, calc(100% - 16px));
    font-size: .68rem;
  }

  .toast {
    top: calc(var(--header-h) + 8px) !important;
  }
}

@media (max-width: 420px) {
  .mode-button {
    min-width: 0;
  }

  .airport-header-toggle {
    gap: 5px;
  }

  .airport-toggle-state {
    min-width: 20px;
    padding-left: 5px;
  }

  .map-legend {
    max-width: 200px !important;
  }
}

/* R40 — compact mobile landing panel + progressive airport disclosure */
@media (max-width: 760px) {
  .sidebar {
    max-height: 28dvh !important;
  }

  .sidebar.is-browse-open {
    max-height: 48dvh !important;
  }

  #home-panel {
    padding: 9px !important;
  }

  #home-panel .section-heading-row {
    margin: 0 0 7px;
    gap: 8px;
  }

  #home-panel .intro-card {
    display: none !important;
  }

  #home-panel .guide-actions {
    width: 100%;
    justify-content: space-between;
    gap: 6px;
  }

  #home-panel .guide-actions .secondary-button,
  #home-panel .guide-actions .text-button,
  #home-panel #browse-toggle {
    min-height: 34px;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: .74rem;
  }

  #home-panel #browse-toggle {
    margin-top: 0;
  }

  #home-panel .browse-panel {
    margin-top: 8px;
    padding-top: 8px;
  }
}

@media (max-width: 420px) {
  :root {
    --header-h: 168px;
  }

  .site-header {
    padding: 9px 10px 8px !important;
    gap: 7px !important;
  }

  .brand-tagline {
    display: none !important;
  }

  .brand-block h1 {
    font-size: 1.08rem !important;
  }

  .search-row {
    min-height: 40px !important;
  }

  .sidebar {
    top: 6px !important;
    left: 6px !important;
    right: 6px !important;
    max-height: 24dvh !important;
  }

  .sidebar.is-browse-open {
    max-height: 46dvh !important;
  }
}

/* R40 — hard layout containment / short-height regression fix */
html,
body {
  width: 100%;
  height: 100%;
  max-width: 100%;
  overflow: hidden !important;
}

body {
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  min-height: 100dvh !important;
  height: 100dvh !important;
}

.site-header {
  grid-row: 1 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
}

.app-shell {
  grid-row: 2 !important;
  height: auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100vw !important;
  overflow: hidden !important;
}

.sidebar,
.map-region,
.panel-section,
#home-panel,
#reader-panel,
#explore-panel,
.intro-card,
.recommended-grid,
.browse-panel,
.reader-progress-card,
.narrative-note,
.explore-mobile-section,
.explore-route-legend,
.explore-browser,
.detail-sheet,
.detail-copy,
.detail-head,
.detail-summary-grid,
.detail-distance,
.reference-card,
.photo-card,
.search-shell,
.search-row,
.header-controls,
.mode-switch,
.map-legend,
.map-legend-details,
.map-legend-body,
.travel-map-status,
.tour-step,
.dialog-card,
.lightbox-card {
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.panel-section > *,
.reader-progress-card > *,
.narrative-note > *,
.detail-sheet > *,
.detail-copy > *,
.map-legend-body > *,
.map-legend-body > * > *,
.explore-row > *,
.explore-event-button > *,
.route-legend-button > *,
.section-heading-row > *,
.reader-place-row > *,
.detail-head > *,
.search-result > * {
  min-width: 0 !important;
  max-width: 100% !important;
}

p,
li,
span,
strong,
a,
small,
h1,
h2,
h3,
summary,
button,
label {
  overflow-wrap: anywhere;
  word-break: normal;
}

button,
.primary-button,
.secondary-button,
.saga-card,
.saga-list-button,
.explore-row,
.explore-event-button,
.route-legend-button,
.airport-header-toggle {
  max-width: 100% !important;
}

.map-legend {
  overflow: hidden !important;
}

.map-legend-details,
.map-legend-body {
  width: 100% !important;
}

.map-legend-body > div,
.airport-legend-row,
.travel-legend-row {
  width: 100% !important;
  min-width: 0 !important;
}

.map-legend-body > div > span:last-child,
.airport-legend-row > span:last-child,
.travel-legend-row > span:last-child {
  flex: 1 1 auto;
  min-width: 0 !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.detail-sheet {
  top: var(--live-header-h, var(--header-h)) !important;
}

.toast {
  top: calc(var(--live-header-h, var(--header-h)) + 8px) !important;
}

@media (max-width: 1100px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .search-shell {
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 760px) {
  .app-shell {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .map-region {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .sidebar {
    max-width: calc(100% - 12px) !important;
    overflow-x: hidden !important;
  }

  #home-panel .section-heading-row,
  #home-panel .guide-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #home-panel .guide-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }

  #home-panel .guide-actions > * {
    width: 100% !important;
    min-width: 0 !important;
  }

  .detail-sheet {
    top: auto !important;
  }

  .map-legend {
    max-width: min(220px, calc(100% - 70px)) !important;
  }

  .map-legend-body {
    max-height: min(42dvh, 260px) !important;
  }
}

@media (max-width: 420px) {
  .site-header {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .brand-block,
  .header-controls {
    min-width: 0 !important;
  }

  .mode-switch {
    min-width: 0 !important;
  }

  .mode-button,
  .airport-header-toggle {
    white-space: nowrap !important;
  }

  .map-legend {
    max-width: min(190px, calc(100% - 66px)) !important;
  }
}

/* Very short browser windows must still preserve a usable map viewport. */
@media (max-height: 560px) {
  .site-header {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    gap: 6px !important;
  }

  .brand-tagline,
  .search-hint,
  #home-panel .intro-card,
  #home-panel .recommended-grid {
    display: none !important;
  }

  .search-row {
    min-height: 38px !important;
  }

  .airport-header-toggle,
  .mode-button {
    min-height: 32px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .panel-section {
    padding: 10px !important;
  }

  #home-panel .section-heading-row {
    margin-bottom: 6px !important;
  }

  .sidebar {
    overflow-y: auto !important;
  }

  .map-legend-body {
    max-height: min(48dvh, 180px) !important;
    overflow-y: auto !important;
  }
}

/* R40 — mobile map controls stay outside the floating sidebar hit area */
@media (max-width: 760px) {
  .map-legend {
    top: auto !important;
    right: 8px !important;
    bottom: calc(8px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    z-index: 760 !important;
  }

  .travel-map-status {
    top: auto !important;
    right: 8px !important;
    bottom: calc(54px + env(safe-area-inset-bottom)) !important;
    left: auto !important;
    transform: none !important;
  }
}

/* R41 — storybook narrative, scrollable scene cards, strict overflow containment */
.reader-progress-card,
.reader-progress-card *,
.detail-sheet,
.detail-sheet *,
.reader-nav,
.reader-nav *,
.distance-grid,
.distance-grid *,
.explore-event-nav,
.explore-event-nav * {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.reader-progress-card {
  position: relative;
  overflow: hidden;
}


.reader-card-hint {
  margin: 8px 0 10px;
  padding: 7px 9px;
  border: 1px solid #cbb193;
  background: #232423;
  color: #cbb193;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.reader-open-detail {
  display:block;
  width:100%;
  text-align:left;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.reader-open-detail:hover,
.reader-open-detail:focus-visible {
  background:#2d3433;
  border-color:#ffe8ce;
  color:#ffe8ce;
  outline:none;
}

.reader-year {
  margin: 5px 0 0;
  color: #cbb193;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.reader-summary.reader-story-scroll {
  display: block !important;
  max-height: clamp(300px, 42vh, 560px);
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 12px 12px 14px 4px;
  margin: 0 0 12px;
  color: #efeff0 !important;
  line-height: 1.9;
  white-space: pre-wrap;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: #cbb193 #232423;
}
.reader-summary.reader-story-preview {
  display:block;
  margin:0 0 12px;
  padding:12px 4px 2px;
  color:#efeff0;
  line-height:1.85;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-height:none;
}

.reader-summary.reader-story-scroll::-webkit-scrollbar,
.detail-story-scroll::-webkit-scrollbar,
#detail-story::-webkit-scrollbar {
  width: 10px;
}
.reader-summary.reader-story-scroll::-webkit-scrollbar-track,
#detail-story::-webkit-scrollbar-track {
  background: #232423;
}
.reader-summary.reader-story-scroll::-webkit-scrollbar-thumb,
#detail-story::-webkit-scrollbar-thumb {
  background: #cbb193;
  border: 2px solid #232423;
  border-radius: 999px;
}

#detail-story {
  max-height: min(52vh, 620px);
  overflow-y: auto;
  overflow-x: hidden;
  white-space: pre-wrap;
  padding-right: 10px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  word-break: break-word;
  scrollbar-width: thin;
  scrollbar-color: #cbb193 #232423;
}

.reader-place-row > div,
.reader-nav-button,
.reader-nav-place,
.detail-nav-button,
.detail-nav-button small,
.distance-card,
.distance-card span,
.distance-card strong,
.narrative-note,
.narrative-note p,
.explore-event-button,
.explore-event-copy,
.explore-event-name,
.explore-event-meta,
.reference-card,
.reference-card p,
.modern-travel-card,
.nearest-airport-row,
.photo-card figcaption {
  min-width: 0 !important;
  width: auto;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  white-space: normal !important;
}

.reader-nav {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100%;
  overflow: hidden;
}

.reader-nav-button,
.detail-nav-button {
  width: 100% !important;
  overflow: hidden;
}

.reader-nav-place,
.detail-nav-button small {
  display: block;
  line-height: 1.45;
}

.photo-card.is-nearby-photo {
  border-style: dashed !important;
}

.photo-card.is-nearby-photo figcaption::before {
  content: '附近照片｜';
  color: #ffe8ce;
  font-weight: 800;
}

@media (max-width: 760px) {
  .reader-summary.reader-story-scroll {
    display: block !important;
    max-height: 34dvh;
    padding-right: 8px;
    font-size: 15px;
    line-height: 1.85;
  }
  .reader-card-hint {
    font-size: 11px;
  }
  .reader-nav {
    grid-template-columns: 1fr !important;
  }
  #detail-story {
    max-height: 44dvh;
  }
}

@media (max-width: 420px) {
  .reader-progress-card {
    padding-inline: 10px !important;
  }
  .reader-summary.reader-story-scroll {
    max-height: 31dvh;
  }
}

/* R42 — person index + historical timeline; strict containment, no gradients */
.header-tool-button {
  appearance: none;
  min-width: 0;
  border: 1px solid #cbb193;
  border-radius: 10px;
  background: #403024;
  color: #efeff0;
  padding: 10px 12px;
  font: inherit;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  white-space: nowrap;
}
.header-tool-button:hover,
.header-tool-button:focus-visible,
.header-tool-button[aria-expanded="true"] {
  background: #232423;
  color: #ffe8ce;
}

.timeline-panel {
  position: absolute;
  z-index: 1350;
  left: 14px;
  bottom: 14px;
  width: min(820px, calc(100% - 28px));
  max-width: calc(100% - 28px);
  max-height: min(240px, calc(100% - 28px));
  box-sizing: border-box;
  overflow: auto;
  background: #232423;
  color: #efeff0;
  border: 1px solid #cbb193;
  border-radius: 12px;
  padding: 10px 12px;
}
.timeline-head,
.timeline-range-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.timeline-head > div,
.timeline-range-row > * { min-width: 0; }
.timeline-head .eyebrow { margin: 0 0 2px; color: #cbb193 !important; }
.timeline-head strong,
.timeline-range-row strong { color: #ffe8ce; overflow-wrap: anywhere; }
.timeline-note {
  margin: 7px 0;
  color: #efeff0;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.timeline-range-row { font-size: 11px; color: #cbb193; }
.timeline-range-row strong { flex: 1 1 auto; text-align: center; }
.timeline-slider { width: 100%; accent-color: #cbb193; margin: 8px 0; }
.timeline-events {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0 4px;
  max-width: 100%;
}
.timeline-event-button {
  flex: 0 0 min(210px, 62vw);
  min-width: 0;
  max-width: 210px;
  box-sizing: border-box;
  border: 1px solid #cbb193;
  border-radius: 8px;
  background: #403024;
  color: #efeff0;
  padding: 7px 8px;
  text-align: left;
  cursor: pointer;
}
.timeline-event-button strong,
.timeline-event-button span { display: block; overflow-wrap: anywhere; }
.timeline-event-button strong { color: #ffe8ce; font-size: 11px; }
.timeline-event-button span { margin-top: 3px; font-size: 12px; line-height: 1.4; }
.timeline-event-button.is-selected,
.timeline-event-button:hover,
.timeline-event-button:focus-visible { background: #232423; outline: 1px solid #ffe8ce; }

.person-index-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  color: #efeff0;
  width: min(900px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: calc(100dvh - 24px);
}
.person-index-card {
  width: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 24px);
  box-sizing: border-box;
  overflow: hidden;
  background: #403024 !important;
  border: 1px solid #cbb193;
  color: #efeff0;
}
.person-index-note { margin: 8px 0 10px; color: #efeff0 !important; line-height: 1.55 !important; }
.person-search-row { display:block; width:100%; max-width:100%; box-sizing:border-box; }
.person-search-row input {
  width: 100%; max-width:100%; box-sizing:border-box;
  border: 1px solid #cbb193; border-radius: 8px; background:#232423; color:#efeff0;
  padding: 9px 10px; font:inherit;
}
.person-search-row input::placeholder { color:#cbb193; }
.person-index-layout {
  display:grid;
  grid-template-columns:minmax(190px, 0.8fr) minmax(0, 1.8fr);
  gap:10px;
  margin-top:10px;
  min-width:0;
  max-height:min(62dvh, 620px);
  overflow:hidden;
}
.person-index-list,
.person-detail,
.person-occurrence-list { min-width:0; max-width:100%; box-sizing:border-box; }
.person-index-list,
.person-detail { overflow:auto; border:1px solid #cbb193; border-radius:8px; background:#232423; padding:7px; scrollbar-width:thin; scrollbar-color:#cbb193 #232423; }
.person-index-list::-webkit-scrollbar,
.person-detail::-webkit-scrollbar { width:10px; }
.person-index-list::-webkit-scrollbar-track,
.person-detail::-webkit-scrollbar-track { background:#232423; }
.person-index-list::-webkit-scrollbar-thumb,
.person-detail::-webkit-scrollbar-thumb { background:#cbb193; border:2px solid #232423; border-radius:999px; }
.person-index-button,
.person-occurrence-button {
  display:block; width:100%; max-width:100%; min-width:0; box-sizing:border-box;
  border:1px solid #cbb193; border-radius:7px; background:#403024; color:#efeff0;
  padding:8px; text-align:left; cursor:pointer; margin:0 0 6px;
}
.person-index-button strong,
.person-index-button small,
.person-occurrence-button strong,
.person-occurrence-button small,
.person-occurrence-button span { display:block; max-width:100%; overflow-wrap:anywhere; }
.person-index-button strong,
.person-occurrence-button strong { color:#ffe8ce; }
.person-index-button small,
.person-occurrence-button small { color:#cbb193; margin-top:2px; }
.person-occurrence-button span { font-size:12px; line-height:1.45; margin-top:5px; }
.person-index-button.is-selected,
.person-index-button:hover,
.person-index-button:focus-visible,
.person-occurrence-button:hover,
.person-occurrence-button:focus-visible { background:#232423; outline:1px solid #ffe8ce; }
.person-detail-head h3 { margin:0; color:#ffe8ce; }
.person-detail-head p { overflow-wrap:anywhere; }

/* R42 cumulative containment guard: content must never break its parent box. */
.reader-progress-card,
.reader-place-row,
.counter-chip,
.reader-nav,
.reader-nav-button,
.explore-event-button,
.explore-event-copy,
.route-legend-button,
.detail-sheet,
.detail-nav-button,
.map-legend,
.timeline-panel,
.person-index-card,
.person-index-layout,
.person-index-list,
.person-detail {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.reader-progress-card *,
.explore-event-button *,
.detail-sheet *,
.map-legend *,
.person-index-card * { overflow-wrap: anywhere; }
.counter-chip { flex: 0 0 auto; white-space: nowrap; }

@media (max-width: 760px) {
  .header-tool-button { padding:8px 9px; font-size:12px; }
  .timeline-panel {
    left:8px; right:8px; bottom:8px; width:auto; max-width:none;
    max-height:min(38dvh, calc(100% - 16px)); padding:8px;
  }
  .timeline-range-row { align-items:flex-start; }
  .timeline-event-button { flex-basis:min(180px, 70vw); max-width:180px; }
  .person-index-dialog { width:calc(100vw - 12px); max-width:calc(100vw - 12px); max-height:calc(100dvh - 12px); }
  .person-index-card { max-height:calc(100dvh - 12px); padding:12px !important; }
  .person-index-layout { grid-template-columns:1fr; max-height:66dvh; overflow:auto; }
  .person-index-list { max-height:26dvh; }
  .person-detail { max-height:34dvh; overflow:auto; }
}

@media (max-height: 380px) {
  .timeline-panel { max-height:calc(100% - 8px); bottom:4px; left:4px; width:min(660px, calc(100% - 8px)); padding:6px 8px; }
  .timeline-note { display:none; }
  .timeline-events { max-height:70px; }
  .timeline-event-button { padding:5px 6px; }
}

/* R43 — edge-collapsible panels, story readability, strict no-gradient palette */
:root {
  --r43-edge-handle-size: 34px;
  --r43-edge-handle-offset: 11px;
}

.site-header,
.sidebar,
.detail-sheet {
  transition: transform 200ms ease, opacity 160ms ease;
  will-change: transform;
}

.edge-panel-toggle {
  position: fixed;
  z-index: 2150;
  display: grid;
  place-items: center;
  width: var(--r43-edge-handle-size);
  height: var(--r43-edge-handle-size);
  margin: 0;
  padding: 0;
  border: 1px solid #cbb193;
  border-radius: 8px;
  background: #403024;
  color: #ffe8ce;
  font: 800 16px/1 system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  cursor: pointer;
  touch-action: manipulation;
  transition: top 200ms ease, left 200ms ease, right 200ms ease, background 140ms ease, color 140ms ease;
}

.edge-panel-toggle:hover,
.edge-panel-toggle:focus-visible {
  background: #232423;
  color: #efeff0;
  outline: 2px solid #ffe8ce;
  outline-offset: 2px;
}

.edge-panel-toggle-top {
  top: max(0px, calc(var(--live-header-h, var(--header-h)) - var(--r43-edge-handle-offset)));
  left: 50%;
  transform: translateX(-50%);
}

.edge-panel-toggle-left {
  top: calc(var(--live-header-h, var(--header-h)) + 50%);
  left: max(0px, calc(var(--live-sidebar-w, 390px) - var(--r43-edge-handle-offset)));
  transform: translateY(-50%);
}

.edge-panel-toggle-right {
  top: calc(var(--live-header-h, var(--header-h)) + 50%);
  right: max(0px, calc(var(--live-detail-w, 420px) - var(--r43-edge-handle-offset)));
  transform: translateY(-50%);
}

body.r43-header-collapsed {
  grid-template-rows: 0 minmax(0, 1fr) !important;
}
body.r43-header-collapsed .site-header {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}
body.r43-header-collapsed .edge-panel-toggle-top {
  top: 0;
}

@media (min-width: 761px) {
  body.r43-sidebar-collapsed .app-shell {
    grid-template-columns: 0 minmax(0, 1fr) !important;
  }
}
body.r43-sidebar-collapsed .sidebar {
  transform: translateX(-105%);
  opacity: 0;
  pointer-events: none;
  overflow: hidden !important;
}
body.r43-sidebar-collapsed .edge-panel-toggle-left {
  left: 0;
}

body.r43-detail-collapsed .detail-sheet:not(.hidden) {
  transform: translateX(105%);
  opacity: 0;
  pointer-events: none;
}
body.r43-detail-collapsed .edge-panel-toggle-right {
  right: 0;
}

/* R43 storybook reading: semantic paragraphs and comfortable CJK measure. */
#reader-summary,
#detail-story,
.reader-summary,
.detail-story-scroll {
  white-space: normal !important;
}

.story-paragraph {
  margin: 0;
  max-width: 100%;
  color: #efeff0;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.9;
  letter-spacing: .01em;
  text-align: left;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  word-break: normal;
}

.story-paragraph + .story-paragraph {
  margin-top: 1.05em;
}

.reader-summary.reader-story-scroll,
#detail-story {
  padding-inline-end: 12px;
  scrollbar-gutter: stable;
}

.reader-summary.reader-story-scroll .story-paragraph,
#detail-story .story-paragraph {
  max-width: 48em;
}

/* Make source/location blocks distinct from the long narrative body. */
.detail-sheet details > summary {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 8px;
  background: #403024;
  color: #ffe8ce !important;
}

.person-index-button[data-kind="entity"]::before {
  content: '人物｜';
  color: #cbb193;
  font-size: 11px;
  font-weight: 800;
}

/* R43 mobile: the right panel is a true right drawer, so it can collapse to the right edge. */
@media (max-width: 760px) {
  .detail-sheet {
    position: fixed !important;
    top: var(--live-header-h, 0px) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(92vw, 420px) !important;
    max-width: min(92vw, 420px) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    border-top: 0 !important;
    border-left: 1px solid #cbb193 !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
  }

  .detail-sheet .sheet-handle {
    display: none !important;
  }

  .edge-panel-toggle-top {
    left: auto;
    right: calc(8px + env(safe-area-inset-right));
    transform: none;
  }

  .edge-panel-toggle-left {
    top: calc(var(--live-header-h, 0px) + 48%);
  }

  .edge-panel-toggle-right {
    top: calc(var(--live-header-h, 0px) + 54%);
  }

  body.r43-sidebar-collapsed .sidebar {
    transform: translateX(calc(-100% - 18px));
  }

  .story-paragraph {
    font-size: 15px;
    line-height: 1.86;
  }

  .reader-summary.reader-story-scroll,
  #detail-story {
    scrollbar-gutter: auto;
  }
}

@media (max-height: 380px) {
  .edge-panel-toggle-left,
  .edge-panel-toggle-right {
    top: 54%;
  }
  .edge-panel-toggle {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    font-size: 14px;
  }
  #detail-story {
    max-height: 48dvh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .sidebar,
  .detail-sheet,
  .edge-panel-toggle {
    transition: none !important;
  }
}

/* R43 handle containment: the persistent tab itself must never leave the viewport. */
.edge-panel-toggle-left {
  left: min(calc(100vw - var(--r43-edge-handle-size)), max(0px, calc(var(--live-sidebar-w, 390px) - var(--r43-edge-handle-offset))));
}
body.r43-sidebar-collapsed .edge-panel-toggle-left { left: 0; }

/* R45 — epic-reading cadence; solid colours from the approved UI palette only. */
.story-paragraph:first-child {
  color: #ffe8ce;
  border-left: 2px solid #cbb193;
  padding-left: 12px;
}

.story-paragraph:last-child {
  color: #cbb193;
}

.reader-summary.reader-story-scroll .story-paragraph,
#detail-story .story-paragraph {
  max-width: 46em;
  letter-spacing: 0.012em;
}


/* R53 — left preview / right full-story contract and explicit scrollbar QA. */
.reader-preview-label {
  margin:10px 0 2px;
  color:#cbb193;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}
.reader-summary.reader-story-preview {
  display:block !important;
  max-height:none !important;
  overflow:visible !important;
  padding:8px 4px 4px !important;
}
.reader-open-detail { margin-top:10px; }
.person-index-list,
.person-detail {
  overflow-y:scroll !important;
  overscroll-behavior:contain;
}
@media (max-width:760px) {
  .reader-summary.reader-story-preview { display:block !important; }
  .person-index-list { max-height:25dvh !important; overflow-y:scroll !important; }
  .person-detail { max-height:34dvh !important; overflow-y:scroll !important; }
}

/* R54 — person index: make both columns real scroll containers, not decorative scroll tracks. */
.person-index-card {
  height:min(88dvh, 760px);
  display:flex;
  flex-direction:column;
}
.person-index-card > .dialog-head,
.person-index-card > .person-index-note,
.person-index-card > .person-search-row {
  flex:0 0 auto;
}
.person-index-layout {
  flex:1 1 auto;
  height:0;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  align-items:stretch;
}
.person-index-list,
.person-detail {
  min-height:0 !important;
  height:100%;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  scrollbar-width:auto;
  touch-action:pan-y;
}
.person-index-list::-webkit-scrollbar,
.person-detail::-webkit-scrollbar { width:14px; }
.person-index-list::-webkit-scrollbar-track,
.person-detail::-webkit-scrollbar-track { background:#232423; }
.person-index-list::-webkit-scrollbar-thumb,
.person-detail::-webkit-scrollbar-thumb {
  background:#cbb193;
  border:3px solid #232423;
  border-radius:999px;
}
.person-index-list::-webkit-scrollbar-thumb:hover,
.person-detail::-webkit-scrollbar-thumb:hover { background:#ffe8ce; }

@media (max-width:760px) {
  .person-index-card { height:calc(100dvh - 12px); }
  .person-index-layout {
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(120px, .85fr) minmax(150px, 1.15fr);
    height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  .person-index-list,
  .person-detail {
    max-height:none !important;
    height:100% !important;
    overflow-y:auto !important;
  }
}

@media (max-height:520px) {
  .person-index-card { height:calc(100dvh - 8px); padding:8px !important; }
  .person-index-note { display:none; }
  .person-index-layout { margin-top:6px; }
}

/* R55 — deterministic person-index scroll sliders + timeline/search interaction QA. */
.person-scroll-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}
.person-scroll-shell .person-index-list,
.person-scroll-shell .person-detail {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: none !important;
  scrollbar-gutter: auto !important;
}
.person-scroll-shell .person-index-list::-webkit-scrollbar,
.person-scroll-shell .person-detail::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
}
.person-scroll-range {
  writing-mode: vertical-lr;
  direction: ltr;
  width: 24px;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 2px 0;
  box-sizing: border-box;
  accent-color: #cbb193;
  cursor: ns-resize;
  touch-action: none;
}
.person-scroll-range:focus-visible {
  outline: 2px solid #ffe8ce;
  outline-offset: 1px;
}
.person-scroll-range:disabled,
.person-scroll-range.is-disabled {
  opacity: .28;
  cursor: default;
}
.search-result.is-external-article-search {
  margin-top: 6px;
  border-style: dashed;
}
.search-result.is-external-article-search .result-kind {
  font-weight: 800;
}

@media (max-width: 760px) {
  .person-scroll-shell {
    grid-template-columns: minmax(0, 1fr) 28px;
    gap: 5px;
  }
  .person-scroll-range {
    width: 28px;
  }
}

/* R56 — architecture/typography pass: story text follows the same body scale as peer content. */
.story-paragraph,
.reader-summary.reader-story-preview .story-paragraph,
#detail-story .story-paragraph {
  font-size: inherit !important;
}
.reader-summary.reader-story-preview {
  font-size: inherit !important;
  line-height: 1.75;
}
#detail-story,
#detail-story.detail-copy {
  font-size: inherit !important;
  line-height: 1.75;
}
.detail-counter {
  margin-top: 8px;
  width: max-content;
}
.search-result .result-kind::before {
  content: '';
}
.search-empty-inline {
  border: 1px dashed var(--border-soft);
  border-radius: 10px;
  margin: 4px 0 8px;
}
body[data-active-overlay="timeline"] .edge-panel-toggle-right,
body[data-active-overlay="person"] .edge-panel-toggle-right,
body[data-active-overlay="about"] .edge-panel-toggle-right,
body[data-active-overlay="tour"] .edge-panel-toggle-right {
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .saga-marker,
  .saga-route,
  .saga-route-active,
  .saga-route-reading,
  .airport-marker,
  .route-legend-button,
  .saga-card,
  .search-result,
  .timeline-event-button,
  .photo-trigger,
  .lightbox-stage img {
    animation: none !important;
    transition: none !important;
  }
}

/* R60: explicit photo provenance and license links */
.photo-source-links{display:block;margin-top:4px;font-size:.74rem;color:#cbb193;max-width:100%;overflow-wrap:anywhere;word-break:break-word}.photo-source-links a{color:#ffe8ce;text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere;word-break:break-word}.photo-source-links a:hover,.photo-source-links a:focus-visible{color:#fff}

/* R60 containment hotfix: no peer-level control or text node may bleed outside its box. */
.mode-switch{flex:0 0 auto;min-width:max-content;max-width:100%}
.mode-button{min-width:0}
.person-index-button strong,.person-index-button small,.person-occurrence-button strong,.person-occurrence-button small,.person-occurrence-button span{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word}
.reader-progress-card,.reader-nav-button,.detail-nav-button,.search-result,.person-index-button,.person-occurrence-button,.photo-card,.reference-card,.distance-card{overflow:hidden}
.reader-progress-card *,.reader-nav-button *,.detail-nav-button *,.search-result *,.person-index-button *,.person-occurrence-button *,.photo-card *,.reference-card *,.distance-card *{min-width:0;max-width:100%;box-sizing:border-box}

/* R60 containment pass 2 */
.header-tool-button{flex:0 0 auto;min-width:max-content;box-sizing:border-box}
.person-index-button strong,.person-index-button small,.person-occurrence-button strong,.person-occurrence-button small,.person-occurrence-button span{line-break:anywhere;word-break:break-all;overflow:hidden}
.person-index-button strong,.person-occurrence-button strong{width:calc(100% - 8px);max-width:calc(100% - 8px)}
/* R60 person-name glyph containment: parent card owns clipping, text itself must not be glyph-clipped. */
.person-index-button strong,.person-occurrence-button strong{width:100%;max-width:100%;overflow:visible;line-break:auto;word-break:normal}

/* R61 — header collision fix and strict containment contract.
   Between tablet and wide desktop widths the control group previously shrank
   while its max-content children escaped left into the search field. */
.site-header > .brand-block,
.site-header > .search-shell,
.site-header > .header-controls {
  min-width: 0;
}

/* The control cluster must never pretend to be narrower than its children. */
.header-controls {
  box-sizing: border-box;
}

@media (min-width: 1481px) {
  .site-header {
    grid-template-columns: minmax(245px, 1fr) minmax(380px, 680px) max-content !important;
  }
  .header-controls {
    min-width: max-content !important;
    max-width: none !important;
  }
}

/* Use a deliberate two-row header before the three-column layout can collide. */
@media (min-width: 761px) and (max-width: 1480px) {
  .site-header {
    grid-template-columns: minmax(245px, 1fr) max-content !important;
    grid-template-rows: auto auto !important;
    column-gap: 18px !important;
    row-gap: 10px !important;
  }
  .brand-block {
    grid-column: 1;
    grid-row: 1;
  }
  .header-controls {
    grid-column: 2 !important;
    grid-row: 1 !important;
    min-width: max-content !important;
    max-width: none !important;
    justify-self: end;
  }
  .search-shell {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Header labels are control labels, not prose: never break inside a label. */
.mode-button,
.airport-header-toggle,
.header-tool-button {
  overflow-wrap: normal !important;
  word-break: keep-all !important;
  white-space: nowrap !important;
}

/* R61 dynamic title ink-overhang guard. Palatino/Book Antiqua glyphs can extend a few
   pixels beyond the CSS content box even after line wrapping; reserve an end gutter
   instead of clipping the glyphs. */
#reader-place-title,
#detail-title {
  box-sizing: border-box;
  padding-inline-end: 10px;
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* R62 — recommendation cards represent four distinct literature types. */
.saga-card .saga-card-type {
  display:block;
  margin-bottom:5px;
  color:#cbb193 !important;
  font-size:.69rem;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.02em;
  overflow-wrap:anywhere;
}
.saga-card .saga-card-meta { margin-top:2px; }

/* R67 — route motion is scoped to the currently selected story and current scene
   boundary only; stale/persistent browser history must never animate future segments. */
.panel-label-button {
  appearance:none;
  border:1px solid #cbb193;
  border-radius:8px;
  background:#403024;
  color:#ffe8ce;
  min-width:48px;
  min-height:36px;
  padding:7px 10px;
  font:800 13px/1 system-ui,sans-serif;
  cursor:pointer;
  white-space:nowrap;
}
.panel-label-button:hover,
.panel-label-button:focus-visible {
  background:#232423;
  outline:2px solid #ffe8ce;
  outline-offset:2px;
}

.edge-panel-toggle {
  width:auto;
  min-width:48px;
  padding:0 8px;
  white-space:nowrap;
  font-size:12px;
}

.mobile-panel-dock { display:none; }

/* R73: selected routes remain emphasized but are never translated or dash-animated. */
.leaflet-overlay-pane svg path.saga-route-active,
.leaflet-overlay-pane svg path.saga-route-reading,
.leaflet-overlay-pane svg path.saga-route-unread {
  animation:none !important;
}
.leaflet-overlay-pane svg path.saga-route-visited {
  stroke-linecap:round;
  opacity:1;
  filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
  animation: none;
}
.leaflet-overlay-pane svg path.saga-route-unread {
  stroke-dashoffset:0 !important;
}


/* The story itself owns the reading space; no nested short scroll box. */
#detail-story,
#detail-story.detail-copy {
  max-height:none !important;
  overflow:visible !important;
}

@media (max-width:760px) {
  :root { --mobile-panel-dock-h:52px; }

  /* Mobile map zoom is intentionally removed; gestures remain available on the map itself. */
  .leaflet-control-zoom { display:none !important; }

  /* Old anonymous triangle handles are replaced by one explicit four-label dock. */
  .edge-panel-toggle-top,
  .edge-panel-toggle-left,
  .edge-panel-toggle-right { display:none !important; }

  .mobile-panel-dock {
    position:fixed;
    z-index:2250;
    left:8px;
    right:8px;
    bottom:max(6px, env(safe-area-inset-bottom));
    height:var(--mobile-panel-dock-h);
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    padding:5px;
    box-sizing:border-box;
    border:1px solid #cbb193;
    border-radius:12px;
    background:#232423;
  }
  .mobile-panel-dock button {
    min-width:0;
    border:1px solid #cbb193;
    border-radius:8px;
    background:#403024;
    color:#efeff0;
    font:800 13px/1 system-ui,sans-serif;
    padding:0 5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
    cursor:pointer;
  }
  .mobile-panel-dock button.is-active,
  .mobile-panel-dock button[aria-pressed="true"] {
    background:#cbb193;
    color:#232423;
  }
  .mobile-panel-dock button:focus-visible {
    outline:2px solid #ffe8ce;
    outline-offset:1px;
  }

  /* Reading panel: near-fullscreen, with only the persistent dock left outside. */
  .sidebar {
    position:fixed !important;
    z-index:1900 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:calc(var(--mobile-panel-dock-h) + max(12px, env(safe-area-inset-bottom))) !important;
    width:100vw !important;
    max-width:100vw !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    border-radius:0 !important;
    border-right:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform:none;
    opacity:1;
    pointer-events:auto;
    -webkit-overflow-scrolling:touch;
  }
  .sidebar.is-browse-open {
    top:0 !important;
    bottom:calc(var(--mobile-panel-dock-h) + max(12px, env(safe-area-inset-bottom))) !important;
    height:auto !important;
    max-height:none !important;
  }
  #reader-panel {
    max-height:none !important;
    overflow:visible !important;
  }
  body.r43-sidebar-collapsed .sidebar {
    transform:translateX(-105%) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  /* Detail panel overlays an open timeline without destroying its state. */
  .detail-sheet {
    position:fixed !important;
    z-index:2100 !important;
    inset:0 0 calc(var(--mobile-panel-dock-h) + max(12px, env(safe-area-inset-bottom))) 0 !important;
    width:100vw !important;
    max-width:100vw !important;
    min-width:0 !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    padding:16px 14px 28px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform:none;
    opacity:1;
    pointer-events:auto;
    -webkit-overflow-scrolling:touch;
  }
  body.r43-detail-collapsed .detail-sheet:not(.hidden) {
    transform:translateX(105%) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .detail-head {
    position:relative;
    padding-right:58px;
  }
  #detail-close {
    position:sticky;
    top:0;
    float:right;
    z-index:2;
  }
  .detail-summary-grid { margin-top:10px; }
  .detail-nav { margin-bottom:10px; }
  .detail-sheet details:first-of-type { margin-top:6px; }
  #detail-story { padding-bottom:10px; }

  /* Timeline is a bottom panel and opens in its fully expanded state. */
  .timeline-panel {
    position:fixed !important;
    z-index:2000 !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    bottom:calc(var(--mobile-panel-dock-h) + max(12px, env(safe-area-inset-bottom))) !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    padding:12px !important;
    display:flex;
    flex-direction:column;
    overflow:hidden !important;
    border-radius:0;
  }
  .timeline-panel.hidden { display:none !important; }
  .timeline-head,
  .timeline-range-row { flex:0 0 auto; }
  .timeline-note { flex:0 0 auto; }
  .timeline-slider { flex:0 0 auto; }
  .timeline-events {
    flex:1 1 auto;
    min-height:0;
    display:grid !important;
    grid-template-columns:1fr;
    align-content:start;
    gap:8px;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding:4px 2px 10px;
    overscroll-behavior:contain;
  }
  .timeline-event-button {
    width:100% !important;
    max-width:100% !important;
    min-height:68px;
    flex:none !important;
    box-sizing:border-box;
  }

  /* Person index is a true full-screen reading surface on mobile. */
  .person-index-dialog {
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
  }
  .person-index-dialog::backdrop { background:rgba(0,0,0,.62); }
  .person-index-card {
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    border-radius:0 !important;
    padding:14px 12px calc(18px + env(safe-area-inset-bottom)) !important;
    overflow:hidden !important;
  }
  .person-index-card .dialog-head { flex:0 0 auto; }
  .person-index-layout {
    flex:1 1 auto !important;
    height:0 !important;
    min-height:0 !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(140px,.9fr) minmax(180px,1.1fr) !important;
    overflow:hidden !important;
  }

  /* Mobile detail/sidebar copy must wrap naturally, never force a wider canvas. */
  .sidebar *,
  .detail-sheet *,
  .timeline-panel *,
  .person-index-card * {
    min-width:0;
    max-width:100%;
    box-sizing:border-box;
    overflow-wrap:anywhere;
  }
}

@media (prefers-reduced-motion:reduce) {
  /* R73 final progress pulse override is declared at the end of this stylesheet. */
}

/* R63 delivery containment: long titles and mobile legend must remain readable. */
.detail-head > div:first-child {
  flex:1 1 auto;
  min-width:0 !important;
  max-width:calc(100% - 62px) !important;
}
.detail-head > .panel-label-button,
.detail-head > .icon-button { flex:0 0 auto; }
.detail-sheet h2,
#detail-title {
  max-width:100% !important;
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
  hyphens:auto;
}

@media (max-width:760px) {
  .map-legend {
    left:8px !important;
    right:8px !important;
    bottom:calc(var(--mobile-panel-dock-h) + max(14px, env(safe-area-inset-bottom))) !important;
    width:auto !important;
    max-width:none !important;
    max-height:58dvh;
    overflow:auto !important;
    box-sizing:border-box !important;
  }
  .map-legend-details,
  .map-legend-body { width:100% !important; min-width:0 !important; }
  .map-legend-body > div,
  .airport-legend-row,
  .travel-legend-row {
    display:grid !important;
    grid-template-columns:40px minmax(0,1fr);
    align-items:start !important;
    gap:8px !important;
  }
  .confidence-legend-grid {
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px 10px !important;
  }
  .confidence-legend-grid > span {
    min-width:0 !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
    line-height:1.45;
  }
  .map-legend-body > div > span:last-child,
  .airport-legend-row > span:last-child,
  .travel-legend-row > span:last-child {
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}
@media (max-width:760px) {
  .detail-head { padding-right:0 !important; display:flex !important; align-items:flex-start !important; }
  #detail-close { position:static !important; float:none !important; flex:0 0 auto !important; }
  .detail-head > div:first-child { max-width:calc(100% - 62px) !important; }
}


/* R64 — keep the compact mobile landing surface below the live header.
   R63 near-fullscreen sidebar behavior is reserved for an actual story reader. */
@media (max-width:760px) {
  body:not(.r64-reader-active) .sidebar {
    z-index:1100 !important;
    top:calc(var(--live-header-h, 0px) + 8px) !important;
    left:8px !important;
    right:8px !important;
    bottom:auto !important;
    width:auto !important;
    max-width:calc(100vw - 16px) !important;
    height:auto !important;
    max-height:28dvh !important;
    margin:0 !important;
    border:1px solid #cbb193 !important;
    border-radius:14px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }
  body:not(.r64-reader-active) .sidebar.is-browse-open {
    top:calc(var(--live-header-h, 0px) + 8px) !important;
    bottom:auto !important;
    height:auto !important;
    max-height:calc(100dvh - var(--live-header-h, 0px) - var(--mobile-panel-dock-h) - 28px) !important;
  }
  body.r64-reader-active .sidebar {
    top:0 !important;
  }
}

/* R64 — narrow-phone search results use one readable text column instead of
   compressing long Chinese titles against right-side metadata. */
@media (max-width:360px) {
  .search-result {
    grid-template-columns:minmax(0,1fr) !important;
    gap:4px !important;
  }
  .search-result > * {
    grid-column:1 !important;
    width:100% !important;
  }
  .search-result .result-meta {
    text-align:left !important;
  }
  .search-result strong {
    line-height:1.4;
    word-break:normal !important;
    overflow-wrap:anywhere !important;
  }
}


/* R68 — comparison-first Explore mode and 3× route progress motion.
   The selected saga remains unmistakably dominant, but comparison sagas must stay
   legible enough to compare geography, crossings, and route direction at a glance. */
.leaflet-overlay-pane svg path.saga-route-muted {
  opacity:.64 !important;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.42)) !important;
}
.saga-marker.is-other-saga {
  opacity:.76 !important;
  transform:scale(.98) !important;
}
/* Keep the selected route visually above the comparison layer without hiding it. */
.leaflet-overlay-pane svg path.saga-route-active,
.leaflet-overlay-pane svg path.saga-route-reading {
  opacity:1 !important;
  stroke-width:4.5px !important;
}
.saga-marker.is-current-saga {
  opacity:1 !important;
  transform:scale(1.28) !important;
}


/* R74 — robust 2 Hz reading-progress halo.
   R73 relied on SVG drop-shadow filters, which can be effectively invisible in
   some desktop/browser combinations. R74 renders real wide halo strokes under
   the route and animates only their opacity from JavaScript.
   R76 narrows the outer physical halo to 6 px, retains a visible 5.25 px inner halo, and keeps CSS and
   Leaflet stroke widths synchronized so !important cannot override JS. */
.leaflet-overlay-pane svg path.saga-route,
.leaflet-overlay-pane svg path.saga-route-active,
.leaflet-overlay-pane svg path.saga-route-reading,
.leaflet-overlay-pane svg path.saga-route-visited,
.leaflet-overlay-pane svg path.saga-route-unread {
  animation:none !important;
  stroke-dashoffset:0 !important;
  filter:none !important;
}

.leaflet-overlay-pane svg path.saga-route-progress-halo {
  animation:none !important;
  stroke-dashoffset:0 !important;
  filter:none !important;
  pointer-events:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}
.leaflet-overlay-pane svg path.saga-route-progress-halo-outer {
  stroke:#fff7df !important;
  stroke-width:6px !important;
}
.leaflet-overlay-pane svg path.saga-route-progress-halo-inner {
  stroke:#fff !important;
  stroke-width:5.25px !important;
}



/* R77 — mobile map gestures + compact top-edge header drawer.
   Hide only Leaflet's dedicated +/- UI on phones; pinch/touch zoom remains enabled in JS. */
@media (max-width: 760px) {
  #main-map .leaflet-control-zoom {
    display: none !important;
  }

  /* R67 hid every legacy edge handle on mobile. R77 restores only the top one
     as an explicit compact drawer handle; left/right remain represented by the bottom dock. */
  .edge-panel-toggle-top {
    display: grid !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: 92px !important;
    min-width: 92px !important;
    height: 28px !important;
    top: max(0px, calc(var(--live-header-h, 0px) - 14px));
    padding: 0 8px !important;
    border-radius: 0 0 12px 12px !important;
    font-size: 12px !important;
    letter-spacing: .08em;
    line-height: 1;
    z-index: 2300 !important;
  }

  .edge-panel-toggle-top span {
    display: block;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: keep-all;
  }

  body.r43-header-collapsed .edge-panel-toggle-top {
    top: 0 !important;
    border-radius: 0 0 12px 12px !important;
  }
}

/* R78 — mobile timeline expands to its content; no internal timeline scrollbar. */
@media (max-width:760px) {
  .timeline-panel:not(.hidden) {
    top:auto !important;
    bottom:calc(var(--mobile-panel-dock-h) + max(12px, env(safe-area-inset-bottom))) !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .timeline-events {
    flex:0 0 auto !important;
    min-height:0 !important;
    max-height:none !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:6px !important;
    overflow:visible !important;
    overscroll-behavior:auto !important;
    padding:4px 0 2px !important;
  }
  .timeline-event-button {
    min-height:54px !important;
    height:auto !important;
    padding:6px 7px !important;
  }
  .timeline-event-button strong { font-size:10.5px !important; }
  .timeline-event-button span { font-size:11.5px !important; line-height:1.32 !important; }
}

@media (max-width:760px) and (max-height:640px) {
  .timeline-panel:not(.hidden) { padding:7px 8px !important; }
  .timeline-note { margin:4px 0 !important; font-size:10.5px !important; line-height:1.35 !important; }
  .timeline-slider { margin:4px 0 !important; }
  .timeline-events { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:4px !important; }
  .timeline-event-button { min-height:46px !important; padding:4px 5px !important; }
  .timeline-event-button strong { font-size:9.5px !important; }
  .timeline-event-button span { font-size:10px !important; line-height:1.22 !important; }
}

/* M3 final mobile QA — the top header drawer belongs to the map/reader surface.
   While the fullscreen detail sheet is active it must not float over story metadata. */
@media (max-width:760px) {
  body[data-active-overlay="detail"] .edge-panel-toggle-top,
  body[data-active-overlay="timeline"] .edge-panel-toggle-top {
    display:none !important;
  }
}

/* M3 release-candidate correction — mobile timeline uses natural height when it fits,
   but becomes an internally scrollable panel before it can exceed the usable viewport. */
@media (max-width:760px) {
  .timeline-panel:not(.hidden) {
    top:auto !important;
    bottom:calc(var(--mobile-panel-dock-h) + max(12px, env(safe-area-inset-bottom))) !important;
    height:auto !important;
    max-height:calc(100dvh - var(--mobile-panel-dock-h) - max(24px, env(safe-area-inset-top)) - max(20px, env(safe-area-inset-bottom))) !important;
    overflow:hidden !important;
  }
  .timeline-events {
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
  }
}

/* R85 — requested terminology, default-collapsed work categories, and Vitivar identity mark. */
.brand-identity-row {
  display:flex;
  align-items:center;
  gap:clamp(8px,1vw,14px);
  min-width:0;
  max-width:100%;
}
.brand-identity-row h1 {
  min-width:0;
  max-width:100%;
  margin:2px 0 2px;
}
.brand-home-link {
  color:inherit;
  text-decoration:none;
  border-radius:4px;
}
.brand-home-link:hover,
.brand-home-link:focus-visible {
  color:#fff !important;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
.brand-mark-link {
  flex:0 0 auto;
  display:block;
  line-height:0;
  border-radius:6px;
}
.brand-mark-link:focus-visible {
  outline:2px solid #ffe8ce;
  outline-offset:3px;
}
.brand-mark {
  display:block;
  width:auto;
  height:clamp(42px,5.1vw,72px);
  max-width:clamp(34px,4.2vw,59px);
  object-fit:contain;
}

details.category-block {
  border-top:0 !important;
  margin:0;
}
details.category-block + details.category-block {
  margin-top:7px;
}
.category-block > .category-title {
  display:flex;
  align-items:center;
  gap:7px;
  min-height:34px;
  margin:0;
  padding:7px 8px !important;
  border:1px solid #cbb193;
  border-radius:8px;
  background:#2d2925;
  color:#ffe8ce !important;
  font-size:.78rem;
  font-weight:800;
  line-height:1.35;
  cursor:pointer;
  list-style:none;
  user-select:none;
}
.category-block > .category-title::-webkit-details-marker { display:none; }
.category-block > .category-title::before {
  content:'›';
  flex:0 0 auto;
  color:#cbb193;
  font-size:1rem;
  line-height:1;
  transform:rotate(0deg);
  transition:transform .12s ease;
}
.category-block[open] > .category-title::before { transform:rotate(90deg); }
.category-block > .category-title:hover,
.category-block > .category-title:focus-visible { background:#403024; }
.category-content {
  padding:5px 0 2px;
  min-width:0;
  overflow:hidden;
}

@media (max-width:760px) {
  .brand-identity-row { gap:7px; }
  .brand-mark {
    height:clamp(36px,10vw,44px);
    max-width:36px;
  }
  .category-block > .category-title {
    min-height:32px;
    padding:6px 7px !important;
    font-size:.74rem;
  }
}
@media (max-width:360px) {
  .brand-mark { height:34px; max-width:28px; }
}


/* R87 — final mobile header handle correction.
   Keep the top collapse control permanently available on the map surface,
   place it fully below the search field instead of cutting through its border,
   and reserve a small clean rail before the mobile saga panel begins. */
@media (max-width:760px) {
  .edge-panel-toggle-top {
    display:grid !important;
    position:fixed !important;
    left:50% !important;
    right:auto !important;
    top:calc(var(--live-header-h, 0px) + 7px) !important;
    transform:translateX(-50%) !important;
    width:92px !important;
    min-width:92px !important;
    height:30px !important;
    min-height:30px !important;
    padding:0 9px !important;
    border:1px solid #cbb193 !important;
    border-radius:10px !important;
    background:#232423 !important;
    color:#ffe8ce !important;
    box-shadow:0 3px 10px rgba(0,0,0,.34) !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    z-index:2350 !important;
  }

  /* CSS owns the visible wording on mobile so the label never flashes as the
     desktop-only 「調查」 text while JavaScript is still initializing. */
  .edge-panel-toggle-top > span {
    display:block !important;
    white-space:nowrap !important;
    overflow:visible !important;
    font-size:0 !important;
    line-height:1 !important;
    letter-spacing:0 !important;
  }
  .edge-panel-toggle-top > span::after {
    content:'▲ 收合';
    font:800 12px/1 system-ui,sans-serif;
    letter-spacing:.08em;
  }

  body.r43-header-collapsed .edge-panel-toggle-top {
    top:0 !important;
    border-radius:0 0 10px 10px !important;
  }
  body.r43-header-collapsed .edge-panel-toggle-top > span::after {
    content:'▼ 調查';
  }

  /* On the landing/library surface, leave a deliberate gap beneath the
     floating header handle rather than allowing the saga panel to collide with it. */
  body:not(.r64-reader-active) .sidebar,
  body:not(.r64-reader-active) .sidebar.is-browse-open {
    top:calc(var(--live-header-h, 0px) + 45px) !important;
  }

  /* Detail and timeline overlays intentionally keep their own full reading
     space; the top handle remains suppressed there by the existing M3 rule. */
}


/* R88 — mobile top investigation handle persistence.
   The header toggle is a permanent mobile control. It must remain reachable after
   story/timeline panel operations, including states where data-active-overlay may
   still reflect a collapsed panel. This override intentionally supersedes the M3
   rule that hid the handle for detail/timeline overlays. */
@media (max-width:760px) {
  /* Preserve M3's uncluttered full-screen story/timeline reading surface while
     the investigation header is expanded. Once that header is collapsed, its
     restore handle is invariant and cannot be suppressed by overlay state. */
  body.r43-header-collapsed .edge-panel-toggle-top,
  body.r43-header-collapsed[data-active-overlay="detail"] .edge-panel-toggle-top,
  body.r43-header-collapsed[data-active-overlay="timeline"] .edge-panel-toggle-top {
    display:grid !important;
    visibility:visible !important;
    opacity:1 !important;
    pointer-events:auto !important;
    z-index:2600 !important;
    position:fixed !important;
    top:0 !important;
    left:50% !important;
    transform:translateX(-50%) !important;
  }
}


/* R89 — mobile investigation-handle geometry, compact mobile motto, and timeline coordination.
   1) The collapsed 「調查」 restore handle uses one invariant visual-viewport inset instead of
      pinning its border to y=0, which could appear clipped after timeline/detail state changes
      in iOS Safari.
   2) Small phones reuse the otherwise empty brand-column space for the Old Norse motto without
      increasing the control column's footprint. Very short viewports keep the previous compact rule. */
@media (max-width:760px) {
  body.r43-header-collapsed .edge-panel-toggle-top,
  body.r43-header-collapsed[data-active-overlay="detail"] .edge-panel-toggle-top,
  body.r43-header-collapsed[data-active-overlay="timeline"] .edge-panel-toggle-top {
    top:max(8px, env(safe-area-inset-top)) !important;
    border-radius:10px !important;
  }
}

@media (max-width:420px) and (min-height:561px) {
  .brand-tagline {
    display:block !important;
    max-width:min(210px, 54vw) !important;
    margin:7px 0 0 !important;
    color:#cbb193 !important;
    font-size:.59rem !important;
    font-weight:600 !important;
    line-height:1.34 !important;
    letter-spacing:.01em !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
    hyphens:none !important;
  }
}


/* R90 — mobile Explore mode uses the available vertical space without widening the viewport.
   Keep the panel inside the live header and bottom dock, and make only its inner lists scroll.
   This avoids the old "full-screen pushes the whole page outside the visible screen" regression. */
@media (max-width:760px) {
  body.r90-explore-active:not(.r64-reader-active) .sidebar {
    display:flex !important;
    flex-direction:column !important;
    top:calc(var(--live-header-h, 0px) + 8px) !important;
    left:8px !important;
    right:8px !important;
    bottom:calc(var(--mobile-panel-dock-h) + max(12px, env(safe-area-inset-bottom))) !important;
    width:auto !important;
    max-width:calc(100vw - 16px) !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    overflow:hidden !important;
    overscroll-behavior:contain;
    isolation:isolate;
  }

  body.r90-explore-active:not(.r64-reader-active) .sidebar.is-browse-open {
    top:calc(var(--live-header-h, 0px) + 8px) !important;
    bottom:calc(var(--mobile-panel-dock-h) + max(12px, env(safe-area-inset-bottom))) !important;
    height:auto !important;
    max-height:none !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-panel {
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-panel > .section-heading-row,
  body.r90-explore-active:not(.r64-reader-active) #explore-panel > .muted {
    flex:0 0 auto !important;
  }

  body.r90-explore-active:not(.r64-reader-active) .explore-mobile-section {
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  body.r90-explore-active:not(.r64-reader-active) .explore-mobile-section[open] {
    display:flex !important;
    flex-direction:column !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-route-section {
    flex:0 0 auto !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-route-section[open] > #explore-route-legend {
    min-height:0 !important;
    max-height:min(28dvh, 240px) !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-library-section {
    flex:1 1 auto !important;
    min-height:0 !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-library-section[open] > #explore-browser {
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    margin-top:10px !important;
    overflow:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-browser,
  body.r90-explore-active:not(.r64-reader-active) #explore-route-legend,
  body.r90-explore-active:not(.r64-reader-active) #explore-browser > *,
  body.r90-explore-active:not(.r64-reader-active) #explore-route-legend > * {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }
}


/* R93 — mobile viewport integrity + Explore list correction.
   Final release overrides: avoid 100vw full-screen surfaces, prevent iOS input
   auto-zoom, and make Explore consume the full safe vertical region. */
@media (max-width:760px) {
  /* iOS Safari/Chrome auto-zoom text controls below 16px. That zoom changes the
     visual viewport and previously made the whole interface appear wider than screen. */
  #person-search,
  #global-search {
    font-size:16px !important;
  }

  /* Full-screen/drawer surfaces are constrained by physical edges, not 100vw.
     Using left/right (or inset) keeps their border-box inside the layout viewport. */
  .sidebar {
    width:auto !important;
    max-width:100% !important;
  }
  body.r64-reader-active .sidebar {
    left:0 !important;
    right:0 !important;
  }
  .detail-sheet {
    left:0 !important;
    right:0 !important;
    width:auto !important;
    max-width:100% !important;
  }
  .person-index-dialog {
    position:fixed !important;
    inset:0 !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:none !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  .person-index-card {
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    max-height:100% !important;
    margin:0 !important;
    overflow:hidden !important;
  }
  .person-search-row,
  .person-search-row input,
  .person-scroll-shell,
  .person-index-layout,
  .person-index-list,
  .person-detail {
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  /* R38 had a 44dvh clamp. It is explicitly cancelled here; otherwise the R90
     full-height sidebar contains a short Explore panel followed by empty space. */
  body.r90-explore-active:not(.r64-reader-active) #explore-panel {
    flex:1 1 0 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-library-section {
    flex:1 1 0 !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-library-section[open] > #explore-browser {
    flex:1 1 0 !important;
    height:0 !important;
    min-height:0 !important;
    max-height:none !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-route-section[open] > #explore-route-legend {
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  /* No child in an overlay or mobile control surface may establish a wider box. */
  .sidebar,
  .sidebar *,
  .detail-sheet,
  .detail-sheet *,
  .timeline-panel,
  .timeline-panel *,
  .person-index-dialog,
  .person-index-dialog *,
  .mobile-panel-dock,
  .mobile-panel-dock *,
  .map-legend,
  .map-legend * {
    min-width:0;
    box-sizing:border-box;
  }
}

/* R93.1 — <details> is not a reliable flex sizing container in WebKit/Chromium.
   Scroll the library section itself and let its browser content keep natural height. */
@media (max-width:760px) {
  body.r90-explore-active:not(.r64-reader-active) #explore-library-section[open] {
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  body.r90-explore-active:not(.r64-reader-active) #explore-library-section[open] > #explore-browser {
    flex:none !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    margin-top:0 !important;
  }
}

/* R93.2 — short-phone Explore compaction. Preserve a genuinely usable saga-list
   viewport instead of spending the scarce height on explanatory copy. */
@media (max-width:760px) and (max-height:640px) {
  body.r90-explore-active:not(.r64-reader-active) #explore-panel > .muted {
    display:none !important;
  }
  body.r90-explore-active:not(.r64-reader-active) #explore-panel > .section-heading-row .eyebrow {
    display:none !important;
  }
  body.r90-explore-active:not(.r64-reader-active) #explore-panel > .section-heading-row {
    margin-bottom:2px !important;
  }
  body.r90-explore-active:not(.r64-reader-active) .explore-mobile-section {
    margin-top:5px !important;
  }
}

/* R93.3 — landscape/very-short Explore must still expose the saga selector. */
@media (max-width:760px) and (max-height:480px) {
  body.r90-explore-active:not(.r64-reader-active) #explore-panel {
    padding:6px 10px !important;
  }
  body.r90-explore-active:not(.r64-reader-active) #explore-panel > .section-heading-row {
    min-height:24px !important;
    margin:0 0 2px !important;
    align-items:center !important;
  }
  body.r90-explore-active:not(.r64-reader-active) #explore-panel > .section-heading-row > div {
    display:none !important;
  }
  body.r90-explore-active:not(.r64-reader-active) #clear-explore {
    margin-left:auto !important;
    padding:2px 0 !important;
    min-height:22px !important;
  }
  body.r90-explore-active:not(.r64-reader-active) .explore-mobile-section > summary {
    min-height:32px !important;
    padding:5px 8px !important;
  }
}


/* R94 — mobile Explore library must never disappear behind an empty flex shell.
   Keep both route/event navigation and the saga library usable at the same time;
   reserve the remaining vertical space for the library selector. */
@media (max-width:760px) {
  body.r90-explore-active:not(.r64-reader-active) #explore-route-section[open] {
    flex:0 1 auto !important;
    min-height:0 !important;
    max-height:min(31dvh, 260px) !important;
    overflow:hidden !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-route-section[open] > #explore-route-legend {
    max-height:min(25dvh, 210px) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-library-section {
    flex:1 1 0 !important;
    min-height:112px !important;
    max-height:none !important;
  }

  /* A closed <details> must not keep flex-growing into a large empty rectangle. */
  body.r90-explore-active:not(.r64-reader-active) #explore-library-section:not([open]) {
    flex:0 0 auto !important;
    min-height:0 !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-library-section[open] {
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-library-section[open] > #explore-browser {
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }

  body.r90-explore-active:not(.r64-reader-active) #explore-browser > .category-block {
    display:block !important;
    visibility:visible !important;
    max-width:100% !important;
  }
}


/* R95 — tablet/iPad viewport integrity and Leaflet vector-scaling guard.
   iPad viewports (including the reproduced 810 CSS px portrait case) can fall above
   the 760 px phone breakpoint, so it missed the iOS-safe input and containment
   rules. Compact touch devices now receive the same viewport protections without
   forcing desktop/laptop browsers of the same width into the touch layout. */
body.r95-touch-compact #global-search,
body.r95-touch-compact #person-search {
  font-size:16px !important;
}

body.r95-touch-compact .sidebar,
body.r95-touch-compact .detail-sheet,
body.r95-touch-compact .timeline-panel,
body.r95-touch-compact .person-index-dialog,
body.r95-touch-compact .person-index-card,
body.r95-touch-compact .map-legend,
body.r95-touch-compact .search-results,
body.r95-touch-compact .mobile-panel-dock,
body.r95-touch-compact .sidebar *,
body.r95-touch-compact .detail-sheet *,
body.r95-touch-compact .timeline-panel *,
body.r95-touch-compact .person-index-dialog *,
body.r95-touch-compact .map-legend *,
body.r95-touch-compact .search-results * {
  min-width:0 !important;
  box-sizing:border-box !important;
}

body.r95-touch-tablet .person-index-dialog {
  max-width:calc(100% - 16px) !important;
}

body.r95-touch-tablet .detail-sheet {
  max-width:min(440px, calc(100% - 56px)) !important;
}

body.r95-touch-compact .edge-panel-toggle-left,
body.r95-touch-compact .edge-panel-toggle-right,
body.r95-touch-compact .edge-panel-toggle-top {
  max-width:calc(100% - 8px) !important;
}

/* SVG remains the desktop route renderer. If a browser applies an SVG transform
   during zoom, keep stroke geometry screen-sized rather than scaling with it. */
.leaflet-overlay-pane svg path.saga-route,
.leaflet-overlay-pane svg path.saga-route-active,
.leaflet-overlay-pane svg path.saga-route-reading,
.leaflet-overlay-pane svg path.saga-route-muted,
.leaflet-overlay-pane svg path.saga-route-visited,
.leaflet-overlay-pane svg path.saga-route-unread,
.leaflet-overlay-pane svg path.saga-route-progress-halo {
  vector-effect:non-scaling-stroke !important;
}

/* Tablet portrait/landscape: prevent two side surfaces plus their edge handles
   from claiming more than the physical viewport. This does not change desktop
   laptops because the class is applied only to a compact touch viewport. */
body.r95-touch-tablet .app-shell,
body.r95-touch-tablet .map-region,
body.r95-touch-tablet #main-map {
  min-width:0 !important;
  max-width:100% !important;
  overflow:hidden;
}

body.r95-touch-tablet .sidebar {
  width:min(320px, 40vw) !important;
  max-width:min(320px, 40vw) !important;
}

body.r95-touch-tablet:not(.r43-sidebar-collapsed) .app-shell {
  grid-template-columns:min(320px, 40vw) minmax(0,1fr) !important;
}

body.r95-touch-tablet .detail-sheet {
  width:min(420px, 46vw) !important;
  max-width:min(420px, calc(100% - 64px)) !important;
}

body.r95-touch-tablet .map-legend {
  max-width:min(300px, calc(100% - 24px)) !important;
}

/* R96.1 — align mobile reading surfaces with the persistent dock.
   The previous 12px fallback left a 6px strip of the map visible above a dock
   whose own non-safe-area offset is 6px. */
@media (max-width:760px) {
  .mobile-panel-dock {
    bottom:0 !important;
    height:calc(var(--mobile-panel-dock-h) + max(6px, env(safe-area-inset-bottom))) !important;
    padding-bottom:calc(5px + max(6px, env(safe-area-inset-bottom))) !important;
    border-radius:12px 12px 0 0 !important;
  }

  .sidebar,
  .sidebar.is-browse-open,
  .detail-sheet,
  .timeline-panel,
  .timeline-panel:not(.hidden),
  body.r90-explore-active:not(.r64-reader-active) .sidebar,
  body.r90-explore-active:not(.r64-reader-active) .sidebar.is-browse-open {
    bottom:calc(var(--mobile-panel-dock-h) + max(6px, env(safe-area-inset-bottom))) !important;
  }
}

/* R96.4 — preserve the legend's icon/text columns on touch tablets.
   A later generic legend flex rule previously flattened these five items into
   one shrinking row, allowing marker icons to cover adjacent labels. */
.map-legend-body > .confidence-legend-grid {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  align-items:start !important;
  gap:8px 10px !important;
  width:100% !important;
}

.confidence-legend-grid > .confidence-legend-item {
  display:grid !important;
  grid-template-columns:16px minmax(0,1fr);
  align-items:start !important;
  gap:7px !important;
  min-width:0 !important;
  max-width:none !important;
  white-space:normal !important;
}

.confidence-legend-item > .mini-marker {
  grid-column:1;
  margin-top:.18em;
}

.confidence-legend-item > .confidence-legend-label {
  grid-column:2;
  min-width:0 !important;
  max-width:none !important;
  white-space:normal !important;
  overflow-wrap:normal !important;
  word-break:keep-all !important;
}

@media (max-width:420px) {
  .map-legend-body > .confidence-legend-grid {
    grid-template-columns:1fr !important;
  }
}

/* R96.7 - keep the closed mobile legend as a compact disclosure instead of a
   full-width bar. The expanded legend remains readable and stays above the
   persistent mobile dock. */
@media (max-width:760px) {
  .map-legend {
    left:auto !important;
    right:8px !important;
    width:auto !important;
    max-width:calc(100% - 16px) !important;
    max-height:none !important;
    overflow:hidden !important;
  }

  .map-legend-details {
    width:auto !important;
    max-width:100% !important;
  }

  .map-legend-details:not([open]) {
    width:max-content !important;
  }

  .map-legend-details > summary {
    width:max-content !important;
    max-width:100% !important;
    min-height:44px;
    padding:10px 12px !important;
  }

  .map-legend-details[open] {
    width:min(338px, calc(100vw - 18px)) !important;
  }

  .map-legend-details[open] > summary,
  .map-legend-details[open] > .map-legend-body {
    width:100% !important;
  }
}