:root {
  --bg: #eef2f1;
  --card-bg: #ffffff;
  --surface-soft: #f8faf9;
  --ink: #172126;
  --muted: #65717b;
  --border: #d8e0e4;
  --accent: #31556a;
  --accent-strong: #d95f0e;
  --shadow: 0 10px 30px rgba(23, 33, 38, 0.08);
  --shadow-soft: 0 1px 2px rgba(23, 33, 38, 0.08);

  /* Editorial display face (masthead title, key numbers) with a system-serif
     fallback so the app still reads well if the web font fails to load. */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ui: "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Type scale */
  --fs-title: 27px;
  --fs-h2: 19px;
  --fs-body: 13px;
  --fs-small: 12.5px;
  --fs-label: 11px;
  --fs-caption: 10px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--bg);
}

/* Three stacked bands: masthead, theme nav, workspace. */
.app {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100vh;
}

.panel { min-height: 0; }

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---------------------------------------------------------------------------
   Band 1 - Masthead
--------------------------------------------------------------------------- */
.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
.masthead-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.fao-logo {
  flex: 0 0 auto;
  display: block;
  width: 205px;
  height: auto;
  max-height: 61px;
  object-fit: contain;
}
.brand-kicker {
  color: var(--accent-strong);
  font-size: var(--fs-label);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.brand-title {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: 600;
  line-height: 1.04;
  margin: 2px 0 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* Release-stage badge: sits beside the masthead title and inside the landing
   note. Populated by js/core/release-stage.js; hidden when no stage is set. */
.brand-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}
.release-badge {
  flex: 0 0 auto;
  padding: 2px 7px;
  border: 1px solid var(--accent-strong);
  border-radius: 999px;
  /* --accent-strong is re-pointed per theme (applyThemeAccent), so the tint is
     derived from it rather than hardcoded. */
  background: transparent;
  background: color-mix(in srgb, var(--accent-strong) 10%, transparent);
  color: var(--accent-strong);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  cursor: help;
}

/* Promoted survey context selector (was a buried "Survey" card). */
.survey-controls {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}
.survey-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 14px;
}
.survey-field + .survey-field {
  border-left: 1px solid var(--border);
}
.survey-field label {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.survey-field select {
  width: auto;
  min-width: 130px;
  border: none;
  background: transparent;
  padding: 2px 22px 2px 0;
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2365717b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
}
.survey-field select:disabled {
  color: var(--muted);
  cursor: default;
}
.survey-field--admin select { min-width: 160px; }
.survey-controls[data-busy="true"] { opacity: 0.65; }

/* Rich single-choice picker (js/ui/rich-select.js) used for country + round.
   It mirrors a native select that stays in the DOM, visually hidden, so the
   button below has to reproduce the `.survey-field select` typography. */
.rsel { position: relative; min-width: 0; }
.survey-field .rsel { min-width: 130px; }
.survey-field--admin .rsel { min-width: 160px; }
.rsel-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.rsel-button {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  min-width: 0;
  padding: 2px 0;
  border: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.rsel-button:disabled { color: var(--muted); cursor: default; }
.rsel-button:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
  border-radius: 4px;
}
.rsel-title {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.rsel-meta {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.rsel-chevron {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2365717b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.rsel[data-single="true"] .rsel-chevron { opacity: 0.35; }

.rsel-list {
  position: fixed;
  z-index: 10030;
  margin: 0;
  padding: 5px;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 20px 40px rgba(16, 38, 52, 0.18);
}
.rsel-list:focus { outline: none; }
.rsel-option {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 620;
  color: var(--ink);
  cursor: pointer;
}
.rsel-option:hover,
.rsel-option--active {
  background: color-mix(in srgb, var(--accent-strong) 10%, #fff);
}
.rsel-option--selected {
  background: color-mix(in srgb, var(--accent-strong) 14%, #fff);
  font-weight: 780;
  color: var(--accent-strong);
}
.rsel-option--selected .rsel-meta { color: var(--accent-strong); opacity: 0.8; }

/* Flag icons. Decorative next to the country name; a missing or blocked image
   degrades to a two-letter chip of the same footprint. */
.flag-icon {
  flex: 0 0 auto;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  object-fit: cover;
  background: #eef2f4;
  box-shadow: 0 0 0 1px rgba(16, 38, 52, 0.16);
}
.flag-icon--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.masthead-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* On a standard desktop viewport the controls must share the space left by the
   brand rather than sizing themselves from the longest country name.  Without
   these constraints the action group is a little wider than the masthead and
   flex-wrap moves the complete group to a second row. */
@media (min-width: 1500px) {
  .masthead {
    flex-wrap: nowrap;
  }
  .masthead-brand {
    flex: 0 1 auto;
  }
  .masthead-actions {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }
  .language-control,
  .masthead-action-grid {
    flex: 0 0 auto;
  }
  .survey-controls {
    flex: 1 1 0;
    min-width: 0;
  }
  .survey-field {
    flex: 1 1 0;
    min-width: 0;
  }
  .survey-field:first-child { flex-grow: 1.7; }
  .survey-field--round { flex-grow: 0.8; }
  .survey-field--admin { flex-grow: 0.9; }
  .survey-field select,
  .survey-field--admin select {
    width: 100%;
    min-width: 0;
  }
  .survey-field .rsel,
  .survey-field--admin .rsel { width: 100%; min-width: 0; }
}
.masthead-action-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: 150px;
}
.masthead-more { position: relative; min-width: 0; }
.masthead-more summary {
  display: flex; align-items: center; justify-content: center;
  min-height: 34px; padding: 7px 8px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-soft); color: var(--accent); cursor: pointer;
  font-family: var(--font-ui); font-size: 11px; font-weight: 750;
  list-style: none;
}
.masthead-more summary::-webkit-details-marker { display: none; }
.masthead-more summary::after { content: '⌄'; margin-left: 6px; font-size: 13px; }
.masthead-more[open] summary, .masthead-more summary:hover {
  border-color: var(--accent-strong); color: var(--accent-strong);
}
.masthead-more-menu {
  position: absolute; z-index: 20; top: calc(100% + 6px); right: 0;
  display: grid; gap: 6px; width: 164px; padding: 8px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--card-bg); box-shadow: 0 10px 24px rgba(16, 38, 52, 0.16);
}
.masthead-more-menu .copy-link, .masthead-more-menu .masthead-shortcut { width: 100%; }
.copy-link {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 750;
  padding: 10px 12px;
  transition: border-color 140ms ease, color 140ms ease;
}
.masthead-action-grid .copy-link,
.masthead-shortcut,
.masthead-action-grid .team-access-button {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  padding: 7px 8px;
  box-shadow: none;
}
.masthead-shortcut {
  display: inline-flex;
  align-items: center;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.12;
  text-decoration: none;
}
.masthead-shortcut:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.copy-link:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.team-access {
  position: relative;
  min-width: 0;
}
.team-access-label {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  display: block;
  max-width: 96px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.team-access-button {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 750;
  padding: 10px 12px;
  transition: border-color 140ms ease, color 140ms ease;
}
.team-access-button:hover:not(:disabled) {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.team-access-button:disabled {
  cursor: default;
  opacity: 0.7;
}
.team-access--authed .team-access-button {
  color: var(--accent-strong);
  border-color: var(--accent-strong);
}
.team-access-message {
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 650;
  color: var(--accent-strong);
  position: absolute;
  z-index: 4;
  top: calc(100% + 4px);
  left: 0;
  width: 196px;
  max-width: none;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}
.copy-link--done {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------------------------------------------------------------------------
   Onboarding landing ("start here")
--------------------------------------------------------------------------- */
.landing {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(23, 33, 38, 0.42);
  backdrop-filter: blur(3px);
}
.landing[hidden] { display: none; }
/* First-load boot gate: the landing opens before the dashboard behind it has
   finished assembling, so it hides that shell instead of blurring it. Reopening
   the landing over a working dashboard (landing=1, visibility changes) keeps the
   translucent treatment above. */
body.landing-boot .landing {
  background: var(--bg);
  backdrop-filter: none;
}
/* Announced, never drawn: the visible wait lives on the call to action, so the
   card keeps one layout from boot to filled. */
.landing-loading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.landing-loading[hidden] { display: none; }
.landing-go[disabled] {
  cursor: progress;
  opacity: 0.55;
}

/* Boot skeleton. `landing-pending` lasts only until renderLanding() fills the
   card; it holds the real controls' footprint so nothing shifts when the
   catalogue arrives. Heights track the enhanced controls as they render inside
   the landing card: 28px rich-select button, 86px round timeline, 42px theme
   tile. */
@keyframes landing-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
.landing-skeleton-tile,
body.landing-pending .landing-selects .survey-field::after,
body.landing-pending .landing-round-field::after {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  animation: landing-skeleton-pulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .landing-skeleton-tile,
  body.landing-pending .landing-selects .survey-field::after,
  body.landing-pending .landing-round-field::after { animation: none; }
}
.landing-skeleton-tile { height: 42px; }
/* The empty native selects would otherwise show as bare boxes, then be replaced
   by their enhanced controls. */
body.landing-pending #landingCountry,
body.landing-pending #landingRound { display: none; }
body.landing-pending .landing-selects .survey-field::after {
  content: "";
  display: block;
  height: 28px;
  border-radius: 8px;
}
body.landing-pending .landing-round-field::after {
  content: "";
  display: block;
  height: 86px;
  border-radius: 8px;
}
.landing-card {
  width: min(560px, 100%);
  /* The overlay is position:fixed, so nothing scrolls the page to reach a
     bottom edge pushed past the visible area. On mobile 100vh is the *large*
     viewport (address bar hidden), which does exactly that and hides the CTA.
     dvh tracks the visible viewport; the vh line stays as the fallback. */
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 26px 28px;
}
.landing-utility-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 0.75rem;
}
.landing-utility-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.landing-guide-link {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-soft);
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 750;
  padding: 10px 12px;
  text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease;
}
.landing-guide-link:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
/* Flatten the team-access wrapper into the utility row, keeping User guide,
   DIEM Hub and Sign out on one aligned row beside the language picker. The
   signed-in name sits in the strip above the buttons, level with the
   "Language" caption, instead of taking a full-width line: as a flex item with
   flex-basis 100% it widened the actions group and pushed the whole group onto
   its own row under the language picker. The row anchors the status message. */
.landing-utility-bar { align-items: flex-end; }
.landing-utility-actions { position: relative; }
.landing-utility-actions:has(.team-access-label:not([hidden])) { padding-top: 22px; }
.landing-team-access { display: contents; }
.landing-team-access .team-access-label:not([hidden]) {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.landing-team-access .team-access-label[hidden] { display: none; }
.landing-team-access .team-access-message { left: auto; right: 0; text-align: left; }
.landing-kicker {
  color: var(--accent-strong);
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.landing-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  margin: 6px 0 0;
}
.landing-sub {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0 16px;
}
.landing-release-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-strong);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.landing-release-note .release-badge { cursor: default; }
.landing-selects {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.landing-selects .survey-field--full { flex: 1 1 auto; }
.landing-selects select { max-width: 100%; }
.landing-selects .rsel { max-width: 100%; min-width: 0; }
/* Anonymous validation notice: the selected country has configured rounds that
   are still being validated and therefore absent from the picker above. */
.landing-validation-notice {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #e2cf9a;
  border-left: 3px solid #c8922a;
  border-radius: 10px;
  background: #fdf7e8;
  color: #4a3a12;
}
.landing-validation-title {
  margin: 0 0 4px;
  font: 800 13px/1.3 var(--font-ui);
}
.landing-validation-body {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.45;
}
.landing-validation-signin {
  margin-top: 10px;
  padding: 6px 12px;
  border: 1px solid #c8922a;
  border-radius: 999px;
  background: transparent;
  color: #6b4c0c;
  font: 700 12px/1.2 var(--font-ui);
  cursor: pointer;
}
.landing-validation-signin:hover { background: #f6e9c8; }
.landing-validation-signin[disabled] { opacity: 0.6; cursor: default; }
.landing-privileges {
  margin: 14px 0 18px;
  padding: 14px 16px;
  border: 1px solid #b9dcc4;
  border-left: 4px solid #2e8b57;
  border-radius: 10px;
  background: #f1f9f3;
}
.landing-privileges-title {
  color: #1f5e3a;
  font: 800 15px/1.3 var(--font-ui);
}
.landing-privileges-check { font-weight: 900; }
.landing-privileges-intro { margin: 4px 0 0; color: #345660; font-size: 14px; }
.landing-privileges-note { margin: 0; color: #456068; font-size: 13px; }
.landing-privileges-section + .landing-privileges-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #d8e7e9;
}
.landing-privileges h3, .landing-privileges h4 { margin: 8px 0 5px; color: #345660; }
.landing-privileges h3 { font: 800 12px/1.2 var(--font-ui); text-transform: uppercase; letter-spacing: 0.05em; }
.landing-privileges h4 { font: 750 12px/1.2 var(--font-ui); }
.landing-privileges-list { margin: 0; padding-left: 18px; }
.landing-privileges-list li + li { margin-top: 4px; }

/* Round timeline: draggable "time machine" scrubber (js/ui/round-timeline.js).
   Built on a native <input type="range"> so drag, touch and keyboard (arrow
   keys, Home/End) work for free; the coloured fill and tick dots are
   custom-drawn from --rt-fill, which the widget keeps in sync with the
   thumb on every 'input' event. */
.landing-round-field {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 16px 14px;
  margin-bottom: 16px;
}
.landing-round-field > label {
  display: block;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
@property --rt-fill {
  syntax: '<percentage>';
  inherits: true;
  initial-value: 100%;
}
.rt {
  --rt-fill: 100%;
  transition: --rt-fill 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.rt-readout {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.rt-value {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 700;
  color: var(--ink);
}
.rt-period {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--accent-strong);
  letter-spacing: 0.01em;
}
/* Compact "jump to round" dropdown - the native <select> js/ui/round-timeline.js
   keeps in the DOM, moved into the readout row instead of hidden so there is
   an exact-pick alternative to dragging the scrubber. The two stay mirrored:
   picking here moves the slider, dragging the slider updates this. */
.rt-select {
  align-self: center;
  margin-left: auto;
  max-width: 45%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--border);
  border-radius: 7px;
  background-color: var(--card-bg);
  padding: 3px 22px 3px 8px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2365717b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}
.rt-select:disabled { color: var(--muted); cursor: default; opacity: 0.6; }
.rt-value.rt-bump, .rt-period.rt-bump { animation: rt-bump 0.18s ease-out; }
@keyframes rt-bump {
  0% { transform: translateY(3px); opacity: 0.45; }
  100% { transform: translateY(0); opacity: 1; }
}
.rt-track-wrap {
  position: relative;
  height: 34px;
}
.rt-range {
  display: block;
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0;
  height: 24px;
  background: transparent;
  appearance: none;
  cursor: grab;
}
.rt-range:active { cursor: grabbing; }
.rt-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    to right,
    var(--accent) 0%,
    var(--accent) var(--rt-fill),
    var(--border) var(--rt-fill),
    var(--border) 100%
  );
}
.rt-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: var(--border);
}
.rt-range::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
}
.rt-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border-radius: 50%;
  background: var(--accent-strong);
  border: 3px solid var(--card-bg);
  box-shadow: 0 1px 4px rgba(23, 33, 38, 0.35);
  transition: transform 0.12s ease;
}
.rt-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border: 3px solid var(--card-bg);
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 1px 4px rgba(23, 33, 38, 0.35);
  transition: transform 0.12s ease;
}
.rt-range:hover::-webkit-slider-thumb,
.rt-range:active::-webkit-slider-thumb { transform: scale(1.15); }
.rt-range:hover::-moz-range-thumb,
.rt-range:active::-moz-range-thumb { transform: scale(1.15); }
.rt-range:focus-visible { outline: none; }
.rt-range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.rt-range:focus-visible::-moz-range-thumb { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.rt-range:disabled { cursor: default; }
.rt-range:disabled::-webkit-slider-thumb,
.rt-range:disabled::-moz-range-thumb { background: var(--muted); }
/* One notch per round, drawn in a lane *below* the rail: the rail is opaque,
   so ticks centred on it were painted over, and the 18px thumb would cover
   any that sat within +/-9px of the centre line. Each button is a wide
   transparent hit target with the visible notch drawn by ::before, so the
   marks stay hairline-thin but stay easy to click. */
.rt-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: 25px;
  height: 9px;
  z-index: 3;
}
.rt-tick {
  position: absolute;
  top: 0;
  left: var(--rt-pos);
  width: 14px;
  height: 9px;
  margin-left: -7px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.rt-tick::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 6px;
  margin-left: -1px;
  border-radius: 1px;
  background: var(--muted);
  opacity: 0.5;
  transition: background 0.15s ease, opacity 0.15s ease, height 0.15s ease;
}
.rt-tick:hover::before { opacity: 0.9; height: 9px; }
.rt-tick--past::before { background: var(--accent); opacity: 0.85; }
.rt-tick--active::before {
  background: var(--accent-strong);
  opacity: 1;
  width: 3px;
  margin-left: -1.5px;
  height: 9px;
}
.rt-tick:disabled { cursor: default; }
.rt-tick:disabled::before { background: var(--muted); opacity: 0.35; }
.rt-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
}
.rt--single .rt-track-wrap,
.rt--single .rt-ends { display: none; }
.landing-themes-label {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 7px;
}
.landing-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 7px;
  margin-bottom: 18px;
}
.landing-theme-tile {
  --theme-accent: var(--accent-strong);
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 9px 10px;
  text-align: left;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.landing-theme-tile svg { flex: 0 0 auto; }
.landing-theme-tile:hover {
  border-color: var(--theme-accent);
  color: var(--theme-accent);
}
.landing-theme-tile:disabled,
.theme-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.landing-theme-tile[hidden],
.theme-button[hidden],
.theme-switcher-group[hidden],
.theme-switcher-divider[hidden] {
  display: none !important;
}
/* :hover must not repaint the selected tile's label in the accent it sits on. */
.landing-theme-tile--active,
.landing-theme-tile--active:hover {
  background: var(--theme-accent);
  border-color: var(--theme-accent);
  color: #fff;
}
.landing-go {
  width: 100%;
  border: none;
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  padding: 12px 16px;
  transition: background-color 140ms ease;
}
.landing-go:hover { background: var(--accent-strong); }

/* ---------------------------------------------------------------------------
   Band 2 - Theme navigation (accent-underlined tabs)
--------------------------------------------------------------------------- */
.theme-nav {
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  overflow-x: auto;
}
.theme-switcher {
  display: flex;
  align-items: stretch;
  gap: 2px;
  min-width: max-content;
}
.theme-switcher-group {
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.theme-switcher-group-label {
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: #65777a;
  font: 750 9.5px/1.1 var(--font-ui);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.theme-switcher-group--analysis .theme-switcher-group-label { color: #006b78; }
.theme-switcher-group--data .theme-switcher-group-label { color: #7a5315; }
.theme-button {
  --theme-accent: var(--accent-strong);
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 13.5px;
  font-weight: 650;
  line-height: 1.2;
  padding: 13px 15px 11px;
  white-space: nowrap;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.theme-button svg { flex: 0 0 auto; }
.theme-button:hover {
  color: var(--theme-accent);
  background: var(--surface-soft);
}
.theme-button--active {
  color: var(--theme-accent);
  border-bottom-color: var(--theme-accent);
  font-weight: 750;
}
.theme-switcher-divider {
  align-self: stretch;
  width: 1px;
  margin: 9px 7px;
  background: var(--border);
}
.theme-button--lab {
  --theme-accent: #006b78;
  color: #315f66;
  background: #f3f9f9;
}
.theme-button--aggregated-data,
.theme-button--household-data {
  --theme-accent: #9a6715;
  color: #76531e;
  background: #fffaf0;
}
.theme-button--household-data {
  --theme-accent: #7b4c9d;
  color: #694184;
  background: #faf6fc;
}
/* While a theme apply/refresh pipeline runs, dim the nav (clicks still land:
   the latest one is queued and applied when the run finishes). */
.theme-switcher--busy .theme-button { opacity: 0.55; }

/* ---------------------------------------------------------------------------
   Authorized data access
--------------------------------------------------------------------------- */
.data-access-backdrop[hidden] { display: none !important; }
.data-access-open { overflow: hidden; }
.team-welcome-link { color: #006b78; font-weight: 750; }
.team-welcome-link:hover, .team-welcome-link:focus-visible { color: #004f59; }
.data-access-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgb(13 35 45 / 0.58);
  backdrop-filter: blur(4px);
}
.data-access-dialog {
  width: min(760px, 100%);
  max-height: min(760px, calc(100vh - 48px));
  max-height: min(760px, calc(100dvh - 48px));
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 0.6);
  border-radius: 18px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 28px 80px rgb(8 30 40 / 0.3);
}
.data-access-header {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid #e2e9eb;
  background:
    radial-gradient(circle at 86% 0%, rgb(221 239 243 / 0.9), transparent 43%),
    linear-gradient(135deg, #f8fbfc, #fff);
}
.data-access-heading {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.data-access-heading h2 {
  margin: 3px 0 0;
  color: #173f4c;
  font: 800 24px/1.15 var(--font-ui);
}
.data-access-kicker {
  color: #55727a;
  font: 800 10px/1.2 var(--font-ui);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.data-access-icon {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #e4f2f4;
  color: #006b78;
}
.data-access-icon svg { width: 23px; height: 23px; }
.data-access-close {
  display: grid;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid #d7e1e4;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.82);
  color: #456068;
  cursor: pointer;
  font: 400 25px/1 var(--font-ui);
}
.data-access-close:hover,
.data-access-close:focus-visible {
  border-color: #006b78;
  color: #006b78;
  outline: none;
}
.data-access-body { padding: 22px 24px 24px; }
.data-access-intro {
  margin: 0;
  color: #52676e;
  font: 500 14px/1.55 var(--font-ui);
}
.data-access-context {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 16px 0 20px;
}
.data-access-context-pill {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 8px 11px;
  border: 1px solid #dce7e9;
  border-radius: 9px;
  background: #f7fafb;
}
.data-access-context-pill small {
  color: #6b7c82;
  font: 750 9px/1.2 var(--font-ui);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.data-access-context-pill strong {
  color: #244852;
  font: 750 13px/1.3 var(--font-ui);
}
.data-access-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.data-access-link {
  display: flex;
  min-height: 116px;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid #d9e4e6;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
  box-shadow: 0 4px 14px rgb(27 63 73 / 0.05);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.data-access-link:hover,
.data-access-link:focus-visible {
  border-color: #178093;
  outline: none;
  box-shadow: 0 9px 24px rgb(27 63 73 / 0.12);
  transform: translateY(-1px);
}
.data-access-link-copy {
  display: grid;
  gap: 6px;
}
.data-access-link-copy strong {
  color: #173f4c;
  font: 800 15px/1.25 var(--font-ui);
}
.data-access-link-copy > span {
  color: #61757b;
  font: 500 12px/1.45 var(--font-ui);
}
.data-access-link-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #006b78;
  font: 750 12px/1.2 var(--font-ui);
}
.data-access-link-arrow {
  font-size: 17px;
  line-height: 1;
}
.data-access-note,
.data-access-empty {
  margin: 18px 0 0;
  color: #6b7c82;
  font: 500 12px/1.45 var(--font-ui);
}
.data-access-empty {
  grid-column: 1 / -1;
  padding: 18px;
  border-radius: 10px;
  background: #f7fafb;
  text-align: center;
}

/* ---------------------------------------------------------------------------
   Data Lab - cross-theme analysis mode
--------------------------------------------------------------------------- */
.data-lab[hidden],
.data-lab-header[hidden],
.trends-panel[hidden],
.trends-header[hidden],
.trend-field[hidden],
#roundInfo[hidden],
.right-panel > .panel-header[hidden],
#exploreInsights[hidden],
#exploreWidgets[hidden],
.map-field-card[hidden],
.map-customize-panel[hidden],
.map-export-panel[hidden],
.map-export-frame[hidden],
.map-export-toolbar[hidden] { display: none !important; }
.data-lab-header {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 24px;
  min-width: 0;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  box-shadow: var(--shadow-soft);
}
.data-lab-header-copy {
  flex: 0 1 760px;
  min-width: 0;
}
.data-lab-operation-switcher {
  flex: 0 1 440px;
  min-width: 360px;
}
.data-lab-kicker {
  margin-bottom: 2px;
  color: #006b78;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.data-lab-header h2 {
  margin: 0 0 2px;
  color: var(--ink);
  font: 650 20px/1.15 var(--font-display);
}
.data-lab {
  display: flex;
  flex-direction: column;
  gap: 13px;
  min-height: 0;
}
.data-lab-intro {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.data-lab-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  border-radius: 7px;
  background: var(--surface-soft);
}
.data-lab-tabs-label {
  display: block;
  margin: 0 0 4px 2px;
  color: #50666b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.data-lab-tab {
  border: 0;
  border-radius: 5px;
  padding: 8px 10px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: 650 12.5px/1.2 var(--font-ui);
}
.data-lab-tab--active {
  background: var(--card-bg);
  color: #006b78;
  box-shadow: 0 1px 4px rgba(20, 45, 50, 0.13);
}
.data-lab-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fbfb;
}
.data-lab-form--scatter {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}
.data-lab-form--breakdown {
  width: min(100%, 1120px);
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.85fr);
  align-items: end;
}
.data-lab-form--breakdown .data-lab-field--outcome { grid-column: 1 / -1; }
.data-lab-form--breakdown .data-lab-swap {
  grid-column: 1 / -1;
  justify-self: start;
}
.data-lab-swap {
  border: 1px solid #bdcacc;
  border-radius: 5px;
  padding: 6px 12px;
  background: #fff;
  color: #006b78;
  cursor: pointer;
  font: 700 12px/1 var(--font-ui);
}
.data-lab-swap::before { content: '\21C4\00A0'; }
.data-lab-swap:hover:not(:disabled) { background: #edf7f7; }
.data-lab-swap:disabled { opacity: 0.5; cursor: not-allowed; }
.data-lab-form--breakdown .data-lab-run {
  grid-column: 1 / -1;
  justify-self: end;
}
.data-lab-form--scatter .data-lab-check,
.data-lab-form--scatter .data-lab-run { align-self: center; }
.data-lab-field {
  display: grid;
  gap: 5px;
  color: #30484d;
  font-size: 12px;
  font-weight: 700;
}
.data-lab-field select {
  width: 100%;
  min-width: 0;
  border: 1px solid #bdcacc;
  border-radius: 5px;
  background: #fff;
  color: var(--text);
  padding: 7px 8px;
  font: 400 12.5px/1.25 var(--font-ui);
}
.data-lab-run {
  justify-self: start;
  border: 0;
  border-radius: 5px;
  padding: 8px 13px;
  background: #006b78;
  color: #fff;
  cursor: pointer;
  font: 700 12.5px/1 var(--font-ui);
}
.data-lab-result {
  display: grid;
  gap: 10px;
}
.data-lab-loading {
  padding: 18px 12px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.data-lab-finding {
  border-left: 3px solid #006b78;
  padding: 9px 11px;
  background: #edf7f7;
  color: #24464b;
  font: 600 13px/1.45 var(--font-ui);
}
.data-lab-help {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  top: -1px;
}
.data-lab-help-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  padding: 0;
  border: 1px solid #006b78;
  border-radius: 50%;
  background: #fff;
  color: #006b78;
  cursor: pointer;
  font: 700 11px/1 var(--font-ui);
  vertical-align: middle;
}
.data-lab-help-button:hover,
.data-lab-help-button[aria-expanded="true"] { background: #006b78; color: #fff; }
.data-lab-help-popover {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: min(340px, 82vw);
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid #bdcacc;
  border-radius: 8px;
  background: #fff;
  color: #24464b;
  box-shadow: 0 8px 24px rgba(20, 50, 55, 0.18);
  font-weight: 400;
}
.data-lab-help-title {
  margin: 0 0 6px;
  color: #006b78;
  font: 700 13px/1.3 var(--font-ui);
}
.data-lab-help-heading {
  margin: 9px 0 2px;
  color: #30484d;
  font: 700 11.5px/1.3 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.data-lab-help-text {
  margin: 0;
  font: 400 12.5px/1.5 var(--font-ui);
}
.data-lab-help-more {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #e2e9ea;
}
.data-lab-help-more a {
  color: #006b78;
  font-weight: 600;
}
.data-lab-caution {
  border-radius: 5px;
  padding: 8px 10px;
  background: #fff6df;
  color: #705615;
  font-size: 11.5px;
  line-height: 1.4;
}
.data-lab-error {
  border-left: 3px solid #b4493d;
  padding: 10px 12px;
  background: #fff1ef;
  color: #7a2d25;
  font-size: 12.5px;
  line-height: 1.45;
}
.data-lab-export-actions { display: flex; justify-content: flex-end; }
.data-lab-download {
  border: 1px solid #00717e;
  border-radius: 5px;
  padding: 7px 10px;
  background: #fff;
  color: #00606b;
  cursor: pointer;
  font: 700 12px/1 var(--font-ui);
}
.data-lab-chart {
  position: relative;
  height: clamp(280px, 42vh, 470px);
  min-height: 280px;
}
.data-lab-chart--scatter {
  height: clamp(360px, 55vh, 590px);
  min-height: 360px;
  padding: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.data-lab-check {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #30484d;
  font-size: 12px;
  font-weight: 650;
}
.data-lab-check input { accent-color: #006b78; }
.data-lab-table-controls {
  display: flex;
  justify-content: flex-end;
  margin-bottom: -4px;
}
.data-lab-definitions-toggle {
  border: 0;
  padding: 3px 1px;
  background: transparent;
  color: #006b78;
  cursor: pointer;
  font: 700 11.5px/1.3 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.data-lab-definitions-toggle:hover { color: #004e58; }
.data-lab-definitions-toggle:focus-visible {
  border-radius: 3px;
  outline: 2px solid #0b7d89;
  outline-offset: 2px;
}
.data-lab-table-block {
  display: inline-block;
  width: max-content;
  max-width: 100%;
}
.data-lab-table-wrap {
  width: max-content;
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.data-lab-table {
  width: max-content;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.data-lab-table th,
.data-lab-table td {
  padding: 7px 8px;
  border-bottom: 1px solid var(--border);
  text-align: right;
  white-space: nowrap;
}
.data-lab-table th:first-child {
  text-align: left;
  white-space: normal;
}
.data-lab-group-short { display: block; }
.data-lab-group-definition {
  display: none;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 400;
  line-height: 1.4;
}
.data-lab-table--definitions .data-lab-group-definition { display: block; }
.data-lab-table thead th {
  background: var(--surface-soft);
  color: #465a5e;
  font-weight: 700;
}
.data-lab-table tbody tr:last-child > * { border-bottom: 0; }
.data-lab-method {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}
.data-lab-mode .map-title { color: #005b67; }

/* The operation switch lives in a full-width header, so it never moves when
   the analytical canvas changes between one and two columns. */
.data-lab-mode .workspace { grid-template-rows: auto minmax(0, 1fr); }
.data-lab-full-canvas .workspace { grid-template-columns: minmax(0, 1fr); }
.data-lab-full-canvas .map-wrap { display: none; }

/* ---------------------------------------------------------------------------
   Data Lab - V1/V2 potential-anomaly screening
--------------------------------------------------------------------------- */
.anomaly-lab-mode .workspace {
  grid-template-columns: minmax(360px, .82fr) minmax(620px, 1.18fr);
}
.anomaly-lab-mode.data-lab-full-canvas .workspace {
  grid-template-columns: minmax(0, 1fr);
}
.anomaly-lab-mode .data-lab-header {
  background: linear-gradient(120deg, #f3f9f8 0%, #fff 54%);
}
.anomaly-lab-mode .data-lab-operation-switcher {
  display: none;
}
.anomaly-lab-mode .data-lab-tabs { grid-template-columns: 1fr; }
.anomaly-lab-mode .survey-field--round,
.anomaly-lab-mode .survey-field--admin { display: none; }
.anomaly-lab-mode .right-panel { background: #fbfcfc; }
.anomaly-lab-mode .map-wrap,
.anomaly-lab-mode .right-panel {
  width: 100%;
  min-width: 0;
}
/* Country screening has no map and can contain hundreds of evidence rows.
   Let the document own the vertical scroll instead of trapping the table in a
   fixed-height grid rail. The existing paginated “Show more” control then
   remains reachable by keyboard, touch, wheel, and the browser scrollbar. */
.anomaly-lab-mode.data-lab-full-canvas .app {
  height: auto;
  min-height: 100vh;
}
.anomaly-lab-mode.data-lab-full-canvas .workspace {
  grid-template-rows: auto auto;
}
.anomaly-lab-mode.data-lab-full-canvas .right-panel {
  overflow-y: visible;
}
/* ADM1/ADM2 retain a bounded, sticky map while the evidence panel uses normal
   page scrolling. This avoids a nested-scroll dead end on long result sets. */
@media (min-width: 1281px) {
  .anomaly-lab-mode:not(.data-lab-full-canvas) .app {
    height: auto;
    min-height: 100vh;
  }
  .anomaly-lab-mode:not(.data-lab-full-canvas) .workspace {
    grid-template-rows: auto auto;
    align-items: start;
  }
  .anomaly-lab-mode:not(.data-lab-full-canvas) .right-panel {
    overflow-y: visible;
  }
  .anomaly-lab-mode:not(.data-lab-full-canvas) .map-wrap {
    position: sticky;
    top: 14px;
    height: min(72vh, 720px);
  }
}
.anomaly-controls {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  padding: 12px;
  border: 1px solid #cddcde;
  border-radius: 9px;
  background: linear-gradient(180deg, #f4f9f9 0%, #fff 100%);
  box-shadow: var(--shadow-soft);
}
.anomaly-field {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  color: #30484d;
  font-size: 11px;
  font-weight: 750;
}
.anomaly-field[hidden] { display: none; }
.anomaly-field--wide { grid-column: span 2; }
.anomaly-field > select,
.anomaly-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid #b9c9cc;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font: 400 12px/1.25 var(--font-ui);
  padding: 7px 8px;
}
.anomaly-field-help {
  color: #617579;
  font-size: 9.5px;
  font-weight: 500;
  line-height: 1.3;
}
.anomaly-number {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
}
.anomaly-number > span {
  color: #496267;
  font-size: 11px;
  font-weight: 800;
}
.anomaly-check {
  display: flex;
  align-items: center;
  gap: 7px;
  align-self: end;
  min-height: 32px;
  color: #30484d;
  font-size: 11.5px;
  font-weight: 650;
}
.anomaly-check input { accent-color: #006b78; }
.anomaly-controls .data-lab-run {
  align-self: end;
  justify-self: stretch;
  min-height: 32px;
}
.anomaly-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.anomaly-stat {
  min-width: 0;
  padding: 10px 11px;
  border: 1px solid #d8e1e2;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.anomaly-stat-label {
  color: #5c7074;
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.anomaly-stat-value {
  margin-top: 3px;
  color: #075f6a;
  font: 700 24px/1.05 var(--font-display);
}
.anomaly-stat-note {
  margin-top: 4px;
  overflow: hidden;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anomaly-method {
  padding: 9px 11px;
  border-left: 3px solid #d6933c;
  border-radius: 0 6px 6px 0;
  background: #fff8e9;
  color: #5e512f;
  font-size: 11px;
  line-height: 1.45;
}
.anomaly-method > strong { display: block; margin-bottom: 4px; }
.anomaly-method p { margin: 5px 0 0; }
.anomaly-map-explanation {
  padding: 9px 11px;
  border-left: 3px solid #1f7882;
  border-radius: 0 6px 6px 0;
  background: #edf7f7;
  color: #36575b;
  font-size: 11px;
  line-height: 1.45;
}
.anomaly-map-coverage {
  padding: 8px 10px;
  border-left: 3px solid #1f7882;
  border-radius: 0 5px 5px 0;
  background: #edf7f7;
  color: #36575b;
  font-size: 11px;
  line-height: 1.4;
}
.anomaly-map-coverage--caution { border-left-color: #c38a34; background: #fff7e8; color: #6b5529; }
.anomaly-breakdown,
.anomaly-results {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-soft);
}
.anomaly-breakdown { padding: 11px 12px; }
.anomaly-breakdown h3,
.anomaly-results h3 {
  margin: 0;
  color: var(--ink);
  font: 650 15px/1.2 var(--font-display);
}
.anomaly-breakdown-row {
  display: grid;
  grid-template-columns: minmax(120px, .9fr) minmax(80px, 1.4fr) 34px;
  align-items: center;
  gap: 8px;
  margin-top: 7px;
  color: #40575b;
  font-size: 10.5px;
}
.anomaly-breakdown-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anomaly-breakdown-track {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f1;
}
.anomaly-breakdown-bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e9b75c, #b74e43);
}
.anomaly-results { overflow: hidden; }
.anomaly-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border-bottom: 1px solid var(--border);
}
.anomaly-results-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 10.5px;
}
.anomaly-table-wrap {
  max-width: 100%;
  /* The page owns vertical scrolling so every evidence row remains reachable. */
  overflow-x: auto;
  overflow-y: visible;
}
.anomaly-table {
  width: 100%;
  min-width: 960px;
  table-layout: fixed;
  border-collapse: collapse;
  color: #33494d;
  font-size: 10.5px;
}
.anomaly-table th,
.anomaly-table td {
  padding: 7px 8px;
  border-bottom: 1px solid #e1e7e8;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}
.anomaly-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f2f6f6;
}
.anomaly-table th:nth-child(1) { width: 72px; }
.anomaly-table th:nth-child(2) { width: 145px; }
.anomaly-table th:nth-child(3) { width: 230px; }
.anomaly-table th:nth-child(4),
.anomaly-table th:nth-child(5),
.anomaly-table th:nth-child(6),
.anomaly-table th:nth-child(7),
.anomaly-table th:nth-child(8) { width: 94px; }
.anomaly-table th:nth-child(9) { width: 78px; }
.anomaly-table th:last-child,
.anomaly-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: #fff;
  box-shadow: -6px 0 8px -8px rgba(31, 55, 60, .65);
}
.anomaly-table th:last-child { z-index: 2; background: #f2f6f6; }
.anomaly-table tbody tr:hover td:last-child { background: #f7fbfb; }
.anomaly-table th:nth-child(2),
.anomaly-table th:nth-child(3),
.anomaly-table td:nth-child(2),
.anomaly-table td:nth-child(3) { text-align: left; }
.anomaly-table td:nth-child(2) small,
.anomaly-table td:nth-child(3) small {
  display: block;
  max-width: 250px;
  margin-top: 2px;
  overflow: hidden;
  color: var(--muted);
  text-overflow: ellipsis;
}
.anomaly-indicator-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.anomaly-lab-mode .data-lab-kicker:empty { display: none; }
.anomaly-table tbody tr:hover { background: #f7fbfb; }
.anomaly-table tbody tr:last-child td { border-bottom: 0; }
.anomaly-row--selected { background: #eaf5f5; }
.anomaly-sort {
  border: 0;
  padding: 0;
  background: transparent;
  color: #52666a;
  cursor: pointer;
  font: 750 10px/1.2 var(--font-ui);
}
.anomaly-sort--active { color: #006b78; }
.anomaly-severity {
  display: inline-block;
  min-width: 38px;
  padding: 3px 6px;
  border-radius: 999px;
  text-align: center;
  font-weight: 850;
}
.anomaly-severity--low { background: #faedc6; color: #725816; }
.anomaly-severity--medium { background: #f7d4ae; color: #884c17; }
.anomaly-severity--high { background: #f3c2bd; color: #8a3028; }
.anomaly-value--exceeded {
  color: #9b342d;
  font-weight: 800;
  background: #fff7f5;
}
.anomaly-area-link,
.anomaly-trend-link {
  border: 0;
  padding: 2px 0;
  background: transparent;
  color: #006b78;
  cursor: pointer;
  font: 750 10.5px/1.2 var(--font-ui);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.anomaly-area-link { display: block; text-align: left; }
.anomaly-more {
  display: block;
  margin: 10px auto;
  border: 1px solid #98b8bd;
  border-radius: 5px;
  padding: 7px 12px;
  background: #fff;
  color: #006b78;
  cursor: pointer;
  font: 750 11px/1 var(--font-ui);
}

/* ---------------------------------------------------------------------------
   Trends - frozen V1/V2 published series
--------------------------------------------------------------------------- */
.trends-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(230px, .72fr) minmax(620px, 2.28fr);
  align-items: end;
  gap: 22px;
  min-width: 0;
  padding: 13px 15px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: linear-gradient(120deg, #f3f9f8 0%, #fff 48%);
  box-shadow: var(--shadow-soft);
}
.trends-header h2 {
  margin: 0 0 3px;
  color: var(--ink);
  font: 650 21px/1.15 var(--font-display);
}
.trends-intro {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.trends-form {
  display: grid;
  grid-template-columns: minmax(120px, .8fr) minmax(220px, 1.65fr) minmax(120px, .8fr) minmax(200px, 1.35fr);
  align-items: end;
  gap: 8px;
}
.trend-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: #40575b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.trend-field select {
  width: 100%;
  min-width: 0;
  border: 1px solid #bac9ca;
  border-radius: 5px;
  padding: 7px 8px;
  background: #fff;
  color: var(--text);
  font: 500 12px/1.2 var(--font-ui);
  text-transform: none;
}
.trend-field--area { grid-column: auto; }
.trend-rolling {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  color: #38565a;
  font-size: 11px;
  font-weight: 650;
}
.trend-rolling input { accent-color: #1f6f78; }
.trends-form[aria-busy="true"] { opacity: .72; }
.trends-form :disabled { cursor: wait; }
.trends-mode .workspace { grid-template-rows: auto minmax(0, 1fr); }
.trends-mode:not(.trend-country-mode) .workspace {
  grid-template-columns: minmax(340px, 2fr) minmax(620px, 3fr);
}
.trends-mode.trend-chart-expanded .workspace {
  grid-template-columns: minmax(320px, 1fr) minmax(700px, 3fr);
}
.trends-title-help {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
}
.trend-help-button {
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #8eb1b6;
  border-radius: 50%;
  background: #fff;
  color: #176975;
  font: 800 12px/18px var(--font-ui);
  cursor: pointer;
}
.trend-info-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 7px);
  left: 0;
  width: min(430px, calc(100vw - 40px));
  padding: 13px 15px;
  border: 1px solid #afc6c9;
  border-radius: 7px;
  background: rgba(255, 255, 255, .99);
  box-shadow: var(--shadow);
  color: var(--text);
  font: 400 12px/1.45 var(--font-ui);
}
.trend-info-panel[hidden] { display: none; }
.trend-info-panel p { margin: 7px 0 0; }
.trends-mode .survey-field--round,
.trends-mode .survey-field--admin { display: none; }
.trends-mode .right-panel { background: #fbfcfc; }
.trends-panel {
  display: grid;
  gap: 12px;
  width: 100%;
  min-height: 0;
  min-width: 0;
}
.trends-panel > * { min-width: 0; }
.trends-mode.trend-country-mode .workspace { grid-template-columns: minmax(0, 1fr); }
.trends-mode.trend-country-mode .map-wrap { display: none; }
.trends-mode.trend-country-mode .right-panel {
  grid-column: 1 / -1;
  max-width: none;
  min-width: 0;
  overflow-x: hidden;
  padding: 18px clamp(16px, 4vw, 58px);
}
.trends-loading,
.trends-empty {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 220px;
  padding: 28px;
  color: var(--muted);
  text-align: center;
}
.trends-empty strong { color: var(--ink); font: 650 21px/1.2 var(--font-display); }
.trends-empty p { max-width: 620px; margin: 0; line-height: 1.5; }
.trend-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #d6e5e5;
  border-top-color: #1f6f78;
  border-radius: 50%;
  animation: trend-spin .85s linear infinite;
}
@keyframes trend-spin { to { transform: rotate(360deg); } }
.trend-context {
  display: grid;
  grid-template-columns: minmax(150px, .65fr) minmax(0, 1.35fr);
  gap: 10px;
}
.trend-context > div {
  display: grid;
  gap: 3px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.trend-context span,
.trend-stat span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.trend-context strong { color: var(--ink); font-size: 12.5px; line-height: 1.35; }
.trend-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
}
.trend-stat {
  display: grid;
  align-content: start;
  gap: 5px;
  min-height: 104px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(27, 58, 64, .045);
}
.trend-stat--primary { border-top: 3px solid #1f7882; background: #f3f9f8; }
.trend-stat strong { color: var(--ink); font: 700 25px/1 var(--font-display); }
.trend-stat small { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.trend-coverage {
  border-left: 3px solid #1f7882;
  padding: 9px 11px;
  background: #edf7f7;
  color: #36575b;
  font-size: 11px;
  line-height: 1.45;
}
.trend-coverage--caution { border-left-color: #c38a34; background: #fff7e8; color: #6b5529; }
.trend-round-coverage {
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid #d5e0e4;
  border-radius: 8px;
  background: #fff;
}
.trend-round-coverage__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.trend-round-coverage__heading span { color: #62717a; font-size: .76rem; }
.trend-round-coverage__strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 3px; }
.trend-round-cell {
  min-width: 54px;
  padding: 6px 8px;
  border: 1px solid #c8d5da;
  border-radius: 6px;
  background: #eef8f8;
  color: #174e55;
  cursor: pointer;
}
.trend-round-cell span, .trend-round-cell small { display: block; }
.trend-round-cell small { margin-top: 2px; font-size: .64rem; }
.trend-round-cell--missing { border-style: dashed; background: #f4f4f1; color: #6f716d; }
.trend-round-cell.is-active { outline: 2px solid #167f8c; outline-offset: 1px; }
.trend-round-coverage__detail {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #e1e7e9;
  font-size: .78rem;
}
.trend-round-coverage__detail span { flex: 1; }
.trend-round-coverage__detail button { white-space: nowrap; }
.trend-map-coverage {
  margin: 0 12px 8px;
  padding: 8px 10px;
  border-left: 3px solid #1f7882;
  border-radius: 0 5px 5px 0;
  background: #edf7f7;
  color: #36575b;
  font-size: 11px;
  line-height: 1.4;
}
.trend-map-coverage--caution { border-left-color: #c38a34; background: #fff7e8; color: #6b5529; }
.trend-chart-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  height: clamp(300px, 43vh, 500px);
  min-height: 300px;
  padding: 10px 7px 2px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.trend-chart-canvas {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.trend-chart-point-popup {
  position: absolute;
  z-index: 8;
  width: 220px;
  padding: 10px;
  border: 1px solid #9ab8bc;
  border-radius: 7px;
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 11px;
  line-height: 1.4;
}
.trend-chart-point-popup[hidden] { display: none; }
.trend-chart-point-popup strong,
.trend-chart-point-popup span { display: block; }
.trend-chart-point-popup button {
  width: 100%;
  margin-top: 8px;
  border: 1px solid #7da7ad;
  border-radius: 5px;
  padding: 6px 8px;
  background: #eff8f8;
  color: #155d68;
  font: 750 11px/1.2 var(--font-ui);
  cursor: pointer;
}
.trend-chart-tools,
.trend-map-options { position: relative; z-index: 2; }
.trend-chart-tools {
  position: absolute;
  top: 9px;
  right: 9px;
}
.trend-frame-options {
  border: 1px solid #b8c9cc;
  border-radius: 5px;
  padding: 6px 9px;
  background: rgba(255, 255, 255, .96);
  color: #28566b;
  box-shadow: var(--shadow-soft);
  font: 700 11px/1.2 var(--font-ui);
  cursor: pointer;
}
.trend-frame-options:hover { background: #f2f8f8; }
.trend-options-panel {
  position: absolute;
  z-index: 6;
  display: grid;
  gap: 9px;
  min-width: 220px;
  padding: 11px;
  border: 1px solid #b8c9cc;
  border-radius: 7px;
  background: rgba(255, 255, 255, .98);
  box-shadow: var(--shadow);
}
.trend-options-panel[hidden] { display: none; }
.trend-options-panel--chart,
.trend-options-panel--map { top: calc(100% + 6px); right: 0; }
.trend-option-field {
  display: grid;
  gap: 4px;
  color: #40575b;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.trend-option-field select,
.trend-option-field input {
  width: 100%;
  border: 1px solid #bac9ca;
  border-radius: 5px;
  padding: 7px 8px;
  background: #fff;
  color: var(--text);
  font: 500 12px/1.2 var(--font-ui);
  text-transform: none;
}
.trend-options-panel .trend-rolling { min-height: 0; }
.trend-options-heading {
  display: grid;
  gap: 2px;
  margin: -11px -11px 2px;
  padding: 11px;
  border-bottom: 1px solid #d5e0e4;
  background: #f4f8f8;
}
.trend-options-heading[hidden] { display: none; }
.trend-options-heading strong {
  color: #234d54;
  font: 700 13px/1.2 var(--font-ui);
}
.trend-options-heading span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.trend-option-field[hidden],
.trend-option-note[hidden] { display: none; }
.trend-seasonal-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}
.trend-seasonal-toggle .trend-rolling { flex: 1; }
.trend-inline-help {
  display: inline-grid;
  width: 17px;
  height: 17px;
  margin-left: 3px;
  place-items: center;
  border: 1px solid #7da7ad;
  border-radius: 50%;
  padding: 0;
  background: #eff8f8;
  color: #155d68;
  font: 800 11px/1 var(--font-ui);
  cursor: pointer;
}
.trend-help-popup {
  position: relative;
  padding: 10px 26px 10px 10px;
  border: 1px solid #9ab8bc;
  border-radius: 6px;
  background: #f6fbfb;
  color: #36575b;
  font-size: 10.5px;
  line-height: 1.45;
}
.trend-help-popup[hidden] { display: none; }
.trend-help-popup > button {
  position: absolute;
  top: 4px;
  right: 6px;
  border: 0;
  background: transparent;
  color: #53646d;
  cursor: pointer;
  font-size: 16px;
}
.trend-help-popup strong { display: block; margin-bottom: 4px; color: var(--text); }
.trend-help-popup p { margin: 0; }
.trend-option-note {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
.trends-mode.trend-country-mode .trend-chart-wrap {
  height: clamp(300px, 40vh, 430px);
}
.trends-mode:not(.trend-country-mode) .trend-chart-wrap {
  height: clamp(370px, 48vh, 460px);
}
.trend-chart-wrap--docked-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(220px, 22vw, 260px);
  gap: 12px;
  padding: 12px;
}
.trend-chart-wrap--docked-options .trend-chart-canvas {
  grid-column: 1;
  min-width: 0;
}
.trend-chart-wrap--docked-options .trend-chart-tools {
  position: static;
  grid-column: 2;
  width: auto;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.trend-chart-wrap--docked-options .trend-options-panel--chart {
  position: static;
  width: 100%;
  min-width: 0;
  height: fit-content;
  box-sizing: border-box;
  box-shadow: none;
}
.trend-export-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.trend-export-status {
  padding: 8px 10px;
  border-left: 3px solid #b95745;
  background: #fff1ee;
  color: #71392f;
  font-size: 11px;
  line-height: 1.4;
}
.trend-table-wrap {
  max-width: 100%;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
.trend-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.trend-table th,
.trend-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); text-align: right; white-space: nowrap; }
.trend-table th:first-child,
.trend-table td:first-child { text-align: left; }
.trend-table thead th { position: sticky; top: 0; background: var(--surface-soft); color: #465a5e; }
.trend-table-missing { color: #8a7972; background: #fcf7f5; font-style: italic; }
.trend-method { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }

/* ---------------------------------------------------------------------------
   Band 3 - Workspace (map + insights rail)
--------------------------------------------------------------------------- */
.workspace {
  display: grid;
  /* Balanced analytical workspace: preserve a fully usable map while giving
     the lede and indicator cards enough width to compare side by side. */
  grid-template-columns: minmax(620px, 3fr) minmax(0, 2fr);
  gap: 14px;
  padding: 14px;
  min-height: 0;
  transition:
    grid-template-columns 760ms cubic-bezier(0.4, 0, 0.2, 1),
    gap 680ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Legacy V1/V2 surveys retain the shared catalogue, masthead, URL state, and
   theme navigation, but replace the native V3 map/widgets with the configured
   ArcGIS Dashboard. */
.legacy-survey-mode .workspace {
  grid-template-columns: minmax(0, 1fr);
}
/* The iframe-era view stacks resources, design, and methodology above the
   dashboard, so it cannot fit the fixed one-viewport shell: let the document
   grow and scroll instead of clipping the dashboard's bottom. */
/* `overflow-x: hidden` (fao-alignment.css) turns html/body into their own
   vertical scrollers; `clip` keeps the viewport as the scrolling element. */
html:has(> body.legacy-survey-mode),
body.legacy-survey-mode { overflow-x: clip; }
body.legacy-survey-mode { height: auto; min-height: 100%; }
body.legacy-survey-mode .app {
  height: auto;
  min-height: 100vh;
  grid-template-rows: auto auto auto auto;
}
.legacy-survey-mode .map-wrap,
.legacy-survey-mode .right-panel,
.legacy-survey-mode .data-lab-header {
  display: none;
}
.legacy-dashboard-view {
  grid-column: 1 / -1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.legacy-dashboard-view[hidden] { display: none; }
.legacy-dashboard-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}
.legacy-dashboard-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.legacy-dashboard-header h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(18px, 2vw, 24px);
}
.legacy-survey-methodology {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-strong);
  border-radius: 8px;
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.55;
  margin: 0 0 14px;
  padding: 10px 12px;
  white-space: pre-line;
}
.legacy-survey-methodology::before {
  color: var(--accent-strong);
  content: attr(data-label);
  display: block;
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}
.legacy-dashboard-open {
  flex: 0 0 auto;
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.legacy-dashboard-open:hover { text-decoration: underline; }
.legacy-dashboard-frame {
  flex: 0 0 auto;
  width: 100%;
  /* Roughly one viewport below the masthead and theme nav; ArcGIS lays out to
     the iframe height, and its content height cannot be read cross-origin. */
  height: max(640px, calc(100vh - 150px));
  border-radius: 0 0 8px 8px;
  border: 0;
  background: #fff;
}
.legacy-dashboard-unavailable {
  margin: auto;
  max-width: 560px;
  padding: 32px;
  color: var(--muted);
  text-align: center;
}
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 12px;
  transition:
    opacity 620ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 760ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 680ms cubic-bezier(0.4, 0, 0.2, 1),
    border-width 680ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 180ms ease,
    box-shadow 180ms ease;
}

/* ---------------------------------------------------------------------------
   Guided findings: dedicated narrative + single-visualization workspace
--------------------------------------------------------------------------- */
.guided-findings-mode .app {
  /* This wins over the `.app { height: auto }` mobile override on specificity,
     so the 100vh has to be mobile-safe on its own. */
  height: 100vh;
  height: 100dvh;
  min-height: 0;
}
.guided-findings-mode .workspace {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
}
.guided-findings-mode .workspace > .map-wrap,
.guided-findings-mode .workspace > .right-panel {
  display: none;
}
.guided-story-workspace {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(320px, .86fr) minmax(0, 1.8fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
}
.guided-story-workspace[hidden] { display: none; }
.guided-findings {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 38%, var(--border));
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow);
}
.guided-findings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 11px;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 65%, white), white);
}
.guided-findings-kicker {
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.guided-findings-header h2,
.guided-findings-editor h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.15;
}
.guided-findings-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}
.guided-findings-header-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
}
.guided-findings-icon-button {
  width: 34px;
  height: 34px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--ink);
  background: #fff;
  cursor: pointer;
}
.guided-findings-icon-button svg {
  display: block;
  pointer-events: none;
}
.guided-findings-icon-button:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.guided-findings-simulation {
  padding: 7px 18px;
  color: #7b4c00;
  background: #fff4d5;
  border-bottom: 1px solid #ead7a6;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .025em;
}
.guided-findings-chapters {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scroll-snap-type: y proximity;
  scrollbar-width: thin;
  outline: none;
}
.guided-findings-chapter {
  min-height: clamp(230px, 44vh, 410px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  scroll-snap-align: center;
  padding: 26px 28px;
  opacity: .43;
  transform: scale(.975);
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}
.guided-findings-chapter + .guided-findings-chapter { border-top: 1px solid var(--border); }
.guided-findings-chapter--active {
  opacity: 1;
  transform: none;
  background: #fff;
}
.guided-chapter-number {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .05em;
}
.guided-chapter-type {
  width: max-content;
  margin-top: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.guided-findings-chapter h3 {
  margin: 9px 0 7px;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.15;
}
.guided-findings-chapter p {
  margin: 0;
  color: #3f5358;
  font-size: 13.5px;
  line-height: 1.55;
}
.guided-findings-controls {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 13px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.guided-findings-timebar {
  position: relative;
  grid-column: 1 / -1;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-strong) 13%, #dfe6e7);
  box-shadow: inset 0 1px 2px rgba(24, 49, 55, .12);
}
.guided-findings-timebar-fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, var(--accent-strong), color-mix(in srgb, var(--accent-strong) 48%, #fff));
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent-strong) 45%, transparent);
}
.guided-findings-timebar--playing .guided-findings-timebar-fill::after {
  content: "";
  display: block;
  width: 36px;
  height: 100%;
  margin-left: auto;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .82));
}
.guided-findings-control,
.guided-findings-play {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  background: #fff;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.guided-findings-play {
  min-width: 80px;
  color: #fff;
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}
.guided-findings-control:disabled { opacity: .35; cursor: default; }
.guided-findings-progress { color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.guided-findings--loading .guided-findings-chapter--active::after {
  content: "Updating focused view…";
  margin-top: 10px;
  color: var(--muted);
  font-size: 10px;
}

.guided-story-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #fff;
  box-shadow: var(--shadow);
}
.guided-story-stage-header {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}
.guided-story-stage-type {
  color: var(--accent-strong);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.guided-story-stage-header h2 {
  margin: 2px 0 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 20px;
  line-height: 1.15;
}
.guided-story-stage-status {
  color: var(--muted);
  font-size: 10.5px;
  white-space: nowrap;
}
.guided-story-stage-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.guided-story-map,
.guided-story-widget,
.guided-story-text {
  width: 100%;
  height: 100%;
}
.guided-story-map[hidden],
.guided-story-widget[hidden],
.guided-story-text[hidden] { display: none; }
.guided-story-map #viewDiv {
  width: 100%;
  height: 100%;
  min-height: 480px;
}
.guided-story-widget {
  overflow: auto;
  padding: clamp(18px, 4vw, 54px);
  background:
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 35%),
    #f8faf9;
}
.guided-focused-widget {
  width: min(760px, 100%);
  min-height: 100%;
  display: grid;
  place-items: center;
  margin: 0 auto;
}
.guided-focused-widget > .widget-card {
  width: 100%;
  max-width: 760px;
  margin: 0;
  padding: clamp(18px, 3vw, 34px);
  box-shadow: 0 12px 34px rgba(28, 53, 58, .12);
}
.guided-focused-widget .widget-title {
  font-size: clamp(20px, 2.4vw, 30px);
  font-family: var(--font-display);
}
.guided-focused-widget .widget-body { min-height: 260px; }
.guided-focused-widget canvas { max-height: 420px; }
.guided-story-stage-loading {
  margin: auto;
  color: var(--muted);
  font-size: 13px;
}
.guided-story-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(34px, 8vw, 110px);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 55%, white), white 62%);
}
.guided-story-text-mark {
  width: max-content;
  margin-bottom: 18px;
  padding: 5px 9px;
  border-radius: 4px;
  color: #fff;
  background: var(--accent-strong);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .12em;
}
.guided-story-text h3 {
  max-width: 760px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.05;
}
.guided-story-text p {
  max-width: 720px;
  margin: 18px 0 0;
  color: #40575c;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.55;
}

.guided-findings-editor {
  width: min(980px, calc(100vw - 40px));
  height: min(820px, calc(100vh - 40px));
  height: min(820px, calc(100dvh - 40px));
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--ink);
  background: #fff;
  box-shadow: 0 25px 80px rgba(18, 38, 43, .35);
}
.guided-findings-editor::backdrop { background: rgba(21, 36, 40, .55); backdrop-filter: blur(2px); }
.guided-findings-editor-shell {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.guided-findings-editor-shell > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
}
.guided-findings-editor-shell > header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.guided-editor-meta,
.guided-editor-row-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(110px, .7fr);
  gap: 10px;
}
.guided-editor-meta { padding: 14px 22px; border-bottom: 1px solid var(--border); }
.guided-findings-editor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #51656a;
  font-size: 10.5px;
  font-weight: 750;
}
.guided-findings-editor input,
.guided-findings-editor select,
.guided-findings-editor textarea {
  width: 100%;
  padding: 7px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12px;
}
.guided-findings-editor textarea { min-height: 70px; resize: vertical; line-height: 1.4; }
.guided-editor-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 22px;
}
.guided-editor-toolbar button,
.guided-findings-editor footer button,
.guided-editor-row-head button {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.guided-editor-rows { flex: 1 1 auto; overflow-y: auto; padding: 0 22px 18px; }
.guided-editor-row { padding: 13px; border: 1px solid var(--border); border-radius: 7px; background: #fcfdfd; }
.guided-editor-row + .guided-editor-row { margin-top: 10px; }
.guided-editor-row-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 9px; }
.guided-editor-row-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guided-editor-wide { grid-column: span 4; }
.guided-editor-message { min-height: 20px; padding: 0 22px 6px; font-size: 11px; font-weight: 700; }
.guided-editor-message--success { color: #267040; }
.guided-editor-message--error { color: #a62c2c; }
.guided-editor-json { margin: 0 22px 10px; font-size: 11px; }
.guided-editor-json textarea { height: 150px; margin-top: 6px; font-family: Consolas, monospace; font-size: 10px; }
.guided-findings-editor footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-soft);
}
.guided-findings-editor footer .guided-editor-primary {
  color: #fff;
  border-color: var(--accent-strong);
  background: var(--accent-strong);
}

@media (max-width: 980px) {
  .guided-story-workspace { grid-template-columns: minmax(280px, .9fr) minmax(0, 1.25fr); }
}

@media (max-width: 760px) {
  .guided-findings-mode .workspace { overflow-y: auto; }
  .guided-story-workspace {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(520px, 72vh);
  }
  .guided-findings { min-height: min(520px, 64vh); }
  .guided-findings-chapter { min-height: 190px; padding: 22px; }
  .guided-findings-chapter h3 { font-size: 21px; }
  .guided-findings-control span { display: none; }
  .guided-story-widget { padding: 18px; }
  .guided-focused-widget .widget-body { min-height: 220px; }
  .guided-story-text { padding: 34px 24px; }
  .guided-editor-meta,
  .guided-editor-row-grid { grid-template-columns: 1fr; }
  .guided-editor-wide { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .guided-findings-chapter { transition: none; }
}

/* Map-export focus mode: make room before positioning begins. The rail fades
   and slides away while the map's grid track expands to the full workspace;
   removing the class restores the coordinated dashboard. */
.map-export-active .workspace {
  grid-template-columns: minmax(0, 3fr) minmax(0, 0fr);
  gap: 0;
}
.map-export-active .right-panel {
  min-width: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateX(12px);
  pointer-events: none;
  padding: 0;
  border-width: 0;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.panel-header {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-soft);
  border-radius: 8px 8px 0 0;
}
.panel-header h3 {
  margin: 0;
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.card-body { padding: 12px 14px; }

.map-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  background: #dfe7e7;
}
#viewDiv { position: absolute; inset: 0; }

/* Shared ArcGIS popup treatment. All native thematic, Trends, Anomalies, and
   Data Lab maps render through this view, so the field tables feel like part
   of the dashboard rather than the SDK default. */
#viewDiv .esri-popup__main-container {
  width: min(350px, calc(100vw - 32px));
  border: 1px solid rgb(171 194 198 / 0.92);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 16px 36px rgb(18 55 62 / 0.26);
  color: var(--text);
  font-family: var(--font-ui);
}
#viewDiv .esri-popup__header-container,
#viewDiv .esri-popup__header {
  min-height: 52px;
  padding: 0 9px 0 14px;
  border-bottom: 1px solid #dce8e9;
  background:
    radial-gradient(circle at 92% 0%, rgb(210 234 235 / 0.9), transparent 48%),
    linear-gradient(135deg, #f7fbfb, #fff);
}
#viewDiv .esri-popup__header-title {
  color: #183f48;
  font: 800 16px/1.2 var(--font-ui);
  letter-spacing: -0.01em;
}
#viewDiv .esri-popup__header-buttons { gap: 2px; }
#viewDiv .esri-popup__button {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  color: #41636b;
}
#viewDiv .esri-popup__button:hover,
#viewDiv .esri-popup__button:focus-visible {
  background: #e3f1f2;
  color: #006b78;
  outline: none;
}
#viewDiv .esri-popup__content {
  padding: 10px 13px 13px;
  background: #fff;
}
#viewDiv .esri-popup .esri-feature__content-element { margin: 0; }
#viewDiv .esri-popup .esri-feature__fields,
#viewDiv .esri-popup .esri-feature__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 5px;
}
#viewDiv .esri-popup .esri-feature__fields th,
#viewDiv .esri-popup .esri-feature__fields td,
#viewDiv .esri-popup .esri-feature__table th,
#viewDiv .esri-popup .esri-feature__table td {
  padding: 8px 9px;
  border-top: 1px solid #e2ecee;
  border-bottom: 1px solid #e2ecee;
  vertical-align: top;
  overflow-wrap: anywhere;
}
#viewDiv .esri-popup .esri-feature__fields th,
#viewDiv .esri-popup .esri-feature__table .esri-feature__field-header {
  width: 42%;
  border-left: 1px solid #e2ecee;
  border-radius: 7px 0 0 7px;
  background: #f1f7f7;
  color: #557078;
  font: 750 10px/1.35 var(--font-ui);
  letter-spacing: 0.035em;
  text-align: left;
  text-transform: uppercase;
}
#viewDiv .esri-popup .esri-feature__fields td,
#viewDiv .esri-popup .esri-feature__table .esri-feature__field-data {
  border-right: 1px solid #e2ecee;
  border-radius: 0 7px 7px 0;
  background: #fff;
  color: #254b54;
  font: 700 12px/1.35 var(--font-ui);
  font-variant-numeric: tabular-nums;
}
#viewDiv .esri-popup .esri-popup__feature-menu-item {
  border-radius: 7px;
  color: #365c64;
  font: 700 11px/1.2 var(--font-ui);
}

@media (max-width: 560px) {
  #viewDiv .esri-popup__main-container { width: min(320px, calc(100vw - 24px)); }
  #viewDiv .esri-popup .esri-feature__fields th,
  #viewDiv .esri-popup .esri-feature__table .esri-feature__field-header { width: 39%; }
}

/* Starts at left: 60px so it never overlays the esri zoom buttons (top-left,
   15px inset + ~32px wide). */
.map-topbar {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 60px;
  right: 510px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}
.trends-mode .map-topbar { right: 10px; }
.trend-map-options { margin-left: auto; }

.map-title {
  max-width: min(58%, 520px);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-strong);
  border-radius: 6px;
  box-shadow: var(--shadow-soft);
  padding: 8px 11px;
  font-size: var(--fs-body);
  font-weight: 750;
  line-height: 1.35;
  color: var(--ink);
  transition: border-color 220ms ease, transform 220ms ease;
}
.map-title[hidden] { display: none; }

/* Map field control floats top-right over the map (was a left-sidebar card). */
.map-field-card {
  position: absolute;
  z-index: 5;
  top: 10px;
  right: 10px;
  width: 480px;
  max-width: calc(100% - 20px);
  padding: 10px 11px;
  background: rgba(255, 255, 255, 0.96);
}
.map-field-card[hidden] { display: none; }

.map-tools-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  column-gap: 9px;
  row-gap: 6px;
}
.map-tools-row .advanced-field-list {
  grid-column: 1 / -1;
  grid-row: 2;
}
.map-tools-row .map-tool-button,
.map-tools-row .export-map-button { grid-row: 1; }
.map-tools-row #fieldSelect {
  grid-column: 1 / -1;
  grid-row: 3;
  display: none;
}
.map-tools-row .advanced-field-list[open] + #fieldSelect {
  display: block;
}
.export-map-button,
.map-tool-button {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 9px;
}
.export-map-button:hover,
.map-tool-button:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.map-tool-button {
  position: relative;
}
.map-tool-button--customized {
  border-color: var(--accent-strong);
  background: #fff;
}
.map-customized-badge {
  position: absolute;
  top: -8px;
  right: -6px;
  overflow: hidden;
  width: 8px;
  height: 8px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--accent-strong);
  color: transparent;
}

/* Map export: settings are non-modal so the map remains available. Position
   mode replaces them with a fixed page-aspect frame and a compact toolbar. */
.map-export-panel {
  position: absolute;
  z-index: 7;
  top: var(--map-tool-panel-top, 66px);
  right: 10px;
  width: 350px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 86px);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent-strong);
  border-radius: 9px;
  box-shadow: 0 16px 38px rgba(23, 33, 38, 0.2);
  padding: 14px;
}
.map-customize-panel {
  position: absolute;
  z-index: 7;
  top: var(--map-tool-panel-top, 66px);
  right: 10px;
  width: 390px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 86px);
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent-strong);
  border-radius: 9px;
  box-shadow: 0 16px 38px rgba(23, 33, 38, 0.2);
  padding: 14px;
}
.map-ranking-panel {
  position: absolute;
  z-index: 7;
  top: var(--map-tool-panel-top, 66px);
  right: 10px;
  width: 390px;
  max-width: calc(100% - 20px);
  max-height: calc(100% - 86px);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent-strong);
  border-radius: 9px;
  box-shadow: 0 16px 38px rgba(23, 33, 38, 0.2);
  padding: 14px;
}
.map-export-panel[hidden],
.map-customize-panel[hidden],
.map-ranking-panel[hidden],
.map-export-frame[hidden],
.map-export-toolbar[hidden] { display: none; }
.map-export-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.map-export-kicker {
  color: var(--accent-strong);
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.map-export-header h2 {
  font-family: var(--font-display);
  font-size: 21px;
  line-height: 1.1;
  margin: 2px 0 0;
}
.map-export-icon-button {
  border: none;
  background: transparent;
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  padding: 5px 9px;
  margin: -5px -7px 0 0;
}
.map-export-icon-button:hover {
  background: var(--surface-soft);
  color: var(--accent-strong);
}
.map-ranking-summary {
  display: grid;
  gap: 3px;
  margin: -2px 0 10px;
}
.map-ranking-summary strong { color: var(--ink); font-size: 13px; line-height: 1.35; }
.map-ranking-summary span { color: var(--muted); font-size: 11px; }
.map-ranking-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 9px;
}
.map-ranking-controls span { color: var(--muted); font-size: 10.5px; line-height: 1.35; }
.map-ranking-controls button {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font: 750 11px var(--font-ui);
  padding: 6px 8px;
}
.map-ranking-controls button:hover { border-color: var(--accent-strong); }
.map-ranking-table-wrap {
  max-height: min(520px, calc(100vh - 285px));
  overflow-y: auto;
  margin: 0 -5px -4px;
}
.map-ranking-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.map-ranking-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  background: #fff;
  color: var(--muted);
  font-size: 9.5px;
  letter-spacing: 0.05em;
  padding: 7px 6px;
  text-align: left;
  text-transform: uppercase;
}
.map-ranking-table th:first-child { width: 44px; text-align: center; }
.map-ranking-table th:last-child { width: 92px; text-align: right; }
.map-ranking-table tbody tr {
  border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  cursor: pointer;
  outline: none;
}
.map-ranking-table tbody tr:hover,
.map-ranking-table tbody tr:focus-visible { background: color-mix(in srgb, var(--accent-strong) 7%, #fff); }
.map-ranking-table tbody tr:focus-visible { box-shadow: inset 0 0 0 2px var(--accent-strong); }
.map-ranking-row--selected { background: color-mix(in srgb, var(--accent-strong) 12%, #fff); font-weight: 750; }
.map-ranking-table td { position: relative; padding: 8px 6px; font-size: 11.5px; vertical-align: middle; }
.map-ranking-rank { color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.map-ranking-name { display: flex; align-items: center; gap: 7px; min-width: 0; }
.map-ranking-name > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-ranking-swatch {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(31, 41, 51, 0.2);
  border-radius: 2px;
  background: var(--rank-color);
}
.map-ranking-value { overflow: hidden; text-align: right; font-variant-numeric: tabular-nums; }
/* Covered area without a resolvable value: same hatch as the map symbol. */
.map-ranking-swatch--hatched {
  background: repeating-linear-gradient(45deg, #ffffff 0 2px, rgba(96, 108, 118, 0.85) 2px 3px);
}
.map-ranking-row--no-value .map-ranking-value { color: #6b7a82; font-style: italic; }
.map-ranking-value::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 4px;
  width: var(--rank-bar);
  height: 3px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent-strong) 42%, transparent);
}
.map-ranking-value span { position: relative; }
.map-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}
.map-export-field--wide { grid-column: 1 / -1; }
.map-export-field span {
  display: block;
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.map-export-field input,
.map-export-field select {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  padding: 7px 8px;
}
.map-customize-field { margin-bottom: 10px; }
.map-customize-field[hidden] { display: none; }
.map-customize-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.map-customize-label-row label {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
  text-transform: uppercase;
}
.map-info-button {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  padding: 0;
}
.map-info-button:hover,
.map-info-button[aria-expanded="true"] {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.map-customize-field small {
  display: block;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.35;
  margin-top: 4px;
}
.map-classification-info {
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: #f8faf9;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 7px;
  padding: 8px 9px;
}
.map-classification-info[hidden] { display: none; }
.map-classification-info p {
  margin: 0;
}
.map-classification-info p + p {
  color: var(--muted);
  margin-top: 4px;
}
.map-ramp-fieldset {
  border: 0;
  margin: 2px 0 10px;
  padding: 0;
}
.map-ramp-fieldset legend {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.05em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.map-ramp-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.map-ramp-choice {
  display: grid;
  gap: 3px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 10.5px;
  padding: 5px;
  text-align: left;
}
.map-ramp-choice[aria-pressed="true"] {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 1px var(--accent-strong);
}
.map-ramp-swatch {
  display: block;
  height: 12px;
  border: 1px solid rgba(31, 41, 51, 0.12);
  border-radius: 3px;
}
.map-reverse-control {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 650;
  margin: 7px 0 0;
}
.map-reverse-control input { margin: 0; }
.map-style-validation {
  min-height: 15px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
  margin: 2px 0 4px;
}
.map-style-validation--error { color: #9b3434; font-weight: 700; }
.map-distribution-preview {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10.5px;
  margin: 3px 0 12px;
  padding: 8px;
}
.map-preview-heading { color: var(--ink); font-weight: 700; margin-bottom: 6px; }
.map-preview-note { color: #8a6122; margin-bottom: 5px; }
.map-preview-row {
  display: grid;
  grid-template-columns: 13px 1fr 24px;
  gap: 6px;
  align-items: center;
  min-height: 12px;
}
.map-preview-swatch { width: 11px; height: 9px; border: 1px solid rgba(31, 41, 51, 0.15); }
.map-preview-track { display: block; height: 6px; border-radius: 3px; background: #e0e7e9; overflow: hidden; }
.map-preview-bar { display: block; height: 100%; border-radius: 3px; background: #6b7f88; }
.map-preview-count { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.map-customize-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}
.map-customize-actions button:not(.map-export-primary) {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 750;
  padding: 8px 10px;
}
.map-customize-actions button:hover { border-color: var(--accent-strong); }
.map-customize-action-spacer { flex: 1 1 auto; }
.map-export-checks {
  display: grid;
  gap: 7px;
  margin: 12px 0;
}
.map-export-checks label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 650;
  margin: 0;
}
.map-export-checks input { margin: 0; }
.map-export-style-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 35%, var(--border));
  border-radius: 7px;
  background: color-mix(in srgb, var(--accent-strong) 7%, #fff);
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 650;
  margin: 10px 0;
  padding: 8px 9px;
}
.map-export-style-notice[hidden] { display: none; }
.map-export-style-notice button {
  flex: 0 0 auto;
  border: 1px solid var(--accent-strong);
  border-radius: 5px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font: 750 11px var(--font-ui);
  padding: 6px 8px;
}
.map-export-style-notice button:disabled { cursor: wait; opacity: 0.6; }
.map-export-hint {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.45;
  margin-bottom: 11px;
}
.map-export-primary {
  border: none !important;
  border-radius: 7px !important;
  background: var(--accent) !important;
  color: #fff !important;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  padding: 9px 12px !important;
}
.map-export-panel > .map-export-primary { width: 100%; }
.map-export-primary:hover { background: var(--accent-strong) !important; }
.map-export-primary:disabled { cursor: wait; opacity: 0.65; }

.map-export-actions {
  display: flex;
  gap: 9px;
}
.map-export-actions .map-export-primary { flex: 1 1 auto; }
.map-export-secondary {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 800;
  padding: 9px 14px;
}
.map-export-secondary:hover { border-color: var(--accent-strong); color: var(--accent-strong); }

.map-export-frame {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  border: 3px solid #fff;
  outline: 2px solid var(--accent-strong);
  box-shadow: 0 0 0 9999px rgba(23, 33, 38, 0.48);
}
.map-export-frame span {
  position: absolute;
  top: -28px;
  left: -2px;
  border-radius: 5px 5px 0 0;
  background: var(--accent-strong);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
}
.map-export-toolbar {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 14px;
  width: min(900px, calc(100% - 28px));
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid var(--border);
  border-top: 4px solid var(--accent-strong);
  border-radius: 9px;
  box-shadow: 0 16px 38px rgba(23, 33, 38, 0.24);
  padding: 10px 12px;
}
.map-export-toolbar-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}
.map-export-toolbar-label strong { color: var(--accent); }
.map-export-toolbar-label span { color: var(--muted); font-size: 11.5px; }
.map-export-toolbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.map-export-toolbar-actions button:not(.map-export-primary) {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 750;
  padding: 8px 10px;
}
.map-export-toolbar-actions button:hover:not(:disabled) {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.map-export-toolbar-actions button:disabled { cursor: default; opacity: 0.45; }
.map-export-status {
  color: var(--muted);
  font-size: 11.5px;
  min-height: 16px;
  margin-top: 7px;
}
.map-export-status--error { color: #9b3434; font-weight: 700; }
.map-export-toolbar[data-busy="true"] button:not(.map-export-primary) {
  pointer-events: none;
  opacity: 0.5;
}
.map-export-positioning .map-field-card,
.map-export-positioning .map-topbar {
  opacity: 0;
  pointer-events: none;
}
.map-export-positioning .masthead-actions,
.map-export-positioning .theme-nav {
  opacity: 0.62;
  pointer-events: none;
}

.status {
  background: rgba(49, 85, 106, 0.94);
  color: #fff;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  box-shadow: var(--shadow-soft);
  opacity: 1;
  transition: opacity 200ms ease;
}
/* Idle "Ready" states self-dismiss; see setStatus() in js/ui/dashboard-ui.js.
   Keep this duration in sync with IDLE_STATUS_FADE_MS. */
.status--fading {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .status {
    transition: none;
  }
}

select {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: var(--fs-body);
  background: #fff;
  color: var(--ink);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

label { display: block; margin-bottom: 4px; font-weight: 600; }

.advanced-field-list summary {
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  list-style-position: inside;
  padding: 4px 0 4px 2px;
}
.advanced-field-list label {
  margin-top: 6px;
}

.small { font-size: var(--fs-small); line-height: 1.5; }
.muted { color: var(--muted); }
.top-gap-xs { margin-top: 6px; }

/* Survey summary block (collection dates / representativeness) at the top of
   the insights rail. */
.survey-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 16px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.survey-summary p { margin: 0; }
.survey-summary p:first-child { grid-column: 1 / -1; }
.survey-methodology {
  grid-column: 1 / -1;
  border-top: 1px solid var(--border);
  margin-top: 3px !important;
  padding-top: 8px;
  white-space: pre-line;
}
.survey-methodology > span {
  color: var(--accent-strong);
  display: block;
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
  text-transform: uppercase;
}
.survey-methodology-content { white-space: pre-line; }
.survey-design {
  grid-column: 1 / -1;
}
.survey-design[hidden] { display: none; }
.survey-design-details {
  border: 1px solid color-mix(in srgb, var(--accent-strong) 32%, var(--border));
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}
.survey-design-details > summary {
  align-items: center;
  color: var(--accent-strong);
  cursor: pointer;
  display: flex;
  font-size: var(--fs-small);
  font-weight: 850;
  gap: 8px;
  justify-content: space-between;
  list-style-position: inside;
  padding: 9px 10px;
}
.survey-design-title { flex: 1 1 auto; }
.survey-design-status {
  background: var(--surface-soft);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.03em;
  padding: 2px 7px;
  text-transform: uppercase;
}
.survey-methodology > summary {
  color: var(--accent-strong);
  cursor: pointer;
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.survey-design-status--published,
.survey-design-status--reviewed {
  background: color-mix(in srgb, #1d7a56 10%, #fff);
  border-color: color-mix(in srgb, #1d7a56 32%, var(--border));
  color: #176345;
}
.survey-design-body {
  border-top: 1px solid var(--border);
  padding: 10px;
}
.survey-design-review-note {
  background: color-mix(in srgb, #9d5b00 8%, #fff);
  border-left: 3px solid #9d5b00;
  color: var(--ink);
  display: grid;
  font-size: var(--fs-caption);
  gap: 3px;
  line-height: 1.45;
  margin: 0 0 10px;
  padding: 8px 9px;
}
.survey-design-review-note strong { color: #784400; }
.survey-design-summary {
  color: var(--ink);
  font-weight: 650;
  margin: 0 0 10px;
  white-space: pre-line;
}
.survey-design-facts {
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 10px;
}
.survey-design-fact {
  background: var(--surface-soft);
  border-radius: 6px;
  padding: 6px 8px;
}
.survey-design-fact dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.survey-design-fact dd { margin: 1px 0 0; }
.survey-design-section {
  border-top: 1px solid var(--border);
  padding: 9px 0 0;
}
.survey-design-section h4,
.survey-design-provenance h4 {
  color: var(--accent-strong);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
  margin: 0 0 3px;
  text-transform: uppercase;
}
.survey-design-section p,
.survey-design-provenance p {
  margin: 0 0 7px;
  white-space: pre-line;
}
.survey-design-provenance {
  border-top: 1px dashed var(--border);
  color: var(--muted);
  margin-top: 4px;
  padding-top: 9px;
}
.survey-design-source-path { overflow-wrap: anywhere; }
.survey-design-language-note {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-style: italic;
  margin: 7px 0 0;
}
.survey-design--legacy {
  margin: 0 0 14px;
}
.survey-design--legacy .survey-design-details {
  border-left: 4px solid var(--accent-strong);
}
@media (max-width: 520px) {
  .survey-design-facts { grid-template-columns: 1fr; }
  .survey-design-details > summary { align-items: flex-start; }
}
#roundInfo .empty { grid-column: 1 / -1; }
.v2-detail-control {
  margin-bottom: 9px;
  padding: 11px 12px 10px;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 32%, var(--border));
  border-radius: 10px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-strong) 8%, #fff), #fff 62%);
  box-shadow: 0 5px 16px rgba(40, 69, 84, 0.07);
}
.v2-detail-control[hidden] { display: none; }
.v2-detail-heading {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
}
.v2-detail-heading strong {
  color: var(--ink);
  display: block;
  font-size: var(--fs-small);
  line-height: 1.25;
}
.v2-detail-heading p {
  color: var(--muted);
  font-size: var(--fs-caption);
  line-height: 1.35;
  margin: 2px 0 0;
}
.v2-detail-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-strong);
  color: #fff;
}
.v2-detail-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.v2-detail-switcher {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  margin-top: 10px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-soft) 72%, #dce4e8);
}
.v2-detail-option {
  display: grid;
  gap: 1px;
  min-width: 0;
  min-height: 42px;
  padding: 6px 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease;
}
.v2-detail-option:hover:not(:disabled) { color: var(--ink); }
.v2-detail-option[aria-pressed="true"] {
  background: #fff;
  color: var(--accent-strong);
  box-shadow: 0 1px 5px rgba(35, 55, 68, 0.16);
}
.v2-detail-option:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}
.v2-detail-option:disabled { cursor: wait; opacity: 0.58; }
.v2-detail-option span {
  overflow: hidden;
  font-size: var(--fs-small);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v2-detail-option small {
  color: inherit;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.v2-detail-note {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
  margin: 7px 1px 0;
}
.survey-resources {
  margin-top: 9px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}
.survey-resources[hidden] { display: none; }
.survey-resources h3 {
  margin: 0 0 7px;
  color: var(--accent-strong);
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.survey-resource-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.survey-resource-link {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  font-size: var(--fs-small);
  font-weight: 750;
  text-decoration: none;
}
.survey-resource-link:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.survey-resources--legacy {
  margin: 0;
  border-width: 0 0 1px;
  border-radius: 0;
}

.empty {
  color: var(--muted);
  font-size: var(--fs-small);
  font-style: italic;
  padding: 8px 0;
}

.widgets { display: flex; flex-direction: column; gap: 12px; }
.widgets-group { display: flex; flex-direction: column; gap: 12px; }
.survey-overview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
}
.survey-overview .widget-card {
  box-shadow: none;
  padding: 9px 10px;
}
.widgets-primary-group:empty { display: none; }

/* The wider insights pane earns its space through comparison, not merely
   larger cards. Compact pies and single-value cards can pair; dense bar
   charts, heroes, and a lone card keep the full reading width. */
.widgets-primary-group,
.more-indicators-body,
.survey-context-body > .widgets-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}
.widgets-primary-group > .widget-card:only-child,
.more-indicators-body > .widget-card:only-child,
.survey-context-body > .widgets-group > .widget-card:only-child,
.widget-card--hero,
.widget-card--histogram,
.widget-card--meanbar,
.widget-card--battery,
.widget-card--ranked {
  grid-column: 1 / -1;
}

.more-indicators,
.survey-context {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-soft);
}
.more-indicators > summary,
.survey-context > summary {
  color: var(--accent);
  cursor: pointer;
  font-size: var(--fs-small);
  font-weight: 800;
  list-style-position: inside;
  padding: 10px 12px;
}
.more-indicators[open] > summary,
.survey-context[open] > summary {
  border-bottom: 1px solid var(--border);
}
.more-indicators-body,
.survey-context-body { padding: 12px; }
.survey-context { margin-top: 4px; }
.survey-context .widget-section { margin-top: 0; }

/* Optional-question coverage line: factual asked/not-asked context so absent
   optional widgets are never read as zero values. */
.optional-coverage {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.optional-coverage details { margin-top: 3px; }
.optional-coverage summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
  list-style-position: inside;
}
.optional-notasked-list {
  margin: 5px 0 0;
  padding-left: 20px;
}
.optional-notasked-list li { margin-bottom: 3px; }

.adm-filter-chip {
  align-items: center;
  background: #f7fbff;
  border: 1px solid #c8d7e6;
  border-left: 4px solid var(--accent-strong);
  border-radius: 8px;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 9px 10px;
}
.adm-filter-chip[hidden] { display: none; }
.adm-filter-chip-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.adm-filter-eyebrow {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.adm-filter-chip strong {
  font-size: var(--fs-body);
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.adm-filter-code {
  color: var(--muted);
  font-size: 11px;
}
.adm-filter-clear {
  background: #fff;
  border: 1px solid #c8d7e6;
  border-radius: 5px;
  color: var(--accent);
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 8px;
}
.adm-filter-clear:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

.widget-section {
  font-size: var(--fs-label);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  border-bottom: 2px solid var(--border);
  padding-bottom: 4px;
  margin-top: 6px;
  /* Clear the sticky module-nav strip when a chip jump-scrolls here.
     --module-nav-h is the strip's measured height, published by
     renderModuleNav(); the fallback covers the pre-measurement first paint. */
  scroll-margin-top: calc(var(--module-nav-h, 66px) + 12px);
}

/* Sticky module-nav strip: jump between module sections + coverage overview.
   Sits at the top of the scrolling insights panel. */
.module-nav {
  position: sticky;
  /* Pull across the scrolling panel's 12px inset so the stuck strip is flush
     with the panel top, with no transparent band above it. */
  top: -12px;
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 12px 8px;
  margin-inline: -12px;
  margin-bottom: 2px;
  background: var(--card-bg);
  border-bottom: 1px solid var(--border);
}
/* Caption naming the thematic area. flex-basis:100% forces the chips onto the
   next line inside the strip's existing flex-wrap row. */
.module-nav-label {
  flex: 0 0 100%;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 2px;
}
.module-nav-label-hint {
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
.module-nav-chip {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 5px 11px;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.module-nav-chip:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.module-nav-chip--active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
.module-nav-chip--absent {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  cursor: default;
}

.widget-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 11px 12px;
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.widget-card--hero {
  border-color: var(--accent);
  border-top: 4px solid var(--accent);
  padding: 14px 14px 13px;
  box-shadow: 0 10px 24px rgba(23, 33, 38, 0.1);
}
.widget-card--hero .widget-title {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
}
.widget-tier-tag {
  color: var(--accent-strong);
  font-size: 9.5px;
  font-weight: 850;
  letter-spacing: 0.08em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.widget-card--selected {
  border-color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px rgba(217, 95, 14, 0.24), 0 10px 22px rgba(23, 33, 38, 0.11);
  transform: translateY(-1px);
}
.widget-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: start;
}
.widget-title {
  flex: 1 1 120px;
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: 800;
  line-height: 1.25;
}
.widget-card-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 5px;
  align-items: flex-start;
  margin-left: auto;
}
.widget-subtitle { font-size: 11px; color: var(--muted); margin-top: 2px; }
.widget-question-text {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
  margin-top: 5px;
}
.widget-question-text summary {
  color: var(--accent);
  cursor: pointer;
  font-weight: 700;
}
.widget-question-text > div { padding: 4px 0 1px; }
.see-map-button,
.widget-export-button {
  border: 1px solid #cbd5df;
  border-radius: 5px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 6px 8px;
  white-space: nowrap;
}
.widget-export-control { position: relative; }
.widget-export-button {
  background: #f7f9fa;
  color: #53646d;
}
.widget-export-button::after {
  content: '▾';
  font-size: 9px;
  margin-left: 4px;
}
.see-map-button:hover:not(:disabled),
.widget-export-button:hover:not(:disabled),
.map-class-button:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.see-map-button:disabled,
.widget-export-button:disabled {
  color: #9aa6b2;
  cursor: default;
  opacity: 0.65;
}
.widget-export-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 5px);
  right: 0;
  min-width: 132px;
  padding: 4px;
  border: 1px solid #cbd5df;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(23, 33, 38, 0.16);
}
.widget-export-menu[hidden] { display: none !important; }
.widget-export-menu button {
  display: block;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #34454f;
  cursor: pointer;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.widget-export-menu button:hover,
.widget-export-menu button:focus-visible {
  background: #edf4f5;
  color: var(--accent-strong);
  outline: none;
}

/* Optional-question widgets: distinct tinted background + left accent so they
   read as clearly different from the always-present core widgets. */
.widget-card--optional {
  background: #fff7ed;
  border-color: #f0c08a;
  border-left: 4px solid var(--accent-strong);
  box-shadow: inset 0 0 0 1px rgba(217, 95, 14, 0.08);
}
.widget-card--optional.widget-card--selected {
  background: #fff1df;
  border-color: var(--accent-strong);
  box-shadow: inset 0 0 0 1px rgba(217, 95, 14, 0.26), 0 1px 4px rgba(15, 23, 32, 0.1);
}
.widget-optional-tag {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--accent-strong);
  background: #ffe1bf;
  border: 1px solid #f2bd82;
  border-radius: 3px;
  padding: 1px 6px;
  margin-bottom: 5px;
}
.widget-body { margin-top: 8px; }
.widget-chart-limit-note {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
}
.pie-widget-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 5px 14px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}
.pie-widget-legend-item {
  display: grid;
}
/* The row is a <button> where the class can be mapped and a <span> where it
   cannot, so the shared layout lives here rather than on the list item. */
.pie-widget-legend-target {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  margin: 0;
  padding: 2px 3px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: none;
  color: #46525c;
  font-family: inherit;
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.28;
  text-align: left;
}
button.pie-widget-legend-target {
  cursor: pointer;
}
button.pie-widget-legend-target:hover {
  border-color: #d8e0e6;
  background: #f4f7f9;
  color: #1d2a33;
}
button.pie-widget-legend-target:focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 1px;
}
.pie-widget-legend-target--active {
  border-color: var(--accent-strong);
  background: #fff1df;
  color: var(--accent-strong);
  font-weight: 750;
}
.pie-widget-legend-swatch {
  width: 10px;
  height: 10px;
  margin-top: 2px;
}
.pie-widget-legend-label {
  overflow-wrap: anywhere;
}
.canvas-holder { position: relative; width: 100%; }
.widget-loading {
  display: grid;
  gap: 6px;
  padding: 6px 0;
}
.skeleton-line {
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, #edf1f5 0%, #f7f9fb 45%, #edf1f5 90%);
  background-size: 220% 100%;
  animation: skeleton-pulse 1.1s ease-in-out infinite;
}
.skeleton-line--short { width: 42%; }
.skeleton-line--mid { width: 68%; }
@keyframes skeleton-pulse {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
.widget-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #7c3a3a;
  background: #fff5f5;
  border: 1px solid #e8c1c1;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
  padding: 7px 8px;
}
.widget-retry-button {
  border: 1px solid #d6a8a8;
  border-radius: 5px;
  background: #fff;
  color: #8a3f3f;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 7px;
}
.widget-retry-button:hover {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}
.comparison-note {
  background: #f8faf9;
  border: 1px solid #dde5e8;
  border-radius: 7px;
  color: var(--ink);
  display: grid;
  gap: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  margin-top: 8px;
  padding: 7px 8px;
}
.comparison-note-title {
  color: var(--accent);
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.comparison-note-sub {
  color: var(--muted);
}
.map-class-controls {
  border-top: 1px solid var(--border);
  margin-top: 8px;
  padding-top: 8px;
}
.map-class-label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 5px;
  text-transform: uppercase;
}
.map-class-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.map-class-button {
  border: 1px solid #d7dde4;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-size: 11px;
  line-height: 1.2;
  max-width: 100%;
  padding: 4px 8px;
}
.map-class-button--active {
  background: #fff1df;
  border-color: var(--accent-strong);
  color: var(--accent-strong);
  font-weight: 700;
}

/* Big key numbers use the editorial display face. */
.stat-value {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 700;
  color: var(--accent-strong);
  line-height: 1.05;
}

.caution {
  margin-top: 6px;
  font-size: 11.5px;
  color: #9a5b00;
  background: #fff4e0;
  border: 1px solid #f2d59a;
  border-radius: 6px;
  padding: 4px 8px;
}

/* Legend: only class swatches + % labels. The layer title is already blanked
   via legend layerInfos, but ArcGIS falls back to the field name ("value") for
   the element caption when legendOptions.title is empty - hide it. */
.esri-legend__layer-caption { display: none; }
#viewDiv .esri-legend {
  width: max-content !important;
  min-width: 0 !important;
  max-width: min(230px, calc(100% - 30px));
  box-sizing: content-box;
  padding-right: 12px;
  overflow-x: hidden;
}
#viewDiv .esri-legend__service {
  min-width: 0;
  padding: 10px 12px;
}
#viewDiv .esri-legend__layer {
  overflow: visible;
}
#viewDiv .esri-legend__layer-table {
  width: auto;
}
#viewDiv .esri-legend__layer-cell {
  min-width: 0;
}
#viewDiv .esri-legend__layer-cell--info {
  max-width: none;
  white-space: nowrap;
  /* This also keeps ArcGIS's intrinsic table calculation from tightening the
     label cell before the outer legend frame adds its guaranteed buffer. */
  padding-right: 12px !important;
}
/* The fallback row ("No households reported this answer, or none were
   eligible") is far longer than a class label; let it wrap inside the frame. */
#viewDiv .esri-legend__layer-row:last-child .esri-legend__layer-cell--info {
  white-space: normal;
  max-width: 165px;
  line-height: 1.3;
}
/* Trend renderers use a transparent fallback symbol because ordinary no-data
   areas are not drawn. ArcGIS still emits an empty legend row for that fallback;
   hide only that row, while retaining the separately titled selected-area
   exception symbol when one is present. */
#viewDiv .esri-legend__layer-table tr:has(.esri-legend__layer-cell--info:empty),
.trends-mode #viewDiv .esri-legend__service:first-child .esri-legend__layer-table tr:first-child {
  display: none;
}
/* ArcGIS renders a simple-renderer base polygon above every continuous colour
   ramp, even though every Trends feature is driven by the ramp's value field.
   Hide standalone symbols only inside services that contain a graduated ramp;
   the separate selected-area exception service has no ramp and keeps its
   meaningful dashed-grey polygon symbol. */
#viewDiv .esri-legend__service:has(.esri-legend__color-ramp) .esri-legend__symbol {
  display: none !important;
}

/* Mapless themes: explanatory overlay dimming the (still-alive) map view.
   The [hidden] rule is required: `display: flex` here would otherwise override
   the low-specificity UA `[hidden] { display: none }` and keep the (empty)
   overlay visible on mapped themes, whitening/blurring the map. */
.mapless-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(242, 244, 247, 0.82);
  backdrop-filter: blur(2px);
}
.mapless-overlay[hidden] { display: none; }
.mapless-box {
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-strong);
  border-radius: 8px;
  box-shadow: var(--shadow);
  font-size: var(--fs-body);
  padding: 14px 16px;
  text-align: left;
}

/* Review banner for any future work-in-progress theme. */
.review-banner {
  background: #fdf3f3;
  border: 1px solid #e4b6b6;
  border-left: 4px solid #b0578d;
  border-radius: 6px;
  color: #7c3a5e;
  font-size: 12px;
  line-height: 1.45;
  padding: 8px 10px;
}

.lede-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfa 100%);
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-soft);
  margin-bottom: 12px;
  padding: 12px;
}
.lede-header {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}
.lede-kicker {
  color: var(--accent-strong);
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.lede-header h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
}
.lede-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.lede-card {
  background: #fff;
  border: 1px solid #dde5e8;
  border-radius: 8px;
  padding: 9px 10px;
}
.lede-card-title {
  color: var(--muted);
  font-size: var(--fs-caption);
  font-weight: 850;
  letter-spacing: 0.06em;
  line-height: 1.25;
  text-transform: uppercase;
}
.lede-card-value {
  font-family: var(--font-display);
  color: var(--accent-strong);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.05;
  margin-top: 4px;
}
.lede-authored {
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.55;
}
.lede-note {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-left: 3px solid var(--border);
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.5;
  white-space: pre-line;
}
.lede-authored p { margin: 0; }
.lede-authored p + p { margin-top: 8px; }
.lede-snapshot {
  border-top: 1px solid var(--border);
  margin-top: 14px;
  padding-top: 14px;
}
.lede-snapshot .lede-header { margin-bottom: 10px; }
.lede-snapshot .lede-grid { margin-bottom: 0; }
.lede-card p {
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.42;
  margin: 5px 0 0;
}
.lede-loading {
  color: var(--muted);
  font-size: var(--fs-small);
  padding: 4px 0;
}

@media (prefers-reduced-motion: reduce) {
  .workspace,
  .card,
  .right-panel,
  .map-title,
  .theme-button,
  .widget-card {
    transition: none;
  }
  .trend-spinner { animation: none; }
  .theme-button:hover,
  .widget-card--selected {
    transform: none;
  }
  .rt { transition: none; }
  .rt-value.rt-bump, .rt-period.rt-bump { animation: none; }
}

@media (max-width: 1280px) {
  .app { height: auto; }
  .workspace {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(280px, auto);
  }
  #viewDiv { position: relative; height: 60vh; }
  .map-wrap { min-height: 60vh; }
  .right-panel { overflow-y: visible; }
  .data-lab-header { align-items: stretch; }
  .data-lab-operation-switcher { flex-basis: 410px; }
  .anomaly-lab-mode .workspace { grid-template-columns: 1fr; }
  .anomaly-controls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trends-header { grid-template-columns: 1fr; align-items: stretch; }
  .trends-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .masthead { gap: 12px; }
  .survey-controls { flex: 1 1 auto; }
  /* The insights rail no longer owns the scroll container in this layout. */
  .module-nav {
    top: 0;
    margin-inline: 0;
    padding-inline: 0;
  }
}

@media (max-width: 1050px) {
  .trends-mode:not(.trend-country-mode) .workspace {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .trend-chart-wrap--docked-options {
    height: auto !important;
    grid-template-columns: minmax(0, 1fr);
  }
  .trend-chart-wrap--docked-options .trend-chart-canvas {
    grid-column: 1;
    height: 300px;
    min-height: 330px;
  }
  .trend-chart-wrap--docked-options .trend-chart-tools {
    grid-column: 1;
    width: 100%;
  }
  .data-lab-header { flex-direction: column; }
  .data-lab-operation-switcher { width: 100%; min-width: 0; }
  .data-lab-form--scatter,
  .data-lab-form--breakdown { grid-template-columns: 1fr; }
  .data-lab-form--breakdown .data-lab-field--outcome { grid-column: auto; }
  .data-lab-form--breakdown .data-lab-run {
    grid-column: auto;
    justify-self: start;
  }
  .anomaly-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anomaly-field--wide { grid-column: 1 / -1; }
  .anomaly-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .anomaly-results-head { align-items: flex-start; flex-direction: column; }
  .trends-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trend-field--indicator,
  .trend-field--area,
  .trend-field--map { grid-column: 1 / -1; }
  .trend-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .survey-summary,
  .lede-grid,
  .widgets-primary-group,
  .more-indicators-body,
  .survey-context-body > .widgets-group {
    grid-template-columns: 1fr;
  }
  .survey-summary p:first-child,
  .trend-context,
  .trend-stat-grid { grid-template-columns: 1fr; }
  .v2-detail-switcher { grid-template-columns: 1fr; }
  .trend-chart-wrap { height: 330px; }
  .anomaly-controls,
  .anomaly-stats { grid-template-columns: 1fr; }
  .anomaly-field--wide { grid-column: auto; }
  .data-access-backdrop { padding: 12px; }
  .data-access-dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    border-radius: 14px;
  }
  .data-access-header,
  .data-access-body { padding-inline: 18px; }
  .data-access-links { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .fao-logo { width: 165px; }
  .brand-title { font-size: 23px; }
  .masthead-actions { width: 100%; }
  .survey-controls { flex-wrap: wrap; min-width: 0; }
  .survey-field { flex: 1 1 120px; min-width: 0; }
  .survey-field--admin { flex-basis: 100%; }
  .survey-field select,
  .survey-field--admin select { min-width: 0; width: 100%; }
  .survey-field .rsel,
  .survey-field--admin .rsel { min-width: 0; width: 100%; }
  .map-export-grid { grid-template-columns: 1fr; }
  .map-export-field--wide { grid-column: auto; }
  .map-export-toolbar-label { display: grid; gap: 2px; }
  .map-field-card { width: calc(100% - 20px); }
  .map-topbar { top: 72px; right: 10px; }
}
.language-control {
  display: grid;
  gap: 0.2rem;
  min-width: 7rem;
  color: var(--muted, #52636d);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.language-control select {
  min-height: 2.2rem;
  border: 1px solid #c7d0d5;
  border-radius: 0.4rem;
  background: #fff;
  color: #17394b;
  padding: 0.35rem 1.8rem 0.35rem 0.55rem;
}

.landing-language-control {
  width: 8rem;
  text-align: left;
}

/* ---------------------------------------------------------------------------
   Mobile input ergonomics

   Scoped entirely to <=720px, so desktop rendering is untouched by
   construction. Selectors deliberately repeat the ones that already win
   (`.survey-field select`, `.rt-select`, ...) rather than relying on a bare
   `select`, which would lose on specificity and silently do nothing.
--------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* iOS Safari zooms the viewport when a focused control is under 16px, and
     never zooms back out on its own. */
  select,
  textarea,
  input[type="text"],
  input[type="number"],
  .survey-field select,
  .survey-field--admin select,
  .rt-select,
  .anomaly-field input,
  .trend-option-field input {
    font-size: 16px;
  }

  /* 44px is the Apple HIG / WCAG 2.5.5 target floor; these sit at 27-34px. */
  .rsel-button,
  .survey-field select,
  .survey-field--admin select,
  .rt-select,
  .masthead-shortcut,
  .masthead-action-grid .copy-link,
  .masthead-action-grid .team-access-button,
  .export-map-button {
    min-height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   Embedded in the DIEM Hub (`.app--embedded`, set by js/core/embed-layout.js
   when the URL carries `diemEmbed=hub`)

   The Hub supplies the FAO header, so bands 1 and 2 become a single compact
   toolbar: the brand block is one small heading (built in JS - the logo,
   kicker, large title and release badge are never rendered, not merely
   hidden), and the surrounding chrome loses the breathing room it needs when
   it is the page's own masthead. Every control keeps its standalone markup and
   selectors; only spacing changes here.

   Selectors carry `.masthead.fao-header` where they must outrank the
   corporate sizing in fao-alignment.css, which loads after this file.
--------------------------------------------------------------------------- */
.app--embedded .masthead,
.app--embedded .masthead.fao-header {
  min-height: 0;
  gap: 8px 14px;
  padding: 5px 14px;
  border-bottom-width: 2px;
  box-shadow: none;
}
.app--embedded .masthead-brand {
  flex: 0 1 auto;
  gap: 8px;
}
/* Visible orientation label and the document's accessible heading in one
   element, sized as a caption rather than a masthead title. */
.embed-title {
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app--embedded .survey-field { padding: 5px 12px; }
.app--embedded .language-control { min-width: 5.6rem; }
.app--embedded .language-control select { min-height: 1.95rem; }
.app--embedded .masthead-action-grid { width: 104px; }
.app--embedded .masthead-more summary { min-height: 30px; }
.app--embedded .theme-nav { padding: 0 10px; }
.app--embedded .theme-button { padding: 8px 12px 6px; }
.app--embedded .theme-switcher-divider { margin: 6px 5px; }

/* The compact brand takes little width, so the single-row layout that
   standalone only affords at 1500px is reachable on ordinary desktop and
   tablet-landscape widths. Below this the masthead wraps exactly as it does
   standalone. */
@media (min-width: 1024px) {
  .app--embedded .masthead,
  .app--embedded .masthead.fao-header { flex-wrap: nowrap; }
  .app--embedded .masthead-actions {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
  }
  .app--embedded .language-control,
  .app--embedded .masthead-action-grid { flex: 0 0 auto; }
  .app--embedded .survey-controls { flex: 1 1 0; min-width: 0; }
  .app--embedded .survey-field { flex: 1 1 0; min-width: 0; }
  .app--embedded .survey-field:first-child { flex-grow: 1.7; }
  .app--embedded .survey-field--round { flex-grow: 0.8; }
  .app--embedded .survey-field--admin { flex-grow: 0.9; }
  .app--embedded .survey-field select,
  .app--embedded .survey-field--admin select { width: 100%; min-width: 0; }
  .app--embedded .survey-field .rsel,
  .app--embedded .survey-field--admin .rsel { width: 100%; min-width: 0; }
}

@media (max-width: 720px) {
  /* Mobile keeps the app's existing wrapping controls and the 44px touch
     floor; only the brand row stays compact. */
  .app--embedded .masthead-brand { width: 100%; }
  .app--embedded .masthead-more summary { min-height: 44px; }
}

/* ---------------------------------------------------------------------------
   Mobile map + onboarding overlay

   Everything below is inside `@media (max-width: 720px)`, so desktop rendering
   is untouched by construction.
--------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* -- Onboarding landing --------------------------------------------------
     Chrome for Android/iOS sizes `position: fixed` boxes against the *large*
     viewport (address bar hidden), so an `inset: 0` overlay centring a tall
     card pushes the bottom of that card - the "Explore this survey" CTA -
     under the browser chrome, with nothing able to scroll to it. Safari sizes
     the same box against the visible viewport, which is why it worked there.
     The overlay is therefore sized to the viewport and made the single
     scroller, in plain block flow:

     - `svh` (not `dvh`) is the *small* viewport, i.e. the height with the
       browser chrome shown. It is the one viewport unit that does not change
       while the address bar hides and reappears mid-drag, which in Chrome
       re-clamps the scroll offset and reads as the overlay bouncing back to
       the top. The `vh`/`dvh` lines stay as fallbacks for older engines.
     - `display: block` replaces the flex centring: a centred flex item taller
       than its scroll container overflows past the *top* edge, which no
       scrollbar can reach.
     - `overscroll-behavior: contain` stops the drag from chaining into the
       page behind the overlay and rubber-banding back. */
  .landing {
    display: block;
    bottom: auto;
    height: 100vh;
    height: 100dvh;
    height: 100svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px 14px calc(18px + env(safe-area-inset-bottom, 0px));
  }
  /* The page behind must not take the touch while the overlay is open. Not in
     the Hub embed, where the overlay is not an overlay at all - see below. */
  body:has(.landing:not([hidden])):not(:has(.app--embedded)) { overflow: hidden; }

  /* Embedded in the Hub, "the viewport" is the iframe, not the phone screen:
     the Hub gives the frame a height of its own, and iOS WebKit expands a frame
     to fit its content outright. Either way a viewport-fixed overlay is sized
     to something the visitor cannot see all of, and its bottom - the CTA - ends
     up below the phone screen with no scroll of its own to reach it. So in the
     embed the landing is not an overlay: it flows at the top of the frame's
     document, and the dashboard behind it is taken out of the flow (still
     rendered, so the map keeps a real size to initialise into) while it is
     open. The frame is then exactly as tall as the card, and scrolling the Hub
     page reaches the button. */
  body:has(.app--embedded) .landing {
    position: static;
    height: auto;
    min-height: 0;
    overflow: visible;
    overscroll-behavior: auto;
    padding: 12px;
    background: var(--bg);
    backdrop-filter: none;
  }
  body:has(.app--embedded):has(.landing:not([hidden])) .app {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    visibility: hidden;
  }
  .landing-card {
    /* One scroller (the overlay) instead of two nested ones: a nested scroll
       area inside a centred flex item is what strands the CTA. */
    max-height: none;
    overflow-y: visible;
    margin: 0 auto;
    padding: 20px 18px;
  }
  .landing-go { min-height: 44px; }

  /* -- Map chrome ----------------------------------------------------------
     The title, the status line and the tool buttons all floated over the top
     of the map and covered each other. On phones they become ordinary blocks
     stacked above the map, so the mapped indicator name is always readable and
     the map keeps its full 60vh for the map. */
  .map-wrap {
    display: flex;
    flex-direction: column;
    overflow: visible;
    /* Breathing room when js/main.js scrolls the map back into view after a
       widget's "see on map" tap. */
    scroll-margin-top: 8px;
  }
  .map-topbar,
  .map-field-card {
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: auto;
    max-width: none;
  }
  .map-topbar {
    order: 1;
    gap: 6px;
    padding: 8px 8px 0;
  }
  .map-title {
    max-width: none;
    width: 100%;
    background: none;
    border: 0;
    border-left: 3px solid var(--accent-strong);
    border-radius: 0;
    box-shadow: none;
    padding: 2px 0 2px 9px;
  }
  .map-field-card {
    order: 2;
    margin: 8px 8px 0;
    background: var(--surface-soft);
  }
  #viewDiv {
    order: 3;
    margin-top: 8px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    /* `svh`, not `dvh`: the map container must not grow when the address bar
       hides mid-scroll. The ArcGIS canvas is sized in pixels and does not
       always follow that growth, which leaves the map drawn short with the
       container's grey background showing underneath it. */
    height: 58vh;
    height: 58svh;
  }
  .mapless-overlay { order: 3; }

  /* Exporting a print-ready map is a desktop task; the button and its settings
     panel only crowd a phone. */
  .map-tools-row .export-map-button,
  .map-export-panel { display: none !important; }
  .map-tools-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-tools-row .advanced-field-list { grid-column: 1 / -1; grid-row: 1; }
  .map-tools-row .map-tool-button { grid-row: 2; }
  .map-tools-row #fieldSelect { grid-row: 3; }
  .map-tool-button { min-height: 44px; }

  /* Tool panels become bottom sheets: as absolute children of `.map-wrap` they
     would now sit beside the map rather than over it, and a phone has no room
     for a 390px floating card anyway. */
  .map-customize-panel,
  .map-ranking-panel {
    position: fixed;
    z-index: 30;
    inset: auto 8px 8px;
    top: auto;
    width: auto;
    max-width: none;
    max-height: 72dvh;
    border-radius: 14px;
  }

  /* -- Legend --------------------------------------------------------------
     Moved out of the map by js/map/map-manager.js (see #mapLegendDock) and laid
     out as a wrapping row under it, so no class swatch ever hides a district. */
  .map-legend-dock {
    order: 4;
    padding: 8px 10px 10px;
    background: var(--surface-soft);
    border-top: 1px solid var(--border);
  }
  .map-legend-dock[hidden] { display: none; }
  .map-legend-dock .esri-legend,
  .map-legend-dock .esri-legend__service,
  .map-legend-dock .esri-legend__layer {
    width: auto;
    max-width: none;
    padding: 0;
    background: none;
    box-shadow: none;
    overflow: visible;
  }
  .map-legend-dock .esri-legend__layer-table,
  .map-legend-dock .esri-legend__layer-body {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    width: 100%;
  }
  .map-legend-dock .esri-legend__layer-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .map-legend-dock .esri-legend__layer-cell {
    display: block;
    padding: 0 !important;
  }
  .map-legend-dock .esri-legend__layer-cell--info {
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.2;
  }
}