/* Dashboard styles. The page shell (FAO header, navigation band, footer) and the dashboard
   components are built from the Claude Design System tokens (assets/tokens.css, synced —
   never hand-edited); Bootstrap 5.3 + the FAO theme (fao-theme.min.css) provide the base
   typography and the form/table components. Only layout and app-specific rules live here.
   Responsive across phone, tablet and desktop (NFR-19, revised 2026-06-05: mobile is in
   scope), mobile-first. */

:root {
  /* Bridge Bootstrap's --bs-primary to the FAO Design System primary so any Bootstrap
     component that reads --bs-primary (badges, links, focus rings) uses FAO blue. The
     FAO theme defines --primary (#116bac) but leaves Bootstrap's default blue in place. */
  --bs-primary: var(--primary, #116bac);
  --bs-primary-rgb: 17, 107, 172;
}

/* Dashboard pages read the design-system tokens: Text-Primary on Background-Default. */
body {
  background-color: var(--Background-Default, #fff);
  color: var(--Text-Primary, #333);
}

.main-content {
  min-height: 60vh;
}

/* --- Languages (NFR-20): the six FAO official languages. Cairo is the FAO theme's Arabic
   face; Noto Sans SC covers Chinese. Arabic renders right-to-left: <html dir="rtl"> is set
   from the URL's lang (app.py); Bootstrap's LTR build is kept, so only the few physical
   directions used by the shell and the landing page are mirrored here. --- */
html[lang="ar"] body {
  font-family: Cairo, "Open Sans", sans-serif;
}
html[lang="zh"] body {
  font-family: "Noto Sans SC", "Open Sans", sans-serif;
}
[dir="rtl"] .home-card--ndc {
  background: linear-gradient(to right, var(--Context-NDC-Primary-opacity-20), rgba(255, 255, 255, 0));
}
[dir="rtl"] .home-card--nbsap {
  background: linear-gradient(to right, var(--Context-NBSAP-Primary-opacity-10), rgba(255, 255, 255, 0));
}
[dir="rtl"] .home-card__arrow,
[dir="rtl"] .home-glance__more .ds-icon--arrow-forward {
  transform: scaleX(-1);
}
[dir="rtl"] a.home-card:hover .home-card__arrow {
  transform: scaleX(-1) translateX(3px);
}
[dir="rtl"] .app-navbar .navbar-brand p {
  margin-left: 0;
  padding-left: 0;
  margin-right: 1rem;
  padding-right: 1rem;
}
[dir="rtl"] .app-beta-badge {
  margin-left: 0;
  margin-right: 0.5rem;
}
[dir="rtl"] .footer-app .footer-links li:after {
  right: auto;
  left: -6px;
}
[dir="rtl"] .footer-app .text-end {
  text-align: left !important;
}

/* =====================================================================================
   Page shell — the FAO application header and footer of the FAO Design System's
   "Dashboard minimum requirements" (design-system.fao.org), built with the theme's own
   classes (.app-navbar, .footer-app; fao-theme.min.css styles them) on Bootstrap 5.3's
   navbar and off-canvas. Only the dashboard's additions are styled here.
   ===================================================================================== */

/* The header is sticky: anchor jumps (skip link, in-page links) land below it. */
html {
  scroll-padding-top: 4rem;
}
/* The three-line FAO logo at the reference's 40px; the width follows, never distorted. */
.app-navbar .app-navbar__logo {
  height: 40px;
  width: auto;
}
/* The platform name sits in the bar from 1600 px and in the centred row under it below:
   Bootstrap's widest breakpoint (xxl, 1400 px) is too narrow for the name beside the module
   links (issue #124 — it fits from about 1560 px in English). */
.app-navbar .app-navbar__name {
  display: none;
}
@media (min-width: 1600px) {
  .app-navbar .app-navbar__name {
    display: block;
  }
  .app-title-row {
    display: none;
  }
}
/* The reference's platform-name class, which the theme does not define: Text-Color. */
.app-navbar .text-gray {
  color: var(--on-surface, #545454);
}
/* Roadmap sections and an announced module: "(soon)" at 50 % opacity (Figma), not links. */
.app-navbar .navbar-nav .nav-link.disabled {
  color: var(--Dark-Gray);
  opacity: 0.5;
  cursor: default;
}
/* No Bootstrap JS: app.py toggles .show on the off-canvas panel and on this backdrop,
   which Bootstrap's CSS only fades (its JS removes it) — keep it out of the way until shown. */
.app-navbar .offcanvas-backdrop:not(.show) {
  display: none;
}
/* BETA badge after the platform name (brand text and the small-screen title row). */
.app-beta-badge {
  margin-left: 0.5rem;
  vertical-align: middle;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
/* Share modal (header share icon): "Copy link" and "Email" lead as the common ways
   people share work, ahead of fao.org's social row below (2026-09-25, a deliberate
   content deviation from the fao.org markup this control otherwise mirrors). */
.share-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.share-modal__action {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* "Link copied" confirmation after Copy link: empty until clicked. */
.share-modal__status {
  display: block;
  margin-top: 0.5rem;
  font-size: 14px;
  color: var(--Text-Secondary);
}
.share-modal__status:empty {
  display: none;
}
.share-modal__social-label {
  margin-bottom: 0.5rem;
  font-size: 13px;
  color: var(--Text-Secondary);
}
/* Footer: flat, as the design draws it (Figma 51553:7617, 1px Border-Default rule) — the
   theme's shadow and 4rem top margin are not in it; the page owns the spacing above. */
.footer {
  margin-top: 0;
  box-shadow: none;
  border-top: 1px solid var(--Border-Default);
}
.main-content {
  padding-bottom: 2rem;
}
.main-content:has(.home-page) {
  padding-bottom: 0;
}

/* --- Filter panel --- */
.filter-panel {
  position: sticky;
  top: 4.5rem;
}
.filter-panel-title {
  margin-bottom: 1rem;
}
.filter-group {
  margin-bottom: 1rem;
}
.filter-label {
  font-weight: 600;
  font-size: 0.85rem;
  display: block;
  margin-bottom: 0.25rem;
}
.filter-hint {
  display: block;
  font-size: 0.75rem;
}

/* --- Stats bar + KPI cards --- */
.stat-card,
.kpi-card {
  border: 1px solid var(--border, #dee2e6);
}
.stat-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary, #116bac);
}
.stat-label,
.kpi-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.kpi-value {
  font-size: 1.15rem;
  font-weight: 600;
}

/* --- Graphs --- */
/* Dash 3 writes an inline `height: 100%` on every responsive dcc.Graph (Dash 2 wrote none).
   Inside a stretched flex or grid item that percentage resolves against the item, so a
   figure without its own height shrinks to nothing and a slot's class height is ignored.
   The inline value is cancelled here: a figure brings its own height, and a slot that
   dictates one sets `--graph-height` (an inline style can only be beaten by !important). */
.dash-graph {
  height: var(--graph-height, auto) !important;
}
.dashboard-graph {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #dee2e6);
  border-radius: 6px;
  margin-top: 1rem;
  padding: 0.25rem;
}

/* --- Policy appraisals page --- */
/* The landing-page map is the focus: taller than the instrument-module choropleth. The
   figure carries its own height; this guarantees a generous minimum on every breakpoint. */
.policy-map {
  min-height: 560px;
  margin-top: 0.25rem;
}
/* Map overlay-layer toggle (climate / ecological zone / soil), shown above the map. */
.policy-layer-bar {
  gap: 0.5rem 1rem;
  padding: 0.5rem 0.25rem 0;
}
.policy-layer-bar .filter-label {
  margin-bottom: 0;
}
.policy-layer-toggle .form-check {
  margin-right: 0.75rem;
}
/* Secondary line under a summary-statistic value (e.g. "N countries with a target"). */
.stat-sublabel {
  font-size: 0.72rem;
  margin-top: 0.15rem;
}

/* =====================================================================================
   Design-system components — Figma page "Desktop" (51553:7616), tokens from tokens.css
   DataDisplay_Summary (51623:1912): 32px disc + 20px glyph, 20/700 figure, Category
   label, 14px caption, Spacing-SM padding/gap. Data_Row (51623:1887): white Radius-SM
   slots, 150px, 8px apart, on a Background-Subtle panel. Glyphs are the Figma exports in
   assets/icons/, drawn through a mask so the context colour applies.
   ===================================================================================== */

/* 20px glyph coloured by the surrounding text colour. */
.ds-icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--ds-icon) center / contain no-repeat;
  mask: var(--ds-icon) center / contain no-repeat;
}
.ds-icon--description {
  --ds-icon: url("icons/description.svg");
}
.ds-icon--forest {
  --ds-icon: url("icons/forest.svg");
}
.ds-icon--globe-mosaic {
  --ds-icon: url("icons/globe-mosaic.svg");
  /* A logo, not a glyph: its colour is fixed (black as supplied) and never takes the context colour. */
  color: var(--M3-black, #000000);
}
.ds-icon--shield {
  --ds-icon: url("icons/shield.svg");
}
.ds-icon--hub {
  --ds-icon: url("icons/hub.svg");
}
.ds-icon--language {
  --ds-icon: url("icons/language.svg");
}
.ds-icon--nature {
  --ds-icon: url("icons/nature.svg");
}
.ds-icon--arrow-forward {
  --ds-icon: url("icons/arrow-forward.svg");
}
.ds-icon--close {
  --ds-icon: url("icons/close.svg");
}
.ds-icon--menu {
  --ds-icon: url("icons/menu.svg");
}
.ds-icon--house {
  --ds-icon: url("icons/house.svg");
  width: 24px;
  height: 22px;
}

/* Icon disc: 32px Radius-Full, tinted with the context's opacity token, glyph in the
   context colour (Figma: Frame 5 in Cards_Navigation / DataDisplay_Summary). */
.ds-icon-disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--Numbers-32, 32px);
  height: var(--Numbers-32, 32px);
  border-radius: var(--Radius-Full, 1000px);
  background: var(--Context-Overall-Primary-opacity-20);
  color: var(--Context-Overall-Primary);
}
.ds-icon-disc--ndc {
  background: var(--Context-NDC-Primary-opacity-20);
  color: var(--Context-NDC-Primary);
}
.ds-icon-disc--nbsap {
  background: var(--Context-NBSAP-Primary-opacity-20);
  color: var(--Context-NBSAP-Primary);
}
.ds-summary--nbsap .ds-icon-disc--nbsap {
  background: var(--Context-NBSAP-Primary-opacity-10); /* the Figma stat tiles use -10 */
}
.ds-icon-disc--neutral {
  background: var(--Background-Subtle);
  color: var(--Text-Disabled);
}

/* DataDisplay_Summary */
.ds-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start; /* disc, figure and label at a fixed height across tiles */
  gap: var(--Spacing-SM, 8px);
  padding: var(--Spacing-SM, 8px);
  border-radius: var(--Radius-SM, 8px);
  min-width: 0;
}
.ds-summary p {
  margin: 0;
}
.ds-summary__value {
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ds-summary__label {
  font: var(--text-Category);
  text-transform: uppercase;
  color: var(--Text-Primary);
}
.ds-summary__caption {
  font-size: 14px;
  line-height: normal;
  color: var(--Text-Secondary);
}

/* Data_Row: white slots side by side, two-up on phones. */
.ds-datarow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--Spacing-SM, 8px);
  width: 100%;
}
.ds-datarow__slot {
  display: flex;
  align-items: flex-start; /* tiles top-aligned so captions of any length cannot shift them */
  min-width: 0;
  min-height: 150px;
  padding: 10px;
  border-radius: var(--Radius-SM, 8px);
  background: var(--Background-Default);
}
@media (min-width: 768px) {
  .ds-datarow {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
  }
}

/* SOON badge (Cards_Navigation, Frame 8): 1.5px Border-Disabled, Radius-SM, 4x8,
   12px bold uppercase Text-Disabled. */
.ds-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--Spacing-XSM, 4px) var(--Spacing-SM, 8px);
  border-radius: var(--Radius-SM, 8px);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}
.ds-badge--soon {
  border: 1.5px solid var(--Border-Disabled);
  color: var(--Text-Disabled);
  white-space: nowrap;
}
/* A wordy badge ("Releasing at COP 31"): 10px and tighter, so it shares the title line. */
.ds-badge--compact {
  padding: 3px 6px;
  font-size: 10px;
  letter-spacing: 0;
}
/* Four cards on the 960px container (lg) leave the heading ~200px, too narrow for the
   disc, title and this badge together: the badge drops under the title instead of
   overflowing the card. From xl (1140px container) it shares the title line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .home-card__heading:has(.ds-badge--compact) {
    flex-wrap: wrap;
    row-gap: 4px;
  }
}

/* Focus ring for design-system controls: solid 2px Dark-Blue (brand book, 5.7:1). */
.home-card:focus-visible,
.home-glance__more:focus-visible {
  outline: 2px solid var(--Dark-Blue);
  outline-offset: 2px;
}

/* --- Home (Figma "Homepage" frame 51553:7617) ---
   White page; each band is padded Numbers-72 x Spacing-XLG at 1280px (the container's
   own gutters take over below xl). Column: 1280 - 2 x 72 = 1136px. */
@media (min-width: 1200px) {
  .container {
    max-width: 1160px; /* 1136 + 2 x 12px container padding */
  }
}
.home-page {
  background: var(--Background-Default);
}

/* Hero (51700:6509 → Frame 2): a 40px-radius banner on the design's #EEF9FD wash, 20px in
   from the page edge (wider than the 72px content column), 56px × 32px padding. The
   illustration fills the right half behind the blurred glow (Ellipse 801); the copy sits in
   a 513px column. Below the desktop breakpoint the illustration sits behind the copy as a
   20 % wash (the mobile frame's treatment, 51701:6013) — it never stacks under the text
   (decision 2026-09-24). */
.home-hero-band {
  max-width: 1280px;
  padding: 20px;
}
.home-hero {
  --home-hero-wash: #eef9fd; /* Frame 2 fill: not a design-system token yet (2026-09-22) */
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--Spacing-LG, 24px);
  min-height: 216px;
  padding: var(--Spacing-XLG, 32px) var(--Spacing-LG, 24px);
  background: var(--home-hero-wash);
  border-radius: 24px;
  overflow: hidden;
  isolation: isolate;
}
.home-hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
  max-width: 513px;
}
.home-hero__title {
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
  margin: 0;
}
.home-hero__accent {
  color: var(--Context-Overall-Primary);
}
.home-hero__copy {
  font: var(--text-Subtitle-small);
  color: var(--Text-Primary);
  margin: 0;
}
.home-hero__art {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
  object-fit: cover;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.home-hero__glow {
  display: none;
}
@media (min-width: 992px) {
  .home-hero {
    display: block;
    padding: var(--Spacing-XLG, 32px) 56px;
    border-radius: 40px;
  }
  /* Figma: image at left 47.89%, top −8.3%, 52.11% × 135.86% of the banner. */
  .home-hero__art {
    inset: auto;
    top: -8.3%;
    right: 0;
    width: 52.11%;
    height: 135.86%;
    object-position: left center;
    opacity: 1;
    /* The 2026-09-29 illustration starts on a teal wash, not the banner's #EEF9FD: fade its
       leading edge in so it does not show a seam at 47.89%. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 30%);
    mask-image: linear-gradient(to right, transparent, #000 30%);
  }
  /* Ellipse 801: a 249px #EEF9FD disc blurred to 572.6px, centred on the banner. */
  .home-hero__glow {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 572.6px;
    height: 572.6px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
  }
}
/* RTL: the illustration moves to the start side; never mirrored (it contains a world map). */
@media (min-width: 992px) {
  [dir="rtl"] .home-hero__art {
    right: auto;
    left: 0;
    object-position: right center;
    -webkit-mask-image: linear-gradient(to left, transparent, #000 30%);
    mask-image: linear-gradient(to left, transparent, #000 30%);
  }
}

/* Navigation cards (Frame 6): four equal Cards_Navigation, 16px apart. */
.home-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--Spacing-MD, 16px);
  padding: var(--Spacing-XLG, 32px) 0;
}
@media (min-width: 992px) {
  .home-cards {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.home-card {
  display: flex;
  align-items: flex-start; /* disc + title sit at the same height on every card, however
                              long the description; the grid stretches all four cards */
  gap: var(--Spacing-MD, 16px);
  min-height: 96px;
  padding: var(--Spacing-MD, 16px);
  background: var(--Background-Default);
  border: 1px solid var(--Border-Default);
  border-radius: var(--Radius-SM, 8px);
  color: var(--Text-Primary);
  text-decoration: none;
  transition: border-color 0.15s ease-in-out;
}
/* Live sections carry their context wash, fading in from the right (Figma gradient). */
.home-card--ndc {
  background: linear-gradient(to left, var(--Context-NDC-Primary-opacity-20), rgba(255, 255, 255, 0));
}
.home-card--nbsap {
  background: linear-gradient(to left, var(--Context-NBSAP-Primary-opacity-10), rgba(255, 255, 255, 0));
}
a.home-card:hover,
a.home-card:focus-visible {
  color: var(--Text-Primary);
  border-color: var(--Border-Strong);
  text-decoration: none;
}
a.home-card:hover .home-card__title {
  text-decoration: underline;
}
.home-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-SM, 8px);
  flex: 1 1 auto;
  min-width: 0;
}
.home-card__heading {
  display: flex;
  align-items: center;
  gap: var(--Spacing-SM, 8px);
}
/* Decision 2026-09-24: the module tiles' glyphs are all black so they match the NBSAP logo
   (whose colour is fixed); the discs keep their context tint. */
.home-card__heading .ds-icon {
  color: var(--M3-black, #000000);
}
.home-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px; /* wraps where a language's name is long (Arabic, Chinese) */
}
.home-card__desc {
  font-size: 14px;
  line-height: normal;
  color: var(--Text-Secondary);
  margin: 0;
}
.home-card__desc-text--short {
  display: none;
}
.home-card__arrow {
  align-self: center;
  color: var(--Text-Primary);
  transition: transform 0.15s ease-in-out;
}
a.home-card:hover .home-card__arrow {
  transform: translateX(3px);
}
.home-card--soon {
  cursor: default;
}

/* At a glance (Frame 12): intro, then one Background-Subtle panel per module. */
.home-glance {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
  padding-top: var(--Spacing-XLG, 32px);
  padding-bottom: var(--Spacing-XLG, 32px);
}
.home-glance__intro {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.home-glance__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--Text-Primary);
  margin: 0;
}
.home-glance__subtitle {
  font-size: 14px;
  line-height: normal;
  color: var(--Text-Secondary);
  margin: 0;
}
.home-glance__panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Spacing-MD, 16px);
}
@media (min-width: 992px) {
  .home-glance__panels {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.home-glance__panel {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
  padding: var(--Spacing-MD, 16px);
  background: var(--Background-Subtle);
  border-radius: var(--Radius-SM, 8px);
}
.home-glance__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--Spacing-SM, 8px);
}
.home-glance__module {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--Text-Primary);
  margin: 0;
  white-space: nowrap;
}
/* DataDisplay_Metric-summary: "See more NDC data" + arrow, Context-Overall-Primary. */
.home-glance__more {
  display: inline-flex;
  align-items: center;
  gap: var(--Spacing-SM, 8px);
  padding: var(--Spacing-XSM, 4px) var(--Spacing-SM, 8px);
  border-radius: var(--Radius-SM, 8px);
  color: var(--Context-Overall-Primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}
.home-glance__more:hover,
.home-glance__more:focus-visible {
  color: var(--Context-Overall-Primary);
  background: var(--Background-Default);
  text-decoration: underline;
}
/* An announced module's panel (issue #67, NDC until COP 31): the badge where the link was,
   then a blurred, data-free silhouette of the tiles (aria-hidden, html.Div shapes only); the
   sentence saying when the figures arrive is screen-reader-only (.visually-hidden). The
   design system has no blur token or frame for this state: the 6px radius is a literal,
   flagged to the designer. */
.home-glance__panel--soon .ds-badge {
  flex-shrink: 0;
}
.home-glance__blur {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
.ds-skeleton {
  width: 100%;
}
.ds-skeleton__disc,
.ds-skeleton__value,
.ds-skeleton__label {
  background: var(--Border-Default);
  border-radius: var(--Radius-SM, 8px);
}
.ds-skeleton__disc {
  width: 32px;
  height: 32px;
  border-radius: var(--Radius-Full, 1000px);
}
.ds-skeleton__value {
  width: 56%;
  height: 20px;
}
.ds-skeleton__label {
  width: 72%;
  height: 12px;
}
@media (forced-colors: active) {
  .ds-skeleton__disc,
  .ds-skeleton__value,
  .ds-skeleton__label {
    border: 1px solid CanvasText;
  }
}

/* =====================================================================================
   Small screens — the Figma "Homepage mobile" frame (51701:5938, 390px). Below md the
   landing page bands take the frame's compact geometry: 20px side gutters, a 220px hero
   card with the illustration as a 20% wash, 2 x 2 policy cards of 92px with the short
   descriptions, two-up "At a glance" tiles. The shell above them stays fao.org's.
   ===================================================================================== */
@media (max-width: 767.98px) {
  /* The FAO top bar is NOT restyled here: it behaves as fao.org does on phones (theme
     rules — stacked, proportional logo). Decision 2026-09-22, see CLAUDE.md. The title
     row (above) is the frame's; the page's own bands take the frame's 20px gutters. */
  .home-page .container,
  .home-page .container-fluid {
    --bs-gutter-x: 40px; /* 20px side gutters (Figma) instead of Bootstrap's 12px */
  }

  /* Hero (51701:6013): 220px card, 20px radius, 24px padding, 14px gap. */
  .home-hero-band {
    padding: 0 20px 18px;
  }
  .home-hero {
    gap: 14px;
    min-height: 220px;
    padding: var(--Spacing-LG, 24px);
    border-radius: 20px;
  }
  .home-hero__title {
    font-size: 24px;
  }
  .home-hero__copy {
    font-size: 14px;
    line-height: 20px;
  }

  /* Policy links (51701:6018): 2 x 2, 10px gaps, 92px cards, 10px padding, 7px gap;
     the 18px arrow sits in the heading row; 11/14px descriptions, two lines max. */
  .home-cards {
    gap: 10px;
    padding: 0;
  }
  .home-card {
    position: relative;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    min-height: 92px;
    padding: 10px;
  }
  .home-card__body {
    gap: 7px;
  }
  .home-card__heading {
    padding-inline-end: 26px; /* room for the arrow */
  }
  .home-card--soon .home-card__heading {
    padding-inline-end: 0; /* no arrow: the title keeps its width beside the badge */
    flex-wrap: wrap; /* a long badge ("Releasing at COP 31") drops under the title */
    row-gap: 4px;
  }
  .home-card__title {
    line-height: 22px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .home-card__desc {
    font-size: 11px;
    line-height: 14px;
  }
  .home-card__desc-text--long {
    display: none;
  }
  .home-card__desc-text--short {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .home-card__arrow {
    position: absolute;
    top: 17px;
    inset-inline-end: 10px;
    width: 18px;
    height: 18px;
  }
  .home-card .ds-badge--soon {
    padding: 3px 7px;
    border-width: 1px;
    font-size: 10px;
  }
  .home-card .ds-badge--compact {
    padding: 2px 5px;
    font-size: 9px;
  }

  /* At a glance (51701:6061): 24/28px band, 12px gaps, 12px panels with a 12px radius,
     15px module title, 12px bold link, two 160px tiles per row (the third spans). */
  .home-glance {
    gap: 12px;
    padding-top: var(--Spacing-LG, 24px);
    padding-bottom: 28px;
  }
  .home-glance__intro {
    gap: 3px;
  }
  .home-glance__subtitle {
    font-size: 13px;
  }
  .home-glance__panel {
    gap: 10px;
    padding: 12px;
    border-radius: 12px;
  }
  .home-glance__module {
    font-size: 15px;
    line-height: normal;
  }
  .home-glance__more {
    font-size: 12px;
    font-weight: 700;
  }
  .home-glance .ds-datarow__slot {
    min-height: 160px;
  }
  .home-glance .ds-datarow__slot:nth-child(3) {
    grid-column: 1 / -1;
  }
}

/* --- Skip link: visible only when focused, sits above the FAO masthead --- */
.skip-link.visually-hidden-focusable:focus,
.skip-link.visually-hidden-focusable:focus-within {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 1080;
  padding: 0.5rem 0.9rem;
  background: var(--surface, #fff);
  color: var(--primary, #116bac);
  font-weight: 600;
  border-radius: 4px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}

/* --- Accessibility: visible keyboard focus (WCAG 2.1 AA, ACC-02/NFR-17) --- */
a:focus-visible,
button:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 2px;
}

/* =====================================================================================
   Module home — Figma "NBSAP" frame (51594:4815), page "Desktop"; one set of rules for
   every module, the accent switched by .module-home--<key>. Bands are the 1136px column
   (the .container override above); Frame 15 splits it into the findings column and a
   364px aside behind a 1px rule.
   ===================================================================================== */
.module-home {
  --module-accent: var(--Context-Overall-Primary);
  --module-wash: var(--Context-Overall-Primary-opacity-10, rgba(0, 0, 0, 0.06));
  background: var(--Background-Default);
}
.module-home--ndc {
  --module-accent: var(--Context-NDC-Primary);
  /* The design system has no Context-NDC-Primary-opacity-10 token yet (only -20/-80):
     mixed from the primary until it is added (docs/design-system.md, open decisions). */
  --module-wash: var(
    --Context-NDC-Primary-opacity-10,
    color-mix(in srgb, var(--Context-NDC-Primary) 10%, transparent)
  );
}
.module-home--nbsap {
  --module-accent: var(--Context-NBSAP-Primary);
  --module-wash: var(--Context-NBSAP-Primary-opacity-10);
}
.main-content:has(.module-home) {
  padding-bottom: 0;
}

/* Glyph size variants: the hero disc holds a 40px glyph, the metric-link arrow is 16px. */
.ds-icon--lg {
  width: 40px;
  height: 40px;
}
.ds-icon--sm {
  width: 16px;
  height: 16px;
}
.ds-icon--info {
  --ds-icon: url("icons/info.svg");
}

/* Data_Row gaps: 8px on the "At a glance" panels, 16px for the findings tiles, 24px
   between the findings charts (Figma Data_Row instances 51623:2076 / 51624:2173). */
.ds-datarow--wide {
  gap: var(--Spacing-MD, 16px);
}
.ds-datarow--loose {
  gap: var(--Spacing-LG, 24px);
}
.ds-datarow--loose .ds-datarow__slot {
  display: block;
  padding: 10px;
}

/* Button (51581:42907): primary = accent fill + Text-Inverse; secondary = 2px accent border
   + accent label; tertiary = text only. */
.ds-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--Spacing-SM, 8px) var(--Spacing-MD, 16px);
  border-radius: var(--Radius-SM, 8px);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: filter 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.ds-button--primary {
  background: var(--module-accent, var(--Context-Overall-Primary));
  color: var(--Text-Inverse);
}
.ds-button--primary.ds-button--ndc {
  background: var(--Context-NDC-Primary);
}
.ds-button--primary.ds-button--nbsap {
  background: var(--Context-NBSAP-Primary);
}
a.ds-button--primary:hover,
a.ds-button--primary:focus-visible {
  color: var(--Text-Inverse);
  filter: brightness(0.9);
  text-decoration: none;
}
/* The secondary's padding gives up its 2px border so it lines up with a primary button. */
.ds-button--secondary {
  --button-accent: var(--module-accent, var(--Context-Overall-Primary));
  padding: calc(var(--Spacing-SM, 8px) - 2px) calc(var(--Spacing-MD, 16px) - 2px);
  border: 2px solid var(--button-accent);
  background: transparent;
  color: var(--button-accent);
}
.ds-button--secondary.ds-button--ndc {
  --button-accent: var(--Context-NDC-Primary);
}
.ds-button--secondary.ds-button--nbsap {
  --button-accent: var(--Context-NBSAP-Primary);
}
a.ds-button--secondary:hover,
a.ds-button--secondary:focus-visible {
  color: var(--button-accent);
  background: color-mix(in srgb, var(--button-accent) 10%, transparent);
  text-decoration: none;
}
.ds-button--tertiary {
  padding: var(--Spacing-SM, 8px) 0;
  font-size: 14px;
  color: var(--Text-Primary);
}
a.ds-button--tertiary:hover,
a.ds-button--tertiary:focus-visible {
  color: var(--Text-Primary);
  text-decoration: underline;
}
.ds-button[aria-disabled="true"] {
  color: var(--Text-Disabled);
  cursor: default;
  pointer-events: none;
}
.ds-button:focus-visible {
  outline: 2px solid var(--Dark-Blue);
  outline-offset: 2px;
}

/* DataDisplay_Metric-summary as a link row (51626:2534): 8px vertical padding, a 1.5px
   Border-Default rule, bold 16px title with the 16px arrow in the accent on the right,
   14px Text-Secondary caption. */
.ds-metric-link {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-SM, 8px);
  padding: var(--Spacing-SM, 8px) 0;
  border-bottom: 1.5px solid var(--Border-Default);
  color: var(--Text-Primary);
  text-decoration: none;
}
.ds-metric-link__head {
  display: flex;
  align-items: center;
  gap: var(--Spacing-SM, 8px);
}
.ds-metric-link__title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.ds-metric-link__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--Radius-Full, 1000px);
  color: var(--module-accent, var(--Context-Overall-Primary));
  transition: transform 0.15s ease-in-out;
}
.ds-metric-link__caption {
  font-size: 14px;
  line-height: normal;
  color: var(--Text-Secondary);
}
a.ds-metric-link:hover,
a.ds-metric-link:focus-visible {
  color: var(--Text-Primary);
  text-decoration: none;
}
a.ds-metric-link:hover .ds-metric-link__title {
  text-decoration: underline;
}
a.ds-metric-link:hover .ds-metric-link__arrow {
  transform: translateX(3px);
}
a.ds-metric-link:focus-visible {
  outline: 2px solid var(--Dark-Blue);
  outline-offset: 2px;
}
/* Announced, not yet linked row: the SOON badge replaces the arrow; the text keeps its
   colours so the description stays readable (Text-Disabled fails contrast). */
.ds-metric-link--soon {
  cursor: default;
}

/* Hero (Frame 2 / Frame 14): Radius-MD card with the -opacity-10 wash fading to the
   right, Spacing-LG padding; disc + content 32px apart; the buttons at the end, "Read the
   report" (issue #27) under "Explore data", both as wide as the wider label. */
.module-hero {
  padding: var(--Spacing-MD, 16px) 0;
}
.module-hero__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-LG, 24px);
  padding: var(--Spacing-LG, 24px);
  border-radius: var(--Radius-MD, 20px);
  background: linear-gradient(90deg, var(--module-wash), rgba(255, 255, 255, 0));
}
.module-hero__lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-LG, 24px);
  min-width: 0;
}
.module-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--Spacing-SM, 8px);
  flex: 0 0 auto;
}
.module-hero__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: var(--Radius-Full, 1000px);
  border: 1.5px solid var(--module-accent);
  background: var(--module-wash);
  color: var(--module-accent);
}
/* An official full-colour logo (the KMGBF symbol on NBSAP) replaces the disc: no ring, no
   wash, never recoloured; it is round itself and takes the disc's size (120px, 60px on
   phones). */
.module-hero__logo {
  display: block;
  flex: 0 0 auto;
  width: 120px;
  height: auto;
}
.module-hero__content {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-SM, 8px);
  max-width: 581px;
  min-width: 0;
}
.module-hero__content p {
  margin: 0;
}
.module-hero__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  color: var(--module-accent);
}
.module-hero__subtitle {
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--Text-Primary);
}
.module-hero__copy {
  font: var(--text-Subtitle-small);
  color: var(--Text-Primary);
}
@media (min-width: 768px) {
  .module-hero__lead {
    flex-direction: row;
    align-items: center;
    gap: var(--Spacing-XLG, 32px);
  }
}
@media (min-width: 992px) {
  .module-hero__card {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Frame 15: findings column + aside. Single column on phones and tablets; from lg the
   aside takes 364px behind a 1px Border-Default rule (32px inner gutter). */
.module-home__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--Spacing-XLG, 32px);
  padding: var(--Spacing-MD, 16px) 0 var(--Spacing-XLG, 32px);
}
.module-home__main,
.module-home__aside {
  min-width: 0;
}
@media (min-width: 992px) {
  .module-home__body {
    grid-template-columns: minmax(0, 1fr) 364px;
    gap: 0;
  }
  .module-home__main {
    padding-right: var(--Numbers-72, 72px);
  }
  .module-home__aside {
    padding-left: var(--Spacing-XLG, 32px);
    border-left: 1px solid var(--Border-Default);
  }
}

/* Key findings (Frame 12): blocks Spacing-XLG apart. */
.module-findings {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-XLG, 32px);
  padding: var(--Spacing-MD, 16px) 0;
}
.module-findings__head {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.module-findings__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.module-findings__subtitle {
  margin: 0;
  font: var(--text-Subtitle-small);
  color: var(--Text-Secondary);
}
/* The report name is a link only once the module's ``report_url`` is set. */
a.module-findings__report {
  color: var(--module-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
a.module-findings__report:hover,
a.module-findings__report:focus-visible {
  color: var(--Text-Primary);
}
.module-findings__summary {
  margin: 0;
  font-size: 14px;
  line-height: normal;
  color: var(--Text-Primary);
}
.module-findings__rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--Border-Default);
  opacity: 1;
}
.module-findings__graph {
  width: 100%;
}
.module-findings__note {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  line-height: normal;
  color: var(--Text-Secondary);
}
/* Findings tiles carry a longer label than the "At a glance" tiles and no caption. */
.ds-datarow--wide .ds-summary__label {
  line-height: 13px;
}

/* Thematic areas (Frame 13 / Frame 1000002764) and the About card (Frame 1000002765). */
.module-home__aside {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-XLG, 32px);
  padding-top: var(--Spacing-MD, 16px);
  padding-bottom: var(--Spacing-MD, 16px);
}
.module-themes {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
}
.module-themes__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.module-themes__list {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
}
.module-about {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-SM, 8px);
  padding: var(--Spacing-MD, 16px);
  border: 1px solid var(--Border-Default);
  border-radius: var(--Radius-SM, 8px);
}
.module-about__head {
  display: flex;
  align-items: center;
  gap: 7px;
}
.module-about__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--Text-Primary);
}
.module-about__copy {
  margin: 0;
  font-size: 14px;
  line-height: normal;
  color: var(--Text-Secondary);
}
/* The whole card is the link (no "See more" button); disabled while it has no href. */
a.module-about,
a.module-about:hover,
a.module-about:focus-visible {
  color: var(--Text-Primary);
  text-decoration: none;
}
a.module-about[href]:hover,
a.module-about[href]:focus-visible {
  border-color: var(--module-accent, var(--Context-Overall-Primary));
}
a.module-about[href]:hover .module-about__title {
  text-decoration: underline;
}
a.module-about[href]:focus-visible {
  outline: 2px solid var(--Dark-Blue);
  outline-offset: 2px;
}
a.module-about[aria-disabled="true"] {
  cursor: default;
}

/* Module home on phones — Figma "NDC" mobile frame (51749:5875): the frame's 20px gutters;
   the hero card (Frame 14) with a 60px disc / 32px glyph, 24px title, 14px/1.4 copy and a
   14px button, 16px apart; the findings head at 16/24 bold + 14/24 subtitle with 10px
   between the findings blocks; then one band per section (countries, themes, about),
   24px above and 28px below each, the aside's desktop gaps dropped. */
@media (max-width: 767.98px) {
  .module-home .container,
  .module-home .container-fluid {
    --bs-gutter-x: 40px;
  }
  .module-hero {
    padding: 20px 0;
  }
  .module-hero__card,
  .module-hero__lead {
    gap: var(--Spacing-MD, 16px);
  }
  .module-hero__disc {
    width: 60px;
    height: 60px;
  }
  .module-hero__disc .ds-icon--lg {
    width: 32px;
    height: 32px;
  }
  .module-hero__logo {
    width: 60px;
  }
  .module-hero__title {
    font-size: 24px;
  }
  .module-hero__copy {
    font-size: 14px;
    line-height: 1.4;
  }
  .module-hero .ds-button {
    font-size: 14px;
  }
  .module-home__body {
    gap: 0;
    padding: 0;
  }
  .module-findings {
    gap: 10px;
    padding: 20px 0 28px;
  }
  .module-findings__title {
    font-size: 16px;
    line-height: 24px;
  }
  .module-findings__subtitle {
    font-size: 14px;
    line-height: 24px;
  }
  /* Three tiles (NBSAP, issue #42): the odd last one spans the two phone columns. */
  .module-findings .ds-datarow--wide .ds-datarow__slot:nth-child(3):last-child {
    grid-column: 1 / -1;
  }
  .module-home__aside {
    gap: 0;
    padding: 0;
  }
  .module-countries,
  .module-themes {
    padding: var(--Spacing-LG, 24px) 0 28px;
  }
  .module-about {
    margin: var(--Spacing-LG, 24px) 0 28px;
  }
}

/* Key-findings chart rows of the NDC frame (51626:2596): three 236px slots, then the map
   beside a wide donut. Narrow slots stack on phones; from md the row keeps its columns. */
.module-findings .ds-datarow--loose {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .module-findings .ds-datarow--loose {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
  }
}

/* DataDisplay_Metric-summary, outlined (51649:4420 "View all countries" / 51648:2490
   "View all themes"): 1.5px accent border, Radius-SM, Spacing-SM padding, accent title. */
.ds-metric-link--outlined {
  padding: var(--Spacing-SM, 8px);
  border: 1.5px solid var(--module-accent, var(--Context-Overall-Primary));
  border-bottom-width: 1.5px;
  border-radius: var(--Radius-SM, 8px);
}
.ds-metric-link--outlined .ds-metric-link__title {
  color: var(--module-accent, var(--Context-Overall-Primary));
}
a.ds-metric-link--outlined:hover,
a.ds-metric-link--outlined:focus-visible {
  background: var(--module-wash);
}

/* Explore countries (51648:2502): 20px bold title, 14px Text-Secondary subtitle, rows
   Spacing-SM apart inside Spacing-MD vertical padding, then the outlined link. */
.module-countries {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.module-countries__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.module-countries__subtitle,
.module-countries__empty {
  margin: 0;
  font-size: 14px;
  line-height: normal;
  color: var(--Text-Secondary);
}
.module-countries__list {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-SM, 8px);
  padding: var(--Spacing-MD, 16px) 0;
}
/* One row (51649:4250): flag · name | status pill | 16px arrow in a 20px slot. */
.ds-country {
  display: flex;
  align-items: center;
  gap: var(--Spacing-MD, 16px);
  padding: var(--Spacing-XSM, 4px) 0;
  color: var(--Text-Primary);
  text-decoration: none;
}
.ds-country__lead {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: var(--Spacing-SM, 8px);
  min-width: 0;
}
.ds-country__name {
  overflow: hidden;
  font-size: 14px;
  line-height: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-country__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: var(--Radius-Full, 1000px);
  color: var(--module-accent, var(--Context-Overall-Primary));
  transition: transform 0.15s ease-in-out;
}
a.ds-country:hover,
a.ds-country:focus-visible {
  color: var(--Text-Primary);
  text-decoration: none;
}
a.ds-country:hover .ds-country__name {
  text-decoration: underline;
}
a.ds-country:hover .ds-country__arrow {
  transform: translateX(2px);
}
a.ds-country:focus-visible {
  outline: 2px solid var(--Dark-Blue);
  outline-offset: 2px;
  border-radius: var(--Radius-SM, 8px);
}
/* flag/<ISO2>: the UN member-state flags of the design system's Flags group
   (assets/flags/<iso2>.png, cut from the UN Member States page at each flag's own aspect
   ratio — see assets/flags/README.md). The frame's row is 14px tall; the height is set and
   the width follows, never a fixed box (Nepal and Switzerland are not 4:3, Qatar is far
   wider). The 1px Border-Default keeps white-edged flags (Japan, Nepal) off the page white;
   no radius, which would clip the design. A country without a UN flag draws a neutral
   placeholder. */
.ds-flag {
  display: block;
  flex: 0 0 auto;
  height: 14px;
  width: auto;
  box-sizing: content-box;
  border: 1px solid var(--Border-Default);
}
.ds-flag--unknown {
  width: 18px;
  background: var(--Colors-Neutral-200);
}
/* Status pill (51649:4266): Radius-Full, 4x8, 12px bold uppercase. The frame's accent
   pill is Context-NDC-Primary on its -opacity-20 (4.05:1); the 10% wash lifts it to
   4.68:1 (WCAG AA, ACC-02). The frame's "not submitted" pill (Text-Disabled on
   Border-Disabled, 1.65:1) is drawn as Text-Primary on Colors-Neutral-200 instead. */
.ds-pill {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: var(--Spacing-XSM, 4px) var(--Spacing-SM, 8px);
  border-radius: var(--Radius-Full, 1000px);
  font-size: 12px;
  font-weight: 700;
  line-height: 13px;
  text-transform: uppercase;
  white-space: nowrap;
}
.ds-pill--accent {
  background: var(--module-wash);
  color: var(--module-accent, var(--Context-Overall-Primary));
}
.ds-pill--muted {
  background: var(--Colors-Neutral-200);
  color: var(--Text-Primary);
}

/* =====================================================================================
   Explore by theme — Figma "NDC / Explore Themes" frame (51651:16630), page "Desktop";
   generic over the module (.module-home--<key> switches --module-accent/--module-wash).
   Frame 16: title band, Spacing-XLG vertical padding. Frame 15: the DataDisplay_Metric-
   summary cards, three per row 16px apart (two on tablets, one on phones).
   ===================================================================================== */
.module-themes-page {
  background: var(--Background-Default);
}
.main-content:has(.module-themes-page) {
  padding-bottom: 0;
}
.module-themes-page__head {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
  padding: var(--Spacing-XLG, 32px) 0;
}
.module-themes-page__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.module-themes-page__intro,
.module-themes-page__empty {
  margin: 0;
  max-width: 536px;
  font: var(--text-Subtitle-small);
  color: var(--Text-Primary);
}
.module-themes-page__empty {
  padding-bottom: var(--Spacing-XLG, 32px);
  color: var(--Text-Secondary);
}
.module-themes-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--Spacing-MD, 16px);
  padding: var(--Spacing-MD, 16px) 0 var(--Spacing-XLG, 32px);
}
@media (min-width: 576px) {
  .module-themes-page__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 992px) {
  .module-themes-page__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* The 24px glyph of the theme card's 48px disc. */
.ds-icon--md {
  width: 24px;
  height: 24px;
}

/* DataDisplay_Metric-summary as a card (51651:16655): white, 1.5px Border-Default,
   Radius-MD, Spacing-MD padding, 220px tall in the frame (a minimum here so longer
   translations can grow); body at the top, the arrow pinned to the bottom. */
.ds-theme-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--Spacing-MD, 16px);
  min-height: 220px;
  padding: var(--Spacing-MD, 16px);
  border: 1.5px solid var(--Border-Default);
  border-radius: var(--Radius-MD, 20px);
  background: var(--Background-Default);
  color: var(--Text-Primary);
  text-decoration: none;
  transition: border-color 0.15s ease-in-out;
}
.ds-theme-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Spacing-MD, 16px);
  min-width: 0;
}
.ds-theme-card__disc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--Radius-Full, 1000px);
  background: var(--module-wash, var(--Context-Overall-Primary-opacity-10));
  color: var(--module-accent, var(--Context-Overall-Primary));
}
.ds-theme-card--ndc .ds-theme-card__disc {
  background: var(
    --Context-NDC-Primary-opacity-10,
    color-mix(in srgb, var(--Context-NDC-Primary) 10%, transparent)
  );
  color: var(--Context-NDC-Primary);
}
.ds-theme-card--nbsap .ds-theme-card__disc {
  background: var(--Context-NBSAP-Primary-opacity-10);
  color: var(--Context-NBSAP-Primary);
}
.ds-theme-card__title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--Text-Primary);
}
.ds-theme-card__caption {
  font-size: 14px;
  line-height: normal;
  color: var(--Text-Secondary);
}
.ds-theme-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: var(--Radius-Full, 1000px);
  color: var(--module-accent, var(--Context-Overall-Primary));
  transition: transform 0.15s ease-in-out;
}
.ds-theme-card--ndc .ds-theme-card__arrow {
  color: var(--Context-NDC-Primary);
}
.ds-theme-card--nbsap .ds-theme-card__arrow {
  color: var(--Context-NBSAP-Primary);
}
a.ds-theme-card:hover,
a.ds-theme-card:focus-visible {
  color: var(--Text-Primary);
  text-decoration: none;
  border-color: var(--module-accent, var(--Context-Overall-Primary));
}
a.ds-theme-card:hover .ds-theme-card__title {
  text-decoration: underline;
}
a.ds-theme-card:hover .ds-theme-card__arrow {
  transform: translateX(3px);
}
a.ds-theme-card:focus-visible {
  outline: 2px solid var(--Dark-Blue);
  outline-offset: 2px;
}

/* =====================================================================================
   Explore data — Figma "NDC / Explore Themes" frame (51649:9636), page "Desktop"; generic
   over the module (.module-home--<key> switches --module-accent/--module-wash).
   Frame 16: title band, Spacing-XLG vertical padding. Frame 17: the 320px filters column
   and the results column, Spacing-LG apart, each Spacing-XLG between blocks.
   ===================================================================================== */
.module-explore {
  background: var(--Background-Default);
}
.main-content:has(.module-explore) {
  padding-bottom: 0;
}

/* Title band (Frame 16 / Content): heading row, then the intro with the actions. */
.module-explore__head {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
  padding: var(--Spacing-XLG, 32px) 0;
}
.module-explore__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Spacing-SM, 8px) var(--Spacing-XLG, 32px);
}
.module-explore__title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.module-explore__lead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--Spacing-SM, 8px) var(--Spacing-MD, 16px);
}
/* No max-width: the frame's 536px cap belonged next to the dropped Download / Share
   actions and broke the sentence in two on desktop (issue #140). */
.module-explore__intro {
  margin: 0;
  font: var(--text-Subtitle-small);
  color: var(--Text-Primary);
}
/* DataDisplay_Metric-summary as an action (51651:16606, 16614, 16622, 16598): a bare
   button, 4x8 padding, Radius-SM, 14px semibold label and 20px glyph in
   Context-Overall-Primary, 8px apart. */
.ds-metric-button {
  display: inline-flex;
  align-items: center;
  gap: var(--Spacing-SM, 8px);
  padding: var(--Spacing-XSM, 4px) var(--Spacing-SM, 8px);
  border: 0;
  border-radius: var(--Radius-SM, 8px);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--Context-Overall-Primary);
  transition: background-color 0.15s ease-in-out;
}
.ds-metric-button:hover,
.ds-metric-button:focus-visible {
  background: var(--Context-Overall-Primary-opacity-20);
  color: var(--Context-Overall-Primary);
}
.ds-metric-button:focus-visible {
  outline: 2px solid var(--Dark-Blue);
  outline-offset: 2px;
}
/* Outlined (51651:16547, "Add filters"): full width, centred, 1.5px accent border, 8px
   padding, 14px bold accent label, the glyph in a 24px slot. */
.ds-metric-button--outlined {
  width: 100%;
  justify-content: center;
  padding: var(--Spacing-SM, 8px);
  border: 1.5px solid var(--module-accent, var(--Context-Overall-Primary));
  font-weight: 700;
  line-height: 1.2;
  color: var(--module-accent, var(--Context-Overall-Primary));
}
.ds-metric-button--outlined:hover,
.ds-metric-button--outlined:focus-visible {
  background: var(--module-wash);
  color: var(--module-accent, var(--Context-Overall-Primary));
}
.ds-metric-button--ndc {
  --module-accent: var(--Context-NDC-Primary);
}
.ds-metric-button--nbsap {
  --module-accent: var(--Context-NBSAP-Primary);
}
.ds-icon--file-download {
  --ds-icon: url("icons/file-download.svg");
}
.ds-icon--share {
  --ds-icon: url("icons/share.svg");
}
.ds-icon--clear {
  --ds-icon: url("icons/clear.svg");
}
.ds-icon--add-circle-outline {
  --ds-icon: url("icons/add-circle-outline.svg");
}
.ds-icon--keyboard-arrow-down {
  --ds-icon: url("icons/keyboard-arrow-down.svg");
}
.ds-icon--calendar-today {
  --ds-icon: url("icons/calendar-today.svg");
}

/* Frame 17: filters column + results. Stacked on phones and tablets; from lg the filters
   keep the frame's 320px. */
.module-explore__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--Spacing-LG, 24px);
  padding: var(--Spacing-MD, 16px) 0;
}
.module-explore__filters,
.module-explore__main {
  min-width: 0;
  padding: var(--Spacing-MD, 16px) 0;
}
@media (min-width: 992px) {
  .module-explore__body {
    grid-template-columns: 320px minmax(0, 1fr);
  }
}
/* Database-version note closing the page (issue #94), aligned with the results column. */
.module-explore__note {
  padding-bottom: var(--Spacing-MD, 16px);
}
@media (min-width: 992px) {
  .module-explore__note {
    grid-column: 2;
  }
}

/* Filters column (Frame 11): heading row with "Clear all", blocks 7px apart. */
.ds-filters {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.ds-filters__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--Spacing-SM, 8px);
}
.ds-filters__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.ds-filters__more {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* One filter block (Frame 1000004602…): Background-Subtle at 50 %, 1px Border-Subtle,
   Radius-SM, Spacing-SM padding, 7px between title, hint and control. */
.ds-filter-block {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: var(--Spacing-SM, 8px);
  border: 1px solid var(--Border-Subtle);
  border-radius: var(--Radius-SM, 8px);
  background: color-mix(in srgb, var(--Background-Subtle) 50%, transparent);
}
.ds-filter-block p {
  margin: 0;
}
.ds-filter-block__title {
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.ds-filter-block__hint {
  font-size: 14px;
  line-height: normal;
  color: var(--Text-Secondary);
}
.ds-filter-block__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start; /* a field with many chips must not stretch its neighbour */
  gap: 7px;
}
.ds-filter-block--action {
  gap: 0;
}
/* A visible field label with an (i) tooltip anchor (the geographic standard). */
.ds-field__label-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: -3px; /* tightens the label onto its field within the block's gap */
}
.ds-field__label {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--Text-Primary);
}
.ds-info-button {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--Context-Overall-Primary);
  cursor: pointer;
}
.ds-info-button .ds-icon {
  width: 18px;
  height: 18px;
}
@media (max-width: 767.98px) {
  .tooltip.ds-tooltip--md-up {
    display: none;
  }
}
.ds-info-button:focus-visible {
  outline: 2px solid var(--Context-Overall-Primary);
  outline-offset: 2px;
  border-radius: var(--Radius-Full, 1000px);
}
/* Multi-selects: the selection lives in a chips row below the field (decision 2026-09-24),
   the field keeps its placeholder, and react-select's own pills are hidden. */
.ds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.ds-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ds-chips:empty {
  display: none;
}
.ds-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 4px 2px 10px;
  border: 0;
  border-radius: var(--Radius-Full, 1000px);
  background: var(--Context-Overall-Primary-opacity-20);
  color: var(--Text-Primary);
  font-size: 13px;
  line-height: 20px;
  text-align: left;
  cursor: pointer;
}
.ds-chip:hover,
.ds-chip:focus-visible {
  background: var(--Context-Overall-Primary-opacity-40);
}
.ds-chip__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ds-chip .ds-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.ds-chip__tag {
  margin-left: 4px;
  font-size: 11px;
  color: var(--Text-Secondary);
  white-space: nowrap;
}


/* =====================================================================================
   Form inputs: dash-mantine-components themed from the tokens (components/inputs.py,
   decision 2026-09-25). Mantine injects its own stylesheet after this one, so these
   rules carry a leading `body` to win ties; sizes and colours go through the variables
   Mantine reads (--input-*, --radio-*), the rest through its static class names.
   ===================================================================================== */
/* A field of the filter panel. */
.ds-input {
  min-width: 0;
}
/* TextInput (51651:6980): white, 1px Colors-Neutral-100, Radius-SM (the theme default
   radius), 52px tall with Spacing-MD padding, 14px/20px text, Text-Secondary placeholder,
   the Context-Overall-Primary border on focus, a 20px glyph at the end. */
body .mantine-Input-wrapper {
  --input-height-sm: 52px;
  --input-padding: var(--Spacing-MD, 16px);
}
body .mantine-Input-input {
  --input-bd: var(--Colors-Neutral-100);
  --input-bd-focus: var(--Context-Overall-Primary);
  --input-bg: var(--Colors-Neutral-0);
  --input-color: var(--Text-Primary);
  --input-placeholder-color: var(--Text-Secondary);
  line-height: 20px;
}
body .mantine-Input-input:focus,
body .mantine-Input-input:focus-within {
  outline: none;
}
body .mantine-Input-input:disabled,
body .mantine-Input-input[data-disabled] {
  background: var(--Background-Subtle);
  color: var(--Text-Disabled);
  opacity: 1;
}
body .mantine-Input-section .ds-input__glyph {
  color: var(--Text-Primary);
}
body .mantine-Input-input:disabled ~ .mantine-Input-section .ds-input__glyph,
body .mantine-Input-input[data-disabled] ~ .mantine-Input-section .ds-input__glyph {
  color: var(--Text-Disabled);
}
/* Multi-selects keep the field one line tall: the selection lives in the chips row below
   (decision 2026-09-24), so the pills Mantine draws inside the field are hidden. */
body .mantine-MultiSelect-pill {
  display: none;
}
body .mantine-MultiSelect-input {
  display: flex;
  align-items: center;
  padding-block: 0;
}
body .mantine-MultiSelect-pillsList {
  flex: 1 1 auto;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0;
  min-height: 0;
}
body .mantine-MultiSelect-inputField {
  flex: 1 1 auto;
  min-width: 0;
  height: 20px;
  line-height: 20px;
}
/* The menu: 1px Colors-Neutral-100, Radius-SM, 14px options, Background-Subtle under the
   pointed option, an accent wash on the picked one (single selects), 12px bold group names. */
body .mantine-Select-dropdown,
body .mantine-MultiSelect-dropdown {
  border: 1px solid var(--Colors-Neutral-100);
  border-radius: var(--Radius-SM, 8px);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
}
body .mantine-Select-option,
body .mantine-MultiSelect-option {
  padding: 6px 10px;
  border-radius: var(--Spacing-XSM, 4px);
  font-size: 14px;
  line-height: 20px;
  color: var(--Text-Primary);
}
body .mantine-Select-option[data-combobox-selected],
body .mantine-MultiSelect-option[data-combobox-selected] {
  background: var(--Background-Subtle);
}
body .mantine-Select-option[data-combobox-active],
body .mantine-MultiSelect-option[data-combobox-active] {
  background: var(--Context-Overall-Primary-opacity-20);
}
body .mantine-Select-groupLabel,
body .mantine-MultiSelect-groupLabel {
  font-size: 12px;
  font-weight: 700;
  color: var(--Text-Secondary);
}
body .mantine-Select-groupLabel::after,
body .mantine-MultiSelect-groupLabel::after {
  background: var(--Colors-Neutral-200);
}
body .mantine-Select-empty,
body .mantine-MultiSelect-empty {
  font-size: 14px;
  color: var(--Text-Secondary);
}
/* Checkbox (51651:16174) and RadioButton (51651:16277): 16px Material 3 glyphs in
   Context-Overall-Primary (the theme primary fills them), 14px Text-Secondary labels
   Spacing-SM after the glyph; items Spacing-MD apart in a row, Spacing-SM in a column. */
.ds-choice-group {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-SM, 8px);
}
.ds-choice-group--inline {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--Spacing-SM, 8px) var(--Spacing-MD, 16px);
}
body .mantine-Checkbox-input,
body .mantine-Radio-radio {
  border-color: var(--Context-Overall-Primary);
  cursor: pointer;
}
body .mantine-Checkbox-label,
body .mantine-Radio-label {
  padding-inline-start: var(--Spacing-SM, 8px);
  font-size: 14px;
  line-height: 20px;
  color: var(--Text-Secondary);
  cursor: pointer;
}
/* The radio is a ring with a dot, not a filled disc. */
body .mantine-Radio-root {
  --radio-icon-size-xs: 8px;
  --radio-icon-color: var(--Context-Overall-Primary);
}
body .mantine-Radio-radio:checked {
  background-color: var(--Colors-Neutral-0);
  border-color: var(--Context-Overall-Primary);
}
body .mantine-Checkbox-input:focus-visible,
body .mantine-Radio-radio:focus-visible {
  outline: 2px solid var(--Dark-Blue);
  outline-offset: 2px;
}
body .mantine-Checkbox-input:disabled,
body .mantine-Radio-radio:disabled {
  border-color: var(--Border-Disabled);
}
/* The range slider (policy page): 12px Text-Secondary mark labels. */
body .mantine-Slider-markLabel,
body .mantine-RangeSlider-markLabel {
  font-size: 12px;
  color: var(--Text-Secondary);
}

/* Results column (Frame 12): tiles, map, rules and chart rows Spacing-XLG apart. */
.module-explore__results {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-XLG, 32px);
}
/* Flex items would otherwise grow to the data table's intrinsic width (min-width: auto)
   and push the whole page wider than a phone; the table scrolls inside its section. */
.module-explore__results > * {
  min-width: 0;
}
.module-explore__summary {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
}
.module-explore__summary-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.module-explore__section-title,
.module-explore__question-title {
  margin: 0;
  color: var(--Text-Primary);
  font-weight: 700;
  line-height: 1.35;
}
.module-explore__section-title {
  font-size: 20px;
}
.module-explore__question {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
  min-width: 0;
}
.module-explore__question + .module-explore__question {
  padding-top: var(--Spacing-XLG, 32px);
  border-top: 1px solid var(--Border-Subtle);
}
.module-explore__question-title {
  font-size: 18px;
}
/* Selection summary body (decision 2026-09-28): the KPI tiles, the yes/no map in a tile
   of its own (the ``.ds-datarow--bordered`` slot look) and the map's cartographic notes
   as page text. Stacked up to lg (tiles, map, notes); from xl the tiles form a 2 × 2 block
   on the left, the map tile on the right takes exactly their height, and the notes run
   under both as a full-width footnote. (Notes under the tiles alone made the column, and
   so the tile, ~550 px tall; a 2:1 map cannot fill that, so it floated in white space.)
   The figure carries no fixed height: it fills the tile (Plotly ``responsive``), whose
   height the grid row (xl) or a fixed value sets. */
.module-explore__summary-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "cards"
    "map"
    "notes";
  gap: var(--Spacing-MD, 16px);
  align-items: start;
}
.module-explore__summary-cards {
  grid-area: cards;
  min-width: 0;
  /* Reserve the tiles' height while the callback fills them (the stats bar is empty on
     first paint): the map tile takes the row's height from xl and would otherwise
     collapse to its padding for a moment, spilling the placeholder figure below it. */
  min-height: 316px; /* two rows of 150 px tiles + gap */
}
@media (min-width: 768px) and (max-width: 1199.98px) {
  .module-explore__summary-cards {
    min-height: 150px; /* one row of four */
  }
}
.module-explore__map--tile {
  grid-area: map;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden; /* nothing spills out while the figure resizes into the tile */
  padding: 10px;
  border: 1px solid var(--Border-Default);
  border-radius: var(--Radius-SM, 8px);
  background: var(--Background-Default);
}
.module-explore__map--tile .module-explore__graph {
  --graph-height: 400px;
}
.module-explore__map-notes {
  grid-area: notes;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.module-explore__map-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--Text-Secondary);
}
@media (min-width: 1200px) {
  .module-explore__summary-body {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    grid-template-areas:
      "cards map"
      "notes notes";
    align-items: stretch;
  }
  .module-explore__summary-cards .ds-datarow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row;
  }
  /* The graph is taken out of flow so the tile's height comes from the row (the tiles),
     never from the figure; the graph then fills the tile's padding box. */
  .module-explore__map--tile {
    position: relative;
  }
  .module-explore__map--tile .module-explore__graph {
    position: absolute;
    inset: 10px;
    --graph-height: auto;
    width: auto;
  }
}
.module-explore__analytics {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-XLG, 32px);
}
.module-explore__analytical-question {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
  min-width: 0;
  padding-top: var(--Spacing-XLG, 32px);
  border-top: 1px solid var(--Border-Subtle);
}
.module-explore__chart-heading {
  display: flex;
  align-items: center;
  gap: var(--Spacing-XS, 4px);
  min-width: 0;
}
.module-explore__analytical-graph {
  width: 100%;
  min-width: 0;
}
.module-explore__analytical-graph .module-explore__graph {
  width: 100%;
}
/* The chart's title is the section heading above it. The figure keeps its own copy for the
   exported image (DAT-03: title, legend and source in the PNG/SVG), which Plotly renders
   in an off-screen clone outside this container, so hiding it here is on-screen only. */
.module-explore__analytical-graph .g-gtitle {
  display: none;
}
.module-explore__view-selector {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-XS, 4px);
}
.module-explore__view-label {
  color: var(--Text-Secondary);
  font-size: 13px;
  font-weight: 700;
}
.module-explore__group-tabs {
  border-bottom: 0;
}
.module-explore__group-tabs .nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--Spacing-XS, 4px);
  border-bottom: 0;
}
.module-explore__group-tabs .nav-link {
  height: 100%;
  padding: var(--Spacing-SM, 8px) var(--Spacing-MD, 16px);
  border: 1px solid var(--Border-Default);
  border-radius: 2px;
  background: var(--Surface-Primary);
  color: var(--Text-Primary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  text-align: left;
}
.module-explore__group-tabs .nav-link.active {
  border-color: var(--module-accent);
  background: var(--module-accent);
  color: var(--Text-Inverse, #fff);
}
.module-explore__group-tabs .nav-link:focus-visible {
  outline: 2px solid var(--module-accent);
  outline-offset: 2px;
}
/* Data_Row 51649:10224: the summary tiles carry a 1px Border-Default outline. */
.ds-datarow--bordered .ds-datarow__slot {
  border: 1px solid var(--Border-Default);
}
.module-explore__map,
.module-explore__graph {
  width: 100%;
}
.module-explore__rule {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--Border-Default);
  opacity: 1;
}
/* Chart rows: three narrow slots or two wide ones from md, stacked on phones. */
.module-explore .ds-datarow--loose {
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 768px) {
  .module-explore .ds-datarow--loose {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    grid-auto-flow: column;
  }
}
.module-explore__table {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-SM, 8px);
}
.module-explore__table-title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.module-explore__note {
  margin: 0;
  font-size: 12px;
  font-style: italic;
  line-height: normal;
  color: var(--Text-Secondary);
}
/* Filters-only module (ModuleConfig.explore_results off): the note standing in for the
   results column, in the intro's 16/24 Text-Secondary. */
.module-explore__pending {
  margin: 0;
  font-size: 16px;
  line-height: 24px;
  color: var(--Text-Secondary);
}

/* Key messages of the Global Overview (decision 2026-09-23): a "Key message n" eyebrow in
   the module accent (Category style), the statement in bold 16/24, then a full-width
   chart. Blocks are separated by the findings rule like the chart rows. */
.module-message {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-SM, 8px);
}
.module-message__eyebrow {
  margin: 0;
  font: var(--text-Category);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--module-accent);
}
.module-message__statement {
  margin: 0 0 var(--Spacing-SM, 8px);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--Text-Primary);
}

/* =====================================================================================
   About page (/about, issue #63), Figma frame "About" (51890:7077): the module-home hero
   card in the Overall context with its content across the card's width, then the sections,
   all always open (team, 2026-10-15: the frame's Accordion dropped, no chevron) — a 24px
   bold title on a Border-Default rule, 32px apart; 16px padding and 32px between the title
   and its 14px body. Inside: a Card per instrument and a ContentBackground (Light-Blue)
   panel for the citation.
   ===================================================================================== */
.about-page {
  --module-accent: var(--Context-Overall-Primary);
  --module-wash: var(--Context-Overall-Primary-opacity-20);
  background: var(--Background-Default);
}
/* The frame puts the hero card on the 1136px column, like the sections, so the hero keeps
   the container's gutters (.module-hero drops them on the module homes). */
.about-page .module-hero {
  padding-inline: calc(var(--bs-gutter-x) * 0.5);
}
.about-page .module-hero__content {
  max-width: none;
}
.about-body {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-XLG, 32px);
  padding: var(--Spacing-XLG, 32px) 0;
}
.about-page a:not(.ds-button) {
  color: var(--Context-Overall-Primary);
  text-decoration: underline;
}
.about-page a:not(.ds-button):hover,
.about-page a:not(.ds-button):focus-visible {
  color: var(--Dark-Blue);
}
.about-page a:focus-visible {
  outline: 2px solid var(--Dark-Blue);
  outline-offset: 2px;
}

.about-section {
  padding: var(--Spacing-MD, 16px) 0;
  border-bottom: 1px solid var(--Border-Default);
  scroll-margin-top: 4rem;
}
.about-section__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.about-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
  padding-top: var(--Spacing-XLG, 32px);
}
.about-section h3 {
  margin: var(--Spacing-SM, 8px) 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: var(--Text-Primary);
}
.about-section p,
.about-section li {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--Text-Primary);
}
.about-section ul {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-XSM, 4px);
  margin: 0;
  padding-inline-start: 1.5rem;
}

/* The instrument cards: Border-Default, Radius-SM, Spacing-LG padding; the title in the
   module's context colour, the glyph in its disc (NBSAP: no logo here — the card keeps the
   plain glyph like the home's tiles). */
.about-cards {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-LG, 24px);
}
.about-card {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-MD, 16px);
  padding: var(--Spacing-LG, 24px);
  border: 1px solid var(--Border-Default);
  border-radius: var(--Radius-SM, 8px);
  scroll-margin-top: 4rem;
}
.about-card--nbsap {
  --module-accent: var(--Context-NBSAP-Primary);
}
.about-card--ndc {
  --module-accent: var(--Context-NDC-Primary);
}
.about-card__head {
  display: flex;
  align-items: center;
  gap: var(--Spacing-SM, 8px);
}
.about-card__title {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: var(--module-accent);
}
.about-card__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--Spacing-SM, 8px);
}
.about-card__subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--Text-Secondary);
}
/* A module not released yet (synthetic sample): SOON badge, no draft text, no status. */
.about-card--soon {
  background: var(--Background-Subtle);
  border-color: var(--Border-Subtle);
}
.about-card--soon .about-card__title {
  color: var(--Text-Primary);
}
.about-doc--soon {
  color: var(--Text-Secondary);
}

/* Status block: Background-Subtle panel, Category labels over bold values. */
.about-status {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--Spacing-XSM, 4px) var(--Spacing-LG, 24px);
  margin: 0;
  padding: var(--Spacing-MD, 16px);
  border-radius: var(--Radius-SM, 8px);
  background: var(--Background-Subtle);
}
.about-status dt {
  font: var(--text-Category);
  text-transform: uppercase;
  color: var(--Text-Primary);
}
.about-status dd {
  margin: 0 0 var(--Spacing-SM, 8px);
  font-size: 16px;
  font-weight: 700;
  line-height: 24px;
  color: var(--Text-Primary);
}
.about-status dd:last-child {
  margin-bottom: 0;
}

/* Licence: the official Creative Commons "CC BY" button (88 × 31 nominal, 31px tall here)
   beside the sentence; both link the legal code. */
.about-licence {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--Spacing-MD, 16px);
}
.about-page a.about-licence__badge-link {
  flex: 0 0 auto;
  line-height: 0;
  text-decoration: none;
}
.about-licence__badge {
  display: block;
  width: auto;
  height: 31px;
}
.about-licence p {
  flex: 1 1 320px;
  min-width: 0;
}

/* ContentBackground: the citation on the FAO Light-Blue panel. */
.about-callout {
  display: flex;
  flex-direction: column;
  gap: var(--Spacing-SM, 8px);
  padding: var(--Spacing-MD, 16px) var(--Spacing-LG, 24px);
  border-radius: var(--Radius-SM, 8px);
  background: var(--Light-Blue);
}
.about-callout__lead {
  font-weight: 700;
}

@media (min-width: 768px) {
  .about-body {
    padding-top: var(--Spacing-LG, 24px);
  }
  .about-status {
    grid-template-columns: max-content 1fr;
    align-items: baseline;
  }
  .about-status dd {
    margin: 0;
  }
}

/* =====================================================================================
   Chart download button (issue #95). A chart's mode bar holds only Plotly's "toImage"
   button (theme.graph_config); its camera glyph reads as "take a photo", so the button
   draws the design system's file-download glyph instead, at full text strength. It is the
   one mode-bar button without a data-attr (the map buttons all carry one; analytics.js
   picks the export click out the same way). Plotly colours the camera path through an
   ID-scoped rule, so the path is hidden and the glyph is the svg's own mask.
   ===================================================================================== */
.js-plotly-plot .plotly .modebar-btn:not([data-attr]) svg {
  width: 20px;
  height: 20px;
  top: 0;
  background-color: var(--Text-Secondary);
  -webkit-mask: url("icons/file-download.svg") center / contain no-repeat;
  mask: url("icons/file-download.svg") center / contain no-repeat;
}
.js-plotly-plot .plotly .modebar-btn:not([data-attr]) svg path {
  display: none;
}
.js-plotly-plot .plotly .modebar-btn:not([data-attr]):hover svg,
.js-plotly-plot .plotly .modebar-btn:not([data-attr]):focus-visible svg {
  background-color: var(--Text-Primary);
}