/* ============================================================================
   COMPONENTS — shared primitives used across sections
   Layout containers · eyebrows · source chips (§6) · rules · buttons.
   Section-specific styles live in their own files (added per build step).
   ========================================================================== */

/* --- Layout containers (§8: 680px text, 980px graphics) ------------------
   All three variants center themselves, so they work standalone OR combined
   (`container` + `container--wide`). Root of the centered column system —
   every section sits in it. */
.container,
.container--wide,
.container--bleed {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container        { max-width: var(--measure-text); }     /* ~680px text */
.container--wide  { max-width: var(--measure-graphic); }  /* ~980px graphics */
.container--bleed {
  max-width: none;
  padding-inline: 0;   /* maps full-bleed on mobile (§8) */
}

/* Section wrapper + hairline rule between sections (§8; §30a gap token).
   Every chapter boundary is exactly 2× --gap-chapter (top + bottom padding). */
.section {
  padding-block: var(--gap-chapter);
  border-top: var(--rule-hairline);
}
.section:first-of-type { border-top: none; }
/* Neutralise the trailing bottom-margin along each section's last-child chain so
   only --gap-chapter sets the gap — boundaries stay identical regardless of what
   element (or how deeply nested) a section happens to end on. Only ever touches
   the trailing edge, never mid-section content. */
.section > :last-child,
.section > :last-child > :last-child,
.section > :last-child > :last-child > :last-child,
.section > :last-child > :last-child > :last-child > :last-child { margin-bottom: 0; }

/* --- Chapter marker (§28) — hairline rule (the section border) + large amber
   chapter number + letterspaced caps name, then the section headline. ALL
   markers amber (the Water marker no longer renders blue). ------------------ */
.chapter-marker {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.chapter-marker__num {
  font-family: var(--font-sans);
  font-size: 2rem;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-amber);
  font-variant-numeric: tabular-nums;
}
.chapter-marker__name {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-amber);
}

/* One motion (§28): fade-up ~10px, 300ms, once, on viewport entry. Initial
   hidden state is scoped to `.js` so no-JS readers always see content; the
   transform reserves no space (§30a). Reduced-motion disables it. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-mid) var(--ease-out),
              transform var(--dur-mid) var(--ease-out);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Eyebrow: names the unit of each section (§8) ------------------------ */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-amber);
  margin: 0 0 var(--space-sm) 0;
  display: inline-block;
}
.eyebrow--water { color: var(--color-water); }
.eyebrow--muted { color: var(--color-ink-55); }

/* --- Utility label / annotation (sans, on-graphic) (§8) ------------------ */
.label {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  line-height: 1.35;
  color: var(--color-ink-70);
}
.label--caps {
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  font-weight: var(--weight-medium);
  font-size: var(--fs-eyebrow);
}

/* --- Byline (§S0) -------------------------------------------------------- */
.byline {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-70);
}

/* --- Source chip (§6: superscript °, opens popover) ---------------------
   The credibility system. Rendered as a button so it is keyboard-focusable
   and tap-accessible; JS wires the popover in a later step. */
.source-chip {
  font-family: var(--font-sans);
  font-size: 0.7em;               /* superscript relative to surrounding text */
  vertical-align: super;
  line-height: 0;
  margin-inline-start: 0.15em;
  padding: 0.15em 0.3em;
  border: 1px solid var(--color-warmgray-300);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-ink-70);
  cursor: pointer;
  font-weight: var(--weight-semibold);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.source-chip:hover,
.source-chip[aria-expanded="true"] {
  background: var(--color-amber);
  border-color: var(--color-amber);
  color: var(--color-paper);
}

/* Lens marker inside chips for advocacy/industry figures (§4/§6) */
.source-chip--lens { border-style: dashed; }

/* --- Buttons / toggles (tap fallbacks for drag interactions, §5) -------- */
.btn {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink);
  background: var(--color-paper);
  border: var(--rule-mid);
  border-radius: var(--radius-md);
  padding: 0.5rem 0.9rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.btn:hover { border-color: var(--color-amber); }

/* Chip-style selector (facility picker, unit toggles) */
.chip-toggle {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  font-weight: var(--weight-medium);
  color: var(--color-ink-70);
  background: transparent;
  border: 1px solid var(--color-warmgray-300);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.chip-toggle[aria-pressed="true"],
.chip-toggle.is-active {
  color: var(--color-paper);
  background: var(--color-ink);
  border-color: var(--color-ink);
}

/* --- Hairline divider (standalone) -------------------------------------- */
.rule {
  border: none;
  border-top: var(--rule-hairline);
  margin-block: var(--space-lg);
}

/* --- Status legend swatches (built vs. designed device, §2/§8) ---------- */
.legend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-70);
}
.legend__swatch {
  width: 1.15rem; height: 1.15rem;
  border-radius: 2px;
  flex: none;
}
.legend__swatch--operational {
  background: var(--amber-fill-operational);
  border: 1.5px solid var(--amber-stroke);
}
.legend__swatch--designed {
  background: var(--amber-fill-designed);
  border: var(--amber-stroke-designed-width) dashed var(--amber-stroke);
}