/* ==========================================================================
   Groundfact — main stylesheet
   Hand-written, no framework. One file. CSS custom properties for theming.

   Design language: quiet, editorial, statistical — closer to a well-set
   research publication (think Our World in Data) than a SaaS dashboard.
   Generous whitespace, restrained colour, serif for headings and reading
   copy, a plain system sans for UI chrome (nav, labels, buttons).

   Theme strategy (do not deviate — see project contract):
     - LIGHT is the default and the primary theme. The complete light
       palette is defined on bare :root.
     - Dark tokens are defined ONLY under :root[data-theme="dark"], set by
       the inline bootstrap script in base.html from localStorage
       ("gf-theme"), or by the header theme-toggle button.
     - There is deliberately NO `@media (prefers-color-scheme: dark)`
       block: an unset choice always renders light, even on a dark-mode
       OS. This is a product decision, not an oversight.
   No colour is ever defined only inside a media query.
   ========================================================================== */

:root {
  /* --- Palette: light (default) ------------------------------------- */
  /* Refined tokens per the approved interface concepts (2026-08-08):
     slightly warmer than the original commit, same relationships. */
  --gf-bg: #f7f4f0;
  --gf-surface: #fffdfb;
  --gf-ink: #1e1c1a;
  --gf-muted: #6b645d;
  --gf-line: #e6e0d8;
  --gf-accent: #c2410c;
  --gf-accent-wash: #fbeee6;
  --gf-grid: #efeae3;

  /* Zone A / app-shell header band: a dark band in light mode that inverts
     in dark mode (design concepts, screen 1a). Distinct from the global
     site header (--gf-surface), which stays constant across themes. */
  --gf-hdr: #231f1c;
  --gf-hdr-ink: #f7f3ed;
  --gf-hdr-muted: #a89f95;
  --gf-hdr-line: #3a3430;

  /* --- Derived tokens (recomputed automatically per theme) ------------ */
  --gf-bg-sunken: color-mix(in srgb, var(--gf-ink) 4%, var(--gf-bg));
  --gf-line-strong: color-mix(in srgb, var(--gf-ink) 22%, var(--gf-line));
  --gf-accent-strong: color-mix(in srgb, var(--gf-ink) 18%, var(--gf-accent));
  --gf-shadow-sm: 0 1px 2px rgba(22, 25, 29, 0.08);

  /* --- Type ------------------------------------------------------------ */
  --gf-font-serif: ui-serif, Georgia, "Iowan Old Style", "Times New Roman", serif;
  --gf-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --line-height-heading: 1.15;
  --line-height-body: 1.6;

  /* --- Spacing & shape --------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --radius-sm: 4px;
  --radius-md: 8px;
  --max-width: 46rem;
}

/* --- Palette: dark, explicit only (no prefers-color-scheme fallback) --- */
:root[data-theme="dark"] {
  --gf-bg: #101316;
  --gf-surface: #171b1f;
  --gf-ink: #f2efe9;
  --gf-muted: #9aa3ad;
  --gf-line: #272d33;
  --gf-accent: #f97316;
  --gf-accent-wash: #241610;
  --gf-grid: #1e2429;

  /* Zone A band inverts: light-on-dark everywhere else, so the band itself
     becomes the light element on the page. */
  --gf-hdr: #f2efe9;
  --gf-hdr-ink: #16191d;
  --gf-hdr-muted: #5b6169;
  --gf-hdr-line: #d8d3ca;

  --gf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--gf-bg);
  color: var(--gf-ink);
  font-family: var(--gf-font-serif);
  font-size: 1.0625rem;
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
  display: block;
}

a {
  color: var(--gf-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

a:visited {
  color: color-mix(in srgb, var(--gf-muted) 45%, var(--gf-accent));
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 2px solid var(--gf-accent);
  outline-offset: 2px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--gf-font-serif);
  line-height: var(--line-height-heading);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

p {
  margin: 0 0 var(--space-3);
}

code {
  font-family: var(--gf-font-mono);
  font-size: 0.9em;
  background: var(--gf-bg-sunken);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
}

.wrap {
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-4);
}

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}

.skip-link:focus {
  left: var(--space-3);
  top: var(--space-3);
  z-index: 100;
  background: var(--gf-surface);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  box-shadow: var(--gf-shadow-sm);
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  border-bottom: 1px solid var(--gf-line);
  background: var(--gf-surface);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-3);
}

.site-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--gf-ink);
  text-decoration: none;
  font-family: var(--gf-font-sans);
}

.gf-logo {
  width: 28px;
  height: 28px;
  color: var(--gf-ink);
  flex: none;
}

.wordmark__text {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  gap: var(--space-4);
  font-family: var(--gf-font-sans);
}

.site-nav a {
  color: var(--gf-muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover {
  color: var(--gf-ink);
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--gf-line);
  border-radius: 999px;
  background: var(--gf-surface);
  color: var(--gf-ink);
  cursor: pointer;
}

.theme-toggle:hover {
  border-color: var(--gf-line-strong);
  background: var(--gf-bg-sunken);
}

.theme-toggle__icon--moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--moon {
  display: block;
}

/* ==========================================================================
   Main content areas
   ========================================================================== */

main {
  display: block;
  padding-block: var(--space-6) var(--space-5);
}

.hero {
  padding-block-end: var(--space-5);
}

.hero__headline {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
  /* Sized for the capability headline, which is longer than a product tagline.
     At 18ch it broke over four lines and read as a stack, not a sentence. */
  max-width: 24ch;
  text-wrap: balance;
}

.hero__lede {
  font-size: 1.15rem;
  color: var(--gf-muted);
  max-width: 46ch;
}

.notice {
  background: var(--gf-bg-sunken);
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-block-end: var(--space-5);
}

.notice__heading {
  font-size: 1.1rem;
  margin-bottom: var(--space-2);
}

.preview__heading {
  font-size: 1.1rem;
}

.prose {
  max-width: 38rem;
}

.prose h1 {
  font-size: 2rem;
  margin-bottom: var(--space-4);
}

/* ==========================================================================
   Citation chip — the product's signature visual element (spec §8.4)
   [favicon 16px] Source · dataset · snapshot date, the whole chip a link to
   the origin, hover/focus popover with full attribution, licence and an
   "as of" build stamp.

   Anatomy: a square hairline box on the surface (not a pill) — it reads as
   an object with edges rather than a decorative tag, and holds up at small
   sizes stacked several across a row (approved interface concepts,
   screen 1d: "the default everywhere").
   ========================================================================== */

.citation-chip-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: baseline;
  max-width: 100%;
}

.citation-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.6em;
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-sm);
  background: var(--gf-surface);
  color: var(--gf-muted);
  font-family: var(--gf-font-sans);
  font-size: 0.8rem;
  line-height: 1.3;
  text-decoration: none;
  max-width: 100%;
}

.citation-chip strong {
  color: var(--gf-ink);
  font-weight: 600;
}

.citation-chip-wrap:hover .citation-chip,
.citation-chip:focus-visible {
  border-color: var(--gf-accent);
  box-shadow: inset 0 -2px 0 var(--gf-accent);
}

/* Never colour alone: staleness also spells itself out in words. */
.citation-chip--stale {
  color: var(--gf-accent);
}

.citation-chip__stale-label {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7em;
  color: var(--gf-accent);
}

.citation-chip__favicon {
  flex: none;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: var(--gf-accent-wash);
  border: 1px solid var(--gf-line);
  color: var(--gf-accent);
  font-family: var(--gf-font-sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  overflow: hidden;
  /* Real favicons are fetched at ingest-time and cached to
     /static/favicons/{domain}.png (spec §8.4); until a source has one this
     monogram (its short_name, e.g. "WB", "UIS") fills the same slot rather
     than a blank square. */
}

.citation-chip__favicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.citation-chip__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.citation-chip__dot {
  opacity: 0.55;
}

/* Small / dense-row modifier: several chips side by side (indicator-page
   attribution list, per-source table, block citation rows). */
.citation-chip--small .citation-chip {
  padding: 0.2em 0.5em;
  font-size: 0.72rem;
  gap: 0.3em;
}

.citation-chip--small .citation-chip__favicon {
  width: 13px;
  height: 13px;
  font-size: 0.5rem;
}

/* Inline modifier: a hairline underline with no box, for a citation that
   sits inside a sentence of running prose rather than a standalone row. */
.citation-chip--inline .citation-chip {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid var(--gf-line);
  padding: 0 0 0.1em;
  background: transparent;
}

.citation-chip--inline.citation-chip-wrap:hover .citation-chip,
.citation-chip--inline .citation-chip:focus-visible {
  border-bottom-color: var(--gf-accent);
  box-shadow: none;
}

.citation-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

/* Popover: full attribution, licence, cadence, "as of" build stamp. Opens
   on hover (with a short CSS transition-delay so it doesn't flicker on a
   pass-through) and immediately on keyboard focus. */
.citation-chip__popover {
  position: absolute;
  bottom: calc(100% + 7px);
  left: 0;
  z-index: 40;
  width: min(320px, 88vw);
  background: var(--gf-surface);
  border: 1px solid var(--gf-ink);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.16);
  font-family: var(--gf-font-sans);
  opacity: 0;
  visibility: hidden;
  transform: translateY(3px);
  transition:
    opacity 0.12s ease,
    transform 0.12s ease,
    visibility 0s linear 0.12s;
  pointer-events: none;
}

.citation-chip-wrap:hover .citation-chip__popover,
.citation-chip-wrap:focus-within .citation-chip__popover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0.15s, 0.15s, 0s;
  pointer-events: auto;
}

.citation-chip__popover dl {
  margin: 0;
}

.citation-chip__popover-title {
  font-family: var(--gf-font-serif);
  font-size: 0.95rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.citation-chip__popover-attribution {
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--gf-muted);
  margin: 0 0 0.5rem;
}

.citation-chip__popover-row {
  display: flex;
  gap: 0.6rem;
  padding: 0.35rem 0;
  border-top: 1px solid var(--gf-line);
  font-size: 0.76rem;
  line-height: 1.5;
}

.citation-chip__popover-row dt {
  flex: none;
  width: 4.5rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.66rem;
  color: var(--gf-muted);
}

.citation-chip__popover-row dd {
  margin: 0;
  color: var(--gf-ink);
}

.citation-chip__popover-go {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--gf-line);
  font-size: 0.75rem;
  color: var(--gf-accent);
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--gf-line);
  color: var(--gf-muted);
  font-family: var(--gf-font-sans);
  font-size: 0.875rem;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-4);
}

.site-footer__meta {
  margin: 0;
}

.site-footer__links {
  display: flex;
  gap: var(--space-3);
}

.site-footer__links a {
  color: var(--gf-muted);
  text-decoration: none;
}

.site-footer__links a:hover {
  color: var(--gf-ink);
  text-decoration: underline;
}

/* ==========================================================================
   Context shell — the three-zone app view (spec §8.3)
   ========================================================================== */

/* The global <main> (app/templates/base.html) carries top/bottom padding
   for prose pages; the app shell's Zone A wants to sit flush against the
   site header instead. :has() is a progressive enhancement here -- browsers
   without it just keep the default breathing room above Zone A, which is
   harmless. */
main:has(> .gf-app) {
  padding-block-start: 0;
}

.gf-app {
  padding-block-end: var(--space-5);
}

/* Zone A — context switcher */
.context-bar {
  background: var(--gf-hdr);
  color: var(--gf-hdr-ink);
  border-bottom: 1px solid var(--gf-hdr-line);
}

.context-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.7rem var(--space-4);
  font-family: var(--gf-font-sans);
}

.context-scope {
  position: relative;
}

.context-scope__summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--gf-hdr-line);
  background: rgba(128, 128, 128, 0.1);
  color: var(--gf-hdr-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  list-style: none;
  min-width: 9rem;
}

.context-scope__summary::-webkit-details-marker,
.context-scope__summary::marker {
  display: none;
}

.context-scope__dot {
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--gf-accent);
  border-radius: 999px;
}

.context-scope__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}

.context-scope__eyebrow {
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gf-hdr-muted);
}

.context-scope__value {
  font-size: 0.9rem;
}

.context-scope__caret {
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--gf-hdr-muted);
}

.context-scope[open] .context-scope__summary {
  border-color: var(--gf-accent);
}

.context-scope__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 80;
  width: 20rem;
  max-width: 88vw;
  background: var(--gf-surface);
  color: var(--gf-ink);
  border: 1px solid var(--gf-ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.context-scope__menu a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--gf-ink);
  text-decoration: none;
}

.context-scope__menu a:hover,
.context-scope__menu a:focus-visible {
  background: var(--gf-accent-wash);
}

.context-scope__menu a[aria-current="true"] {
  background: var(--gf-bg-sunken);
}

.context-scope__menu-note {
  font-size: 0.68rem;
  color: var(--gf-muted);
}

.context-bar__status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  font-size: 0.78rem;
  color: var(--gf-hdr-muted);
  white-space: nowrap;
}

.context-bar__status-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding-left: var(--space-3);
  border-left: 1px solid var(--gf-hdr-line);
}

.context-bar__status-dot {
  width: 7px;
  height: 7px;
  background: var(--gf-accent);
  flex: none;
}

/* Permalink strip: URL encodes everything (spec §8.3) — shown as a real,
   selectable readonly field rather than a decorative label. */
.permalink-strip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.4rem var(--space-4);
  background: var(--gf-bg-sunken);
  border-bottom: 1px solid var(--gf-line);
  font-family: var(--gf-font-sans);
  font-size: 0.75rem;
  color: var(--gf-muted);
  overflow: hidden;
}

.permalink-strip__eyebrow {
  flex: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.65rem;
}

.permalink-strip__field {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--gf-ink);
  font-family: var(--gf-font-mono);
  font-size: 0.75rem;
  padding: 0.15rem 0;
}

.permalink-strip__field:focus-visible {
  outline: 2px solid var(--gf-accent);
  outline-offset: 2px;
}

/* Zones B + C */
.gf-zones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: start;
}

@media (min-width: 64rem) {
  .gf-zones {
    grid-template-columns: minmax(0, 1fr) 26rem;
  }
}

.zone-b {
  padding: var(--space-4);
  min-width: 0;
}

.zone-b__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.zone-b__heading {
  margin: 0 0 0.2rem;
  font-size: 1.5rem;
}

.zone-b__subhead {
  margin: 0;
  font-family: var(--gf-font-sans);
  font-size: 0.78rem;
  color: var(--gf-muted);
}

.zone-b__stamp {
  font-family: var(--gf-font-sans);
  font-size: 0.72rem;
  color: var(--gf-muted);
  white-space: nowrap;
}

.zone-c {
  border-left: 2px solid var(--gf-accent);
  background: var(--gf-surface);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

@media (max-width: 63.9375rem) {
  .zone-c {
    border-left: none;
    border-top: 2px solid var(--gf-accent);
  }
}

/* ==========================================================================
   Widget grid (Zone B, spec §8.3)
   ========================================================================== */

.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1px;
  background: var(--gf-line);
  border: 1px solid var(--gf-line);
}

.widget-card {
  background: var(--gf-surface);
  padding: var(--space-3) var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  min-height: 15rem;
}

.widget-card__head {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: 0.1rem;
}

.widget-card__title {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
}

.widget-card__title a {
  color: inherit;
  text-decoration: none;
}

.widget-card__title a:hover {
  text-decoration: underline;
}

.widget-card__badge {
  margin-left: auto;
  flex: none;
  font-family: var(--gf-font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gf-muted);
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.4rem;
  white-space: nowrap;
}

.widget-card__unit {
  font-family: var(--gf-font-sans);
  font-size: 0.75rem;
  color: var(--gf-muted);
  margin-bottom: var(--space-2);
}

.widget-card__value-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.2rem;
}

.widget-card__value {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
}

.widget-card__year {
  font-family: var(--gf-font-sans);
  font-size: 0.75rem;
  color: var(--gf-muted);
}

.widget-card__headline {
  font-family: var(--gf-font-sans);
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--gf-muted);
  margin: 0.3rem 0 0;
}

.widget-card__chart {
  height: 5.5rem;
  margin: 0.3rem 0 var(--space-2);
}

.widget-card__foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.widget-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--gf-line);
  font-family: var(--gf-font-sans);
  font-size: 0.72rem;
  color: var(--gf-muted);
}

.widget-card__actions button,
.widget-card__actions a.widget-card__ask {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--gf-muted);
  cursor: pointer;
}

.widget-card__actions button:hover,
.widget-card__actions button:focus-visible,
.widget-card__actions a.widget-card__ask:hover {
  color: var(--gf-accent);
}

.widget-card__ask {
  margin-left: auto;
  color: var(--gf-accent) !important;
  text-decoration: none;
  border-bottom: 1px solid var(--gf-accent);
  white-space: nowrap;
}

.widget-card--unavailable {
  color: var(--gf-muted);
}

/* Widgets span the full grid row on the narrowest layout so a card is never
   squeezed under 15rem, per the responsive-to-320px requirement. */
@media (max-width: 26rem) {
  .widget-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Reconciliation spotlight — "two sources, two numbers" (spec §5.3, §8.3)
   ========================================================================== */

.recon-spotlight {
  grid-column: 1 / -1;
  background: var(--gf-surface);
  padding: var(--space-3) var(--space-4);
}

.recon-spotlight__head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.recon-badge {
  font-family: var(--gf-font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gf-accent);
  border: 1px solid var(--gf-accent);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
}

.recon-spotlight__kicker {
  font-family: var(--gf-font-sans);
  font-size: 0.78rem;
  color: var(--gf-muted);
}

.recon-spotlight__stamp {
  margin-left: auto;
  font-family: var(--gf-font-sans);
  font-size: 0.72rem;
  color: var(--gf-muted);
}

.recon-spotlight__title {
  margin: 0 0 0.2rem;
  font-size: 1.2rem;
}

.recon-spotlight__lede {
  margin: 0 0 var(--space-3);
  font-family: var(--gf-font-sans);
  font-size: 0.8rem;
  color: var(--gf-muted);
  max-width: 60ch;
}

.recon-spotlight__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1px;
  background: var(--gf-line);
  border: 1px solid var(--gf-line);
}

.recon-figure {
  background: var(--gf-surface);
  padding: var(--space-2) var(--space-3);
}

.recon-figure--delta {
  background: var(--gf-bg);
  display: flex;
  flex-direction: column;
}

.recon-figure__eyebrow {
  font-family: var(--gf-font-sans);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gf-muted);
  margin-bottom: 0.4rem;
}

.recon-figure__value {
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

.recon-figure__value--accent {
  color: var(--gf-accent);
}

.recon-figure__sub {
  font-family: var(--gf-font-sans);
  font-size: 0.72rem;
  color: var(--gf-muted);
  margin: 0.4rem 0 0.6rem;
}

.recon-figure__delta-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.recon-figure__note {
  margin: 0.5rem 0 0;
  font-family: var(--gf-font-sans);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--gf-muted);
}

.recon-figure__link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--gf-font-sans);
  font-size: 0.72rem;
}

/* Expanded treatment on the indicator page (design's "reconciliation,
   expanded" screen) */
.recon-detail {
  border: 1px solid var(--gf-line);
  margin: var(--space-4) 0;
}

.recon-detail__head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gf-line);
}

.recon-detail__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--gf-line);
}

.recon-detail__card {
  background: var(--gf-surface);
  padding: var(--space-3) var(--space-4);
}

.recon-detail__kind {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--gf-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gf-muted);
  margin-bottom: var(--space-2);
}

.recon-detail__swatch {
  width: 0.9rem;
  height: 0.9rem;
  background: var(--gf-accent);
  flex: none;
}

.recon-detail__card:nth-child(2) .recon-detail__swatch {
  background: var(--gf-muted);
}

.recon-detail__value {
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.recon-detail__why {
  padding: var(--space-3) var(--space-4);
  background: var(--gf-bg-sunken);
}

/* ==========================================================================
   Honest empty state (design concepts, screen 1g) — a data gap treated as a
   designed surface, not an error page.
   ========================================================================== */

.empty-state {
  border: 1px solid var(--gf-line);
  background: var(--gf-surface);
  padding: var(--space-4);
}

.empty-state__flag {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 var(--space-2);
}

.empty-state__marker {
  width: 0.6rem;
  height: 0.6rem;
  border: 2px solid var(--gf-accent);
  transform: rotate(45deg);
  flex: none;
}

.empty-state__flag-label {
  font-family: var(--gf-font-sans);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gf-accent);
}

.empty-state__body {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  line-height: 1.6;
}

.empty-state__note {
  margin: 0 0 var(--space-3);
  font-family: var(--gf-font-sans);
  font-size: 0.8rem;
  color: var(--gf-muted);
  max-width: 68ch;
}

.empty-state__list {
  border: 1px solid var(--gf-line);
}

.empty-state__row {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--gf-line);
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
}

.empty-state__row:last-child {
  border-bottom: none;
}

.empty-state__row-name {
  font-size: 0.95rem;
}

.empty-state__row-detail {
  font-family: var(--gf-font-sans);
  font-size: 0.75rem;
  color: var(--gf-muted);
}

/* ==========================================================================
   Widget-card and indicator-page unavailable slot: the compact version of
   the honest empty state that fits inside a single grid cell.
   ========================================================================== */

.unavailable {
  margin-top: auto;
  font-family: var(--gf-font-sans);
  font-size: 0.8rem;
  color: var(--gf-muted);
  line-height: 1.5;
}

/* Outside a flex column (e.g. standalone below the grid), auto margin has
   nothing to push against -- use ordinary spacing instead. */
.unavailable--block {
  margin-top: var(--space-3);
}

/* ==========================================================================
   Indicator permalink page (spec §8.2, §8.3, §8.8)
   ========================================================================== */

.indicator-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border: 1px solid var(--gf-line);
  background: var(--gf-surface);
}

@media (min-width: 60rem) {
  .indicator-page {
    grid-template-columns: minmax(0, 1fr) 19rem;
  }
}

.indicator-page__canonical {
  padding: 0.45rem var(--space-4);
  border-bottom: 1px solid var(--gf-line);
  background: var(--gf-bg-sunken);
  font-family: var(--gf-font-mono);
  font-size: 0.72rem;
  color: var(--gf-muted);
  overflow-x: auto;
  white-space: nowrap;
  grid-column: 1 / -1;
}

.indicator-page__main {
  padding: var(--space-4);
  min-width: 0;
}

@media (min-width: 60rem) {
  .indicator-page__main {
    border-right: 1px solid var(--gf-line);
  }
}

.indicator-page__eyebrow {
  font-family: var(--gf-font-sans);
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gf-muted);
  margin-bottom: var(--space-2);
}

.indicator-page__title {
  font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.1rem);
  margin-bottom: var(--space-2);
}

.indicator-page__definition {
  font-size: 1.05rem;
  color: var(--gf-muted);
  max-width: 66ch;
  margin-bottom: var(--space-3);
}

.indicator-facts {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--gf-line);
  margin-bottom: var(--space-4);
}

.indicator-facts__item {
  flex: 1 1 8rem;
  padding: 0.65rem 0.8rem;
  border-right: 1px solid var(--gf-line);
  border-bottom: 1px solid var(--gf-line);
}

.indicator-facts__item:last-child {
  border-right: none;
}

.indicator-facts__key {
  font-family: var(--gf-font-sans);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gf-muted);
  margin-bottom: 0.3rem;
}

.indicator-facts__value {
  font-size: 0.95rem;
}

.indicator-chart {
  height: 18rem;
  margin-bottom: var(--space-2);
}

.indicator-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: 0.65rem 0;
  border-top: 1px solid var(--gf-line);
  border-bottom: 1px solid var(--gf-line);
  font-family: var(--gf-font-sans);
  font-size: 0.78rem;
  color: var(--gf-muted);
  margin-bottom: var(--space-4);
}

.indicator-actions button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--gf-muted);
  cursor: pointer;
}

.indicator-actions button:hover,
.indicator-actions button:focus-visible {
  color: var(--gf-accent);
}

.indicator-actions__ask {
  margin-left: auto;
  color: var(--gf-accent);
  border-bottom: 1px solid var(--gf-accent);
  text-decoration: none;
  white-space: nowrap;
}

.indicator-table-wrap {
  overflow-x: auto;
}

.indicator-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--gf-font-sans);
  font-size: 0.85rem;
}

.indicator-table th {
  text-align: left;
  padding: 0.55rem 0.7rem 0.55rem 0;
  border-bottom: 1px solid var(--gf-ink);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.66rem;
  color: var(--gf-muted);
  white-space: nowrap;
}

.indicator-table td {
  padding: 0.65rem 0.7rem 0.65rem 0;
  border-bottom: 1px solid var(--gf-line);
}

.indicator-table td.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.indicator-note {
  margin: var(--space-3) 0 0;
  font-family: var(--gf-font-sans);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--gf-muted);
  border-left: 2px solid var(--gf-accent);
  padding-left: var(--space-3);
  max-width: 74ch;
}

.indicator-page__subheading {
  font-size: 1.25rem;
  margin-top: 0;
}

.indicator-page__subheading--tight {
  font-size: 1.1rem;
  margin-top: var(--space-4);
}

.indicator-page__caveats {
  font-family: var(--gf-font-sans);
  font-size: 0.85rem;
  color: var(--gf-muted);
  max-width: 70ch;
}

.aside-sdg {
  font-family: var(--gf-font-sans);
  font-size: 0.85rem;
  margin: 0;
}

.empty-state__list--spaced {
  margin-top: var(--space-3);
}

.recon-detail__prose {
  margin: 0;
  font-family: var(--gf-font-sans);
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--gf-muted);
  max-width: 74ch;
}

.indicator-page__aside {
  padding: var(--space-4) var(--space-3);
  background: var(--gf-bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.aside-section__heading {
  font-family: var(--gf-font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gf-muted);
  margin-bottom: var(--space-2);
}

.aside-section__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.aside-coverage {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: var(--gf-font-sans);
  font-size: 0.8rem;
}

.aside-coverage__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--gf-line);
}

.aside-coverage__row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.aside-coverage__row dt {
  color: var(--gf-muted);
}

.aside-coverage__row dd {
  margin: 0;
}

.aside-caveats {
  margin: 0;
  padding-left: 1.1rem;
  font-family: var(--gf-font-sans);
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--gf-muted);
}

.aside-caveats li {
  margin-bottom: 0.45rem;
}

.aside-related a {
  font-size: 0.88rem;
}

/* ==========================================================================
   Topic landing page
   ========================================================================== */

.topic-header {
  margin-bottom: var(--space-4);
}

.topic-header__title {
  font-size: 2rem;
  margin-bottom: 0.4rem;
}

.topic-header__lede {
  color: var(--gf-muted);
  max-width: 60ch;
}

.topic-card__year {
  font-size: 0.75rem;
  color: var(--gf-muted);
}

.topic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1px;
  background: var(--gf-line);
  border: 1px solid var(--gf-line);
}

.topic-card {
  background: var(--gf-surface);
  padding: var(--space-3);
}

.topic-card__title a {
  color: var(--gf-ink);
  text-decoration: none;
  font-size: 1rem;
}

.topic-card__title a:hover {
  color: var(--gf-accent);
}

.topic-card__unit {
  font-family: var(--gf-font-sans);
  font-size: 0.75rem;
  color: var(--gf-muted);
  margin: 0.3rem 0 0.5rem;
}

.topic-card__value {
  font-size: 1.2rem;
}

.topic-card__none {
  font-family: var(--gf-font-sans);
  font-size: 0.8rem;
  color: var(--gf-muted);
}

/* ==========================================================================
   Chart container + text alternative
   ========================================================================== */

.chart-container {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 4rem;
}

.chart-container__canvas {
  width: 100%;
  height: 100%;
}

.chart-data-table {
  margin-top: 0.4rem;
  font-family: var(--gf-font-sans);
}

.chart-data-table > summary {
  cursor: pointer;
  font-size: 0.72rem;
  color: var(--gf-muted);
}

.chart-data-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-top: 0.4rem;
}

.chart-data-table th,
.chart-data-table td {
  text-align: right;
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--gf-line);
}

.chart-data-table th:first-child,
.chart-data-table td:first-child {
  text-align: left;
}

/* ==========================================================================
   Chat panel (Zone C) + analysis block — markup/CSS owned here; the SSE
   wiring that populates it live is a separate agent's work (see the DOM
   contract documented in app/templates/partials/chat_panel.html).
   ========================================================================== */

.chat-panel__head {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--gf-line);
}

.chat-panel__head-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.chat-panel__mark {
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid var(--gf-accent);
  position: relative;
}

.chat-panel__mark::after {
  content: "";
  position: absolute;
  left: 1px;
  bottom: -5px;
  width: 0;
  height: 0;
  border-left: 4px solid var(--gf-accent);
  border-top: 4px solid transparent;
}

.chat-panel__title {
  margin: 0;
  font-size: 1.05rem;
}

.chat-panel__scope-badge {
  font-family: var(--gf-font-sans);
  font-size: 0.7rem;
  color: var(--gf-muted);
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-sm);
  padding: 0.15rem 0.45rem;
}

.chat-panel__trail {
  margin-left: auto;
  font-family: var(--gf-font-sans);
  font-size: 0.75rem;
  color: var(--gf-muted);
}

.chat-panel__intro {
  margin: 0.5rem 0 0;
  font-family: var(--gf-font-sans);
  font-size: 0.76rem;
  line-height: 1.55;
  color: var(--gf-muted);
}

.chat-panel__body {
  flex: 1;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  overflow-y: auto;
}

.chat-panel__label {
  font-family: var(--gf-font-sans);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gf-muted);
}

.chat-panel__label--spaced {
  margin-bottom: 0.6rem;
}

.suggested-chip {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--gf-bg);
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  font-family: var(--gf-font-serif);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--gf-ink);
  cursor: pointer;
}

.suggested-chip:hover,
.suggested-chip:focus-visible {
  border-color: var(--gf-accent);
  color: var(--gf-accent);
  background: var(--gf-accent-wash);
}

.chat-panel__notice {
  border-top: 1px solid var(--gf-line);
  padding-top: var(--space-3);
  font-family: var(--gf-font-sans);
  font-size: 0.78rem;
  color: var(--gf-muted);
  line-height: 1.55;
}

.chat-panel__composer {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--gf-line);
}

.chat-input {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1.5px solid var(--gf-accent);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.75rem;
  background: var(--gf-surface);
}

.chat-input__bar {
  flex: none;
  width: 1.5px;
  height: 1.1rem;
  background: var(--gf-accent);
}

.chat-input__field {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--gf-ink);
  font: inherit;
  font-size: 0.9rem;
  min-width: 0;
}

.chat-input__field::placeholder {
  color: var(--gf-muted);
}

.chat-input__field:disabled {
  color: var(--gf-muted);
  cursor: not-allowed;
}

.chat-input__submit {
  flex: none;
  background: var(--gf-accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--gf-font-sans);
  font-size: 0.78rem;
  padding: 0.5rem 0.8rem;
}

.chat-input__submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.chat-panel__composer-hint {
  margin: 0.5rem 0 0;
  font-family: var(--gf-font-sans);
  font-size: 0.7rem;
  color: var(--gf-muted);
}

/* Analysis block (static placeholder demo; real blocks are streamed in) */
.analysis-block {
  border: 1px solid var(--gf-line);
  background: var(--gf-surface);
  border-radius: var(--radius-md);
}

.analysis-block__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4) 0;
  font-family: var(--gf-font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gf-muted);
}

.analysis-block__timestamp {
  margin-left: auto;
  letter-spacing: normal;
  text-transform: none;
  font-size: 0.72rem;
}

.analysis-block__question {
  margin: 0.6rem 0 0;
  padding: 0 var(--space-4) var(--space-3);
  font-size: 1.1rem;
  line-height: 1.4;
  font-weight: 600;
}

.analysis-block__interpretation {
  padding: var(--space-3) var(--space-4);
  background: var(--gf-bg);
  border-top: 1px solid var(--gf-line);
  border-bottom: 1px solid var(--gf-line);
}

.analysis-block__interp-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 0.65rem;
  font-family: var(--gf-font-sans);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gf-muted);
}

.interp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.interp-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  font-family: var(--gf-font-sans);
  font-size: 0.75rem;
  padding: 0.3rem 0.55rem;
  border: 1px dashed var(--gf-line);
  border-radius: var(--radius-sm);
  background: var(--gf-surface);
  color: var(--gf-ink);
  text-align: left;
}

.interp-chip__key {
  color: var(--gf-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.62rem;
}

.interp-chip__edit {
  color: var(--gf-accent);
  font-size: 0.62rem;
}

.phase-indicator {
  display: flex;
  margin-top: var(--space-3);
  border: 1px solid var(--gf-line);
  background: var(--gf-surface);
  font-family: var(--gf-font-sans);
}

.phase-indicator__phase {
  flex: 1;
  padding: 0.5rem 0.6rem;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--gf-muted);
  border-right: 1px solid var(--gf-line);
}

.phase-indicator__phase:last-child {
  border-right: none;
}

.phase-indicator__phase--done {
  color: var(--gf-ink);
}

.phase-indicator__phase--active {
  background: var(--gf-accent);
  color: #fff;
}

.analysis-block__section {
  padding: var(--space-3) var(--space-4) 0;
}

.analysis-block__chart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 0.3rem;
}

.analysis-block__chart-head h3 {
  margin: 0;
  font-size: 1rem;
}

.analysis-block__chart-meta {
  font-family: var(--gf-font-sans);
  font-size: 0.72rem;
  color: var(--gf-muted);
  white-space: nowrap;
}

.analysis-block__chart {
  height: 14rem;
  margin: 0.5rem 0 0.75rem;
}

.analysis-block__commentary {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gf-muted);
  font-style: italic;
}

.analysis-block__citations {
  padding: 0 var(--space-4) var(--space-3);
}

.analysis-block__followups {
  padding: var(--space-3) var(--space-4) var(--space-4);
  border-top: 1px solid var(--gf-line);
  background: var(--gf-bg);
}

.followup-chip {
  font-family: var(--gf-font-sans);
  font-size: 0.78rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--gf-line);
  border-radius: var(--radius-sm);
  background: var(--gf-surface);
  color: var(--gf-ink);
}

/* ==========================================================================
   Small screens
   ========================================================================== */

@media (max-width: 40rem) {
  .site-header__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }

  .site-footer__inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .context-bar__inner {
    flex-wrap: wrap;
  }

  .context-bar__status {
    width: 100%;
    order: 3;
    gap: var(--space-3);
  }

  .zone-b__head {
    flex-direction: column;
    align-items: flex-start;
  }

  .indicator-facts__item {
    flex-basis: 45%;
  }

  .recon-detail__value {
    font-size: 1.5rem;
  }

  .analysis-block__question {
    font-size: 1rem;
  }
}

/* Nepal-as-first-instance line under the hero lede. Quiet by design: it is
   context, not a claim -- the capability is the headline. */
.hero__instance {
  margin-top: 0.85rem;
  font-family: var(--gf-font-sans, ui-sans-serif, system-ui, sans-serif);
  font-size: 0.9rem;
  color: var(--gf-muted);
  letter-spacing: 0.01em;
}