/* ============================================================
   s-components.css — shared component grammar for /dashboard-story
   -----------------------------------------------------------
   Consumes tokens from s-tokens.css by name only — no hard-coded
   hex / px allowed in this file. Components are scoped to
   `.n-page--story` so they cannot leak into the legacy narrative
   surface.

   Phases 3–9 migrate existing HTML/CSS to these classes. This file
   is additive: after load, nothing changes visually until a later
   phase actually applies the class names.

   Component inventory (plan §4):
     .s-section            — section wrapper (vertical rhythm)
     .s-section-header     — eyebrow + h2 + hook + intro
     .s-prose              — ideal reading measure wrapper
     .s-card + variants    — the one card (plain/image/numbered/kpi/
                              accordion/quiet)
     .s-kpi                — big-metric variant of .s-card
     .s-chip + variants    — tabs, filters, sensor chips
     .s-accordion          — details-summary pattern
     .s-affiliation        — uniform logo/label tile (footer)
     .s-cite               — citation / inline code block
     .s-status-pill        — good/moderate/poor state badge
     .s-link               — editorial text link
     .s-divider            — hairline rule
     .s-eyebrow            — utility: kicker text
     .s-hook               — utility: italic serif one-liner
   ============================================================ */

/* ═══════════════════════════════════════════════════════════════
   Section rhythm
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-section {
  padding-block: var(--sp-8);
  padding-inline: clamp(var(--sp-4), 4vw, var(--sp-7));
  max-width: var(--page-max);
  margin-inline: auto;
}

.n-page--story .s-section + .s-section {
  border-top: 1px solid var(--c-line);
}

.n-page--story .s-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* ═══════════════════════════════════════════════════════════════
   Section header — every L1..L5 uses this
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-section-header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
  max-width: var(--prose-max);
}

.n-page--story .s-section-header__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0;
}

.n-page--story .s-section-header__title {
  font-family: var(--font-serif);
  font-size: var(--fs-28);
  font-weight: var(--fw-medium);
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-normal);
  color: var(--c-ink);
  margin: 0;
}

.n-page--story .s-section-header__hook {
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-accent-ink);
  margin: 0;
}

.n-page--story .s-section-header__intro {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  margin: 0;
  max-width: var(--prose-max);
}

/* ═══════════════════════════════════════════════════════════════
   Prose container — ideal reading measure
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-prose {
  max-width: var(--prose-max);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

.n-page--story .s-prose p { margin: 0 0 var(--sp-3); }
.n-page--story .s-prose p:last-child { margin-bottom: 0; }

.n-page--story .s-prose strong { color: var(--c-ink); font-weight: var(--fw-semibold); }

/* ═══════════════════════════════════════════════════════════════
   Eyebrow + hook utility classes
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-eyebrow {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.n-page--story .s-eyebrow--accent { color: var(--c-accent-ink); }

.n-page--story .s-hook {
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-accent-ink);
}

/* ═══════════════════════════════════════════════════════════════
   .s-card — the one card (all variants share this base)
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--el-0);
  transition: border-color var(--dur-fast) var(--ease-standard);
}

.n-page--story .s-card__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0;
}

.n-page--story .s-card__title {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-compact);
  letter-spacing: -0.005em;
  color: var(--c-ink);
  margin: 0;
}

.n-page--story .s-card__body {
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  margin: 0;
}

.n-page--story .s-card__footnote {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-style: italic;
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-ink-3);
  margin: 0;
}

/* Bullet list variant of the card body — typographic arrow-lede
   instead of disc bullets. Accent arrow at left margin carries the
   one-and-only accent the card is allowed to use. */
.n-page--story .s-card__bullets {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.n-page--story .s-card__bullet {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

.n-page--story .s-card__bullet::before {
  content: "→";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--c-accent);
  font-weight: var(--fw-medium);
}

/* Named-item list variant — used in Layer-4 partners
   ("Already carrying" block: `label · body` pairs). Shares the
   flex rhythm of .s-card__bullets; each item stacks label over body
   inside a calm accent-weak tile. */
.n-page--story .s-card__items {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.n-page--story .s-card__item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-accent-weak);
  border-left: 2px solid var(--c-accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
}

.n-page--story .s-card__item-label {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.n-page--story .s-card__item-body {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

/* Optional 16:9 figure on top — image bleeds to card edges */
.n-page--story .s-card__figure {
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-top-left-radius: calc(var(--r-md) - 1px);
  border-top-right-radius: calc(var(--r-md) - 1px);
  background: var(--c-paper-2);
}

.n-page--story .s-card__figure > img,
.n-page--story .s-card__figure > svg {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Numbered badge (①②③④) for Layer 1 card index */
.n-page--story .s-card__num {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0;
}

/* ── Variants ─────────────────────────────────────────────── */

/* .s-card--image : reserves top padding 0 so figure sits flush */
.n-page--story .s-card--image { padding-top: 0; }

/* .s-card--quiet : no border, surface-raised fill. Used for
   portability callout + small inline asides. */
.n-page--story .s-card--quiet {
  background: var(--c-surface-raised);
  border-color: transparent;
}

/* .s-card--hook : accent left-rule treatment. Replaces the ad-hoc
   muted-teal "Research hook" callout in Drivers. */
.n-page--story .s-card--hook {
  background: var(--c-accent-weak);
  border-color: transparent;
  border-left: 2px solid var(--c-accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.n-page--story .s-card--hook .s-card__eyebrow { color: var(--c-accent-ink); }
.n-page--story .s-card--hook .s-card__body    { color: var(--c-ink-2); }

/* ═══════════════════════════════════════════════════════════════
   .s-kpi — big-metric variant of .s-card
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-kpi {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.n-page--story .s-kpi__eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0;
}

.n-page--story .s-kpi__value {
  font-family: var(--font-serif);
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  color: var(--c-ink);   /* stays ink for "good" — pill carries color */
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.n-page--story .s-kpi--moderate .s-kpi__value { color: var(--s-moderate); }
.n-page--story .s-kpi--poor     .s-kpi__value { color: var(--s-poor); }

.n-page--story .s-kpi__unit {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--c-ink-3);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   .s-chip — tabs, filters, sensor pills
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 32px;
  padding-inline: var(--sp-3);
  background: var(--c-surface);
  color: var(--c-ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-normal);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition:
    color var(--dur-fast) var(--ease-standard),
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
  user-select: none;
  white-space: nowrap;
}

.n-page--story .s-chip:hover {
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}

.n-page--story .s-chip:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}

/* Active / selected — strong ink fill (editorial, not accent-colored) */
.n-page--story .s-chip--active,
.n-page--story .s-chip[aria-selected="true"],
.n-page--story .s-chip[aria-pressed="true"] {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
}

.n-page--story .s-chip--active:hover,
.n-page--story .s-chip[aria-selected="true"]:hover {
  background: var(--c-ink-2);
  border-color: var(--c-ink-2);
  color: var(--c-paper);
}

/* Sensor-type chip with leading colored dot — dot uses a data token */
.n-page--story .s-chip--sensor::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--chip-dot, var(--c-ink-3));
  flex: 0 0 auto;
}

.n-page--story .s-chip--pm     { --chip-dot: var(--d-pm); }
.n-page--story .s-chip--no2    { --chip-dot: var(--d-no2); }
.n-page--story .s-chip--o3     { --chip-dot: var(--d-o3); }
.n-page--story .s-chip--wind   { --chip-dot: var(--d-wind); }
.n-page--story .s-chip--rain   { --chip-dot: var(--d-rain); }
.n-page--story .s-chip--heat   { --chip-dot: var(--d-heat); }

/* ═══════════════════════════════════════════════════════════════
   .s-accordion — details-summary pattern (research + partners)
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-accordion {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.n-page--story .s-accordion + .s-accordion { margin-top: var(--sp-3); }

.n-page--story .s-accordion__summary {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  color: var(--c-ink);
  transition: background var(--dur-fast) var(--ease-standard);
}

.n-page--story .s-accordion__summary::-webkit-details-marker { display: none; }
.n-page--story .s-accordion__summary:hover { background: var(--c-surface-raised); }

.n-page--story .s-accordion__summary:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: -2px;
}

.n-page--story .s-accordion__tag {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.n-page--story .s-accordion__title {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-size: var(--fs-17);
  font-weight: var(--fw-medium);
  line-height: var(--lh-compact);
  color: var(--c-ink);
  margin: 0;
}

.n-page--story .s-accordion__chevron {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--c-ink-3);
  transition: transform var(--dur-base) var(--ease-standard);
}

.n-page--story .s-accordion[open] .s-accordion__chevron {
  transform: rotate(90deg);
}

.n-page--story .s-accordion__body {
  padding: var(--sp-5);
  border-top: 1px solid var(--c-line);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

.n-page--story .s-accordion__body > * + * { margin-top: var(--sp-3); }

/* ── Section variant ─────────────────────────────────────────────
   .s-accordion--section : an accordion whose summary reads as a
   full section header (eyebrow + serif h2 + chevron). Used for
   Layer-4 Partners, where the whole section is collapsible. */

.n-page--story .s-accordion--section {
  border-radius: var(--r-md);
}

.n-page--story .s-accordion__summary--section {
  align-items: center;
  padding: var(--sp-5);
  gap: var(--sp-4);
}

.n-page--story .s-accordion__summary-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 auto;
}

.n-page--story .s-accordion__section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: var(--fw-medium);
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-normal);
  color: var(--c-ink);
  margin: 0;
}

.n-page--story .s-accordion__body--section {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Lead line inside the accordion body — the research question itself,
   slightly heavier than the supporting note. */
.n-page--story .s-accordion__lead {
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  font-weight: var(--fw-regular);
  font-style: italic;
  line-height: var(--lh-relaxed);
  color: var(--c-ink);
  margin: 0;
  max-width: var(--prose-max);
}

/* Supporting note — "What this data provides: …" */
.n-page--story .s-accordion__note {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  margin: 0;
  max-width: var(--prose-max);
}

.n-page--story .s-accordion__note-label {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
  display: inline-block;
  margin-right: var(--sp-1);
}

/* "See it in the dashboard — …" back-link inside accordion bodies.
   Same grammar as .s-link but renders inline with a leading glyph. */
.n-page--story .s-link--inline {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  padding-block: 2px;
  border-bottom: 1px dashed transparent;
}
.n-page--story .s-link--inline:hover {
  border-bottom-color: currentColor;
}

/* ═══════════════════════════════════════════════════════════════
   .s-affiliation — uniform logo/label tile for footer
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-affiliation {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-2);
  text-decoration: none;
  color: var(--c-ink-2);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  transition:
    background var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}

.n-page--story .s-affiliation:hover {
  background: var(--c-accent-weak);
  border-color: var(--c-line);
  color: var(--c-ink);
}

.n-page--story .s-affiliation:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}

.n-page--story .s-affiliation__mark {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.n-page--story .s-affiliation__mark > img,
.n-page--story .s-affiliation__mark > svg {
  max-width: 22px;
  max-height: 22px;
  width: auto;
  height: auto;
  display: block;
}

.n-page--story .s-affiliation__label {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   .s-cite — citation / inline code block
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-cite {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-raised);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  line-height: var(--lh-normal);
  color: var(--c-ink-2);
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-x: auto;
}

.n-page--story .s-cite__copy {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  height: 28px;   /* slight reduction from .s-chip 32px so it nests cleanly */
  padding-inline: var(--sp-2);
  font-size: var(--fs-11);
}

/* Inline <code> — mono, minimal pill */
.n-page--story code:not(pre code):not(.s-cite) {
  font-family: var(--font-mono);
  font-size: 0.92em;
  padding: 1px 6px;
  background: var(--c-surface-raised);
  border-radius: var(--r-sm);
  color: var(--c-ink);
}

/* ═══════════════════════════════════════════════════════════════
   .s-status-pill — good / moderate / poor
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 22px;
  padding-inline: var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.n-page--story .s-status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

.n-page--story .s-status-pill--good {
  background: var(--c-accent-weak);
  color: var(--c-accent-ink);
}
.n-page--story .s-status-pill--moderate {
  background: rgba(167, 116, 43, 0.12);
  color: var(--s-moderate);
}
.n-page--story .s-status-pill--poor {
  background: rgba(161, 58, 44, 0.12);
  color: var(--s-poor);
}

/* Dark-theme override: the rgba() literals above lose contrast on the
   warm-dark paper. Shift to stronger-alpha + lifted text colors. */
body.n-page--story:not(.theme-light) .s-status-pill--moderate {
  background: rgba(199, 153, 88, 0.18);
  color: var(--s-moderate);
}
body.n-page--story:not(.theme-light) .s-status-pill--poor {
  background: rgba(200, 96, 87, 0.18);
  color: var(--s-poor);
}

/* ═══════════════════════════════════════════════════════════════
   .s-link — editorial text link
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-link {
  color: var(--c-accent-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition:
    color var(--dur-fast) var(--ease-standard),
    text-decoration-color var(--dur-fast) var(--ease-standard);
}

.n-page--story .s-link:hover {
  color: var(--c-accent);
  text-decoration-color: var(--c-accent);
}

.n-page--story .s-link:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}

.n-page--story .s-link--arrow::after {
  content: " →";
  display: inline;
}

/* ═══════════════════════════════════════════════════════════════
   .s-divider — hairline rule
   ═══════════════════════════════════════════════════════════════ */

.n-page--story .s-divider {
  border: 0;
  height: 1px;
  background: var(--c-line);
  margin-block: var(--sp-6);
}

.n-page--story .s-divider--strong { background: var(--c-line-strong); }

/* ═══════════════════════════════════════════════════════════════
   Reduced-motion respect (duplicates s-tokens @media but keeps
   component-level transitions snappy too)
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .n-page--story .s-card,
  .n-page--story .s-chip,
  .n-page--story .s-accordion__summary,
  .n-page--story .s-accordion__chevron,
  .n-page--story .s-affiliation,
  .n-page--story .s-link {
    transition: none;
  }
}