/* HaitiDocs /data/ — extends portal design system */

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

/* Screen-reader-only utility. Visually hidden, still announced by SRs. */
.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;
}
html { scroll-behavior: smooth; }
body {
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  color: #1a1a1a;
  background: #fff;
}

/* ─── Shared chrome: header + footer (matches portal index.html) ─── */
.header { background: #002244; }
.header-content {
  max-width: 1200px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; height: 48px;
}
.header-left { display: flex; align-items: center; gap: 8px; }
.header-right { display: flex; align-items: center; gap: 24px; }
.header-logo {
  font-family: 'Inter', sans-serif; font-size: 17px; font-weight: 800;
  color: #fff; letter-spacing: -.3px; text-decoration: none;
}
.header-nav { display: flex; gap: 22px; }
.header-nav a {
  font-family: 'Inter', sans-serif; color: rgba(255,255,255,.7);
  text-decoration: none; font-size: 13px; font-weight: 600; transition: color .15s;
}
.header-nav a:hover { color: rgba(255,255,255,.85); }
.header-nav a.active { color: #fff; }

.language-toggle {
  display: flex; gap: 2px; background: rgba(255,255,255,.15);
  padding: 2px; border-radius: 5px;
}
.lang-btn {
  padding: 4px 10px; border: none; background: transparent;
  color: rgba(255,255,255,.7); font-size: 12px; font-weight: 700;
  cursor: pointer; border-radius: 3px; transition: all .15s;
  font-family: 'Inter', sans-serif;
}
.lang-btn:hover { background: rgba(255,255,255,.1); color: rgba(255,255,255,.85); }
.lang-btn.active { background: rgba(255,255,255,.25); color: #fff; }

.page-wrapper { max-width: 1152px; margin: 0 auto; }

.site-footer {
  background: #f7f8fa; border-top: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 20px 20px; margin: 0 auto; font-size: 11px;
  color: #999; max-width: 1152px;
}
.footer-logo { font-family: 'Inter', sans-serif; font-weight: 700; }
.site-footer a { color: #999; text-decoration: none; transition: color .15s; }
.site-footer a:hover { color: #666; }

/* ─── Hero block ─── full-bleed image + gradient overlay (portal style). */
.data-hero {
  position: relative; overflow: hidden;
  background: #002244; color: #fff;   /* full-width dark-blue band (matches connect) */
  width: 100%;
}
.data-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
.data-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg,
    rgba(0,15,30,.35) 0%,
    rgba(0,15,30,.15) 30%,
    rgba(0,15,30,.15) 45%,
    rgba(0,15,30,.55) 70%,
    rgba(0,15,30,.9) 100%);
}
.data-hero-text {
  position: relative; z-index: 2; padding: 48px 24px 44px;   /* match Connect's hero rhythm */
  max-width: 1152px; margin: 0 auto; width: 100%; box-sizing: border-box;
  display: flex; flex-direction: column; justify-content: center;
}
.data-hero .eyebrow {
  font-family: 'Inter', sans-serif; font-size: 11px;
  text-transform: uppercase; letter-spacing: 3px; font-weight: 600;
  color: rgba(255,255,255,.85); margin-bottom: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.data-hero h1 {
  font-family: 'Inter', sans-serif; font-size: 32px; font-weight: 900;
  line-height: 1.15; letter-spacing: -0.5px;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
/* Eyebrow + pills mirror the Connect hero, for a consistent banner across pages. */
.data-hero-eyebrow {
  font-family: 'Inter', sans-serif; font-size: 12px; text-transform: uppercase;
  letter-spacing: 3px; font-weight: 700; color: rgba(255,255,255,.75);
  margin-bottom: 12px; text-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.data-hero-badges {
  margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px;
}
.data-hero-badge {
  font-family: 'Inter', sans-serif; font-size: 11.5px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
  background: rgba(255,255,255,.16); color: #fff;
  padding: 5px 12px; border-radius: 20px; backdrop-filter: blur(2px);
}

/* Return-to-top button (same as the Documents page) */
.back-to-top {
  position: fixed; bottom: 30px; right: 30px;
  background: #002244; color: #fff; width: 50px; height: 50px;
  border-radius: 50%; border: none; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  font-size: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.3s; z-index: 1000;
}
.back-to-top:hover { background: #001a33; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.2); }
.back-to-top.visible { display: flex; }
@media (max-width: 768px) { .back-to-top { bottom: 18px; right: 18px; width: 44px; height: 44px; } }
.data-hero .sub {
  font-size: 14px; color: rgba(255,255,255,.9);
  margin-top: 6px; letter-spacing: .3px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.data-hero .last-updated {
  font-family: 'Inter', sans-serif; font-size: 11px;
  color: rgba(255,255,255,.75); margin-top: 16px;
  text-transform: uppercase; letter-spacing: 1.5px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
/* Slim variant for the indicator page: shorter hero that carries the
   indicator title + back link over the same topo image, keeping visual
   continuity with the landing page. */
.data-hero-slim { min-height: 180px; }
.data-hero-slim .data-hero-text { min-height: 180px; padding: 32px 24px 24px; }
.data-hero-slim .indicator-back {
  font-family: 'Inter', sans-serif; font-size: 12px;
  color: rgba(255,255,255,.85); text-decoration: none;
  display: inline-block; margin-bottom: 12px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.data-hero-slim .indicator-back:hover { color: #fff; }
.data-hero-slim h1 {
  color: #fff;
  font-size: 28px;
}

/* ─── Stat strip ─── */
/* ─── Catalog section ─── */
.catalog-section {
  max-width: 1152px; margin: 0 auto; padding: 32px 24px 60px;
}
.catalog-section h2 {
  font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800;
  color: #002244; margin-bottom: 16px; letter-spacing: -.3px;
}
/* Dataset-type toggle (time series vs map layers) — WP-D9 */
.catalog-type-toggle {
  display: inline-flex; gap: 0; margin-bottom: 18px;
  border: 1px solid #cbd5e1; border-radius: 8px; overflow: hidden;
}
.catalog-type-toggle[hidden] { display: none; }
.type-tab {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  padding: 8px 16px; border: none; background: #fff; color: #475569;
  cursor: pointer; transition: all .15s;
}
.type-tab + .type-tab { border-left: 1px solid #cbd5e1; }
.type-tab:hover { color: #002244; background: #f1f5f9; }
.type-tab.active { background: #002244; color: #fff; }
.type-tab.active .sector-count { opacity: .85; }
.catalog-controls {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  margin-bottom: 24px;
}
.catalog-search {
  flex: 1 1 280px; min-width: 220px; max-width: 420px;
  font-family: 'Inter', sans-serif; font-size: 14px;
  padding: 10px 14px; border: 1px solid #cbd5e1; border-radius: 8px;
  color: #002244; background: #fff;
}
.catalog-search:focus {
  outline: none; border-color: #2b6cb0;
  box-shadow: 0 0 0 3px rgba(43,108,176,0.12);
}
.catalog-sectors { display: flex; flex-wrap: wrap; gap: 8px; }
.sector-chip {
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  padding: 6px 12px; border: 1px solid #cbd5e1; border-radius: 999px;
  background: #fff; color: #475569; cursor: pointer; transition: all .15s;
}
.sector-chip:hover { border-color: #2b6cb0; color: #002244; }
.sector-chip.active {
  background: #002244; border-color: #002244; color: #fff;
}
.sector-count {
  font-variant-numeric: tabular-nums; font-weight: 700; opacity: .7;
  margin-left: 2px;
}
.sector-chip.active .sector-count { opacity: .85; }
.catalog-sector-group { margin-bottom: 32px; }
.catalog-sector-title {
  font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .4px; color: #2b6cb0;
  margin: 0 0 14px; padding-bottom: 6px; border-bottom: 2px solid currentColor;
}
.catalog-blurb {
  font-size: 13px; color: #475569; line-height: 1.45;
}
.catalog-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
}
.catalog-card {
  border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px;
  text-decoration: none; color: inherit; transition: all .15s;
  background: #fff; display: flex; flex-direction: column; gap: 8px;
}
.catalog-card:hover { border-color: #2b6cb0; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.catalog-card-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
}
.catalog-card .title {
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700;
  color: #002244; line-height: 1.3;
}
.catalog-headline {
  text-align: right; flex-shrink: 0;
}
.catalog-value {
  font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800;
  color: #002244; display: block; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.catalog-period {
  font-size: 11px; color: #64748b; margin-top: 2px; display: block;
}
.catalog-spark {
  height: 48px;
}
.catalog-spark svg { display: block; }
.catalog-card .meta {
  font-size: 11px; color: #94a3b8;
  font-family: 'Inter', sans-serif; letter-spacing: 0.3px;
}

/* Geospatial map-layer cards — WP-D9 */
.geo-card { cursor: default; }
.geo-card:hover { border-color: #e5e7eb; box-shadow: none; }
.geo-source-link {
  font-size: 11px; font-weight: 600; color: #2b6cb0; text-decoration: none;
  white-space: nowrap;
}
.geo-source-link:hover { text-decoration: underline; }
.geo-actions {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 4px;
}
.geo-download {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px; text-decoration: none;
  background: #002244; color: #fff; transition: background .15s;
}
.geo-download:hover { background: #2b6cb0; }
.geo-mapview {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  padding: 6px 12px; border-radius: 6px; text-decoration: none;
  border: 1px solid #cbd5e1; color: #475569; transition: all .15s;
}
.geo-mapview:hover { border-color: #2b6cb0; color: #002244; }
.geo-no-download {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  color: #94a3b8; font-style: italic; padding: 6px 0;
}
.catalog-empty { color: #999; font-style: italic; padding: 16px 0; }

/* ─── Indicator page ─── */
/* Description now sits BELOW the chart and ABOVE the source panel (data-first
   order). Full width, set as readable prose with a light rule separating it
   from the chart above. Empty state collapses to nothing. */
.indicator-header {
  max-width: 1152px; margin: 0 auto; padding: 16px 24px 8px;
  border-top: 1px solid #eef1f4;
}
.indicator-header:empty,
.indicator-header .description:empty { display: none; }
.indicator-header .description {
  color: #555; font-size: 14px;
}
.indicator-header .description p {
  margin: 0 0 0.7em;
  line-height: 1.6;
}
.indicator-header .description p:last-child { margin-bottom: 0; }
.indicator-header .description strong { color: #333; font-weight: 600; }

/* Source panel below the chart — single collapsible row showing the
   active source's name, external link, and methodology text. */
.source-panel-wrap {
  max-width: 1152px; margin: 0 auto; padding: 0 24px 16px;
}
.source-panel {
  border: 1px solid #e5e7eb; border-radius: 6px; background: #fafbfc;
}
.source-panel summary {
  cursor: pointer; padding: 12px 16px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: #334155;
  list-style: none; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.source-panel summary::-webkit-details-marker { display: none; }
.source-panel summary::before {
  content: '▸'; display: inline-block; color: #64748b;
  transition: transform .15s; font-size: 10px;
}
.source-panel[open] summary::before { transform: rotate(90deg); }
.source-panel summary strong {
  font-weight: 700; color: #002244;
}
.source-panel summary #sourceLink {
  font-size: 12px; color: #009fda; text-decoration: none;
  margin-left: auto;
}
.source-panel summary #sourceLink:hover { text-decoration: underline; }
.source-panel #sourceBody {
  padding: 0 16px 16px 16px; font-size: 13px; color: #475569;
  line-height: 1.55;
}
.source-panel #sourceBody h3 {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  color: #002244; margin: 12px 0 6px;
}
.source-panel #sourceBody p { margin-bottom: 8px; }
.source-panel #sourceBody ul { margin: 6px 0 10px 20px; }
.source-panel #sourceBody li { margin-bottom: 4px; }
.source-panel #sourceBody strong { color: #1f2937; }
.source-panel .source-fallback { color: #94a3b8; font-style: italic; }

/* View tabs — ONS-style underlined tabs above the filter row. One tab
   per curated view declared in the indicator YAML (overview, production,
   expenditure, long-series, advanced …). */
.view-tabs {
  max-width: 1152px; margin: 0 auto; padding: 0 24px;
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 8px;
}
.view-tab {
  padding: 10px 16px; border: none; background: none; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600;
  color: #64748b; border-bottom: 2px solid transparent;
  margin-bottom: -1px; transition: color .15s, border-color .15s;
}
.view-tab:hover { color: #334155; }
.view-tab.active {
  color: #002244; border-bottom-color: #009fda;
}
.view-description {
  max-width: 1152px; margin: 0 auto; padding: 0 24px 6px;
  font-size: 13px; color: #64748b; line-height: 1.5;
}

/* Filter row: top-aligned, evenly-spaced filter groups. Each group is
   label → control → hint, stacked. Labels are sentence case (no allcaps)
   and a friendlier size; horizontal gap is generous so adjacent dropdowns
   never look cramped and the optional hint text below one can't collide
   with the control of the next. */
.indicator-controls {
  max-width: 1152px; margin: 0 auto; padding: 0 24px 12px;
  display: flex; flex-wrap: wrap; gap: 24px 32px;
  align-items: flex-start;
}
.filter-group {
  display: flex; flex-direction: column;
  flex: 0 0 auto; width: 200px;
}
.filter-group > label {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  color: #334155; margin-bottom: 6px;
  letter-spacing: 0;                /* no tracking */
  text-transform: none;             /* no allcaps */
  /* Reserve two lines so a label that wraps grows the box (pushing the control
     down) instead of overflowing a fixed 18px height onto the dropdown below.
     One-line labels bottom-align, so controls still line up across the row. */
  min-height: 32px; line-height: 16px;
  display: flex; align-items: flex-end;
}
.filter-group select {
  padding: 7px 10px; font-size: 13px; border: 1px solid #cbd5e0;
  border-radius: 4px; background: #fff; font-family: inherit;
  color: #1f2937; width: 100%; height: 34px;
}
.filter-group select:hover { border-color: #94a3b8; }
.filter-hint {
  font-size: 12px; color: #64748b; margin-top: 6px;
  line-height: 1.45; min-height: 1.45em;
}
.filter-hint:empty { display: none; }
/* Checkbox-style multi-select dropdown (component / area / origin). Looks
   like a regular <select> when closed; opens a checkbox panel below. */
.multi-select { position: relative; width: 100%; }
.multi-select-btn {
  width: 100%; height: 34px; padding: 7px 28px 7px 10px;
  font-size: 13px; font-family: inherit; color: #333;
  border: 1px solid #cbd5e0; border-radius: 4px; background: #fff;
  text-align: left; cursor: pointer; position: relative;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.multi-select-btn:hover { border-color: #94a3b8; }
.ms-caret {
  position: absolute; right: 10px; top: 50%;
  transform: translateY(-50%); font-size: 10px; color: #666;
}
.multi-select-panel {
  display: none;
  position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid #cbd5e0; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  max-height: 260px; overflow-y: auto; z-index: 100;
  padding: 6px 0;
}
.multi-select-panel.open { display: block; }
.ms-opt {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 12px; cursor: pointer;
  font-size: 13px; line-height: 1.3; color: #333;
  font-family: 'Source Sans 3', sans-serif;
  text-transform: none; letter-spacing: 0; font-weight: 400;
  height: auto; margin-bottom: 0;
}
.ms-opt:hover { background: #f7f8fa; }
.ms-opt input { margin: 0; flex-shrink: 0; }
.ms-opt.opt-dim { color: #a0a0a0; }
.ms-group-header {
  padding: 8px 12px 4px;
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.2px; color: #94a3b8;
  border-top: 1px solid #f1f5f9;
}
.ms-group-header:first-child { border-top: none; padding-top: 4px; }

/* Reset button aligns with the SELECTS (not the labels). Matching top
   margin = label height (18) + label bottom margin (6) = 24px. */
.filter-reset {
  padding: 0 14px; height: 34px; margin-top: 24px;
  background: transparent; color: #475569;
  border: 1px solid #cbd5e0; border-radius: 4px; cursor: pointer;
  font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 500;
  flex: 0 0 auto;
}
.filter-reset:hover { background: #f1f5f9; }

/* Component pill buttons — quick toggle row above chart */
.component-pills {
  max-width: 1152px; margin: 0 auto; padding: 4px 24px 12px;
  display: flex; flex-wrap: wrap; gap: 6px;
}
.component-pill {
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 16px;
  border: 1px solid #cbd5e0; background: #fff; color: #475569;
  cursor: pointer; transition: all 100ms ease;
  white-space: nowrap;
}
.component-pill:hover { border-color: #2b6cb0; color: #2b6cb0; }
.component-pill.active {
  background: #2b6cb0; border-color: #2b6cb0; color: #fff;
}
.component-pill.disabled {
  opacity: 0.4; cursor: default;
}

.chart-wrap {
  max-width: 1152px; margin: 0 auto; padding: 0 24px 16px;
}
.chart-toolbar {
  display: flex; justify-content: flex-end; gap: 16px;
  margin-bottom: 4px;
}
.chart-toggle {
  display: flex; align-items: center; gap: 6px;
  font-family: 'Inter', sans-serif; font-size: 12px; color: #475569;
  cursor: pointer;
}
.chart-toggle input { margin: 0; cursor: pointer; }
#chart {
  width: 100%; min-height: 440px;
  border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
}
.chart-empty {
  color: #999; font-style: italic; text-align: center; padding: 40px;
}

/* ─── WP-D8: Chart niceties toolbar ────────────────────────────────── */
/* Sits between the existing .chart-toolbar and the #chart div.
   Three groups: transform pills (left), window pills (left), and
   secondary toggles (log scale, small multiples) pinned right. */
.chart-niceties {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px 12px; margin-bottom: 6px;
}
.niceties-group {
  display: flex; align-items: center; gap: 4px;
  flex-shrink: 0;
}
/* Right-aligned toggles sit at the end of the row. */
.niceties-group-right {
  margin-left: auto;
}
/* When a group is irrelevant for the current chart type, hide it but
   keep it in the DOM so event listeners survive a chart-type switch. */
.niceties-hidden { display: none !important; }

/* Pill buttons — consistent with .component-pill but smaller (compact row). */
.niceties-pill {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 12px;
  border: 1px solid #cbd5e0; background: #fff; color: #64748b;
  cursor: pointer; transition: all 100ms ease; white-space: nowrap;
  line-height: 1.5;
}
.niceties-pill:hover { border-color: #2b6cb0; color: #2b6cb0; }
.niceties-pill.active {
  background: #2b6cb0; border-color: #2b6cb0; color: #fff;
}

/* ─── WP-D8: Small multiples grid ─────────────────────────────────── */
/* Responsive grid of mini charts — each cell has a title + a Plotly
   chart. Cells share the same grid column width so sparkline-sized
   mini-charts line up cleanly across rows. */
.sm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 10px;
  background: #fff;
}
.sm-cell {
  border: 1px solid #e5e7eb; border-radius: 6px;
  overflow: hidden; background: #fff;
}
.sm-title {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  color: #475569; text-transform: uppercase; letter-spacing: 0.4px;
  padding: 6px 10px 0;
}
.sm-plot { width: 100%; height: 180px; }

/* Drilldown chart — breadcrumb navigation above a stacked-area plot. */
.dd-breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 6px; padding: 10px 14px 6px;
  font-family: 'Inter', sans-serif; font-size: 13px;
}
.dd-crumb {
  background: transparent; border: none; padding: 3px 8px;
  border-radius: 4px; color: #2b6cb0; cursor: pointer;
  font: inherit;
}
.dd-crumb:hover { background: #eff6ff; color: #1e3a8a; }
.dd-crumb.is-current {
  color: #0f172a; font-weight: 600; cursor: default;
}
.dd-crumb.is-current:hover { background: transparent; }
.dd-sep { color: #94a3b8; user-select: none; }
.dd-plot { min-height: 360px; }
.dd-hint {
  padding: 4px 14px 10px; font-size: 12px; color: #64748b;
  font-family: 'Inter', sans-serif;
}
.dd-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 6px 14px 14px;
}
.dd-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #cbd5e0; border-radius: 6px;
  padding: 6px 12px; font: inherit; font-size: 13px; color: #0f172a;
  cursor: pointer; transition: background 120ms, border-color 120ms;
}
.dd-btn:hover {
  background: #f1f5f9; border-color: #94a3b8;
}
.dd-btn:disabled, .dd-btn.is-leaf {
  cursor: default; color: #64748b;
  background: #f8fafc; border-color: #e2e8f0;
}
.dd-btn .dd-swatch {
  width: 10px; height: 10px; border-radius: 2px;
  background: var(--dd-c, #2b6cb0);
}

/* Small-multiples card grid — used on production/expenditure GDP views
   where stacked areas become unreadable. One card per component. */
.card-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  padding: 16px;
}
.card-grid-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px 16px 10px;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: 6px;
  font-family: 'Inter', sans-serif;
  text-align: left; cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.card-grid-card:hover {
  border-color: #0ea5e9;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.08);
}
.card-grid-card.is-forecast { border-style: dashed; }
.card-title {
  font-size: 12px; font-weight: 600; color: #475569;
  text-transform: uppercase; letter-spacing: 0.4px;
  line-height: 1.3;
}
.card-value-row {
  display: flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.card-value {
  font-size: 22px; font-weight: 700; color: #002244;
}
.card-delta {
  font-size: 12px; font-weight: 600;
}
.card-delta.up { color: #059669; }
.card-delta.down { color: #dc2626; }
.card-delta.flat { color: #64748b; }
.card-meta {
  display: flex; justify-content: space-between; gap: 8px;
  font-size: 11px; color: #64748b;
}
.card-spark {
  margin-top: 2px;
  height: 40px;
}
.card-spark svg { display: block; }

/* Active card highlight — indicates which tile is currently expanded below */
.card-grid-card.is-active {
  border-color: #0ea5e9;
  box-shadow: 0 2px 6px rgba(14, 165, 233, 0.12);
}

/* Expanded panel — sits below the card grid, not inside it,
   so clicking a card never re-flows the tile layout. */
.card-expanded-panel {
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px 20px 14px;
  margin-top: 12px;
  background: #fff;
  border: 1px solid #0ea5e9; border-radius: 6px;
  font-family: 'Inter', sans-serif;
}
.card-expanded-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
.card-expanded-head .card-title { margin-bottom: 2px; }
.card-description {
  font-size: 12px; color: #64748b; line-height: 1.4;
  margin-bottom: 4px;
}
.card-meta-inline {
  margin-left: 4px;
  font-size: 11px; color: #64748b; font-weight: 400;
}
.card-close {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border: 1px solid #e5e7eb; border-radius: 4px;
  background: #fff; color: #64748b;
  font-size: 18px; line-height: 1; cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.card-close:hover {
  border-color: #0ea5e9; color: #0ea5e9;
}
.expanded-pills {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 4px 0;
}
.card-expanded-chart {
  width: 100%; height: 360px;
}

/* Contributions-to-growth bar chart below the card grid */
.card-contrib-section {
  margin-top: 16px;
  padding: 16px 20px 8px;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: 6px;
}
.card-contrib-title {
  font-family: 'Inter', sans-serif;
  font-size: 12px; font-weight: 700; color: #475569;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin: 0 0 8px;
}
.card-contrib-chart {
  width: 100%; height: 280px;
}

.data-table-wrap {
  max-width: 1152px; margin: 0 auto; padding: 0 24px 24px;
}
.data-table-wrap h2 {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  color: #002244; margin-bottom: 12px; text-transform: uppercase;
  letter-spacing: 1px;
}
.data-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.data-table thead { background: #f7f8fa; }
.data-table th {
  padding: 8px 12px; text-align: left; font-family: 'Inter', sans-serif;
  font-weight: 700; color: #002244; font-size: 11px;
  text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 1px solid #e5e7eb;
}
.data-table td {
  padding: 7px 12px; border-bottom: 1px solid #f0f0f0; color: #333;
}
.data-table .num { text-align: right; }
.data-table .row-forecast td { color: #64748b; font-style: italic; }

/* Key-statistics table (stats_table chart type): a curated composition table,
   intentionally larger and higher-contrast than the raw data table for
   legibility. */
/* Aligned with the page body (same 1152px container + 24px gutter as the tabs,
   chart, and table) rather than flush against the viewport's left edge. */
.related-map-link {
  display: block; max-width: 1152px; margin: 2px auto 0; padding: 2px 24px 6px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  color: #0067b9; text-decoration: none;
}
.related-map-link:hover { text-decoration: underline; }

/* Small-multiples per-panel close (×) + restore-all control. */
.sm-title { position: relative; }
.sm-close {
  position: absolute; top: -2px; right: 0; border: none; background: transparent;
  color: #94a3b8; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px;
  font-family: 'Inter', sans-serif;
}
.sm-close:hover { color: #ef4444; }
.sm-restore {
  display: inline-block; margin: 0 0 8px; padding: 4px 10px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  color: #0067b9; background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 6px; cursor: pointer;
}
.sm-restore:hover { background: #dbeafe; }

.stats-table-wrap { max-width: 640px; }
.stats-table {
  width: 100%; border-collapse: collapse; font-size: 15px;
  font-variant-numeric: tabular-nums;
}
.stats-table thead { background: #f7f8fa; }
.stats-table th {
  padding: 10px 14px; text-align: left; font-family: 'Inter', sans-serif;
  font-weight: 700; color: #002244; font-size: 12px;
  text-transform: uppercase; letter-spacing: 1px;
  border-bottom: 2px solid #002244;
}
.stats-table td { padding: 9px 14px; border-bottom: 1px solid #f0f0f0; color: #1e293b; }
.stats-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.stats-table tfoot td {
  font-weight: 700; color: #002244; border-top: 2px solid #002244;
  border-bottom: none;
}
.data-table-meta {
  font-size: 11px; color: #999; margin-top: 8px;
  font-family: 'Inter', sans-serif;
}

.downloads {
  max-width: 1152px; margin: 0 auto; padding: 0 24px 40px;
  display: flex; gap: 12px;
}
.download-btn {
  padding: 8px 18px; background: #002244; color: #fff;
  text-decoration: none; border: none; border-radius: 4px;
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: background .15s;
}
.download-btn:hover { background: #001a33; }
.download-btn.secondary { background: #009fda; }
.download-btn.secondary:hover { background: #0087b8; }
.download-btn-full { background: #2d6a4f; }
.download-btn-full:hover { background: #1b4332; }

/* ---- Consolidated downloads (WP-D5) ---- */
.downloads-section {
  max-width: 1152px; margin: 0 auto; padding: 8px 24px 60px;
  border-top: 1px solid #e2e8f0;
}
.downloads-section h2 {
  font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800;
  color: #002244; margin: 28px 0 8px; letter-spacing: -.3px;
}
.downloads-sub {
  font-family: 'Source Sans 3', sans-serif; font-size: 14px;
  color: #475569; max-width: 720px; margin-bottom: 18px;
}
.download-all-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 12px;
}
.download-all-btn {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 12px 18px; background: #002244; color: #fff;
  text-decoration: none; border-radius: 8px;
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  transition: background .15s;
}
.download-all-btn:hover { background: #001a33; }
.download-all-btn .dl-size {
  font-weight: 600; font-size: 12px; color: #9fc3e0;
}
.download-all-meta {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-family: 'Inter', sans-serif; font-size: 13px;
}
.downloads-count { color: #475569; font-weight: 600; }
.download-manifest {
  color: #2b6cb0; text-decoration: none; font-weight: 600;
}
.download-manifest:hover { text-decoration: underline; }
.downloads-note {
  font-family: 'Source Sans 3', sans-serif; font-size: 13px;
  color: #64748b; margin-top: 14px; max-width: 720px;
}

/* ─── Table mode toggle ─────────────────────────────────────────────── */
/* Two-button toggle above the data table heading: "Filtered view" /
   "Full dataset". Matches the style of other inline toggles on the page. */
.table-mode-toggle {
  display: flex; gap: 4px; margin-bottom: 12px; flex-wrap: wrap;
}
.table-mode-btn {
  padding: 5px 14px; border: 1px solid #cbd5e0; border-radius: 4px;
  background: #fff; font-family: 'Inter', sans-serif; font-size: 12px;
  font-weight: 600; color: #64748b; cursor: pointer; transition: all .12s;
}
.table-mode-btn:hover { border-color: #94a3b8; color: #334155; }
.table-mode-btn.active {
  background: #002244; color: #fff; border-color: #002244;
}

/* Full-dataset mode: wider table, horizontal scroll on small viewports. */
.table-full-mode .data-table { min-width: 800px; }
.table-full-mode { overflow-x: auto; }

/* Scrollable tbody wrapper for long full-dataset tables (>25 rows). */
.data-table-scroll {
  max-height: 480px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}
.data-table-scroll .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7f8fa;
}

/* Pagination row inside .data-table-meta */
.data-table-meta {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
}
.table-pagination { display: flex; align-items: center; gap: 8px; }
.table-page-btn {
  padding: 4px 12px; border: 1px solid #cbd5e0; border-radius: 4px;
  background: #fff; font-family: 'Inter', sans-serif; font-size: 12px;
  font-weight: 600; color: #334155; cursor: pointer; transition: all .12s;
}
.table-page-btn:hover:not(:disabled) { border-color: #94a3b8; }
.table-page-btn:disabled { opacity: .4; cursor: default; }
.table-page-info {
  font-size: 12px; color: #64748b; font-family: 'Inter', sans-serif;
}
.table-row-count {
  font-size: 11px; color: #999; font-family: 'Inter', sans-serif;
}

.error-card {
  max-width: 1152px; margin: 24px auto; padding: 24px;
  border: 1px solid #f4a9a9; border-radius: 6px; background: #fef2f2;
  color: #991b1b; text-align: center;
}
.error-card button {
  margin-top: 12px; padding: 6px 16px; border: 1px solid #991b1b;
  background: #fff; color: #991b1b; border-radius: 4px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12px;
}

/* Demographic dashboard */
.demo-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  padding: 0 0 12px;
}
.demo-card {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 14px 8px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 6px;
  font-family: 'Inter', sans-serif; text-align: left;
  cursor: pointer; transition: border-color 100ms;
}
.demo-card:hover { border-color: #2b6cb0; }
.demo-card.active { border-color: #2b6cb0; box-shadow: 0 2px 6px rgba(43,108,176,0.12); }
.demo-card-title {
  font-size: 11px; font-weight: 600; color: #475569;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.demo-card-value {
  font-size: 20px; font-weight: 700; color: #002244;
  font-variant-numeric: tabular-nums;
}
.demo-card-period { font-size: 10px; color: #94a3b8; }
.demo-card-spark { height: 32px; margin-top: 2px; }
.demo-card-spark svg { display: block; }
.demo-expanded {
  min-height: 400px;
  border: 1px solid #e5e7eb; border-radius: 6px;
  background: #fff; padding: 12px;
}

/* Population pyramid */
.pyramid-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0 4px;
}
.pyramid-year-label {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 700;
  color: #002244; min-width: 120px;
}
.pyramid-slider {
  flex: 1; cursor: pointer;
  accent-color: #2b6cb0;
}

/* Contact modal */
.contact-modal {
  display: none; position: fixed; z-index: 2000;
  inset: 0; background: rgba(0,0,0,0.5);
}
.contact-modal.open {
  display: flex; align-items: center; justify-content: center;
}
.contact-modal-content {
  background: #fff; border-radius: 12px; padding: 32px;
  max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto;
  position: relative;
}
.contact-modal-close {
  position: absolute; top: 12px; right: 16px;
  font-size: 28px; color: #64748b; cursor: pointer;
  border: none; background: none;
}
.contact-modal-close:hover { color: #002244; }
.contact-modal h2 {
  font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 700;
  color: #002244; margin-bottom: 6px;
}
.contact-modal-desc {
  color: #64748b; font-size: 14px; margin-bottom: 20px;
}
.contact-field { margin-bottom: 16px; }
.contact-field label {
  display: block; font-size: 13px; font-weight: 600;
  color: #002244; margin-bottom: 4px;
}
.contact-field input,
.contact-field textarea {
  width: 100%; padding: 10px 12px; font-size: 14px;
  border: 1px solid #cbd5e0; border-radius: 6px; font-family: inherit;
  box-sizing: border-box;
}
.contact-field input:focus,
.contact-field textarea:focus {
  outline: none; border-color: #002244;
}
.contact-submit {
  width: 100%; padding: 12px; font-size: 15px; font-weight: 600;
  background: #002244; color: #fff; border: none; border-radius: 6px;
  cursor: pointer;
}
.contact-submit:hover { background: #001a33; }

@media (max-width: 768px) {
  .header-nav { display: none; }
  /* Padding lives on .data-hero-text, not .data-hero — shrink it on phones so
     the hero band isn't too tall. */
  .data-hero-text { padding: 24px 16px 22px; }
  .data-hero h1 { font-size: 22px; }
  .data-hero-eyebrow { margin-bottom: 7px; letter-spacing: 2px; }
  .data-hero-badges { margin-top: 12px; }
  /* On phones the pills wrap and push the hero too tall — drop the optional one */
  .data-hero-badge--optional { display: none; }
  .catalog-section, .indicator-header,
  .indicator-controls, .chart-wrap, .data-table-wrap, .downloads {
    padding-left: 16px; padding-right: 16px;
  }
  .catalog-grid { grid-template-columns: 1fr; }
  #chart { height: 320px; }
}

/* ---- Trade page (T4a) ---- */
/* Uses the standard data-hero header (back button + title on the topo banner),
   identical to the indicator pages. The intro blurb sits below it, in the page
   container. */
.trade-page .page-description {
  font-family: 'Source Sans 3', sans-serif; color: #555;
  font-size: 15px; line-height: 1.55;
  max-width: 1152px; margin: 0 auto; padding: 16px 24px 0;
}
.trade-tabs {
  max-width: 1152px;
  margin: 1.5rem auto 1rem;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid #e5e7eb;
}
.trade-page .tab-body {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 24px;
}
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: flex-end;
}
.filter-bar label { display: flex; flex-direction: column; gap: .25rem; }
.filter-bar select { padding: .4rem .6rem; }
.filter-bar select[disabled] { opacity: .7; cursor: not-allowed; }
.view-mode-toggle {
  padding: .5rem 1rem;
  border: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.view-mode-toggle[disabled] { opacity: .5; cursor: not-allowed; }
.plotly-chart { width: 100%; }
.source-note { font-size: .85rem; color: #64748b; margin-top: .5rem; }
.source-note .trade-source-id { font-weight: 600; color: #475569; }
.trade-why { margin: .35rem 0 0; font-size: .8rem; color: #94a3b8; line-height: 1.45; }
/* Caveat / coverage warning callouts on the By product and By partner tabs. */
.trade-warning {
  font-size: .85rem;
  line-height: 1.5;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: .7rem .9rem;
  margin: 0 0 1rem;
}
/* Neutral/informational variant (Ports proxy note). */
.trade-warning-info {
  color: #1e3a5f;
  background: #eff6ff;
  border-color: #bfdbfe;
  border-left-color: #3b82f6;
}
.methodology-panel {
  max-width: 1152px;
  margin: 2rem auto 0;
  padding: 1rem 24px;
  background: rgba(0,0,0,0.02);
  border-radius: 8px;
}
.methodology-panel summary {
  font-weight: 600;
  cursor: pointer;
}
.methodology-body {
  margin-top: .75rem;
  font-size: .95rem;
  line-height: 1.55;
  color: #334155;
}
.trade-page .loading,
.trade-page .empty,
.trade-page .error {
  padding: 1.5rem;
  text-align: center;
  color: #64748b;
}
.trade-page .error { color: #b91c1c; }

/* Provisional-data banner (education page, placed before tab nav). */
.provisional-banner {
  background: #fff8e1;
  border: 1px solid #f0c36d;
  border-left: 4px solid #e0a800;
  color: #6b5200;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.4;
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
}

/* ── Education page: stat cards + section titles ──────────────────────── */
.edu-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0 0 1.5rem;
}
.edu-card {
  flex: 1 1 180px;
  min-width: 180px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 1rem 1.1rem;
}
.edu-card-value {
  font-size: 1.8rem;
  font-weight: 800;
  line-height: 1.1;
  color: #1e3a5f;
}
.edu-card-label {
  margin-top: .35rem;
  font-size: .9rem;
  font-weight: 600;
  color: #334155;
}
.edu-card-sub {
  margin-top: .2rem;
  font-size: .78rem;
  color: #94a3b8;
}
.edu-section-title {
  margin: 1.75rem 0 .5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e3a5f;
}
.edu-section-title:first-child { margin-top: 0; }

/* Gender-contrast callout (students near parity vs ~37% female teachers). */
.edu-callout {
  font-size: .9rem;
  line-height: 1.5;
  color: #1e3a5f;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-left: 3px solid #3b82f6;
  border-radius: 6px;
  padding: .7rem .9rem;
  margin: 0 0 1rem;
}
.edu-pct-figure {
  font-size: 1.4rem;
  font-weight: 800;
  color: #1e3a5f;
  margin: .25rem 0 .75rem;
}
.edu-pct-figure .edu-pct-label {
  font-size: .85rem;
  font-weight: 600;
  color: #475569;
  margin-left: .4rem;
}
/* Data table + downloads sit inside the tab body; reset the standalone
   indicator-page max-width/centering so they fill the tab column. */
.tab-body .data-table-wrap,
.tab-body .downloads {
  max-width: none;
  margin: 0;
  padding: 0;
}
.tab-body .data-table-wrap { margin: .5rem 0 1rem; overflow-x: auto; }
.tab-body .downloads { margin: 0 0 1.5rem; }
.tab-body .edu-note {
  font-size: .85rem;
  line-height: 1.5;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid #f59e0b;
  border-radius: 6px;
  padding: .7rem .9rem;
  margin: .5rem 0 1rem;
}

/* ── Beta / trial-phase banner (injected by beta-banner.js) ── */
/* ── AI / MCP access callout (links to /connect/) ── */
.mcp-callout-section { max-width: 1200px; margin: 22px auto 0; padding: 0 24px; }
.mcp-callout {
  display: flex; align-items: center; gap: 18px;
  background: #fff; border: 1px solid #e3e7ee; border-radius: 12px;
  padding: 16px 20px; text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(16,42,67,.04), 0 6px 18px rgba(16,42,67,.06);
  transition: box-shadow .18s, border-color .18s, transform .18s;
}
.mcp-callout:hover {
  border-color: #cfe2f3; transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(16,42,67,.06), 0 12px 28px rgba(16,42,67,.10);
}
.mcp-callout-badge {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #002244 0%, #009fda 100%);
  color: #fff; box-shadow: 0 3px 8px rgba(0,159,218,.28);
}
.mcp-callout-badge svg { width: 23px; height: 23px; display: block; }
.mcp-callout-body { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.mcp-callout-eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1.3px; text-transform: uppercase;
  color: #0a86b8; margin-bottom: 4px;
}
.mcp-callout-title { font-weight: 800; color: #002244; font-size: 15.5px; line-height: 1.25; }
.mcp-callout-text { color: #5a6573; font-size: 13.5px; line-height: 1.45; margin-top: 3px; }
.mcp-callout-cta {
  flex: 0 0 auto; white-space: nowrap; align-self: center;
  font-weight: 700; font-size: 13.5px; color: #fff; background: #002244;
  padding: 9px 18px; border-radius: 8px; transition: background .15s;
}
.mcp-callout:hover .mcp-callout-cta { background: #013a6b; }
@media (max-width: 680px) {
  .mcp-callout { flex-wrap: wrap; gap: 12px; padding: 14px 16px; }
  .mcp-callout-badge { width: 40px; height: 40px; }
  .mcp-callout-cta { width: 100%; text-align: center; }
}

.beta-banner {
  background: #fef3c7;
  border-bottom: 1px solid #f59e0b;
  color: #92400e;
  font-family: 'Source Sans 3', system-ui, sans-serif;
}
.beta-banner-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 14px;
  line-height: 1.35;
}
.beta-banner-icon { font-size: 15px; flex: 0 0 auto; }
.beta-banner-text { flex: 1 1 auto; font-weight: 600; }
.beta-banner-close {
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  color: #92400e;
  font-size: 22px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  opacity: .7;
}
.beta-banner-close:hover { opacity: 1; }
@media (max-width: 768px) {
  .beta-banner-inner { padding: 8px 16px; font-size: 13px; }
}