:root {
  --who-navy:        #00205C;   /* Footer & accents */
  --who-navy-dark:   #001844;
  --who-blue:        #008DC9;   /* Primary action / link — matches who.int/westernpacific */
  --who-blue-dark:   #006fa8;
  --who-green:       #009639;   /* WHO institutional green */
  --header-bg:       #2a2f3a;
  --header-bg-dark:  #1a1f2e;
  --fg:              #1f1f1f;
  --bg:              #ffffff;
  --bg-soft:         #f6f6f6;
  --muted:           #5a5a5a;
  --border:          #e1e5ea;
  --max-width:       1200px;     /* who.int-style bounded width */
  --prose-width:     75ch;       /* readable prose width */
  --radius:          4px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.55;
}

img { max-width: 100%; height: auto; display: block; }

.container {
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.container-narrow {
  max-width: var(--prose-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

a { color: var(--who-blue); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { color: var(--who-navy); line-height: 1.25; margin-top: 0; }

/* ---------- Utility bar (top, black — who.int/westernpacific pattern) ---------- */
.utility-bar {
  background: #000;
  color: #fff;
  font-size: 0.85rem;
}
.utility-bar-inner {
  display: flex;
  justify-content: flex-end;
}
.utility-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
.utility-links a {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  color: #fff;
  text-decoration: none;
}
.utility-links a:hover {
  background: var(--who-blue);
  text-decoration: none;
}

/* ---------- Brand row (white — who.int pattern) ---------- */
.site-header {
  background: #fff;
  border-bottom: 1px solid var(--border);
}

/* Chrome containers must stay full-width regardless of any embedded
   app's CSS. Some bundled dashboards ship a global `.container { max-width:
   1400px }` rule plus a `.container { padding: 0 1rem }` rule that would
   otherwise leak in, cap the chrome width, and collapse the header
   vertical padding (because `.header-top` and `.container` are the same
   element — the bundle's `.container` wins on source order). The
   descendant selectors here bump host specificity above the bundle's. */
.utility-bar > .container,
.site-header > .container,
.site-nav > .container,
.site-footer > .container {
  max-width: none;
  padding: 0 1.5rem;
}
.site-header > .header-top {
  padding: 1rem 1.5rem;
}
.header-top {
  display: flex;
  align-items: center;
  padding: 1rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--who-navy);
  text-decoration: none;
}
.brand:hover { text-decoration: none; }
.brand-logo {
  height: 56px;
  width: auto;
  display: block;
}
.brand-text {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--who-navy);
}

/* ---------- Main nav (WHO blue, sticky, white text, dark hover) ---------- */
.site-nav {
  background: var(--who-blue);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,32,92,0.15);
}
.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  /* Single-row nav with horizontal scroll when the items don't fit the
     viewport. The scrollbar is hidden for a clean look — users swipe on
     touch / shift-scroll on desktop. Scroll-snap makes items align
     cleanly after a flick. */
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old IE / Edge */
}
.site-nav ul::-webkit-scrollbar { display: none; }   /* Chrome / Safari */
.site-nav li {
  display: flex;
  scroll-snap-align: start;
  flex: 0 0 auto;
}
.site-nav a {
  color: #fff;
  padding: 0.85rem 1.1rem;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover,
.site-nav a:focus {
  background: var(--who-blue-dark);
  color: #fff;
  text-decoration: none;
  border-bottom-color: var(--who-navy);
}

@media (max-width: 820px) {
  /* Slightly tighter padding + a hint that the bar scrolls horizontally
     (gradient fade on the right edge when content overflows). */
  .site-nav a {
    padding: 0.75rem 0.85rem;
    font-size: 0.9rem;
  }
  .site-nav {
    background-image:
      linear-gradient(to right, var(--who-blue), var(--who-blue) 90%, rgba(0,0,0,0.15));
  }
}

@media (max-width: 720px) {
  .header-top { flex-direction: row; gap: 0.75rem; padding: 0.75rem 1rem; }
  .brand-text { font-size: 1rem; }
  .brand-logo { height: 40px; }
  .utility-links { font-size: 0.75rem; }
  .utility-links a { padding: 0.4rem 0.6rem; }
  /* Utility bar also gets horizontal scroll on very narrow screens */
  .utility-links {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .utility-links::-webkit-scrollbar { display: none; }
  .utility-links li { flex: 0 0 auto; }
}

/* ---------- Main ---------- */
main { padding: 1.5rem 0 0; min-height: 50vh; }

/* ---------- Hero carousel ---------- */
.hero-carousel {
  position: relative;
  background: var(--who-navy);
  overflow: hidden;
}
.carousel-backdrop {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 60%;                   /* overlap at center hides the seam */
  background-size: cover;
  background-position: center;
  filter: blur(12px) saturate(1.15);
  opacity: 0.7;
  pointer-events: none;
  transition: opacity 0.6s ease-in-out, background-image 0.6s ease-in-out;
  transform: scale(1.15);       /* hide the blur-edge fade */
}
.carousel-backdrop-prev { left: 0; }
.carousel-backdrop-next { right: 0; }

.carousel {
  position: relative;
  z-index: 1;
  max-width: 1000px;            /* narrower than container so backdrops show */
  margin: 0 auto;
  aspect-ratio: 1100 / 581;
  max-height: 50vh;             /* never exceed half the viewport */
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
}
.carousel-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  pointer-events: none;
  text-decoration: none;
  color: #fff;
}
.carousel-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}
.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.carousel-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 2rem 2.5rem 2.75rem;
  background: linear-gradient(to top, rgba(0,32,92,0.92), rgba(0,32,92,0.3) 70%, rgba(0,32,92,0));
  color: #fff;
  text-align: center;
}
.carousel-caption h2 {
  color: #fff;
  font-size: 1.7rem;
  margin: 0 0 0.25rem;
}
.carousel-caption p { margin: 0.15rem auto; color: #fff; }
.carousel-date {
  font-size: 1rem;
  opacity: 0.9;
  letter-spacing: 0.02em;
}
.carousel-tagline {
  font-size: 1.1rem;
  font-style: italic;
  font-weight: 600;
  margin-top: 0.6rem !important;
}
.carousel-description {
  font-size: 0.95rem;
  opacity: 0.92;
  max-width: 70ch;
  line-height: 1.45;
  margin-top: 0.4rem !important;
}

@media (max-width: 720px) {
  .carousel-caption { padding: 1rem; }
  .carousel-caption h2 { font-size: 1.1rem; }
  .carousel-tagline { font-size: 0.95rem; }
  .carousel-description { display: none; }
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;                 /* above backdrops and carousel */
  background: rgba(0,0,0,0.45);
  color: #fff;
  border: 0;
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-btn:hover {
  background: rgba(0,0,0,0.75);
  transform: translateY(-50%) scale(1.08);
}
/* Centered over each backdrop strip on wide viewports; tucked to viewport
   edges on narrow ones where the backdrops are barely visible. */
.carousel-prev { left: max(0.75rem, calc(50% - 500px - 4.5rem)); }
.carousel-next { right: max(0.75rem, calc(50% - 500px - 4.5rem)); }

.carousel-dots {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  z-index: 2;
}
.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,0.5);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s ease, transform 0.15s ease;
}
.carousel-dot.is-active {
  background: #fff;
  transform: scale(1.25);
}

@media (max-width: 720px) {
  .carousel-btn { width: 36px; height: 36px; font-size: 1.1rem; }
}

.section-title {
  font-size: 1.5rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--who-blue);
  display: inline-block;
}

/* Heading row: section title on the left, "View all →" link on the right. */
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0 0 1.25rem;
}
.section-heading .section-title { margin-bottom: 0; }
.section-viewall {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--who-blue);
  text-decoration: none;
  white-space: nowrap;
  padding-bottom: 0.25rem;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.section-viewall:hover {
  color: var(--who-blue-dark);
  border-bottom-color: var(--who-blue);
  text-decoration: none;
  transform: translateX(2px);
}

/* "View all" link rendered at the bottom of a section as a pill button. */
.section-footer-link {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.section-footer-link--right { justify-content: flex-end; }
.section-viewall--button {
  background: #fff;
  border: 1.5px solid var(--who-blue);
  padding: 0.65rem 1.5rem;
  border-radius: 999px;
  font-size: 0.95rem;
  color: var(--who-blue);
}
.section-viewall--button:hover {
  background: var(--who-blue);
  color: #fff;
  border-bottom-color: var(--who-blue);
}

/* "View all" link on the carousel — sits at the FAR right of the section
   (over the next-slide backdrop, beyond the slide itself). */
.carousel-viewall {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: rgba(0, 32, 92, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.carousel-viewall:hover {
  background: var(--who-blue);
  color: #fff;
  text-decoration: none;
  transform: translateX(2px);
  border-color: rgba(255,255,255,0.6);
}
@media (max-width: 600px) {
  /* On small screens hide the link to avoid crowding the slide caption.
     The dedicated section nav link still gets users there. */
  .carousel-viewall { display: none; }
}

/* ---------- Indicators ---------- */
.indicators {
  background: var(--bg-soft);
  padding: 2.5rem 0;
}
.indicators-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* Indicators listing page (/indicators/) */
.indicators-listing {
  padding: 2rem 0 3rem;
}
.indicators-listing > .container { max-width: 1400px; }
.indicators-listing .section-title { margin-bottom: 0.75rem; }
.indicators-intro { color: var(--muted); max-width: 70ch; margin-bottom: 1.5rem; }
.indicators-subhead {
  font-size: 1.1rem;
  color: var(--who-navy);
  margin: 2rem 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--who-blue);
  display: inline-block;
}
.indicators-grid--listing {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
.indicator-header--text-only {
  min-height: 64px;     /* shorter than the homepage cards (no icon) */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.indicator-header--text-only .indicator-title { text-align: center; }
.indicators-grid--listing .indicator-body { padding: 1rem 1rem 1.25rem; }
.indicators-grid--listing .indicator-value { font-size: 1.4rem; }
.indicators-grid--listing .indicator-description { font-size: 0.85rem; }
.indicator-description--placeholder { font-style: italic; opacity: 0.7; }

/* Small date strip at the bottom of an indicator card */
.indicator-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--muted);
  background: #fafbfc;
}
.indicator-footer time { font-variant-numeric: tabular-nums; margin-left: auto; }
.indicator-badge {
  background: var(--who-blue);
  color: #fff;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.indicator-badge--external {
  background: var(--who-navy);
}

/* "Read the full article" CTA on indicator detail pages */
.indicator-detail-external { margin-top: 1.25rem; }
.cta-external {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.1rem;
  background: var(--who-blue);
  color: #fff;
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease, transform 0.15s ease;
}
.cta-external:hover {
  background: var(--who-blue-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}
.cta-external strong { color: #fff; font-weight: 700; }

/* Filter bar above the indicator grid */
.indicator-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 1rem;
  margin-bottom: 1.5rem;
}
.indicator-filter-field {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.indicator-filter-field--search { flex: 1; min-width: 220px; }
.indicator-filter-field input[type="search"] {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.indicator-filter-field input[type="search"]:focus {
  outline: 2px solid var(--who-blue);
  outline-offset: -1px;
}
.indicator-filter-field select {
  padding: 0.45rem 0.5rem;
  font: inherit;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
}
.indicator-filter-toggle {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--fg);
  cursor: pointer;
  user-select: none;
}
.indicator-filter-toggle input { accent-color: var(--who-blue); }
.indicator-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.indicator-empty {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-style: italic;
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Indicator detail page (/indicators/<slug>/) */
.indicator-detail-eyebrow {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.85rem;
}
.indicator-detail-eyebrow a {
  color: var(--muted);
  text-decoration: none;
}
.indicator-detail-eyebrow a:hover { color: var(--who-blue); }

/* Hero band — compact variant */
.indicator-hero {
  position: relative;
  background: linear-gradient(135deg, #f6fbfe 0%, #eef5fa 100%);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.1rem 1.25rem 1.1rem 1.5rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  isolation: isolate;
}
.indicator-hero::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--who-blue), var(--who-navy));
}
.indicator-hero--featured {
  background: linear-gradient(135deg, #fff7ec 0%, #fff1e0 100%);
}
.indicator-hero--featured::before {
  background: linear-gradient(180deg, #f59e0b, #b45309);
}

.indicator-hero-inner {
  display: grid;
  grid-template-columns: 1fr auto;   /* content left, icon right */
  gap: 1.25rem;
  align-items: center;
}
.indicator-hero:not(.indicator-hero--with-icon) .indicator-hero-inner {
  grid-template-columns: 1fr;
}

/* Icon: layered ring + WHO-blue badge + colored icon on white */
.indicator-hero-iconwrap {
  position: relative;
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.indicator-hero-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--who-blue), var(--who-navy));
  box-shadow: 0 6px 16px rgba(0, 32, 92, 0.18);
}
.indicator-hero-ring::after {
  content: "";
  position: absolute;
  inset: 6px;
  background: #fff;
  border-radius: 50%;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}
.indicator-hero--featured .indicator-hero-ring {
  background: linear-gradient(135deg, #f59e0b, #b45309);
  box-shadow: 0 6px 16px rgba(180, 83, 9, 0.18);
}
.indicator-hero-icon {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px rgba(0,32,92,0.10));
}

/* Content column */
.indicator-hero-content { min-width: 0; }
.indicator-hero-title {
  margin: 0 0 0.25rem;
  color: var(--who-navy);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.indicator-hero-value {
  font-size: clamp(1.7rem, 3.5vw, 2.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, var(--who-blue) 0%, var(--who-navy) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin: 0 0 0.4rem;
}
.indicator-hero-description {
  font-size: 0.95rem;
  color: var(--fg);
  max-width: 60ch;
  line-height: 1.45;
  margin: 0 0 0.6rem;
}

.indicator-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.4rem;
}
.indicator-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 999px;
  background: #fff;
  color: var(--muted);
  border: 1px solid var(--border);
}
.indicator-tag--featured { background: #fff7ec; color: #b45309; border-color: #fde4b3; }
.indicator-tag--external { background: #eef5fa; color: var(--who-navy); border-color: #d6e3ed; }
.indicator-tag--date     { font-variant-numeric: tabular-nums; }

.indicator-hero-cta {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(0,32,92,0.15);
}

/* Body */
.indicator-detail-body { font-size: 1rem; line-height: 1.65; }
.indicator-detail-body > h1:first-child { display: none; }

/* ============================================================
   Data catalogue embed (catalogue-embed.umd.js) — WHO-branded
   overrides. The bundle's CSS references a bunch of CSS variables
   it doesn't define itself — we fill them in below and then layer
   specific class overrides for the dataset detail view.
   ============================================================ */
:root {
  /* Palette tokens the bundle expects */
  --color-primary:    var(--who-blue);
  --color-white:      #ffffff;
  --color-danger:     #d32f2f;
  --color-gray-50:    #f6fbfe;
  --color-gray-100:   #eef5fa;
  --color-gray-200:   #d6e3ed;
  --color-gray-300:   #b6c5d2;
  --color-gray-400:   #7d8a96;
  --text-primary:     var(--who-navy);
  --text-secondary:   #4a5765;
  --text-muted:       var(--muted);

  /* Spacing scale (Tailwind-ish 0.25rem ramp) */
  --spacing-1:  0.25rem;
  --spacing-2:  0.5rem;
  --spacing-3:  0.75rem;
  --spacing-4:  1rem;
  --spacing-6:  1.5rem;
  --spacing-8:  2rem;
  --spacing-10: 2.5rem;
  --spacing-12: 3rem;

  /* Typography ramp */
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.85rem;
  --font-size-base: 0.95rem;
  --font-size-lg:   1.1rem;
  --font-size-xl:   1.35rem;
  --font-weight-normal:    400;
  --font-weight-medium:    500;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --line-height-tight:     1.2;
  --line-height-relaxed:   1.6;

  /* Borders & shadows */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-full: 999px;
  --shadow-sm:   0 1px 3px rgba(0,32,92,0.08);
  --shadow-lg:   0 8px 24px rgba(0,32,92,0.16);

  --transition-fast: 0.15s ease;
}

/* Full-bleed article — no centered container constraint. Matches the
   horizontal padding used by .catalogue-fullwidth on /datasets/. */
.page-article--bleed {
  max-width: none !important;
  width: 100%;
  margin: 0;
  padding: 0.5rem 1.25rem 2rem;
}
/* In-page Vue/JS embeds — break the mount target out of its centered
   container so the dashboard fills the full viewport width while the
   page chrome (eyebrow, h1, footer) stays comfortably padded inside
   .container like other dashboard pages. */
#app.embedded-app {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Dashboards whose own bundle CSS caps `#app` at a max-width
   (e.g. e-cigarette: max-width 1280px) must opt back out of the
   full-viewport rule above — otherwise the negative margins shift the
   capped content to the left and leave white space on the right. The
   body class for each embedded dashboard is `<slug>-embedded`. */
body.e-cigarette-embedded #app.embedded-app {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Data Explorer mount target. Same layout pattern as the catalogue embed
   on /datasets/. */
.data-explorer-mount {
  background: #fff;
  border: 0;
  border-radius: 0;
  min-height: 600px;
}
/* The bundle's own root caps itself at 1600px and auto-centres. Override
   so it fills whatever container we drop it into. */
.data-explorer-mount .data-explorer {
  max-width: none !important;
  margin: 0 !important;
}

/* Compact the selection panel so the results-area appears above the fold. */
.data-explorer-mount .selection-panel {
  padding: 0.75rem 1rem !important;
  margin-bottom: 0.85rem !important;
}
.data-explorer-mount .selection-section {
  margin-bottom: 0.65rem !important;
  padding-bottom: 0.5rem !important;
}
.data-explorer-mount .section-header {
  margin-bottom: 0.4rem !important;
}
.data-explorer-mount .section-title {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}
.data-explorer-mount .section-actions { gap: 0.4rem !important; }
.data-explorer-mount .limit-label { font-size: 0.78rem !important; }
.data-explorer-mount .limit-select {
  padding: 0.15rem 0.4rem !important;
  font-size: 0.8rem !important;
}
.data-explorer-mount .search-box { margin-bottom: 0.4rem !important; }
.data-explorer-mount .search-input {
  padding: 0.4rem 0.65rem !important;
  font-size: 0.85rem !important;
}
/* Two-column layout for the two selection sections so they sit side-by-side
   on wide viewports — frees vertical space for the results below. */
@media (min-width: 980px) {
  .data-explorer-mount .selection-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
  }
  .data-explorer-mount .selection-panel > .selection-section:last-of-type {
    border-bottom: 0;
  }
  /* If a final action / clear-all row exists, span both columns. */
  .data-explorer-mount .selection-panel > .panel-actions,
  .data-explorer-mount .selection-panel > .results-bar {
    grid-column: 1 / -1;
  }
}

/* Data catalogue embed page */
.catalogue-page-header {
  margin: 0 0 1.25rem;
  padding: 0;
}
.catalogue-page-header h1 {
  margin: 0 0 0.4rem;
  color: var(--who-navy);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
}
/* Hide the bundle's own .page-title h1 — we render our own header above. */
.data-explorer-mount .panel-header { display: none; }
.catalogue-page-header p { margin: 0; color: var(--muted); max-width: 70ch; }
.catalogue-container {
  margin: 0;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
}
/* Full-width override for /datasets/ and /datasets/<id>/ — bypass the
   site-wide max-width so the catalogue listing + detail use the full
   viewport. */
.catalogue-fullwidth {
  max-width: none;
  width: 100%;
  padding: 0.5rem 1.25rem 2rem;
  margin: 0;
}
.catalogue-fullwidth .catalogue-page-header {
  max-width: none;
  padding: 0;
  margin: 0 0 1rem;
}
.catalogue-fullwidth .catalogue-container {
  max-width: none;
  width: 100%;
}

/* ---------- Dataset detail view (.dataset-detail) ---------- */
.dataset-detail {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The bundle renders the back button TWICE — once at the
   `.embed-detail-view` toolbar level (outer) and once inside the
   `.dataset-detail` card (inner). Hide the inner duplicate; style the
   outer one. */
.dataset-detail .back-btn { display: none !important; }

.dataset-detail .back-btn,
.embed-detail-view .back-btn,
.embed-toolbar .back-btn,
button.back-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  color: var(--who-blue) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: color 0.15s ease, transform 0.15s ease;
}
.dataset-detail .back-btn { display: none !important; }  /* hide inner duplicate */
.embed-detail-view .back-btn:hover,
.embed-toolbar .back-btn:hover,
button.back-btn:hover {
  color: var(--who-blue-dark) !important;
  background: transparent !important;
  transform: translateX(-2px);
}

/* No card — just a heading with a hairline above (acts as a subtle
   separator between the "Back to list" link and the title). */
.dataset-detail .detail-header-card {
  background: none !important;
  color: var(--who-navy) !important;
  border: 0 !important;
  border-left: 0 !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 0.3rem 0 0 !important;
  margin: 0.3rem 0 0.45rem !important;
  box-shadow: none !important;
  display: block !important;
  position: static;
  overflow: visible;
}
.dataset-detail .detail-header-card::after { content: none; }
.dataset-detail .header-top { display: block; }

/* (header-top compact rules consolidated above) */
.dataset-detail .header-top--legacy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
/* Type pill hidden — header keeps just the title + copy link. */
.dataset-detail .type-badge { display: none; }
/* Share/copy link button is hidden — title alone is enough. */
.dataset-detail .copy-link-btn { display: none !important; }

/* Plain title — navy on page background, no card. */
.dataset-detail .detail-title,
.dataset-detail .detail-header-card .detail-title,
.dataset-detail .detail-header-card h1 {
  margin: 0 0 0.25rem !important;
  color: var(--who-navy) !important;
  font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  text-shadow: none !important;
}
/* Quiet subtitle line under the title (country / group name). */
.dataset-detail .header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.2rem 0.6rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}
.dataset-detail .detail-header-card .meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  font-weight: 500;
}
.dataset-detail .detail-header-card .meta-tag svg {
  width: 14px;
  height: 14px;
  color: var(--who-blue);
  flex-shrink: 0;
}
.dataset-detail .detail-header-card .meta-tag + .meta-tag::before {
  content: "·";
  margin-right: 0.45rem;
  color: var(--border);
}
/* Pills we don't want surfaced in the header */
.dataset-detail .detail-header-card .type-badge { display: none !important; }
.dataset-detail .detail-header-card .category-badge { display: none !important; }
.dataset-detail .meta-tag {
  background: rgba(255,255,255,0.1);
  border: 0;
  color: rgba(255,255,255,0.9);
  padding: 0.1rem 0.5rem;
  border-radius: 3px;
  font-size: 0.75rem;
  font-weight: 500;
}

/* Section cards (Indicator metadata, Sources, Preview, Downloads). */
.dataset-detail .section-card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  padding: 0.45rem 0.65rem !important;
  margin-bottom: 0.4rem !important;
  box-shadow: none !important;
}
.dataset-detail .section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem !important;
  padding-bottom: 0.2rem !important;
  border-bottom: 1.5px solid var(--who-blue) !important;
}
.dataset-detail .section-header h2,
.dataset-detail .section-header h3 {
  margin: 0 !important;
  font-size: 0.95rem !important;
  color: var(--who-navy) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700 !important;
}
/* Category pill is redundant — title alone is enough. Hide everywhere. */
.dataset-detail .category-badge { display: none !important; }

/* Stats grid (record_count, indicator_count, year_min..year_max) */
.dataset-detail .stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.65rem;
  margin-top: 0.75rem;
}
.dataset-detail .stat,
.dataset-detail .stat-card {
  background: #f6fbfe;
  border: 1px solid #d6e3ed;
  border-radius: 5px;
  padding: 0.5rem 0.65rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.6rem;
}
.dataset-detail .stat-icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--who-blue);
  display: flex;
  align-items: center;
  justify-content: center;
}
.dataset-detail .stat-icon svg { width: 100%; height: 100%; }
.dataset-detail .stat-content {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}
.dataset-detail .stat-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.1;
}
.dataset-detail .stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--who-navy);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}

/* Metadata grid (key/value pairs) */
.dataset-detail .metadata-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.5rem 1.5rem;
}
.dataset-detail .metadata-item {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.4rem 0.75rem;
  align-items: baseline;
  padding: 0.35rem 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.85rem;
}
.dataset-detail .metadata-item:last-child { border-bottom: 0; }
.dataset-detail .metadata-item > *:first-child {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  font-weight: 700;
}
.dataset-detail .metadata-item > *:last-child {
  color: var(--fg);
  line-height: 1.45;
}
.dataset-detail .metadata-item--inline {
  grid-template-columns: max-content 1fr;
  border-bottom: 1px dashed var(--border);
}

/* Indicator-metadata card: solid WHO-blue background, white text, dense
   two-column layout (short values side-by-side, long values span full row). */
.dataset-detail .indicator-metadata-card {
  background: var(--who-blue);
  border: 1px solid var(--who-blue-dark);
  border-radius: 6px;
  padding: 0.6rem 0.9rem;
  margin-bottom: 0.85rem;
  color: #fff;
  font-size: 0.82rem;
  box-shadow: 0 1px 4px rgba(0,141,201,0.18);
}
.dataset-detail .indicator-metadata-card .metadata-grid {
  grid-template-columns: 1fr;
  gap: 0.3rem 1rem;
}
@media (min-width: 720px) {
  .dataset-detail .indicator-metadata-card .metadata-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Long-text items span both columns so they get full width to breathe. */
  .dataset-detail .indicator-metadata-card .metadata-item:has(p),
  .dataset-detail .indicator-metadata-card .metadata-item--full {
    grid-column: 1 / -1;
  }
}
.dataset-detail .indicator-metadata-card .metadata-item {
  padding: 0.25rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-size: 0.82rem;
}
.dataset-detail .indicator-metadata-card .metadata-item:last-child { border-bottom: 0; }
.dataset-detail .indicator-metadata-card .metadata-item > *:first-child {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  white-space: nowrap;
}
.dataset-detail .indicator-metadata-card .metadata-item > *:last-child {
  color: rgba(255,255,255,0.96);
  line-height: 1.45;
  font-size: 0.9rem;
}
.dataset-detail .indicator-metadata-card .metadata-item p {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.96);
  line-height: 1.45;
}

/* Downloads */
.dataset-detail .download-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.7rem;
}
.dataset-detail .download-card {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.75rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  text-decoration: none;
  color: var(--who-navy);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.dataset-detail .download-card:hover {
  border-color: var(--who-blue);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,141,201,0.15);
}
.dataset-detail .download-icon {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 800;
  font-size: 0.7rem;
  color: #fff;
  letter-spacing: 0.04em;
}
.dataset-detail .download-icon--csv     { background: linear-gradient(135deg, #1f7a3a, #15532a); }
.dataset-detail .download-icon--json    { background: linear-gradient(135deg, #b45309, #92400e); }
.dataset-detail .download-icon--parquet { background: linear-gradient(135deg, #6b21a8, #4c1d95); }
.dataset-detail .download-icon--xlsx    { background: linear-gradient(135deg, #15803d, #14532d); }
.dataset-detail .download-info { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dataset-detail .download-filename {
  font-weight: 600;
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dataset-detail .download-size {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dataset-detail .download-card--generated { background: #fff7ec; border-color: #fde4b3; }

/* Format badges */
.dataset-detail .format-badge {
  font-size: 0.65rem;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}
.dataset-detail .format-csv     { background: #d1fae5; color: #065f46; }
.dataset-detail .format-json    { background: #fed7aa; color: #7c2d12; }
.dataset-detail .format-xlsx    { background: #d1fae5; color: #064e3b; }

/* Sources list */
.dataset-detail .sources-section .source-item,
.dataset-detail .sources-list .source-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 5px;
  margin-bottom: 0.35rem;
  background: #fff;
  transition: border-color 0.15s ease;
}
.dataset-detail .source-item:hover { border-color: var(--who-blue); }
.dataset-detail .source-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: var(--who-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dataset-detail .source-name {
  font-weight: 600;
  color: var(--who-navy);
}
.dataset-detail .source-name-link {
  color: var(--who-blue) !important;
  text-decoration: none;
}
.dataset-detail .source-name-link:hover {
  color: var(--who-blue-dark) !important;
  text-decoration: underline;
}
.dataset-detail .source-name-glyph {
  font-size: 0.85em;
  color: var(--muted);
  margin-left: 0.15rem;
}
.dataset-detail .source-records {
  font-size: 0.78rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.dataset-detail .source-count {
  margin-left: auto;
  background: var(--who-blue);
  color: #fff;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
}

/* GHO API card */
.dataset-detail .gho-api-card {
  background: linear-gradient(135deg, #eef5fa, #d6e3ed);
  border: 1px solid #b6c5d2;
  border-left: 4px solid var(--who-blue);
  border-radius: 6px;
  padding: 0.85rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.dataset-detail .gho-api-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: var(--who-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dataset-detail .gho-api-label { font-size: 0.78rem; color: var(--muted); }
.dataset-detail .gho-api-url {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--who-navy);
  word-break: break-all;
}
.dataset-detail .gho-api-external { margin-left: auto; }

/* Preview table */
.dataset-detail .preview-info {
  background: #f6fbfe;
  border: 1px solid #d6e3ed;
  border-radius: 6px;
  padding: 0.7rem 0.95rem;
}
.dataset-detail .preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.dataset-detail .preview-table th {
  background: var(--who-navy);
  color: #fff;
  padding: 0.55rem 0.7rem;
  text-align: left;
  font-weight: 600;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
}
.dataset-detail .preview-table td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--border);
}
.dataset-detail .preview-table tbody tr:hover { background: #f6fbfe; }

/* Generic .btn used inside the detail view */
.dataset-detail .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: var(--who-blue);
  color: #fff;
  border: 1px solid var(--who-blue);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}
.dataset-detail .btn:hover {
  background: var(--who-blue-dark);
  border-color: var(--who-blue-dark);
  transform: translateY(-1px);
}

/* Observance detail — carousel-style hero (text overlaid on image) */
.observance-hero {
  position: relative;
  background: var(--who-navy);
}
.observance-hero-link {
  display: block;
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  aspect-ratio: 16 / 7;
  max-height: 60vh;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
}
.observance-hero-link:hover { text-decoration: none; }
.observance-hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--who-navy);
  transition: transform 0.5s ease, filter 0.2s ease;
}
.observance-hero--linkable .observance-hero-link { cursor: pointer; }
.observance-hero--linkable .observance-hero-link:hover .observance-hero-img {
  transform: scale(1.03);
  filter: brightness(1.04);
}
.observance-hero-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  background: var(--who-blue);
  color: #fff;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0,141,201,0.30);
}
/* Caption overlaid on the image at the bottom, navy gradient like the
   homepage carousel slide. */
.observance-hero-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 4rem 2rem 1.75rem;
  background: linear-gradient(to top,
    rgba(0, 32, 92, 0.92) 0%,
    rgba(0, 32, 92, 0.5)  60%,
    rgba(0, 32, 92, 0)   100%);
  color: #fff;
}
.observance-hero-eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
}
.observance-hero-eyebrow a,
.observance-hero-eyebrow .observance-hero-back {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
}
.observance-hero-eyebrow a:hover { color: #fff; text-decoration: underline; }
.observance-hero-title {
  color: #fff;
  margin: 0 0 0.4rem;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  line-height: 1.15;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.observance-hero-date {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  text-shadow: 0 1px 4px rgba(0,0,0,0.35);
}
.observance-hero-summary {
  margin: 0.5rem 0 0;
  max-width: 70ch;
}
.observance-hero-summary-line {
  margin: 0.2rem 0;
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.observance-hero-summary-line--lead {
  font-size: 1.1rem;
  font-weight: 600;
  font-style: italic;
  color: #fff;
}
.observance-hero-extlink {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.92);
}
.observance-hero-extlink strong {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Text-only hero when there's no image */
.observance-hero-textonly {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
  color: #fff;
}
.observance-hero-textonly h1 { color: #fff; margin-bottom: 0.5rem; }
.observance-hero-textonly .observance-hero-eyebrow a { color: rgba(255,255,255,0.85); }
.observance-hero-textonly .observance-hero-extlink a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Floating back-link bar shown when the hero is a single linkable image
   (nested anchors aren't allowed). */
.observance-backbar {
  background: #f6fbfe;
  border-bottom: 1px solid var(--border);
  padding: 0.55rem 0;
  font-size: 0.85rem;
}
.observance-backbar a {
  color: var(--who-navy);
  text-decoration: none;
}
.observance-backbar a:hover { color: var(--who-blue); }

@media (max-width: 720px) {
  .observance-hero-link { aspect-ratio: 4 / 3; max-height: none; }
  .observance-hero-caption { padding: 3rem 1.25rem 1rem; }
  .observance-hero-title { font-size: 1.15rem; }
  .observance-hero-date { font-size: 0.9rem; }
  .observance-hero-extlink { font-size: 0.8rem; }
}

/* ---------- Health observance calendar ---------- */
.observances { padding: 2rem 0 3rem; }
.observances > .container { max-width: 1400px; }
.observances-intro { color: var(--muted); max-width: 75ch; margin-bottom: 1.5rem; }

/* Year-filter pills above the calendar */
.calendar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin: 0.5rem 0 1.25rem;
  padding: 0.6rem 0.85rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.calendar-filters-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.calendar-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.calendar-pill {
  background: #fff;
  color: var(--who-navy);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.calendar-pill:hover {
  border-color: var(--who-blue);
  color: var(--who-blue);
}
.calendar-pill.is-active {
  background: var(--who-blue);
  border-color: var(--who-blue);
  color: #fff;
}
.calendar-pills-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}
@media (min-width: 1000px) {
  .calendar-grid { grid-template-columns: repeat(4, 1fr); }
}

.calendar-month {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.calendar-month--empty { opacity: 0.55; }

.calendar-month-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: var(--who-navy);
  color: #fff;
}
.calendar-month-header h2 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.calendar-count {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--who-blue);
  color: #fff;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
}

.calendar-events {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.calendar-event { border-top: 1px solid var(--border); }
.calendar-event:first-child { border-top: 0; }
.calendar-event-link {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  color: var(--fg);
  text-decoration: none;
  transition: background 0.12s ease;
}
.calendar-event-link:hover {
  background: #f6fbfe;
  text-decoration: none;
}
.calendar-event-day {
  flex: 0 0 30px;
  text-align: center;
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--who-blue);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  padding-top: 0.05rem;
}
.calendar-event-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.calendar-event-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--who-navy);
  line-height: 1.3;
}
.calendar-event-year {
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.calendar-empty {
  margin: 0;
  padding: 0.8rem 0.85rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--muted);
}

/* Country profile detail */
.profile-detail-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0.5rem 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--who-blue);
}

/* Compact variant — used when the page hosts an iframe / embedded app so
   the dashboard is the visual focus, not the page chrome. */
.profile-detail--compact .indicator-detail-eyebrow { margin: 0.5rem 0 0.25rem; font-size: 0.8rem; }
.profile-detail--compact .profile-detail-header {
  margin: 0.25rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.profile-detail--compact .profile-detail-header h1 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.profile-detail--compact .profile-tags { margin-bottom: 0.5rem; }
.profile-detail--compact .indicator-detail-body { font-size: 0.95rem; line-height: 1.55; margin-bottom: 0.75rem; }
.profile-detail--compact .indicator-detail-body > *:first-child { margin-top: 0; }
/* The embed itself grows to fill width when we're in compact mode. */
.profile-detail--compact .profile-embeds { margin-top: 0.75rem; }
.profile-detail--compact .profile-embeds-title {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
.profile-detail--compact .dashboard-embed { margin-top: 0.5rem; }
.profile-detail-header h1 {
  margin: 0;
  color: var(--who-navy);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
}
.profile-year {
  background: var(--who-blue);
  color: #fff;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Tags row */
.profile-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.5rem;
}
.profile-tag {
  background: #eef5fa;
  color: var(--who-navy);
  border: 1px solid #d6e3ed;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Embedded dashboards (shinyapps iframes extracted from related links) */
.profile-embeds {
  margin: 2rem 0;
}
.profile-embeds-title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  color: var(--who-navy);
  padding-bottom: 0.4rem;
  border-bottom: 2px solid var(--who-blue);
  display: inline-block;
}
.profile-embeds .dashboard-embed {
  margin: 1rem 0 1.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
}
.profile-embeds .dashboard-embed figcaption {
  padding: 0.6rem 1rem;
  background: #f9fbfd;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Related links */
.profile-related {
  margin: 2rem 0 1.25rem;
  padding: 1.25rem 1.5rem;
  background: #f9fbfd;
  border: 1px solid var(--border);
  border-left: 4px solid var(--who-blue);
  border-radius: 8px;
}
.profile-related-title {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
  color: var(--who-navy);
}
.profile-related-body { font-size: 0.95rem; line-height: 1.7; }
.profile-related-body p { margin: 0; }
.profile-related-body a {
  color: var(--who-blue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}
.profile-related-body a:hover {
  border-bottom-color: var(--who-blue);
}

.indicator-detail-meta {
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--muted);
}

/* Keep side-by-side down to mid-mobile. Stack only when really narrow. */
@media (max-width: 520px) {
  .indicator-hero { padding: 1.25rem; }
  .indicator-hero-inner {
    grid-template-columns: 1fr;
    gap: 1rem;
    text-align: center;
  }
  .indicator-hero-iconwrap {
    width: 110px;
    height: 110px;
    margin: 0 auto;
    order: -1;            /* icon back on top when stacked */
  }
  .indicator-hero-icon { width: 64px; height: 64px; }
  .indicator-hero-description { margin-left: auto; margin-right: auto; }
  .indicator-hero-tags { justify-content: center; }
}

/* In the 520–760px band keep side-by-side but pack tighter. */
@media (max-width: 760px) and (min-width: 521px) {
  .indicator-hero { padding: 1rem 1.25rem; }
  .indicator-hero-inner { gap: 0.85rem; }
  .indicator-hero-iconwrap { width: 80px; height: 80px; }
  .indicator-hero-icon { width: 48px; height: 48px; }
}
.indicator-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--fg);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,32,92,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.indicator-card[hidden] { display: none !important; }
.indicator-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,32,92,0.18);
  text-decoration: none;
}

/* Card header band — title on left, icon on right */
.indicator-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: var(--who-blue);
  padding: 0.85rem 1rem;
  transition: background 0.15s ease;
  min-height: 80px;
}
.indicator-card:hover .indicator-header { background: var(--who-blue-dark); }
.indicator-title {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  margin: 0;
  color: #fff;
  line-height: 1.3;
  text-align: left;
}
.indicator-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
  flex-shrink: 0;
  background: #fff;
  border-radius: 50%;
  padding: 6px;
}

/* Card body */
.indicator-body {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.5rem;
  flex-grow: 1;
}
.indicator-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--who-navy);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}
.indicator-description {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* ---------- Featured (Dashboards & Apps) — also used by .profiles list ---------- */
.featured,
.profiles { padding: 2.5rem 0; }
.featured > .container,
.profiles > .container { max-width: 1200px; }
.featured-image--placeholder {
  background: linear-gradient(135deg, var(--who-blue), var(--who-navy));
}
.featured-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
@media (max-width: 960px) {
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .featured-grid { grid-template-columns: 1fr; }
}
.featured-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  color: var(--fg);
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,32,92,0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,32,92,0.18);
  text-decoration: none;
}
.featured-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  background: var(--bg-soft);
}

/* Card footer band — WHO navy with white title */
.featured-footer {
  background: var(--who-navy);
  padding: 0.9rem 1rem;
  flex-grow: 1;
  display: flex;
  align-items: center;
  transition: background 0.15s ease;
}
.featured-card:hover .featured-footer { background: var(--who-navy-dark); }
.featured-title {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0;
  color: #fff;
  line-height: 1.35;
}

/* ---------- Content pages ---------- */
.container > article,
.container > h1 {
  padding: 1.5rem 0;
}
.page-hero {
  background: var(--who-navy);
}
.page-hero img {
  display: block;
  width: 100%;
  max-width: 1000px;       /* keep close to source width to stay sharp on hi-DPI */
  margin: 0 auto;
  aspect-ratio: 16 / 7;    /* cinematic crop, mostly preserves native res */
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
}
.page-article { max-width: 1200px; margin: 0 auto; }
.page-article--fluid { max-width: none; }

/* Embedded Vite app (non-iframe). Establish a sane sizing context so the
   embedded dashboard's flex layout, Leaflet map, etc. work correctly. */
.embedded-app {
  display: block;
  width: 100%;
  /* Confine the embedded app to its own stacking context so its internal
     z-indexes (Leaflet map panes/controls reach 700-1000) can't paint over
     the sticky site nav (z-index: 100). Without this the map overlaps the
     menu on scroll. Internal stacking among the app's own layers is
     unaffected. Applies to every native embed (e-cig, hpv, tobacco-rap, ...). */
  position: relative;
  z-index: 0;
  isolation: isolate;
}
.embedded-app * { box-sizing: border-box; }
/* Leaflet's container needs a real height before L.map() runs. */
.embedded-app #maploc      { min-height: 480px; }
.embedded-app #current-map { min-height: 480px; height: 100%; width: 100%; }
.embedded-app .leaflet-container { height: 100%; width: 100%; min-height: 480px; }

/* UHC "What-If?" drawer (.scenario-panel) defaults to a narrow 25% strip flush
   against the right edge, which reads as too far right in the embed. On desktop,
   widen it and pull it slightly off the edge so it sits more toward centre.
   Embed-only (.embedded-app scope) — the standalone uhc-dashboard app is
   unchanged; tablet/mobile keep the bundle's own wider responsive widths. */
@media (min-width: 1201px) {
  .embedded-app .scenario-panel       { width: 40%; right: -44%; }
  .embedded-app .scenario-panel.open  { right: 3%; }
}

/* Embedded dashboards / iframes */
.dashboard-embed {
  position: relative;
  width: 100%;
  background: var(--bg-soft);
  margin: 1rem 0;
}
.dashboard-embed iframe,
article iframe {
  display: block;
  width: 100%;
  border: 0;
  background: #fff;
}
.dashboard-embed--responsive {
  aspect-ratio: 16 / 10;
}
.dashboard-embed--responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
article h1 { font-size: 1.75rem; }
article img { border-radius: var(--radius); margin: 0.5rem 0; max-width: 100%; height: auto; }
article figure { margin: 1rem 0; }
article figcaption { font-size: 0.85rem; color: var(--muted); text-align: center; }
article hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 1rem; }

.page-list {
  list-style: none;
  padding: 0;
}
.page-list li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

/* ---------- 404 / Page Not Found ---------- */
/* Sized to fit below the header within one viewport. Approx header height
   (utility-bar 32 + brand 88 + nav 52 + main top-padding 24) ≈ 196px.
   We subtract it AND cancel the <main> padding-top so the section
   centres within the visible space without overflow. */
.notfound {
  position: relative;
  min-height: calc(100vh - 196px);
  display: grid;
  place-items: center;
  padding: 1rem;
  margin-top: -1.5rem;             /* cancel main { padding-top: 1.5rem } */
  overflow: hidden;
  isolation: isolate;
}
.notfound-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.notfound-bg svg { width: 100%; height: 100%; display: block; }

.notfound-inner {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.notfound-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--who-blue);
  margin: 0 0 0.25rem;
}

.notfound-number {
  font-size: clamp(4.5rem, 11vw, 8rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--who-blue) 0%, var(--who-navy) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  margin: 0 0 0.75rem;
  user-select: none;
  position: relative;
}
.notfound-number::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  margin: 0.5rem auto 0;
  background: var(--who-blue);
  border-radius: 2px;
}

.notfound-title {
  color: var(--who-navy);
  font-size: clamp(1.35rem, 3vw, 1.85rem);
  margin: 0 0 0.5rem;
  font-weight: 700;
}

.notfound-message {
  font-size: 0.98rem;
  color: var(--muted);
  line-height: 1.55;
  max-width: 54ch;
  margin: 0 auto 1.25rem;
}

.notfound-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.notfound-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  color: var(--who-navy);
  font-weight: 600;
  text-decoration: none;
  font-size: 0.9rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease,
              transform 0.15s ease, box-shadow 0.15s ease;
}
.notfound-btn:hover {
  border-color: var(--who-blue);
  color: var(--who-blue);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,141,201,0.15);
}
.notfound-btn--primary {
  background: var(--who-blue);
  border-color: var(--who-blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,141,201,0.30);
}
.notfound-btn--primary:hover {
  background: var(--who-blue-dark);
  border-color: var(--who-blue-dark);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,141,201,0.40);
}

.notfound-shortcuts {
  font-size: 0.85rem;
  color: var(--muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.notfound-shortcuts-label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.notfound-shortcuts ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  justify-content: center;
  padding: 0;
  margin: 0;
}
.notfound-shortcuts a {
  color: var(--who-navy);
  text-decoration: none;
  font-weight: 500;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.notfound-shortcuts a:hover {
  color: var(--who-blue);
  border-color: var(--who-blue);
  text-decoration: none;
}

@media (max-height: 700px) {
  .notfound { min-height: auto; padding: 1rem; }
  .notfound-number { font-size: clamp(3.5rem, 9vw, 6rem); }
  .notfound-message { font-size: 0.9rem; margin-bottom: 0.75rem; }
  .notfound-shortcuts { padding-top: 0.75rem; }
}

/* ---------- Footer ---------- */
.site-footer {
  margin-top: 3rem;
  background: var(--who-navy);
  color: rgba(255,255,255,0.85);
}
.footer-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  padding: 2rem 1rem;
  align-items: start;
}
.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.footer-col {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a { color: #fff; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-logo img { max-width: 280px; }
.footer-legal {
  background: var(--who-navy-dark);
  padding: 0.75rem 0;
  font-size: 0.85rem;
}
.footer-legal a { color: #fff; }

@media (max-width: 720px) {
  .footer-main { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   AI analyze widget — used on /datasets/<slug>/ and (as a callout) on
   /data-explorer/. Self-contained so it can ship without affecting the
   embed bundles' own styles. Full content width to match the dataset
   table / chart above it.
   --------------------------------------------------------------------- */
.dataset-analyze-section {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.25rem;
  width: 100%;
  max-width: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fbfd;
  box-sizing: border-box;
}
.dataset-analyze-heading {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--who-navy, #002855);
}
.dataset-analyze-badge {
  display: inline-block;
  background: var(--who-blue, #00adef);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  vertical-align: middle;
}
.dataset-analyze-blurb {
  margin: 0 0 1rem;
  color: #4a5568;
  font-size: 0.92rem;
}
.dataset-analyze .da-form {
  display: block;
}
.dataset-analyze .da-label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
  color: var(--who-navy, #002855);
}
.dataset-analyze .da-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.dataset-analyze .da-input {
  flex: 1;
  min-width: 240px;
  padding: 0.6rem 0.8rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.95rem;
  font: inherit;
}
.dataset-analyze .da-input:focus {
  outline: none;
  border-color: var(--who-blue, #00adef);
  box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}
.dataset-analyze .da-btn {
  background: var(--who-blue, #00adef);
  color: #fff;
  border: 0;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.dataset-analyze .da-btn:hover { background: #0096cf; }
.dataset-analyze .da-btn:disabled { background: #94a3b8; cursor: wait; }
.dataset-analyze .da-hint {
  margin-top: 0.55rem;
  color: #64748b;
  font-size: 0.78rem;
}
.dataset-analyze .da-result {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #1f2937;
  line-height: 1.55;
}
.dataset-analyze .da-result p:first-child { margin-top: 0; }
.dataset-analyze .da-result ul { padding-left: 1.2rem; margin: 0.5rem 0; }
.dataset-analyze .da-result li { margin-bottom: 0.3rem; }
.dataset-analyze .da-meta {
  margin-top: 0.75rem;
  color: #94a3b8;
  font-size: 0.75rem;
}

/* Explorer header callout (above the bundle's filter UI).
   The site rule `.catalogue-page-header p { max-width: 70ch }` caps
   normal paragraphs for readability — we explicitly opt out so the
   callout stretches to the full content width like a banner. */
.explorer-ai-callout,
.catalogue-page-header p.explorer-ai-callout {
  max-width: none;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.75rem 0 0;
  padding: 0.6rem 0.85rem;
  background: #eaf6fc;
  border-left: 3px solid var(--who-blue, #00adef);
  border-radius: 4px;
  color: #1f2937;
  font-size: 0.9rem;
  flex-wrap: wrap;
}

/* Explorer "Summarize this view" section (under the bundle) — full
   content width to match the filter UI above. */
.explorer-analyze {
  margin: 2.25rem 0 0;
  padding: 1.5rem 1.25rem;
  width: 100%;
  max-width: none;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fbfd;
  box-sizing: border-box;
}
.explorer-analyze .ea-heading {
  margin: 0 0 0.35rem;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--who-navy, #002855);
}
.explorer-analyze .ea-blurb {
  margin: 0 0 1rem;
  color: #4a5568;
  font-size: 0.92rem;
}
.explorer-analyze .ea-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.85rem;
}
.explorer-analyze .ea-chip {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.85rem;
  color: #1f2937;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.explorer-analyze .ea-chip:hover {
  border-color: var(--who-blue, #00adef);
  background: #eaf6fc;
}
.explorer-analyze .ea-label {
  display: block;
  font-weight: 600;
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
  color: var(--who-navy, #002855);
}
.explorer-analyze .ea-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.explorer-analyze .ea-input {
  flex: 1;
  min-width: 240px;
  padding: 0.6rem 0.8rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.95rem;
  font: inherit;
}
.explorer-analyze .ea-input:focus {
  outline: none;
  border-color: var(--who-blue, #00adef);
  box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}
.explorer-analyze .ea-count-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0 0.6rem;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.9rem;
  color: #475569;
  cursor: help;
}
.explorer-analyze .ea-count-caption {
  white-space: nowrap;
  user-select: none;
}
.explorer-analyze .ea-count {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  padding: 0.25rem 0.4rem;
  font: inherit;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
}
.explorer-analyze .ea-count:focus {
  outline: none;
  border-color: var(--who-blue, #00adef);
  box-shadow: 0 0 0 2px rgba(0, 173, 239, 0.18);
}
.explorer-analyze .ea-btn {
  background: var(--who-blue, #00adef);
  color: #fff;
  border: 0;
  padding: 0.6rem 1.1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.explorer-analyze .ea-btn:hover { background: #0096cf; }
.explorer-analyze .ea-btn:disabled { background: #94a3b8; cursor: wait; }
.explorer-analyze .ea-status {
  min-height: 1.4em;
  margin: 0.55rem 0 0;
  font-size: 0.8rem;
  color: #64748b;
}
.explorer-analyze .ea-status--warn { color: #b45309; }
.explorer-analyze .ea-status--ok   { color: #047857; }
.explorer-analyze .ea-status--info { color: #1e40af; }
.explorer-analyze .ea-result {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #1f2937;
  line-height: 1.55;
}
.explorer-analyze .ea-result p:first-child { margin-top: 0; }
.explorer-analyze .ea-result ul { padding-left: 1.2rem; margin: 0.5rem 0; }
.explorer-analyze .ea-result li { margin-bottom: 0.3rem; }
.explorer-analyze .ea-result h4 {
  margin: 0.75rem 0 0.4rem;
  font-size: 1rem;
  color: var(--who-navy, #002855);
}
.explorer-analyze .ea-thinking {
  color: #64748b;
  font-style: italic;
}

/* ---------------------------------------------------------------------
   Site-wide semantic search  (content/search.md + /api/search) — full
   content width so the header banner stretches edge-to-edge like the
   other dashboard pages.
   --------------------------------------------------------------------- */
.site-search {
  width: 100%;
  max-width: none;
  margin: 2rem 0;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.site-search .site-search-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
  color: var(--who-navy, #002855);
}
.site-search .site-search-blurb {
  color: #4a5568;
  font-size: 0.95rem;
  margin: 0 0 1.25rem;
  /* No max-width — let it span the full content width like a banner. */
  max-width: none;
}
.site-search .ss-form { display: block; margin-bottom: 1rem; }
.site-search .ss-label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--who-navy, #002855);
}
.site-search .ss-row {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.site-search .ss-input {
  flex: 1;
  min-width: 260px;
  padding: 0.65rem 0.85rem;
  font-size: 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font: inherit;
}
.site-search .ss-input:focus {
  outline: none;
  border-color: var(--who-blue, #00adef);
  box-shadow: 0 0 0 3px rgba(0, 173, 239, 0.15);
}
.site-search .ss-btn {
  background: var(--who-blue, #00adef);
  color: #fff;
  border: 0;
  padding: 0.65rem 1.2rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.site-search .ss-btn:hover { background: #0096cf; }
.site-search .ss-btn:disabled { background: #94a3b8; cursor: wait; }
.site-search .ss-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.88rem;
  color: #475569;
}
.site-search .ss-filter input { margin-right: 0.35rem; }
.site-search .ss-status {
  min-height: 1.4em;
  margin: 0.6rem 0 0;
  font-size: 0.83rem;
  color: #64748b;
}
.site-search .ss-status--warn { color: #b45309; }
.site-search .ss-status--ok   { color: #047857; }
.site-search .ss-status--info { color: #1e40af; }

.site-search .ss-results { margin-top: 1.25rem; }
.site-search .ss-thinking {
  color: #64748b;
  font-style: italic;
  padding: 1rem;
}
.site-search .ss-summary {
  color: #64748b;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}
.site-search .ss-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-search .ss-item {
  margin-bottom: 0.6rem;
}
.site-search .ss-item-link {
  display: block;
  padding: 0.85rem 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  background: #fff;
  text-decoration: none;
  color: #1f2937;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.site-search .ss-item-link:hover {
  border-color: var(--who-blue, #00adef);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  text-decoration: none;
}
.site-search .ss-item-head {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.3rem;
}
.site-search .ss-item-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--who-navy, #002855);
}
.site-search .ss-item-badge {
  background: #e2e8f0;
  color: #475569;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
}
.site-search .ss-badge--datasets         { background: #dbeafe; color: #1e40af; }
.site-search .ss-badge--indicators       { background: #fef3c7; color: #92400e; }
.site-search .ss-badge--observances      { background: #fce7f3; color: #9d174d; }
.site-search .ss-badge--dashboard-and-apps { background: #d1fae5; color: #065f46; }
.site-search .ss-badge--country-profile  { background: #e0e7ff; color: #3730a3; }
.site-search .ss-badge--publications     { background: #f3e8ff; color: #6b21a8; }

.site-search .ss-item-snippet {
  margin: 0.25rem 0 0.35rem;
  color: #4a5568;
  font-size: 0.9rem;
  line-height: 1.45;
}
.site-search .ss-item-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin: 0;
  color: #94a3b8;
  font-size: 0.78rem;
}
.site-search .ss-item-url { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.site-search .ss-empty {
  color: #64748b;
  font-style: italic;
  padding: 1rem 0;
}