:root {
  --bg:#f8f9f6;
  --panel:#fff;
  --text:#263b36;
  --muted:#58685f;
  --accent:#286653;
  --border:#e4e9e2;
  --water:#dce8e5;
  --land:#f7f5ed;
  --shadow:0 4px 24px #243c3510;
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  font-synthesis:none
}

* {
  box-sizing:border-box
}

body {
  margin:0;
  background:var(--bg);
  font-size:14px
}

button,input,select {
  font:inherit;
  color:inherit
}

button,a,input,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:wait;
  opacity:.5
}

a {
  color:var(--accent)
}

button {
  background:white;
  border:1px solid var(--border)
}

button:hover {
  background:#f1f5ef
}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px
}

button,input,select {
  transition:background .16s,border-color .16s,box-shadow .16s
}

h1,h2,h3,p {
  margin-top:0
}

[hidden] {
  display:none!important
}

.sr-only,.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}

.skip-link:focus {
  position:fixed;
  z-index:3000;
  left:12px;
  top:12px;
  background:white;
  padding:12px
}

#app {
  height:100vh;
  height:100dvh;
  display:grid;
  grid-template-columns:350px minmax(0,1fr);
  grid-template-rows:82px minmax(0,1fr);
  overflow:hidden
}

.app-header {
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:42px;
  padding:0 30px;
  border-bottom:1px solid var(--border);
  background:#fff;
  z-index:1001
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text);
  text-decoration:none;
  white-space:nowrap;
  font-size:20px;
  letter-spacing:-.7px
}

.brand strong {
  font-weight:650
}

.brand small {
  display:block;
  font-size:10px;
  letter-spacing:1.1px;
  margin-top:4px;
  color:var(--muted)
}

.brand-mark {
  width:37px;
  height:37px;
  stroke:var(--accent);
  stroke-width:1.2
}

.header-nav {
  display:flex;
  align-items:center;
  gap:30px;
  height:100%;
  font-size:12px
}

.header-search { display:flex; align-items:center; gap:9px; min-height:44px; padding:0 12px; border-radius:6px; font-size:12px; color:var(--accent); white-space:nowrap }
.header-search svg,.header-about svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round }
.header-search kbd { display:grid; place-items:center; width:20px; height:22px; margin-left:4px; border:1px solid var(--border); border-radius:3px; color:var(--muted); font:inherit; font-size:11px; line-height:1 }
.header-about { min-height:44px }
.header-about svg { display:none }
.header-about .header-about-label { margin-left:0 }

.text-button {
  border:0;
  background:transparent;
  padding:10px 0;
  color:var(--muted)
}

.text-button span {
  margin-left:6px
}

.header-meta {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  color:var(--muted);
  white-space:nowrap
}

.live-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#639681
}

#sidebar {
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:auto;
  background:var(--bg);
  border-right:1px solid var(--border);
  scrollbar-width:thin;
  scrollbar-color:#ccd7cf transparent
}

.reading-toolbar { display:none }
.reading-entry { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; margin-top:14px; padding:10px 12px; border:1px solid #c9d8cd; border-radius:5px; background:#edf3ed; color:var(--accent); font-size:12px }
.reading-entry:hover { background:#e3ece3; border-color:#98b4a2 }
.reading-view .reading-entry { display:none }

.search-section {
  padding:30px 26px 22px;
  position:relative;
  z-index:1000;
  border-bottom:1px solid var(--border)
}

.eyebrow {
  font-size:9px;
  font-weight:650;
  letter-spacing:1.8px;
  color:var(--accent);
  margin-bottom:14px
}

h1 {
  font-size:27px;
  letter-spacing:-1px;
  font-weight:500;
  margin-bottom:12px
}

.intro {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-bottom:22px
}

.search-wrap {
  position:relative;
  display:flex;
  align-items:center
}

.search-wrap>svg {
  position:absolute;
  left:13px;
  width:17px;
  height:17px;
  fill:none;
  stroke:var(--muted);
  stroke-width:1.6;
  pointer-events:none
}

#search {
  width:100%;
  height:46px;
  border:1px solid #d6ded5;
  background:white;
  border-radius:7px;
  padding:0 36px 0 39px;
  font-size:12px
}

#search::placeholder,#regionSearch::placeholder {
  color:var(--muted);
  opacity:1
}

.search-wrap kbd {
  position:absolute;
  right:12px;
  padding:1px 5px;
  border:1px solid var(--border);
  border-radius:3px;
  color:var(--muted);
  font:11px monospace;
  pointer-events:none
}

.search-wrap:focus-within kbd {
  display:none
}

.search-panel {
  position:absolute;
  top:52px;
  left:0;
  right:0;
  z-index:1100;
  background:#fff;
  box-shadow:0 12px 35px #1d38252b;
  border:1px solid var(--border);
  border-radius:8px;
  overflow:hidden
}

#searchResults { padding:5px; max-height:296px; overflow:auto }
.search-help { padding:10px; border-top:1px solid var(--border); background:#f7f9f5; color:var(--muted); font-size:10px; line-height:1.5 }
.clear-search { position:absolute; right:1px; top:1px; display:grid; place-items:center; width:44px; height:44px; border:0; background:transparent; color:var(--muted); font-size:21px; border-radius:6px }
#search { padding-right:46px }
#search::-webkit-search-cancel-button { display:none }

.search-chip {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  width:100%;
  padding:11px 10px;
  border:0;
  border-radius:4px;
  font-size:12px
}

.search-chip small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:4px
}

.search-chip[aria-selected=true] {
  background:#e8f2e9
}

.no-results {
  padding:18px 15px;
  color:var(--muted);
  line-height:1.6;
  font-size:12px
}
.no-results strong { color:var(--text); font-weight:600 }
.no-results p { margin:6px 0 0 }

.welcome {
  padding:25px 26px
}

.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:13px
}

.section-heading h2 {
  font-size:12px;
  font-weight:600;
  margin:0
}

.section-heading>span {
  font-size:11px;
  color:var(--muted)
}

.destination {
  width:100%;
  display:flex;
  align-items:center;
  gap:12px;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--border);
  padding:16px 0;
  text-align:left
}

.destination strong {
  display:block;
  font-size:13px;
  font-weight:550
}

.destination small {
  display:block;
  color:var(--muted);
  font-size:10px;
  margin-top:5px
}

.destination-icon {
  width:40px;
  height:44px;
  border-radius:5px;
  display:grid;
  place-items:center;
  font-size:24px;
  font-family:Georgia,serif;
  flex-shrink:0
}

.japan {
  background:#eee6de;
  color:#ac7061
}

.brazil {
  background:#e3ead8;
  color:#698750
}

.kenya {
  background:#eae3d5;
  color:#927344
}

.arrow {
  margin-left:auto;
  color:#8b978e
}

.discovery-button {
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  margin-top:22px;
  background:var(--accent);
  border-color:var(--accent);
  border-radius:5px;
  color:white;
  font-size:11px
}

.discovery-button:hover {
  background:#1c503f
}

.discovery-button span:first-child {
  font-size:18px
}

.welcome-note {
  margin-top:36px
}

.note-rule {
  display:block;
  width:26px;
  height:1px;
  background:#a5b7a7;
  margin-bottom:20px
}

.welcome-note h3 {
  font-family:Georgia,serif;
  font-size:20px;
  font-weight:400;
  letter-spacing:-.4px
}

.welcome-note p {
  color:var(--muted);
  font-size:11px;
  line-height:1.9;
  max-width:240px
}

.sidebar-footer {
  margin-top:auto;
  padding:23px 26px;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:10px;
  font-size:10px;
  color:var(--muted)
}

.footer-symbol {
  font-size:26px;
  font-weight:200;
  color:#8da592
}

.sidebar-footer small {
  display:block;
  font-size:10px;
  margin-top:5px;
  color:var(--muted)
}

#details {
  padding:25px 26px 30px
}

.profile-eyebrow {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:1.4px;
  color:var(--accent);
  margin-bottom:14px
}

.badge {
  font:10px monospace;
  border:1px solid #d8e3d8;
  border-radius:4px;
  padding:4px 6px;
  letter-spacing:.6px
}

.detail-title h2 {
  font-size:28px;
  font-weight:500;
  letter-spacing:-1px;
  line-height:1.2;
  margin-bottom:10px
}

.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:10px;
  color:var(--muted);
  margin:0 9px 5px 0;
  line-height:1.5
}

.detail-actions {
  display:flex;
  gap:7px;
  margin:14px 0 0
}

.mini-action {
  min-height:44px;
  border-radius:4px;
  padding:7px 9px;
  font-size:11px
}

.tabs {
  position:sticky;
  top:0;
  z-index:30;
  background:var(--bg);
  display:flex;
  justify-content:space-between;
  gap:2px;
  border-bottom:1px solid var(--border);
  margin:23px 0
}

.tab {
  flex:1;
  min-width:0;
  min-height:44px;
  padding:11px 0 12px;
  font-size:11px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--muted);
  border-radius:0
}

.tab.active {
  color:var(--accent);
  border-bottom-color:var(--accent);
  font-weight:600
}

.detail-grid {
  display:grid;
  gap:22px;
  font-size:12px;
  line-height:1.7;
  scroll-margin-top:65px
}

.label {
  font-size:9px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:8px
}

.value {
  overflow-wrap:anywhere
}

.muted {
  color:var(--muted)
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.metric {
  background:#eef2e9;
  padding:15px;
  border-radius:5px
}

.metric-value {
  font-size:23px;
  letter-spacing:-.7px;
  line-height:1.2;
  margin-bottom:6px
}

.metric small {
  font-size:9px;
  color:var(--muted)
}

.regional-trail { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 22px; color:var(--muted) }
.regional-trail[hidden] { display:none }
.regional-trail button { border:0; padding:3px 0; background:transparent; color:#356452; font:inherit; font-size:11px; cursor:pointer; text-align:left }
.regional-trail button:hover { text-decoration:underline; text-underline-offset:3px }
.regional-hero { padding:20px; border:1px solid #d8e2d3; border-radius:7px; background:linear-gradient(140deg,#eaf0e4,#f5f6ef) }
.regional-population { margin:12px 0 3px; font-size:clamp(25px,2.2vw,34px); line-height:1.2; letter-spacing:-1.1px; font-variant-numeric:tabular-nums; overflow-wrap:anywhere }
.regional-hero > p { margin:0; color:#687060; font-size:11px }
.regional-hero .inline-action { margin-top:15px; padding-bottom:0; border-top:1px solid #d8e2d3; padding-top:12px; font-size:10px }
.regional-comparison { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; padding:2px 0 }
.regional-comparison strong { display:block; margin:7px 0 4px; color:#305a46; font-size:23px; font-weight:500; font-variant-numeric:tabular-nums }
.regional-comparison strong small { font-size:13px; color:var(--muted); font-weight:400 }
.regional-comparison p { margin:0; color:var(--muted); font-size:10px; line-height:1.5 }
.method-note { margin:0; padding:13px; border-left:2px solid #b0bea8; background:#f3f4ee; color:#5f685b; font-size:11px; line-height:1.7 }
.source-receipts { margin:14px 0; font-size:11px }
.source-receipts summary { cursor:pointer; color:#356452; line-height:1.5 }
.source-receipts ul { list-style:none; margin:10px 0 0; padding:0 }
.source-receipts li { padding:9px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere }
.source-receipts small,.annual-data td small { display:block; color:var(--muted); margin-top:4px }
.region-return { display:flex; align-items:center; gap:14px; padding:15px; width:100%; border:1px solid #d8dfd3; border-radius:5px; background:transparent; color:#356452; text-align:left; font:inherit; font-size:12px; cursor:pointer; transition:background .15s,border-color .15s }
.region-return:hover { background:#edf1e8; border-color:#9bae91 }
.region-return small { display:block; margin-top:5px; font-size:10px; color:var(--muted) }

.list {
  list-style:none;
  padding:0;
  margin:0
}

.list li {
  padding:7px 0;
  border-bottom:1px solid var(--border);
  overflow-wrap:anywhere
}

.list li:last-child {
  border-bottom:0
}

.composition-row {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  padding-top:8px
}

.composition-row span:last-child {
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
  color:var(--muted)
}

.composition-bar {
  height:3px;
  background:#ebefe8;
  border-radius:3px;
  margin:7px 0 4px;
  overflow:hidden
}

.composition-bar span {
  display:block;
  height:100%;
  background:#84a58c;
  border-radius:3px
}

.unit-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  margin-top:12px
}

.unit-btn {
  text-align:left;
  font-size:11px;
  padding:10px;
  border-radius:4px;
  line-height:1.5
}

.unit-btn[data-has-pop=true] {
  background:linear-gradient(90deg,#e7efe3 var(--pop),#fff var(--pop))
}

.boundary-status {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
  font-size:11px;
  line-height:1.6;
  color:#7d6336;
  background:#f5f0e4;
  padding:12px;
  margin-top:12px;
  border-radius:6px
}
.boundary-status.is-loading { color:var(--accent); background:#edf3ed }
.boundary-status.is-loading #boundaryMessage::before { content:""; display:inline-block; width:10px; height:10px; margin-right:7px; border:2px solid #bccfc2; border-top-color:var(--accent); border-radius:50%; animation:spin 1s linear infinite }
.boundary-retry { min-height:44px; padding:7px 12px; border-color:#d9ccb0; border-radius:5px; font-size:11px; color:#685329; background:#fffdf8 }
.boundary-retry[aria-disabled="true"] { cursor:progress; opacity:.7 }
#boundaryGaps { width:100%; border-top:1px solid #e3d9c5 }
#boundaryGaps summary { min-height:44px; padding:12px 0; font-size:11px; font-weight:600 }
.boundary-gap-group h4 { font-size:11px; margin:2px 0 5px; font-weight:600 }
.boundary-gap-group p { margin:0 0 8px; font-size:11px }
.boundary-gap-group ul { padding:0; margin:0 0 10px; list-style:none }
.boundary-gap-group button { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; padding:9px 10px; margin-top:5px; text-align:left; font-size:12px; color:#685329; background:#fffdf8; border-color:#e3d9c5 }
.boundary-gap-group button>span:first-child { min-width:0; overflow-wrap:anywhere }

.source-link {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:44px;
  max-width:100%;
  padding:7px 10px;
  border:1px solid #dce5da;
  border-radius:5px;
  background:#f2f6ef;
  font-size:11px;
  line-height:1.5;
  margin-top:8px;
  overflow-wrap:anywhere;
  text-decoration:none
}
.source-link:hover { background:#e8f0e4; border-color:#abc0aa }
.source-link small { display:block; margin:2px 0 0; color:var(--muted); font-size:10px; font-weight:400 }
.source-unavailable { display:block; margin-top:5px; color:var(--muted); font-size:10px }
.source-receipts summary,.legacy-records summary { min-height:44px; align-content:center; padding-block:9px }

.profile-note {
  font-size:10px;
  line-height:1.7;
  color:var(--muted);
  border-left:2px solid #bbcbbb;
  padding-left:11px
}

.profile-actions { display:flex; flex-wrap:wrap; gap:6px; margin-top:14px }
.profile-actions .detail-actions,.profile-tools { display:contents }

#profileActionStatus {
  flex-basis:100%;
  font-size:11px;
  line-height:1.6;
  overflow-wrap:anywhere;
  color:var(--accent)
}

#profileActionStatus:empty { display:none }
.profile-link-fallback { flex-basis:100%; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) 44px; align-items:center; border:1px solid var(--border); border-radius:6px; background:#f1f5ef; padding:0 10px 10px }
.profile-link-fallback label { font-size:11px; color:var(--muted) }
#dismissProfileLink { width:44px; height:44px; font-size:21px; border:0; background:transparent }
#profileLink { grid-column:1/-1; width:100%; min-width:0; height:44px; border:1px solid var(--border); border-radius:4px; font-size:12px; padding:8px; background:white }
#copyLink[aria-disabled="true"] { cursor:progress; opacity:.7 }
.share-link-actions { grid-column:1/-1; display:flex; gap:10px; align-items:center; margin-top:9px }
.share-link-actions .mini-action { flex-shrink:0; min-height:44px }
.share-link-actions small { font-size:10px; line-height:1.6; color:var(--muted) }
.metric-unavailable { background:#f1f3f1 }
.metric small,.observation-year { display:block }
.observation-year { font-size:10px; margin:7px 0 3px }
.field-note { font-size:10px; line-height:1.7; color:var(--muted); margin:9px 0 0 }
.comparison-note { margin:0; padding:12px; border:1px solid #e2dbc9; border-radius:6px; background:#faf7ef; font-size:11px; line-height:1.7; color:#625a44 }
.inline-action { min-height:44px; border:0; padding:0; text-align:left; background:transparent; color:var(--accent); font-size:11px; line-height:1.6 }
.inline-action span { margin-left:6px }
.detail-grid>.inline-action { margin-top:-12px; justify-self:start }
.detail-grid .section-heading { margin-bottom:10px; align-items:center; gap:8px }
.detail-grid h3 { margin:0; font-size:12px; font-weight:600 }
.detail-grid .section-heading>span { font-size:11px; letter-spacing:0; line-height:1.4 }
.review-label,.source-status { background:#eff2eb; border-radius:3px; padding:3px 6px; white-space:nowrap; color:var(--muted); font-size:11px; font-weight:500 }
.population-trend { border-block:1px solid var(--border); padding:18px 0 12px }
.population-trend svg { display:block; width:100%; height:auto; overflow:visible }
.chart-grid { stroke:var(--border); stroke-width:1; stroke-dasharray:3 4 }
.chart-line { fill:none; stroke:var(--accent); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round }
.chart-point { fill:var(--accent); stroke:white; stroke-width:1 }
.chart-guide { fill:none; stroke:var(--accent); stroke-width:1; stroke-dasharray:2 3; opacity:.45 }
.chart-selected { fill:var(--accent); stroke:var(--panel); stroke-width:2 }
.trend-summary { margin:0 0 14px; font-size:12px; color:var(--text) }
.trend-summary span { color:var(--muted); white-space:nowrap }
.chart-readout { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:16px 0 12px; padding:12px; border-radius:6px; background:#eff3ee; font-variant-numeric:tabular-nums }
.chart-readout>span { font-size:12px; color:var(--accent) }
.chart-readout strong { font-size:19px; font-weight:500; text-align:right; line-height:1.3 }
.chart-readout small { display:block; margin-top:3px; font-size:11px; font-weight:400; color:var(--muted) }
.chart-control-label { display:block; font-size:12px; color:var(--text) }
.chart-year-control { display:block; width:100%; min-width:0; height:44px; margin:5px 0; padding:0; cursor:pointer; accent-color:var(--accent) }
.chart-control-hint { margin:0; font-size:11px; line-height:1.6; color:var(--muted) }
.chart-range { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums }
.chart-range>span { white-space:nowrap }
.chart-years { margin-top:3px }
.chart-scale-note { margin:2px 0 6px; font-size:11px; color:var(--muted) }
summary { cursor:pointer; font-size:11px; color:var(--accent); padding:7px 0; line-height:1.7 }
summary:focus-visible { outline:3px solid var(--accent); outline-offset:3px }
.annual-data { margin-top:12px }
.annual-data summary { font-size:12px }
.annual-data table { width:100%; border-collapse:collapse; font-size:12px; margin-top:6px }
.annual-data caption { text-align:left; font-size:11px; color:var(--muted); margin:0 0 7px }
.annual-data th,.annual-data td { padding:7px 8px; border-bottom:1px solid var(--border); text-align:left; font-variant-numeric:tabular-nums }
.annual-data td,.annual-data th:last-child { text-align:right }
.annual-data tbody th { font-weight:400 }
.annual-data tr[aria-current="true"] { background:#eff3ee; color:var(--accent) }
.annual-data tr[aria-current="true"] th,.annual-data tr[aria-current="true"] td { font-weight:600 }
.annual-selection { display:inline-block; visibility:hidden; margin-left:8px; font-size:11px; font-weight:400 }
.annual-data tr[aria-current="true"] .annual-selection { visibility:visible }
.reading-view .chart-scale-note,.reading-view .chart-range,.reading-view .chart-control-hint,.reading-view .chart-readout small,.reading-view .annual-data caption { font-size:12px }
.reading-view .trend-summary,.reading-view .chart-control-label,.reading-view .annual-data summary,.reading-view .annual-data table { font-size:13px }
.detail-grid dl { margin:0; font-size:11px }
.detail-grid dl>div { display:grid; grid-template-columns:minmax(70px,1fr) minmax(0,1.5fr); gap:12px; padding:7px 0; border-bottom:1px solid var(--border) }
.detail-grid dt { color:var(--muted) }
.detail-grid dd { margin:0; text-align:right; overflow-wrap:anywhere }
.composition-list { list-style:none; margin:0; padding:0 }
.composition-list li+li { margin-top:5px }
.composition-row span:first-child { overflow-wrap:anywhere; white-space:normal }
.composition-more { margin-top:8px }
.identity-intro { padding:15px; background:#f1f5ef; border:1px solid #dce6d8; border-radius:6px }
.identity-intro>p,.identity-guide p { font-size:11px; line-height:1.7; color:var(--muted); margin:10px 0 }
.identity-intro .inline-action { min-height:44px }
.identity-contents { display:grid; gap:5px; margin-top:12px; padding-top:14px; border-top:1px solid #dce6d8 }
.identity-contents .label { margin-bottom:3px }
.identity-contents button { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:44px; width:100%; padding:10px 12px; border:1px solid #d5e0d2; border-radius:5px; background:#fcfdfb; color:var(--accent); font-size:12px; text-align:left; cursor:pointer }
.identity-contents button:hover { background:#e7efe3; border-color:#a4bdac }
.identity-contents button>span:first-child { min-width:0; overflow-wrap:anywhere }
.identity-contents button small { display:block; margin-top:4px; color:var(--muted); font-size:11px; line-height:1.5 }
.identity-back { margin-top:14px; min-height:44px }
.identity-guide summary,.identity-additional summary,.composition-more summary { min-height:44px; padding:12px 0; font-size:11px }
.identity-section { border:1px solid var(--border); border-radius:6px; padding:15px; background:#fcfdfb }
.identity-section .section-heading { margin-bottom:4px }
.identity-section .composition-list li { padding:4px 0 10px; border-bottom:1px solid #edf0ea }
.identity-section .composition-list li:last-child { border-bottom:0; padding-bottom:2px }
.identity-section .share-missing { font-size:10px; font-style:italic }
.identity-reference { display:flex; flex-wrap:wrap; gap:2px 10px; font-size:10px; line-height:1.6; color:var(--muted); margin-top:5px; overflow-wrap:anywhere }
.identity-reference span { max-width:100% }
.identity-record-note,.identity-context-note { font-size:10px; line-height:1.7; color:var(--muted); margin:8px 0 0; overflow-wrap:anywhere }
.identity-context-note { border-left:2px solid #bccdb4; padding-left:9px; margin-top:14px }
.identity-additional { border-top:1px solid var(--border); margin-top:14px }
.identity-additional>.field-note { margin:0 0 8px }
#identityReferences, #incomeSource, #identityLanguageSource, #identityReligionSource, #identityAncestrySource, .identity-section, .identity-contents { scroll-margin-top:62px }
.identity-checked { border-color:#b8cfc0 }
.identity-observation { font-size:12px; font-weight:500; line-height:1.6; color:var(--accent); margin-bottom:10px }
.identity-coverage { font-size:12px; line-height:1.65; padding:10px 12px; border-left:2px solid #a4bdac; background:#f1f5ee; margin-bottom:16px }
.identity-count { display:block; color:var(--muted); font-size:11px; margin-top:4px }
.source-card { border:1px solid var(--border); border-radius:6px; padding:15px; background:#fcfdfb }
.source-navigation { padding:14px; border:1px solid var(--border); border-radius:6px; background:#eff3ee }
.source-navigation label { display:block; margin-bottom:8px; font-size:12px; font-weight:600 }
.source-navigation>div { display:flex; gap:8px }
.source-navigation select { flex:1; min-width:0; width:100%; max-width:none; height:44px; padding:0 8px; border:1px solid #d5e0d2; border-radius:4px; background:white; font-size:12px }
.source-navigation button { flex:none; min-width:48px; min-height:44px; padding:8px; border-radius:4px; color:var(--accent); font-size:12px; font-weight:600 }
[data-source-section] { scroll-margin-top:62px }
.source-card p { font-size:11px; margin:0 0 12px }
.source-card .source-value { font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums }
.source-card .field-note { margin-top:12px; font-size:10px }
.source-card dl { font-size:10px }
.source-card code { font-size:9px; overflow-wrap:anywhere }
.source-links { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.source-links .source-link { flex:1 1 120px; margin:0 }
.legacy-records { border-top:1px solid var(--border); padding-top:9px }
.legacy-records>.field-note { margin:5px 0 10px }
.region-summary { margin-bottom:5px }
.region-summary-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px }
.region-summary-heading h3 { margin:0; font-size:13px; font-weight:600 }
.region-summary-heading .source-status { font-size:11px }
.region-period { margin:8px 0 0; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums }
.region-date-note { margin:3px 0 0; font-size:10px; color:#716345 }
.region-method { margin-top:4px }
.region-method summary { width:fit-content; font-size:11px }
.region-method p { margin:6px 0 12px; color:var(--muted); font-size:11px; line-height:1.7 }
.region-method .inline-action { margin-bottom:12px }
.region-toolbar { position:sticky; top:45px; z-index:20; background:var(--bg); padding:10px 0; margin-bottom:10px; border-bottom:1px solid var(--border); box-shadow:0 6px 8px -8px #263b3640 }
.region-controls { display:flex; gap:8px; margin:0 }
.region-search-wrap { position:relative; flex:1; min-width:0 }
.region-controls input { min-width:0; width:100%; height:44px; border:1px solid var(--border); border-radius:5px; background:white; padding:10px 39px 10px 10px; font-size:12px }
.region-controls input::-webkit-search-cancel-button { -webkit-appearance:none }
.clear-region-filter { position:absolute; inset:0 0 0 auto; width:38px; border:0; border-radius:5px; background:transparent; color:var(--muted); font-size:22px }
.region-controls select { height:44px; padding:0 6px; border:1px solid var(--border); border-radius:5px; max-width:103px; font-size:11px; background:white }
.region-result-count { margin:7px 0 0; color:var(--muted); font-size:10px; line-height:1.5; font-variant-numeric:tabular-nums }
.region-browser .unit-btn { scroll-margin-top:142px }
.unit-btn { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 14px; row-gap:4px; padding:12px }
.unit-btn>span:first-child { font-weight:500; overflow-wrap:anywhere }
.unit-btn small { grid-column:1; font-size:10px; color:var(--muted); font-variant-numeric:tabular-nums }
.unit-btn .region-arrow { grid-column:2; grid-row:1/3; align-self:center; color:var(--accent) }
.unit-btn:hover { border-color:#91ad9b; box-shadow:0 1px 4px #243c3514 }
.empty-regions { padding:12px; background:#f1f3ef; font-size:11px; border-radius:4px }
.empty-regions p { margin:5px 0 8px }
.map-layer-stack { display:flex; flex-direction:column; align-items:stretch; gap:6px }
.legend-note { flex-basis:100%; font-size:11px; line-height:1.6; color:var(--muted); padding-top:3px }
.coverage-summary { display:grid; grid-template-columns:1fr 1fr; gap:15px; border-block:1px solid var(--border); padding:17px 0; margin:20px 0 }
.coverage-summary strong { display:block; font-size:24px; font-weight:500; color:var(--accent) }
.coverage-summary span { display:block; font-size:10px; line-height:1.6; margin-top:4px; color:var(--muted) }
.coverage-summary p { grid-column:1/-1; margin:0; font-size:10px }
.coverage-summary strong small { font-size:13px; color:var(--muted) }
.coverage-summary>div { padding:13px; border:1px solid var(--border); border-radius:7px; background:#f8faf6 }

#stage {
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--water)
}

.mode-view,#map {
  position:absolute;
  inset:0
}

.map-toolbar {
  position:absolute;
  top:22px;
  left:24px;
  right:24px;
  z-index:800;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:15px;
  pointer-events:none
}

.map-toolbar>* {
  pointer-events:auto
}

.world-button {
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #d1dfd7;
  border-radius:6px;
  background:#ffffffef;
  padding:11px 13px;
  box-shadow:var(--shadow);
  font-size:11px
}

.world-button>span:first-child {
  font-size:17px;
  color:var(--accent)
}

.world-button>span:last-child {
  margin-left:12px;
  color:#809488
}

.layer-control {
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 13px;
  background:#ffffffef;
  border:1px solid #d1dfd7;
  border-radius:6px;
  box-shadow:var(--shadow)
}

.layer-control label {
  font-size:9px;
  letter-spacing:.7px;
  color:var(--muted)
}

select {
  border:0;
  background:transparent;
  font-size:11px;
  max-width:170px;
  padding:4px;
  cursor:pointer
}

.map-caption {
  position:absolute;
  left:26px;
  top:93px;
  z-index:500;
  pointer-events:none;
  color:#6f8e83
}

.map-caption>span {
  font-size:8px;
  letter-spacing:2px
}

.map-caption small {
  display:block;
  font:italic 13px Georgia,serif;
  margin-top:8px
}

.map-bottom {
  position:absolute;
  left:24px;
  bottom:28px;
  z-index:800;
  max-width:calc(100% - 85px)
}

.map-legend {
  display:flex;
  gap:8px 13px;
  flex-wrap:wrap;
  padding:12px 15px;
}

.map-key {
  width:360px;
  max-width:100%;
  background:#ffffffed;
  border:1px solid #d2ddd4;
  border-radius:6px;
  box-shadow:var(--shadow)
}
.map-key>summary { display:flex; align-items:center; gap:12px; min-height:44px; padding:0 13px; cursor:pointer; list-style:none; font-size:12px; color:var(--text) }
.map-key>summary::-webkit-details-marker { display:none }
.map-key>summary>span:first-child { font-weight:600 }
#legendLayer { margin-left:auto; color:var(--muted); font-size:11px }
.map-key-chevron { font-size:15px; transform:rotate(180deg) }
.map-key[open] .map-key-chevron { transform:none }
.map-key-content { max-height:min(360px,max(40px,calc(100dvh - 300px))); overflow:auto; overscroll-behavior:contain; border-top:1px solid var(--border) }
.map-reading { border-top:1px solid var(--border); margin:0 14px; padding:11px 0 13px }
.map-reading-place { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; font-weight:600; margin-bottom:5px }
.map-reading-place>span { margin-left:auto; color:var(--muted); font-weight:400 }
.map-reading>strong { display:block; font-size:14px; font-weight:500; color:var(--accent); line-height:1.4 }
.map-reading>small { display:block; color:var(--muted); font-size:11px; line-height:1.6; margin-top:3px }
.map-reading .map-reading-scope { margin-top:6px; color:var(--text) }
.literacy-scale { flex-basis:100%; min-width:0 }
.literacy-ramp { height:9px; border:1px solid #00000012; border-radius:3px; background:linear-gradient(to right,#efe0b1,#296b52) }
.literacy-ticks { display:flex; justify-content:space-between; gap:8px; margin-top:5px; font-size:11px; color:var(--muted) }

.map-legend .pill {
  font-size:11px;
  margin:0
}

.legend-swatch {
  width:9px;
  height:9px;
  border:1px solid #00000012;
  border-radius:2px;
  flex-shrink:0
}

.map-help {
  margin-top:11px;
  font-size:9px;
  color:#59766a
}

.map-help span {
  padding:0 7px
}

.map-scale {
  position:absolute;
  right:25px;
  bottom:31px;
  z-index:700;
  font-size:7px;
  letter-spacing:1px;
  color:#668073
}

.map-scale span {
  display:block;
  text-align:center;
  margin-top:5px;
  font:11px monospace;
  letter-spacing:0
}

.leaflet-container {
  background:var(--water)!important;
  font-family:inherit
}

.leaflet-pane path {
  transition:fill .18s,fill-opacity .18s,stroke .18s
}

.leaflet-top.leaflet-right {
  top:auto;
  bottom:85px;
  right:14px
}

.leaflet-touch .leaflet-bar {
  border:1px solid #cddbd1;
  box-shadow:var(--shadow);
  border-radius:6px;
  overflow:hidden
}

.leaflet-touch .leaflet-bar a {
  width:34px;
  height:34px;
  line-height:34px;
  color:var(--text);
  font-size:18px;
  font-weight:400
}

.leaflet-control-attribution {
  font-size:8px!important;
  background:#ffffff80!important;
  color:var(--muted);
  padding:3px 8px!important
}

.leaflet-control-attribution a {
  color:#638073
}

.country-label,.state-label,.continent-label {
  width:max-content!important;
  height:auto!important;
  translate:-50% -50%;
  background:transparent;
  border:0;
  box-shadow:none;
  white-space:nowrap;
  pointer-events:none;
  text-align:center;
  color:#536a5a;
  font-family:inherit;
  line-height:1;
  transform:translate(-50%,-50%);
  text-shadow:0 1px 2px #fff,0 0 5px #fff;
  font-size:calc(10px * var(--label-scale,1));
  transition:opacity .2s
}

.country-label.is-selected {
  font-weight:650;
  color:#214f3d
}

.state-label {
  font-size:9px;
  color:#526d61
}

.state-label.is-selected {
  padding:5px 8px;
  border:1px solid #658676;
  border-radius:5px;
  background:#fff;
  color:#173f31;
  font-size:11px;
  font-weight:650;
  text-shadow:none;
  box-shadow:0 2px 6px #173f3120
}

.continent-label {
  font-size:11px;
  font-weight:500;
  letter-spacing:2.8px;
  color:#6b8d7d;
  text-transform:uppercase;
  text-shadow:0 1px 5px #fff9
}

.leaflet-popup-content-wrapper {
  border-radius:7px;
  box-shadow:var(--shadow)
}

#tooltip {
  position:fixed;
  z-index:2000;
  pointer-events:none;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:10px 13px;
  font-size:11px;
  line-height:1.6;
  white-space:pre-wrap;
  opacity:0;
  border-radius:6px;
  max-width:min(280px,calc(100vw - 16px));
  max-height:calc(100dvh - 16px);
  overflow:hidden;
  overflow-wrap:anywhere
}

.loading {
  position:absolute;
  inset:0;
  z-index:1200;
  display:flex;
  padding:20px;
  overflow:auto;
  background:#e4ede7f5
}

.loading-box {
  flex:none;
  width:100%;
  margin:auto;
  text-align:center;
  max-width:380px;
  padding:28px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow)
}

.loading-box h2 {
  font:26px Georgia,serif
}

.loading-box p {
  color:var(--muted);
  font-size:12px;
  line-height:1.8
}

.loading-box button {
  min-height:44px;
  padding:10px 22px;
  border-radius:5px;
  background:var(--accent);
  border-color:var(--accent);
  color:white
}
.loading-box h2 { margin:12px 0 }
.loading-box .eyebrow { font-size:8px; letter-spacing:1.5px }
.loading-mark { width:34px; height:34px; margin:0 auto 19px; display:grid; place-items:center; border-radius:50%; background:#f5eddd; color:#80632c; font:22px Georgia,serif }
.load-help { margin-top:15px; border-top:1px solid var(--border) }
.load-help summary { min-height:44px; padding:15px 0 5px; font-size:11px; color:var(--accent); cursor:pointer }
.load-help p { font-size:11px; text-align:left; margin-bottom:0; overflow-wrap:anywhere }
.header-meta.is-unavailable .live-dot { background:#a89c7d }

.spinner {
  width:30px;
  height:30px;
  margin:0 auto 24px;
  border:2px solid #c5d6c9;
  border-top-color:var(--accent);
  border-radius:50%;
  animation:spin 1s linear infinite
}

@keyframes spin {
  to {
    transform:rotate(360deg)
  }
}

dialog {
  border:1px solid var(--border);
  border-radius:12px;
  max-width:490px;
  width:calc(100% - 32px);
  max-height:85dvh;
  padding:38px;
  color:var(--text);
  box-shadow:0 20px 80px #172e3233
}

dialog::backdrop {
  background:#253e3955;
  backdrop-filter:blur(3px)
}

#aboutDialog { max-width:620px; padding:0; overflow:hidden }
#aboutDialog[open] { display:flex; flex-direction:column }
.about-header { flex:none; position:relative; padding:26px 30px 20px; border-bottom:1px solid var(--border) }
.about-header h2 { margin:10px 16px 0 0; font-size:29px }
.about-body { overflow:auto; min-height:0; padding:8px 30px 24px; overscroll-behavior:contain }
.about-body .coverage-summary { border:0; padding:0; gap:10px; margin:18px 0 10px }
.about-body .coverage-context { font-size:11px; line-height:1.7 }
.about-body h3 { margin:23px 0 4px }
.about-body h3+p { margin-top:0 }
.checked-collections { display:grid; gap:16px; margin-top:16px }
.collection-group { min-width:0 }
.collection-group h4 { margin:0 0 8px; font-size:11px; font-weight:600; letter-spacing:.02em; color:var(--muted) }
.collection-list { border:1px solid var(--border); border-radius:7px; overflow:hidden }
.collection-empty { padding:12px 15px; margin:0; color:var(--muted) }
.checked-collection { width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; border:0; border-bottom:1px solid var(--border); border-radius:0; padding:13px 15px; text-align:left }
.checked-collection>span:first-child { min-width:0; overflow-wrap:anywhere }
.checked-collection:focus-visible { outline-offset:-3px }
.checked-collection:last-child { border-bottom:0 }
.checked-collection strong { font-size:13px; font-weight:600 }
.collection-topic { display:block; font-size:12px; margin-top:4px }
.collection-publisher { display:block }
.checked-collection small { display:block; margin-top:4px; font-size:11px; line-height:1.6; color:var(--muted) }
.collection-note { display:block; color:#7d6336 }
.collection-count { display:flex; gap:14px; align-items:center; color:var(--accent); font-size:17px }
.collection-count>span { font-size:13px }
.about-method { margin:0; border-top:1px solid var(--border); padding:0 0 5px }
.about-method summary { padding:15px 0; min-height:44px; cursor:pointer; font-size:12px; font-weight:600 }
.about-method p { margin:0 0 13px }
.about-body .dialog-foot { margin-top:8px; line-height:1.8 }
#aboutDialog .dialog-close { width:44px; height:44px; display:grid; place-items:center; right:8px; top:8px; border-radius:6px }
#exportDialog { width:calc(100% - 32px); max-width:620px; max-height:85dvh; padding:0; overflow:hidden }
#exportDialog[open] { display:flex; flex-direction:column }
.export-header { position:relative; flex:none; padding:25px 24px 18px; border-bottom:1px solid var(--border) }
.export-header h2 { margin:10px 32px 6px 0 }
.export-header p { margin:0; font-size:13px; overflow-wrap:anywhere }
#exportDialog .dialog-close { width:44px; height:44px; display:grid; place-items:center; right:8px; top:8px; border-radius:6px }
.export-body { position:relative; padding:22px 24px; min-height:0; overflow:auto; overscroll-behavior:contain }
.export-file { display:flex; gap:15px; align-items:center; padding:15px; border:1px solid var(--border); border-radius:7px; background:#f4f7f1 }
.export-file>span { flex:none; color:var(--accent); font:22px Georgia,serif }
.export-file>div { min-width:0 }
.export-file strong { font-size:12px; font-weight:600; overflow-wrap:anywhere }
.export-file small { display:block; margin-top:5px; color:var(--muted); font-size:11px }
#exportScope { margin:15px 0 }
.export-actions { display:flex; flex-wrap:wrap; gap:9px }
.export-actions a,.export-actions button { display:inline-flex; min-height:44px; align-items:center; justify-content:center; padding:10px 15px; border-radius:5px; font-size:12px; text-decoration:none }
.export-download { background:var(--accent); color:white; gap:12px }
.export-download:hover { background:#1b5341 }
.export-preview { position:relative; margin-top:17px; border-top:1px solid var(--border) }
.export-preview summary { min-height:44px; padding:12px 0; font-size:12px }
#exportContent { display:block; width:100%; max-width:100%; height:220px; min-height:100px; max-height:35dvh; resize:vertical; border:1px solid var(--border); border-radius:5px; background:#f8faf6; padding:12px; font:11px/1.6 Consolas,monospace; color:var(--text); overflow:auto }
.export-status:empty { display:none }
#exportStatus { margin:12px 0 0; color:var(--accent) }
.export-help { margin:14px 0 0; font-size:11px }
@media(max-width:480px) {
  .export-header { padding:23px 20px 16px }
  .export-header h2 { font-size:25px }
  .export-body { padding:18px 20px }
  .export-actions>* { flex:1 1 150px }
  .about-header { padding:23px 20px 18px }
  .about-header h2 { font-size:25px; max-width:230px }
  .about-body { padding:5px 20px 20px }
  .coverage-summary strong { font-size:22px }
  .coverage-summary>div { padding:10px }
  .about-body p { font-size:13px }
}

dialog h2 {
  font:30px/1.2 Georgia,serif;
  letter-spacing:-.5px
}

dialog h3 {
  font-size:13px;
  margin-top:26px
}

dialog p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted)
}

.dialog-close {
  position:absolute;
  right:12px;
  top:10px;
  border:0;
  font-size:24px
}

.dialog-foot {
  border-top:1px solid var(--border);
  padding-top:16px;
  font-size:9px;
  color:var(--muted)
}

.noscript {
  position:fixed;
  inset:0;
  z-index:3000;
  background:var(--bg);
  padding:50px
}

@media(min-width:1500px) {
  #app {
    grid-template-columns:380px 1fr
  }
  .search-section {
    padding:38px 32px 26px
  }
  .welcome,#details {
    padding-left:32px;
    padding-right:32px
  }
}

@media(max-width:1050px) {
  #app {
    grid-template-columns:300px 1fr;
    grid-template-rows:72px 1fr
  }
  .app-header {
    padding:0 22px;
    gap:30px
  }
  .header-meta {
    display:none
  }
  .search-section {
    padding:25px 22px 20px
  }
  .welcome,#details {
    padding:22px
  }
  .brand {
    font-size:18px
  }
  .map-toolbar {
    left:16px;
    right:16px;
    top:16px
  }
  .layer-control {
    display:block;
    padding:8px 10px
  }
  .layer-control label {
    display:block;
    font-size:9px;
    margin-bottom:1px
  }
  .map-caption {
    left:19px;
    top:95px
  }
  .world-button {
    padding:12px 10px
  }
  .world-button>span:last-child {
    display:none
  }
  .header-nav {
    margin-left:auto;
    gap:20px
  }
  .map-bottom {
    left:16px
  }
  .destination small {
    font-size:9px
  }
}

@media(max-width:700px) {
  .reading-entry { display:none }
  #app {
    grid-template-columns:1fr;
    grid-template-rows:65px 40dvh minmax(0,1fr)
  }
  .app-header {
    padding:0 17px;
    gap:8px
  }
  .brand {
    font-size:17px;
    gap:8px
  }
  .brand-mark {
    width:30px;
    height:30px
  }
  .brand small {
    font-size:8px
  }
  .header-nav {
    font-size:10px;
    gap:8px
  }
  .header-search,.header-about { display:grid; place-items:center; min-width:44px; width:44px; height:44px; padding:0; border:1px solid var(--border); border-radius:6px }
  .header-search span,.header-search kbd,.header-about span { display:none }
  .header-about svg { display:block }
  .text-button {
    font-size:10px
  }
  #stage {
    grid-row:2;
    border-bottom:1px solid #ccd9cf
  }
  #sidebar {
    grid-row:3;
    border:0
  }
  .reading-toolbar {
    position:sticky;
    top:0;
    z-index:1001;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-shrink:0;
    height:58px;
    padding:6px 16px;
    border-bottom:1px solid var(--border);
    background:var(--bg)
  }
  .reading-toolbar>span {
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
    font-weight:600
  }
  .reading-toolbar button {
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    min-height:44px;
    padding:0 12px;
    border-radius:6px;
    font-size:11px;
    color:var(--accent)
  }
  #app.reading-view {
    grid-template-rows:65px minmax(0,1fr)
  }
  #app.reading-view #stage { display:none }
  #app.reading-view #sidebar { grid-row:2 }
  #sidebar.has-selection .tabs { top:58px }
  #sidebar.has-selection .region-toolbar { top:103px }
  .region-browser .unit-btn { scroll-margin-top:208px }
  .region-period,.region-method p,.region-method summary { font-size:12px }
  .region-controls input { font-size:13px; padding-right:44px }
  .clear-region-filter { width:44px }
  .region-controls select { font-size:12px }
  .region-result-count,.region-date-note { font-size:11px }
  #sidebar.has-selection .detail-grid { scroll-margin-top:120px }
  [data-source-section] { scroll-margin-top:120px }
  #identityReferences, #incomeSource, #identityLanguageSource, #identityReligionSource, #identityAncestrySource, .identity-section, .identity-contents { scroll-margin-top:120px }
  .identity-intro>p,.identity-guide p,.identity-guide summary,.identity-additional summary,.composition-more summary,.identity-reference,.identity-context-note,.identity-record-note { font-size:12px }
  .identity-section .composition-row { font-size:12px }
  .identity-section .share-missing { font-size:11px }
  .detail-grid { font-size:13px }
  .detail-grid dl,.source-card p,.source-card .field-note,.profile-note,.field-note { font-size:12px }
  .source-card code,.source-link { font-size:11px }
  .detail-grid h3 { font-size:13px }
  .tab { min-height:44px }
  summary { min-height:44px; font-size:12px }
  .search-section {
    padding:20px 22px 17px
  }
  .search-section .eyebrow {
    margin-bottom:8px;
    font-size:8px
  }
  h1 {
    font-size:24px;
    margin-bottom:8px
  }
  .intro {
    margin-bottom:14px;
    font-size:11px
  }
  .desktop-break {
    display:none
  }
  .map-caption {
    display:none
  }
  .map-toolbar {
    top:12px;
    left:12px;
    right:12px
  }
  .map-bottom {
    bottom:20px;
    left:12px;
    max-width:calc(100% - 70px)
  }
  .map-legend {
    padding:8px 10px;
    gap:5px 10px
  }
  .map-legend .pill {
    font-size:11px
  }
  .map-key { width:300px }
  .map-key-content { max-height:max(55px,calc(40dvh - 190px)) }
  .map-help,.map-scale {
    display:none
  }
  .leaflet-top.leaflet-right {
    bottom:26px;
    right:4px
  }
  .leaflet-touch .leaflet-bar a {
    width:30px;
    height:30px;
    line-height:30px
  }
  .welcome-note {
    margin-top:24px
  }
  .welcome {
    padding-top:18px
  }
  .sidebar-footer {
    padding:18px 22px
  }
  .continent-label {
    font-size:9px;
    letter-spacing:1.5px
  }
  .detail-title h2 {
    font-size:26px
  }
  .search-results {
    max-height:180px
  }
  .world-button {
    font-size:10px
  }
  .layer-control select {
    max-width:140px;
    font-size:10px
  }
  dialog {
    padding:30px
  }
  .tabs {
    justify-content:space-between;
    gap:8px
  }
}

#sidebar.has-selection .search-section {
  padding-top:20px;
  padding-bottom:20px
}

#sidebar.has-selection .search-section h1,#sidebar.has-selection .intro {
  display:none
}

/* Use the horizontal space on phones in landscape and short desktop windows. */
@media(min-width:560px) and (max-height:600px) {
  #app { grid-template-columns:260px minmax(0,1fr); grid-template-rows:56px minmax(0,1fr) }
  .app-header { padding:0 18px; gap:20px }
  .brand { font-size:17px; gap:8px }
  .brand-mark { width:30px; height:30px }
  .brand small { display:none }
  #sidebar { grid-column:1; grid-row:2 }
  #stage { grid-column:2; grid-row:2; border-bottom:0 }
  .search-section,#sidebar.has-selection .search-section { padding:16px }
  .welcome,#details { padding:18px 16px }
  .map-toolbar { top:12px; left:12px; right:12px; gap:8px }
  .world-button { max-width:calc(100% - 190px); min-width:44px; padding:10px; gap:6px }
  #mapLocation { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .world-button>span:last-child { display:none }
  .map-caption,.map-help,.map-scale { display:none }
  .map-bottom { left:12px; bottom:18px; max-width:calc(100% - 62px) }
  .map-key-content { max-height:min(260px,max(40px,calc(100dvh - 250px))) }
}

@media(min-width:560px) and (max-width:700px) and (max-height:600px) {
  #app.reading-view { grid-template-columns:1fr; grid-template-rows:56px minmax(0,1fr) }
}

/* Keep the layer and observation controls clear of an expanded key on short maps. */
@media(max-width:700px) and (max-height:700px), (min-width:701px) and (max-height:600px) {
  .map-toolbar { gap:8px }
  .map-toolbar .world-button { flex:none; width:44px; min-width:44px; max-width:44px; height:46px; padding:0; justify-content:center }
  .world-button #mapLocation { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  .world-button>span:last-child { display:none }
  .map-layer-stack { flex:1; min-width:0; max-width:350px; flex-direction:row }
  .layer-control { position:relative; flex:1; min-width:0; padding:0 }
  .layer-control label { position:absolute; left:8px; top:5px; margin:0; font-size:9px; line-height:1; pointer-events:none }
  .layer-control select { width:100%; max-width:none; height:44px; padding:14px 4px 0; font-size:11px }
}

@media(max-width:559px) and (max-height:700px) {
  .map-key-content { max-height:clamp(40px,calc(40dvh - 150px),90px) }
}

@media(min-width:701px) {
  #app.reading-view { grid-template-columns:minmax(0,1fr) }
  #app.reading-view #stage { display:none }
  #app.reading-view #sidebar { grid-column:1; grid-row:2; border:0 }
  .reading-view .search-section,.reading-view #details,.reading-view .sidebar-footer { width:100%; max-width:780px; margin-inline:auto }
  .reading-view .reading-toolbar { position:sticky; top:0; z-index:1001; display:flex; flex-shrink:0; align-items:center; justify-content:space-between; gap:16px; width:100%; height:58px; max-width:780px; margin-inline:auto; padding:6px 26px; border-bottom:1px solid var(--border); background:var(--bg) }
  .reading-view .reading-toolbar>span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:600 }
  .reading-view .reading-toolbar button { flex-shrink:0; min-height:44px; padding:0 14px; border-radius:5px; font-size:12px; color:var(--accent) }
  .reading-view .tabs { top:58px }
  .reading-view .region-toolbar { top:103px }
  #app.reading-view .detail-grid,#app.reading-view [data-source-section],#app.reading-view .identity-section,#app.reading-view .identity-contents { scroll-margin-top:120px }
  .reading-view .region-browser .unit-btn { scroll-margin-top:208px }
  .reading-view .identity-contents { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .reading-view .identity-contents>.label { grid-column:1/-1 }
  .reading-view .detail-grid { font-size:14px }
  .reading-view .detail-grid h3 { font-size:15px }
  .reading-view .source-card p,.reading-view .detail-grid dl,.reading-view .identity-intro>p,.reading-view .identity-guide p,.reading-view .identity-section .composition-row { font-size:13px }
  .reading-view .source-card .field-note,.reading-view .identity-reference,.reading-view .identity-record-note { font-size:12px }
}

@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}