/* region-map.css — census panel, colour key, time slider, and popup
   table for the shared country research maps (apps/regions/_shared/).
   extracted verbatim from the per-country pages; identical in both
   forks at extraction. load after map-shell.css and maplibre-flat.css
   so these rules keep their original cascade position. */

/* census overlay chrome: centre data panel, colour key, time slider, and
   popup table. everything else comes from the shared sheet and the
   global app sheet this page forks. */
/* the census data panel drops from the centre Census button; it holds
   the options, the colour key, and the time slider */
#census-panel {
  margin-top: 4px;
  background: rgba(15, 23, 42, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 10px 14px;
  color: #cbd5e1;
  width: min(300px, 82vw);
  font-size: 12px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
}
#census-panel[hidden] { display: none; }
/* phone-only dismiss chip: hangs off the panel's top-right corner so it
   overlaps no content; a 44px hit box (style-guide touch floor) around a
   28px visual disc in the dock-close idiom. desktop keeps the settled
   chrome — the census button's caret is enough beside a pointer */
#census-close {
  display: none;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
#census-close > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #cbd5e1;
  font-size: 16px;
  line-height: 1;
}
@media (max-width: 640px) {
  #census-close { display: flex; }
  /* phones drop the panel's reference prose — the colour sentence and
     the construct note — to give the map back its screen; the wash and
     caveat disclosures stay, they change what the paint means. both
     sentences remain on desktop and in each country's overview page */
  .census-colour-note,
  .census-construct-note { display: none; }
}
/* dataset passport: the panel names its contents — source · construct on
   the first line, geography · wave on the second; generated from product
   metadata (design record: docs/development/sidebar-design-space-2026-07.md) */
#census-passport {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
#census-passport[hidden] { display: none; }
.passport-line { line-height: 1.35; }
/* a verbose provider string wraps to two lines and then stops growing */
.passport-source {
  font-weight: 600;
  color: #e2e8f0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.passport-frame { color: #94a3b8; }
/* evidence drawer: provenance one tap away without weighing down the panel */
#census-evidence {
  margin-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 6px;
}
#census-evidence[hidden] { display: none; }
#census-evidence summary { cursor: pointer; color: #94a3b8; font-weight: 600; }
#census-evidence summary:hover { color: #e2e8f0; }
/* the body scrolls on its own so long source lists never grow the panel;
   pan-y carves it out of the panel's touch-action lockdown below */
#census-evidence-body { margin-top: 6px; max-height: 180px; overflow-y: auto; touch-action: pan-y; }
.evidence-sources { margin: 0 0 6px; padding-left: 16px; }
.evidence-sources li { margin-bottom: 4px; color: #94a3b8; }
.evidence-sources a, .evidence-note a { color: #93c5fd; }
.evidence-reuse { list-style: none; margin-left: -16px; font-style: italic; }
.evidence-note { margin: 4px 0 0; color: #94a3b8; }
.census-colour-note { color: #cbd5e1; }
#census-options { display: flex; gap: 6px; margin-bottom: 8px; }
#census-options select {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}
#census-options select:focus { outline: 1px solid rgba(148, 163, 184, 0.6); }
/* place-dot visibility control: mode select plus the later-foundations
   checkbox that only period mode offers */
/* the points select moved up into the split data pill; this row now only
   carries the later-foundations checkbox, so it collapses when that is
   hidden rather than leaving an empty gap in the panel */
/* partial-layer chrome (ruled 2026-07-13): the tag rides the data pill so a
   screenshot of the map chrome carries the disclosure; the note under the
   options states the declared reason. amber signals caution without alarm. */
#census-partial-tag {
  background: rgba(217, 119, 6, 0.28);
  border: 1px solid rgba(251, 191, 36, 0.45);
  color: #fcd34d;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  align-self: center;
}
#census-partial-tag[hidden] { display: none; }
#census-partial-note {
  margin-bottom: 8px;
  padding: 6px 8px;
  border-left: 2px solid rgba(251, 191, 36, 0.55);
  background: rgba(217, 119, 6, 0.12);
  border-radius: 0 8px 8px 0;
  color: #fcd34d;
}
#census-partial-note[hidden] { display: none; }
#census-points-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
#census-points-row:not(:has(#census-points-future:not([hidden]))) { display: none; }
#census-points-row select {
  flex: 0 1 auto;
  min-width: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 12px;
  cursor: pointer;
}
#census-points-row select:focus { outline: 1px solid rgba(148, 163, 184, 0.6); }
#census-points-future {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #94a3b8;
  cursor: pointer;
  white-space: nowrap;
}
#census-points-future[hidden] { display: none; }
#census-points-future input { accent-color: #94a3b8; cursor: pointer; margin: 0; }
.census-legend-title { font-weight: 600; color: #e2e8f0; margin-bottom: 6px; }
.census-legend-bar {
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.census-legend-range { display: flex; justify-content: space-between; margin-top: 3px; color: #e2e8f0; }
.census-legend-note { margin-top: 4px; color: #94a3b8; }
/* time slider: steps the choropleth through the census years */
#census-time { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 8px; }
.census-time-row { display: flex; align-items: center; gap: 8px; }
.census-slider { flex: 1; min-width: 0; accent-color: #3b82f6; cursor: pointer; }
/* overflow backstop: label density comes from the module (it labels only
   as many years as the strip holds; unlabelled spans are empty and shrink
   to nothing), so any residue clips at the panel edge instead of riding
   over the map */
.census-ticks { display: flex; margin-top: 2px; color: #94a3b8; font-size: 11px; overflow: hidden; }
.census-ticks span { flex: 1; text-align: center; }
.census-ticks span:first-child { text-align: left; }
.census-ticks span:last-child { text-align: right; }
.census-ticks span.census-tick-active { color: #e2e8f0; font-weight: 600; }
.census-table {
  border-collapse: collapse;
  margin: 4px 0 6px;
  font-size: 12.5px;
  color: #e2e8f0;
}
.census-table th, .census-table td {
  padding: 3px 8px;
  text-align: right;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.census-table th:first-child, .census-table td:first-child { text-align: left; }
.census-table th { color: #94a3b8; font-weight: 600; }
.census-year-selected td { background: rgba(59, 130, 246, 0.18); }
/* top-left strip holds the denomination key; the census control sits front
   and centre in its own fixed container (jb 2026-07-09 — the tidied top
   strip has room again). both containers pass clicks through their empty
   flanks so map interaction beneath is preserved. */
#top-left-controls {
  position: fixed;
  left: var(--safe-left);
  top: var(--safe-top);
  z-index: 13;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
/* the data pill sits at the quarter-width mark (not dead centre) so long
   wordmarks on the right never reach it; the 340px floor keeps its left
   edge clear of the denomination-key button on mid-width screens */
#top-center-controls {
  position: fixed;
  left: max(25%, 340px);
  top: var(--safe-top);
  transform: translateX(-50%);
  z-index: 13;
  pointer-events: none;
}
/* the top-right wordmark cluster is right-anchored and reaches the screen
   centre below ~1150px; the pill drops one row down there so the two never
   collide, and recentres because 25% would clip it on a phone */
@media (max-width: 1150px) {
  #top-center-controls { top: calc(var(--safe-top) + 38px); left: 50%; }
}
/* only the buttons and the two panels catch clicks; the flanks stay
   transparent so pans and taps reach the map */
#top-left-controls button,
#top-left-controls #counts,
#top-center-controls #data-pill,
#top-center-controls #census-panel { pointer-events: auto; }
/* each wrap anchors its own drop-down panel */
#key-wrap { position: relative; }
#census-wrap { position: relative; }
/* buttons ride above the panels so both controls stay clickable even when a
   wide panel is open beneath them */
#counts-bar, #data-pill { position: relative; z-index: 20; }
/* the split data pill: census-data segment (panel toggle) and the points
   segment (place-dot mode select) share one pill so both primary data
   controls sit front and centre at equal weight */
#data-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  font-size: 14px;
  letter-spacing: 0.01em;
}
#data-pill .shell-pill-select {
  font-size: 14px;
  padding-right: 16px;
  white-space: nowrap;
}
/* panels drop below the button row, taken out of flow so opening one never
   widens the row or shoves its neighbour sideways */
#counts { position: absolute; top: 100%; left: 0; margin-top: 4px; }
/* the census panel centres under its button; translateX keeps the wide
   census-long variant on-screen because the button itself is centred */
#census-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
}
/* the census caret mirrors the Key button's disclosure idiom; the segment
   is unstyled inside the pill (the pill carries the chrome) */
#census-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  color: #e2e8f0;
  font: inherit;
}
.census-caret { color: #94a3b8; font-size: 12px; }
/* style-guide touch floor (tribunal 2026-07-17 item 5 tail): the two top
   pills reach 44px on touch screens, and the data pill's interactive
   children stretch so the whole height answers the finger, not just the
   text line. display-only children keep their centred line */
@media (pointer: coarse) {
  #data-pill, #counts-toggle { min-height: 44px; }
  #data-pill .shell-pill-select,
  #data-pill #census-toggle { align-self: stretch; }
}
.census-label-short { display: none; }
@media (max-width: 640px) {
  /* the top row is tight on phones: the key shrinks to its colour dots and
     the census button drops to its short label */
  #counts-toggle .key-label { display: none; }
  .census-label-long { display: none; }
  .census-label-short { display: inline; }
  #census-panel { width: min(300px, 76vw); }
}

/* long census series: the module thins tick labels to a strip-width
   budget by leaving spans empty (see censusTicksMarkup). the old
   visibility-hidden thinning here kept each hidden span's min-content
   width, so a 54-year series still overflowed the panel by ~790px */

/* long timelines (six or more year stops) earn a wider panel so the
   slider has room to be dragged precisely; the module adds the class */
#census-panel.census-long { width: min(560px, 92vw); }
@media (max-width: 640px) {
  #census-panel.census-long { width: min(360px, 92vw); }
}

/* pulotu cultures popup: the dataset's three headings structure the
   curated values; sources ride muted after each value, and an absent
   value says so rather than hiding the row (render the record) */
.maplibregl-popup-content .pulotu-group-title {
  margin: 8px 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #94a3b8;
}
.maplibregl-popup-content .pulotu-val { color: #e2e8f0; }
.maplibregl-popup-content .pulotu-val-missing {
  color: #94a3b8;
  font-style: italic;
}
.maplibregl-popup-content .pulotu-src {
  font-size: 11px;
  color: #94a3b8;
}

/* pulotu data-source legend: categorical swatch rows (codes the country's
   cultures actually carry, with counts), and a violet slider accent so the
   pulotu timeline never reads as the census one (measurement-diversity
   separation) */
.pulotu-legend-row {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  color: #e2e8f0;
}
.pulotu-swatch {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
}
.pulotu-legend-label { flex: 1; }
.pulotu-legend-count { color: #94a3b8; font-size: 11px; }
#census-panel.pulotu-mode .census-slider { accent-color: #6d28d9; }
.pulotu-ticks span { letter-spacing: 0.01em; }

/* touch drag (phone parity with desktop): the census control opts out of
   browser pan/zoom so a touch drag reaches the module's pointer handlers
   instead of being claimed for scrolling, and a stalled touch must not pop
   text selection or the link callout. the shared surfaces (key bar,
   wordmark, popups) carry the same rules in the global app sheet this page
   forks; only the census control is this page's own. */
#data-pill, #census-panel {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* native controls keep their own touch handling (select pickers, the time
   slider, the later-foundations checkbox); drags never start from them */
#census-panel select, #census-panel input, #data-pill select { touch-action: auto; }

/* border handoff (the travel pill): styled in the shared sheet
   (../../global/styles/maplibre-flat.css) since the global map seats the
   same control */