/* FiveAxisModel — the five-layer model, the product spine (S80 dark single-accent).
 * Canonical home for the layered "strata" rail consumed by EVERY surface that
 * shows the model (homepage, framework, and downstream results/assessment).
 * Extracted verbatim from M8c-01-homepage.css at S80 Phase 1 so there is ONE
 * canonical model, never a per-surface copy (the fracture this forge prevents).
 *
 * TWO consumers, one vocabulary:
 *   1. STATIC rail (homepage) — the base `.strata*` rules below + the
 *      `.strata__row--bind` modifier. Byte-for-byte the prior homepage render;
 *      no JS, no data-attributes required. This block must not drift.
 *   2. INTERACTIVE stage (framework scrollytelling) — opt in with
 *      `.strata--interactive`. States are driven by data-attributes set by
 *      js/scrolly.js (data-active / data-state="dim" on rows, data-converged on
 *      the stage for the aha, data-marked for the reader's pick). Every animated
 *      change is compositor-only (opacity + transform:scaleX, never width) and
 *      lives under prefers-reduced-motion: no-preference, so reduced motion and
 *      no-JS both fall back to a complete, legible static model.
 *
 * Lime stays SCARCE: neutral through the descent; the single binding layer is
 * the one lime bloom, earned at the convergence aha (homepage's single-climax
 * doctrine, carried across the system).
 */

/* ════════════ BASE — static rail (homepage consumer, verbatim) ════════════ */
.strata { max-width: var(--content-max); margin: 0 auto; }
.strata__row {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1.3fr) minmax(0, 1fr) 132px;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--hairline);
}
.strata__row:last-child { border-bottom: 1px solid var(--hairline); }
.strata__row--bind {
  border-left: 2px solid var(--lime);
  background: color-mix(in srgb, var(--lime) 6%, transparent);
}
.strata__numeral {
  font-family: "JetBrains Mono", monospace;
  font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem);
  font-weight: 700;
  color: var(--text-3);
  line-height: 1;
}
.strata__row--bind .strata__numeral { color: var(--lime); }
.strata__name { font-family: "JetBrains Mono", monospace; font-size: var(--fs-subhead); font-weight: 700; letter-spacing: 0.02em; color: var(--text); }
.strata__state { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: var(--tracking-label); color: var(--text-3); font-weight: 700; margin-top: var(--space-3xs); }
.strata__row--bind .strata__state { color: var(--lime); }
.strata__q { font-style: italic; color: var(--text-2); font-size: var(--fs-body); line-height: 1.45; margin: 0 0 var(--space-2xs); }
.strata__binds { font-size: 13px; color: var(--text-3); line-height: 1.5; margin: 0; }
.strata__bind-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  justify-self: end;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  color: var(--ground);
  background: var(--lime);
  padding: var(--space-3xs) var(--space-2xs);
  box-shadow: var(--glow-lime); /* the single peak-glow "this is the thing" moment */
}
.strata__meter { justify-self: end; width: 100%; max-width: 132px; }
.strata__bar { position: relative; height: 8px; background: var(--hairline); }
.strata__bar-fill { height: 100%; background: var(--text-3); }
.strata__row--bind .strata__bar-fill { background: var(--lime); box-shadow: var(--glow-lime-soft); }
.strata__bedrock {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  color: var(--text-3);
  padding: var(--space-md);
}
@media (max-width: 820px) {
  .strata__row { grid-template-columns: 48px 1fr; row-gap: var(--space-sm); }
  .strata__detail { grid-column: 1 / -1; }
  .strata__meter { grid-column: 1 / -1; max-width: none; justify-self: stretch; }
  .strata__bind-chip { justify-self: start; grid-column: 1 / -1; }
}

/* ════════════ INTERACTIVE — scroll-reactive stage (framework consumer) ════════════
 * Opt-in via .strata--interactive. Everything here is scoped under that class so
 * the static homepage rail above is never touched. */

/* Compact presentation: the pinned stage is the MAP (layer names + signal bars
 * + active light), so rows are tighter than the homepage's full-detail rail —
 * the questions + meaning live in the flowing steps, never duplicated here. This
 * keeps the whole model inside one viewport so the pin never hides under the nav
 * or clips the bedrock. */
.strata--interactive .strata__row { padding-block: var(--space-sm); }
.strata--interactive .strata__numeral { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); }
.strata--interactive .strata__bedrock { padding-block: var(--space-sm); }

/* No-JS / pre-init FLOOR: a complete, legible static model. Bars sit at their
 * illustrative widths (per-row --fill 0..1); the binding layer reads lime. This
 * is what renders with JS disabled, so the page is complete without scripts. */
.strata--interactive .strata__bar-fill {
  width: 100%;
  transform: scaleX(var(--fill, 0.6));
  transform-origin: left;
}
.strata--interactive .strata__row[data-bind="true"] .strata__bar-fill { background: var(--lime); box-shadow: var(--glow-lime-soft); }
.strata--interactive .strata__bind-chip { opacity: 1; }

/* Participatory MARK — the reader's self-located bottleneck (works either path). */
.strata--interactive .strata__row[data-marked] { border-left: 2px solid var(--text-2); }
.strata--interactive .strata__row[data-marked] .strata__name::after {
  content: " ◂ YOUR PICK";
  color: var(--text-3);
  font-size: 10px;
  letter-spacing: var(--tracking-label);
}

/* JS-ENHANCED descent (js/scrolly.js sets data-scrolly-ready on the stage):
 * bars start empty, the active layer lights as each step enters, climax at the
 * convergence aha. Lime appears only on the active signal bar + the final bloom. */
.strata--interactive[data-scrolly-ready] .strata__bar-fill { transform: scaleX(0); background: var(--text-3); box-shadow: none; }
.strata--interactive[data-scrolly-ready] .strata__bind-chip { opacity: 0; }
/* RESTING state (no layer active yet) = FULL legibility. A row dims ONLY when
 * ANOTHER layer is actively selected (scrolly.js sets data-state="dim" on the
 * non-active rows). This keeps the un-activated map at load above WCAG contrast
 * (no dim text before the reader has engaged) and reads better (not dim-by-default). */
.strata--interactive[data-scrolly-ready] .strata__row { opacity: 1; }
.strata--interactive[data-scrolly-ready] .strata__row[data-state="dim"] { opacity: 0.4; }
.strata--interactive[data-scrolly-ready] .strata__row[data-active] .strata__bar-fill {
  transform: scaleX(var(--fill, 0.85));
  background: var(--lime);
  box-shadow: var(--glow-lime-soft);
}

/* ── Convergence — the AHA as an OPEN LOOP (operator-ruled S80, PRE-AHA doctrine).
 * The five named layers recede into anonymity (sink + fade, names gone — nothing
 * readable, nothing deducible by position) and a single UNNAMED lime seal locks
 * in their place. The MECHANISM (one binds) is proven viscerally; WHICH one is
 * theirs is WITHHELD — the open file the 5-minute diagnostic closes. No named
 * verdict (no fabrication). The seal is the one lime peak. Compositor-only
 * (opacity/transform/scaleX), one-shot on the existing data-converged toggle. ── */
.strata--interactive { position: relative; } /* containing block for the seal */

/* the five recede-DOWN, staggered; names fade to anonymity (opacity:0 → no
 * low-contrast text, nothing readable to identify the winner by). */
.strata--interactive[data-scrolly-ready][data-converged] .strata__row {
  opacity: 0.12;
  transform: translateY(8px) scale(0.985);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.strata--interactive[data-scrolly-ready][data-converged] .strata__numeral,
.strata--interactive[data-scrolly-ready][data-converged] .strata__name,
.strata--interactive[data-scrolly-ready][data-converged] .strata__state { opacity: 0; }
.strata--interactive[data-scrolly-ready][data-converged] .strata__bar-fill { background: var(--text-3); box-shadow: none; }

/* the unnamed seal — rises + locks lime (calm, certain, withheld; NOT a shimmer) */
.strata__seal {
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(calc(-50% + 8px));
  opacity: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: "JetBrains Mono", monospace;
}
.strata__seal-mark {
  color: var(--lime);
  font-weight: 700;
  letter-spacing: var(--tracking-label);
  font-size: var(--fs-subhead);
  text-shadow: var(--glow-lime);
}
.strata__seal-lock { position: relative; width: 132px; height: 8px; background: var(--hairline); overflow: hidden; }
.strata__seal-lockfill { position: absolute; inset: 0; background: var(--lime); box-shadow: var(--glow-lime-soft); transform: scaleX(0); transform-origin: left; }
.strata--interactive[data-converged] .strata__seal { opacity: 1; transform: translateY(-50%); }
.strata--interactive[data-converged] .strata__seal-lockfill { transform: scaleX(1); }
@media (max-width: 920px) { .strata__seal { display: none; } } /* mobile: aha prose + CTA carry the loop */

/* Motion only when welcome. Reduced motion → instant final state (sealed +
 * receded), no choreography (mirrors foundation-motion.css's .reveal floor). */
@media (prefers-reduced-motion: no-preference) {
  .strata--interactive[data-scrolly-ready] .strata__row {
    transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
  }
  .strata--interactive[data-scrolly-ready] .strata__numeral,
  .strata--interactive[data-scrolly-ready] .strata__name,
  .strata--interactive[data-scrolly-ready] .strata__state { transition: opacity var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
  .strata--interactive[data-scrolly-ready] .strata__bar-fill {
    transition: transform var(--dur-slow) var(--ease-out),
                background-color var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
  }
  .strata__seal { transition: opacity var(--dur-slow) var(--ease-out) 150ms, transform var(--dur-slow) var(--ease-out) 150ms; }
  .strata__seal-lockfill { transition: transform var(--dur-slow) var(--ease-out) 220ms; }
}

/* ════════════ CALIBRATING — orienting / pre-read state (assessment intro consumer) ════════════
 * S80 Movement I. Opt-in via .strata--calibrating. The protagonist PRESENT + alive +
 * attentive — "about to read you" — showing NO scored read: Tier 1 is unscored, so a
 * fill / bind / chip / seal / verdict here would be the fake-read sin. Five NAMED layers
 * (the instrument itself, not a read); neutral empty bars; lime kept SCARCE, appearing
 * only at the moving EDGE of attention (the home-substrate sensing register).
 *
 * Anonymity (the recede-to-seal aha) is RESERVED for convergence — NEVER used here.
 *
 * Scoped entirely under .strata--calibrating: the static (homepage) and interactive
 * (framework) blocks above are untouched. Motion CHARACTER is deliberately tunable
 * (--calib-* knobs + the two @keyframes below) — the 10% tuned on the rendered surface
 * (ambient-breath vs presence-reactive vs self-assembling). Reduced-motion → the static
 * rules here stand: present, named, unlit, zero animation. */
.strata--calibrating {
  --calib-breath: 3200ms;   /* tunable: cadence of the sensing motion */
  --calib-stagger: 240ms;   /* tunable: per-layer offset */
  max-width: 100%;
}
.strata--calibrating .strata__row {
  grid-template-columns: 52px minmax(0, 1fr) 96px;
  padding: var(--space-sm) var(--space-md);
  align-items: center;
  opacity: 1; /* present at full legibility — no dim-by-default before engagement */
}
.strata--calibrating .strata__numeral {
  font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem);
  color: var(--text-3);
}
.strata--calibrating .strata__name { font-size: var(--fs-body); color: var(--text); }
/* Empty NEUTRAL meter — the track is present, carries NO fill (no magnitude = no read). */
.strata--calibrating .strata__meter { justify-self: end; width: 100%; max-width: 96px; }
.strata--calibrating .strata__bar { position: relative; height: 6px; background: var(--hairline); overflow: hidden; }
/* The orienting caption — withholds the read in the instrument's own voice. */
.strata--calibrating .strata__calibrating-note {
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-3);
  padding: var(--space-md);
}
.strata--calibrating .strata__calibrating-note b { color: var(--text-2); font-weight: 700; }

/* ── HONEST RESTING VARIANTS — data-calib-rest on the .strata--calibrating element.
 *    All three are honest BY CONSTRUCTION: no bar EVER reads a different value than
 *    another (no parked partial fills = no accidental scored read on an unscored intro).
 *    Switch by editing the one attribute, no rebuild.
 *      scan  (default) — uniform empty bars; ONE SYNCHRONIZED lime pass (the instrument
 *                        scanning) — every bar at the identical position every instant.
 *      none            — NO bars at all; the named axes + structure only (the bar IS the
 *                        score → absent until scoring begins).
 *      pulse           — all bars one IDENTICAL faint glow, breathing together.
 *    Reduced-motion → all three fall to a static present-unlit model (zero animation). ── */

/* none: the bar is the score → no bars before scoring begins */
.strata--calibrating[data-calib-rest="none"] .strata__meter { display: none; }

@media (prefers-reduced-motion: no-preference) {
  /* TEXT STAYS STATIC (M1-close): calibration lives in the METERS, never the labels.
     The prior numeral opacity-breath composited the text layer and produced chromatic
     subpixel edge-fringing on the layer labels — removed. Aliveness is the bar scan ONLY;
     the labels render clean + static. */
  /* scan: ONE synchronized lime pass across every bar — identical position at every
     instant (NO animation-delay), so no bar reads as a different fill. The only lime,
     carrying NO magnitude (it never rests as a width). */
  .strata--calibrating[data-calib-rest="scan"] .strata__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--lime) 24%, transparent), transparent);
    transform: translateX(-100%);
    animation: m8c05-calib-scan var(--calib-breath) var(--ease-in-out) infinite;
  }
  /* pulse: all bars one identical faint glow, breathing together (synchronized → uniform). */
  .strata--calibrating[data-calib-rest="pulse"] .strata__bar {
    animation: m8c05-calib-pulse var(--calib-breath) var(--ease-in-out) infinite;
  }
}
@keyframes m8c05-calib-scan {
  0%        { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@keyframes m8c05-calib-pulse {
  0%, 100% { background: var(--hairline); box-shadow: none; }
  50%      { background: color-mix(in srgb, var(--lime) 12%, var(--hairline)); box-shadow: var(--glow-lime-soft); }
}

/* ════════════ READING — per-answer receiving state (questioning surface) ════════════
 * S80 M2. The M1 calibrating protagonist now READING. Opt-in via .strata--reading; added
 * ADDITIVELY (like .strata--calibrating) — static/interactive/calibrating untouched.
 *
 * As each SCORED answer is recorded, the answer's layer RECEIVES SIGNAL — a quiet
 * STRUCTURAL acknowledgment (the axis taking the answer in + getting deeper), driven by JS
 * from the live engine: session.layerResponses (signal), session.moduleDepths (ceiling:
 * deep=3 / shallow=1), session.naCounts (N/A-dominant → unlit). The neutral depth
 * accumulates toward the ceiling and RESOLVES (settles) only when the layer completes.
 * It is NEVER a score/value mid-layer — LIME stays reserved for the SCORE (results); the
 * reading depth is warm/neutral by construction (no accidental fake-read).
 *
 * Honest states (JS sets data-reading per row): unread | receiving | read.
 * Perceptive, not flashy (2026 calm-AI): a smooth neutral deepening + one quiet receive
 * pulse per signal. Tunable: --read-dur + data-read-character on the model; the two
 * @keyframes below. Reduced-motion → static (depth shown, no pulse/transition). */
.strata--reading { --read-dur: 520ms; }
.strata--reading .strata__row { grid-template-columns: 52px minmax(0, 1fr) 96px; padding: var(--space-2xs) var(--space-md); align-items: center; }
.strata--reading .strata__numeral { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); color: var(--text-3); }
.strata--reading .strata__name { font-size: 0.8125rem; color: var(--text-2); }
.strata--reading .strata__meter { justify-self: end; width: 100%; max-width: 96px; }
.strata--reading .strata__bar { position: relative; height: 6px; background: var(--hairline); overflow: hidden; }
/* the NEUTRAL signal-depth fill — structural "how much has been read", NOT a score. */
.strata--reading .strata__bar::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: calc(var(--reading-depth, 0) * 100%);
  background: var(--text-3);
}
.strata--reading .strata__row[data-reading="unread"] { opacity: 0.4; }                                   /* unread / N/A-dominant: honestly unlit */
.strata--reading .strata__row[data-reading="unread"] .strata__bar::before { width: 0; }
.strata--reading .strata__row[data-reading="receiving"] .strata__bar::before { background: var(--text-2); }   /* taking signal in */
.strata--reading .strata__row[data-reading="read"] .strata__name { color: var(--text); }                 /* layer complete: settled */
.strata--reading .strata__row[data-reading="read"] .strata__bar::before { background: var(--text-2); }

/* ── FIFTH-LAYER FOCUS (assessment tier-3 entry; data-fifth-focus set on the model at the
 * threshold, persists through tier 3). The four diagnostic layers are read — their row labels
 * RECEDE to --text-3 so the unscored fifth (TASTE / L5) is the lit focus: its row lifts to full
 * presence and its label brightens to --text. The colour shift settles over --dur-slow. NO value
 * EVER fills the L5 bar (the diagnostic never scores taste — a fill here would be a fake read);
 * the honest acknowledgment is the depth-less receive PULSE only (JS fires data-receive-pulse on
 * each taste answer + reasoning selection). ── */
.strata--reading[data-fifth-focus] .strata__row[data-reading] .strata__name { color: var(--text-3); transition: color var(--dur-slow) var(--ease-out); }
.strata--reading[data-fifth-focus] .strata__row[data-layer="taste"] { opacity: 1; }
.strata--reading[data-fifth-focus] .strata__row[data-layer="taste"] .strata__name { color: var(--text); }

@media (prefers-reduced-motion: no-preference) {
  /* smooth neutral deepening as depth accumulates (the "getting deeper") */
  .strata--reading .strata__bar::before { transition: width var(--read-dur) var(--ease-out), background-color var(--read-dur) var(--ease-out); }
  /* one quiet receive pulse when a layer takes a scored answer in (JS retriggers via data-receive-pulse) */
  .strata--reading .strata__row[data-receive-pulse] .strata__bar { animation: m8c05-read-receive var(--read-dur) var(--ease-out) 1; }
  /* one calmer settle pulse when the layer resolves/completes */
  .strata--reading .strata__row[data-reading="read"][data-receive-pulse] .strata__bar { animation: m8c05-read-settle calc(var(--read-dur) * 1.5) var(--ease-out) 1; }
}
@keyframes m8c05-read-receive {
  0%   { box-shadow: 0 0 0 0 transparent; }
  40%  { box-shadow: 0 0 8px 1px color-mix(in srgb, var(--text) 18%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes m8c05-read-settle {
  0%   { box-shadow: 0 0 0 0 transparent; }
  50%  { box-shadow: 0 0 11px 2px color-mix(in srgb, var(--text) 24%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ════════════ RESULTS-READ — the scored read (assessment reveal consumer, M4) ════════════
 * Opt-in via data-results-read on the .strata--reading model, set by the post-capture
 * snap (js/assessment-ui-dark.js runResultsSnap). This is the ONE surface where the bar
 * reads a value, per the charter above: "LIME stays reserved for the SCORE (results)".
 * The score fill is a SEPARATE ::after channel driven by --score-depth (0..1, JS-set per
 * row from computeResults: L1-L4 layerScores/100; L5 tasteTotal/15) — the neutral
 * --reading-depth questioning grammar (::before) is never reused as a score; it recedes
 * when the read lands. An all-N/A layer carries data-result="insufficient" and keeps its
 * honest unlit state (no fill, dimmed row — never a fake zero-as-score).
 * Additive like the calibrating/reading blocks: static/interactive consumers untouched. */
.strata--reading[data-results-read] .strata__bar::before { opacity: 0; }
.strata--reading[data-results-read] .strata__bar::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  height: 100%;
  width: calc(var(--score-depth, 0) * 100%);
  background: var(--lime);
}
.strata--reading[data-results-read] .strata__row[data-result="scored"] { opacity: 1; }
.strata--reading[data-results-read] .strata__row[data-result="scored"] .strata__name { color: var(--text); }
.strata--reading[data-results-read] .strata__row[data-result="insufficient"] { opacity: 0.4; }
.strata--reading[data-results-read] .strata__row[data-result="insufficient"] .strata__bar::after { width: 0; }

/* R1 — SNAP VALENCE-MODULATION: the fill COLOR agrees with the verdict band, the
 * same way the verdict bar's density does (D-S55 doctrine). A grave read must not
 * fill in the triumphant lime. The register is JS-set (data-snap-register) from the
 * verdict band: celebrate/neutral → lime (the SCORE accent); sober (Minor/Critical)
 * → the model fills in --text, so a Critical model reads as muted as its empty bar.
 * The glow pulse + cadence + hold modulate in JS (the motion grammar); only the
 * fill color is CSS. L5 fills in every band — its color follows the same register. */
.strata--reading[data-results-read][data-snap-register="sober"] .strata__bar::after { background: var(--text); }

/* The loop-closing mono-label above the model — inserted by JS when L5 lands
 * ("THE FIFTH LAYER — read." — M3 planted "Four layers are read. The fifth is you."). */
.strata__results-note {
  font-family: "JetBrains Mono", monospace;
  font-size: var(--fs-mono-label, 0.75rem);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--lime);
  margin: 0 0 var(--space-2xs);
  padding: 0 var(--space-md);
  opacity: 0;
}
.strata--reading[data-results-read] .strata__results-note.visible { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .strata--reading[data-results-read] .strata__bar::before { transition: opacity var(--dur-base) var(--ease-out); }
  /* L1-L4 fill at --dur-slow; the fifth lands last at --dur-reveal (JS staggers the starts) */
  .strata--reading[data-results-read] .strata__bar::after { transition: width var(--dur-slow) var(--ease-out); }
  .strata--reading[data-results-read] .strata__row[data-layer="taste"] .strata__bar::after { transition-duration: var(--dur-reveal); }
  .strata__results-note { transition: opacity var(--dur-reveal) var(--ease-out); }
  /* one soft glow pulse when the fifth-layer score lands (JS one-shot via data-score-pulse) */
  .strata--reading[data-results-read] .strata__row[data-score-pulse] .strata__bar {
    animation: m8c05-score-land var(--dur-reveal) var(--ease-out) 1;
  }
}
@keyframes m8c05-score-land {
  0%   { box-shadow: 0 0 0 0 transparent; }
  45%  { box-shadow: var(--glow-lime-soft); }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* A′ B0 — READY-CUE: at the snap's breath the model's hairlines lift one register
 * (--hairline → --hairline-strong) — stillness marked as attention, never raw
 * (raw stillness reads as a hang). The lifted register HOLDS through the scored
 * read: the model carries the result and never recedes back to ambient. */
.strata--reading.is-snap-ready .strata__row { border-top-color: var(--hairline-strong); }
.strata--reading.is-snap-ready .strata__row:last-child { border-bottom-color: var(--hairline-strong); }
.strata--reading.is-snap-ready .strata__bar { background: var(--hairline-strong); }
@media (prefers-reduced-motion: no-preference) {
  .strata--reading.is-snap-ready .strata__row { transition: border-color var(--dur-base) var(--ease-out); }
  .strata--reading.is-snap-ready .strata__bar { transition: background-color var(--dur-base) var(--ease-out); }
}