/* ============================================================================
   S3 · FLOOR SPACE  ·  S4 · POWER  ·  S5 · WATER
   The scale translator: one facility, rendered in units the reader knows.
   One orchestrated motion per section (count-up, pour, crossfade); reduced
   motion shows final states (§8).
   ========================================================================== */

/* Alignment (§30b): the graphics block spans 980px, but the readable text
   inside it aligns to the 680px narrative edge. The narrative column's text is
   (measure-text − 2·gutter) wide and page-centered; giving in-graphic text the
   same width and centering it (margin-inline:auto) puts both on the same page
   centre-line, so their edges line up at every viewport. */
.container--wide .translate-count,
.container--wide .illustrative-label,
.container--wide .stack-legend,
.container--wide .no-data-note,
.container--wide .constant-inset,
.container--wide .context-strip,
.container--wide .water-compare__framing,
.container--wide .ratio-callout,
.container--wide .water-compare__onetown,
.container--wide .pull-note {
  max-width: calc(var(--measure-text) - 2 * var(--gutter));
  margin-inline: auto;
}

/* --- Shared controls ---------------------------------------------------- */
.toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-block: var(--space-sm);
}
.toggle-row__label {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-55);
  align-self: center;
  margin-right: var(--space-2xs);
}

/* Illustrative-arithmetic label (§3/§6 — always show the division) */
.illustrative-label {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  line-height: 1.5;
  color: var(--color-ink-70);
  margin-top: var(--space-sm);
  max-width: var(--measure-text);
}
.illustrative-label b { color: var(--color-ink); font-weight: var(--weight-semibold); }
.illustrative-label .tag {
  display: inline-block;
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--color-amber);
  margin-right: 0.4em;
}

/* Big translated count (e.g. "≈ 7 Walmart Supercenters") */
.translate-count {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: var(--weight-semibold);
  line-height: 1.15;
  margin-block: var(--space-sm) 0;
}
.translate-count .num {
  color: var(--color-amber);
  font-variant-numeric: tabular-nums;
}
.s5 .translate-count .num { color: var(--color-water); }

/* Pull-note (§S3 megawatts wrinkle) */
.pull-note {
  margin-block: var(--space-lg) 0;
  padding: var(--space-md);
  border-left: 3px solid var(--color-amber);
  background: rgba(208, 138, 46, 0.05);
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  font-style: italic;
  max-width: var(--measure-text);
}

/* Facility "no data" graceful state (Colossus floor, avg power) */
.no-data-note {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-70);
  background: rgba(183, 176, 164, 0.12);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  max-width: var(--measure-text);
}

/* --- S3 · unit-stacking grid -------------------------------------------- */
.stack-viz {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: var(--space-md);
}
.stack-tile {
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.stack-tile.is-in { opacity: 1; }
.stack-tile svg { display: block; }
.stack-tile .tile-body { fill: var(--amber-fill-operational); stroke: var(--amber-stroke); stroke-width: 1.5; }
.stack-tile--partial .tile-body { fill: rgba(208, 138, 46, 0.15); }
.stack-tile .tile-line { stroke: var(--amber-stroke); stroke-width: 1; opacity: 0.5; }
.stack-legend {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-55);
  margin-top: var(--space-2xs);
}

/* --- S4 · homes field + constant-load inset ----------------------------- */
.homes-viz {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: var(--space-md);
}
.home-glyph {
  width: 16px; height: 16px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.home-glyph.is-in { opacity: 1; }
.home-glyph path { fill: var(--amber-fill-operational); stroke: var(--amber-stroke); stroke-width: 1; }

/* Town glyph (one symbol = a town of ~5,000 households) */
.town-glyph {
  width: 20px; height: 14px;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.town-glyph.is-in { opacity: 1; }
.town-glyph-svg { display: block; }
.town-glyph-svg .town-cluster path { fill: var(--amber-fill-operational); stroke: var(--amber-stroke); stroke-width: 1; }
.town-glyph-svg .town-block { display: none; }
/* Bolder single-block fallback on phones so the cluster never muddies (mobile wins). */
@media (max-width: 430px) {
  .town-glyph-svg .town-cluster { display: none; }
  .town-glyph-svg .town-block {
    display: block;
    fill: var(--amber-fill-operational);
    stroke: var(--amber-stroke);
    stroke-width: 1.5;
  }
}
/* Honest cap note when the town grid is truncated. */
.stack-legend__cap { color: var(--color-ink-40); }

.constant-inset {
  margin-top: var(--space-lg);
  border: var(--rule-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  max-width: var(--measure-text);
}
.constant-inset svg { width: 100%; height: auto; }
.constant-inset .curve-normal { fill: none; stroke: var(--color-warmgray-300); stroke-width: 2; }
.constant-inset .curve-dc { fill: none; stroke: var(--color-amber); stroke-width: 2.5; }
.constant-inset .curve-axis { stroke: var(--color-warmgray-100); stroke-width: 1; }
.constant-inset .curve-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: var(--weight-medium);
}
.constant-inset .curve-label--dc { fill: var(--amber-stroke); }
.constant-inset .curve-label--normal { fill: var(--color-ink-55); }
.constant-inset__caption {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-70);
  margin-top: var(--space-2xs);
}

/* Neutral anchors context strip (§S4) */
.context-strip {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: var(--rule-hairline);
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  line-height: 1.6;
  color: var(--color-ink-70);
  max-width: var(--measure-text);
}
.context-strip b { color: var(--color-ink); font-weight: var(--weight-semibold); }

/* --- S5 · water comparison --------------------------------------------- */
.eyebrow--water { color: var(--color-water); }

.water-compare {
  margin-top: var(--space-md);
  min-height: 180px;
}
.water-compare__panel {
  transition: opacity var(--dur-mid) var(--ease-out);
}
.water-bar {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  align-items: center;
  gap: var(--space-sm);
  margin-block: var(--space-sm);
}
.water-bar__label {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  color: var(--color-ink-70);
}
.water-bar__label b { display: block; color: var(--color-ink); font-size: var(--fs-body-sm); }
.water-bar__track { position: relative; height: 34px; }
.water-bar__fill {
  height: 100%;
  border-radius: var(--radius-sm);
  min-width: 2px;
}
.water-bar__fill--dc { background: var(--amber-fill-operational); border: 1.5px solid var(--amber-stroke); }
.water-bar__fill--cmp { background: rgba(78, 127, 160, 0.30); border: 1.5px solid var(--color-water); }
.water-bar__val {
  font-family: var(--font-sans);
  font-size: var(--fs-annotation);
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-70);
  margin-left: 0.4rem;
}
.water-compare__framing {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  max-width: var(--measure-text);
  margin-top: var(--space-md);
}
.water-compare__onetown {
  border-left: 3px solid var(--color-water);
  padding-left: var(--space-md);
}
.ratio-callout {
  font-family: var(--font-sans);
  font-size: var(--fs-body-sm);
  color: var(--color-ink-70);
  margin-top: var(--space-sm);
  max-width: var(--measure-text);
}
.ratio-callout b { color: var(--color-water); font-weight: var(--weight-semibold); }
.s5-closer { border-color: var(--color-warmgray-100); }

/* Reduced motion: no transitions on translator visuals (final state shown) */
@media (prefers-reduced-motion: reduce) {
  .stack-tile, .home-glyph, .town-glyph, .water-compare__panel { transition: none; opacity: 1; }
}