/* neuro-slab.css — Parent v2 "Calm Neumorph Slab"
 * Loaded LAST after layout-a.css. Scoped to body[data-route="parents-v2"] so it
 * cannot affect the live /parents/ page.
 *
 * Strategy (see docs/superpowers/specs/2026-06-02-persona-ui-variants-design.md §4):
 *  - body bg → softened Pat-token animated gradient + fixed layered waves
 *  - content sections go transparent; each section's .wrap floats as a solid
 *    warm-cream slab so the neumorphic inner cards (neuro.css) keep a matching
 *    surface and read as extruded. Opaque slab = text never touches the gradient.
 *  - hero / header / ticker / footer stay flat per TRD §5.1 neumorphism exclusions.
 */

/* ── 1. Page background: softened gradient (Pat pastels), keeps 15s motion ── */
body[data-route="parents-v2"] {
  /* Punched ~15%: drop the washed greige stop; loop four chromatic Pat tokens
     so the motion reads as color, not gray, while staying on-palette. */
  background: linear-gradient(315deg,
    var(--color-dusty-rose) 0%,     /* #b88c8c */
    var(--color-slate-teal) 32%,    /* #9fb9bf */
    var(--color-powder-blue) 64%,   /* #aec8ce */
    var(--color-pink-blush) 100%);  /* #ddadad */
  background-size: 400% 400%;
  background-attachment: fixed;
  animation: pat-gradient 15s ease infinite;
}
@keyframes pat-gradient {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

/* ── 2. Waves: fixed bottom, layered, low-alpha white ── */
body[data-route="parents-v2"] .wave {
  position: fixed; left: 0; bottom: 0; z-index: -1;
  width: 200%; height: 12em;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 1000% 1000% 0 0;
  transform: translate3d(0, 0, 0);
  animation: pat-wave 10s -3s linear infinite;
  opacity: 0.8;
}
body[data-route="parents-v2"] .wave:nth-of-type(2) {
  bottom: -1.25em; animation: pat-wave 18s linear reverse infinite; opacity: 0.8;
}
body[data-route="parents-v2"] .wave:nth-of-type(3) {
  bottom: -2.5em;  animation: pat-wave 20s -1s reverse infinite; opacity: 0.9;
}
@keyframes pat-wave {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(-25%); }
  50%  { transform: translateX(-50%); }
  75%  { transform: translateX(-25%); }
  100% { transform: translateX(0); }
}

/* ── 3. Hero stays flat over the gradient; force espresso text.
 *      (muted #6b4c40 fails AA on pastel per TRD §5.3 — espresso holds ≥8.5:1) ── */
body[data-route="parents-v2"] .hero { border-bottom: none; }
body[data-route="parents-v2"] .hero__sub,
body[data-route="parents-v2"] .hero__trust { color: var(--color-text); }

/* ── 4. Content sections → transparent; their .wrap becomes the floating slab ── */
body[data-route="parents-v2"] .rule-section,
body[data-route="parents-v2"] .calc-section,
body[data-route="parents-v2"] .audit-section,
body[data-route="parents-v2"] .who-section,
body[data-route="parents-v2"] .inventory-section {
  border-bottom: none;
}
body[data-route="parents-v2"] .rule-section  > .wrap,
body[data-route="parents-v2"] .calc-section  > .wrap,
body[data-route="parents-v2"] .audit-section > .wrap,
body[data-route="parents-v2"] .who-section   > .wrap,
body[data-route="parents-v2"] .inventory-section > .wrap {
  background: var(--color-bg);            /* warm cream #f2ede5 — matches inner cards */
  border-radius: var(--radius-2xl);        /* 24px */
  padding: var(--space-8) var(--space-6);
  border: var(--neuro-border);
  /* float the slab off the gradient (approved proto values) */
  box-shadow: 0 18px 40px rgba(35, 21, 21, 0.18),
              0 4px 12px rgba(35, 21, 21, 0.10);
}

/* Slight breathing room so adjacent slabs always show a gradient gutter between */
body[data-route="parents-v2"] .rule-section,
body[data-route="parents-v2"] .calc-section,
body[data-route="parents-v2"] .audit-section,
body[data-route="parents-v2"] .who-section,
body[data-route="parents-v2"] .inventory-section {
  padding: var(--space-8) 0;
}

/* Footer: lift it off the gradient a touch so the disclosure stays legible */
body[data-route="parents-v2"] footer {
  background: var(--color-surface);
  position: relative;
  z-index: 1;
}

/* ── 5. Typography "Fintech Audit": Montserrat heavy geometric headers +
 *      Inter for body + UI math. Replaces the soft Instrument-Serif italic vibe
 *      with hard financial authority. Deliberate departure from the §4.0 brand
 *      anchor; v2 only. Wordmark keeps Instrument Serif italic. ── */
body[data-route="parents-v2"] { --font-body: 'Inter', 'Work Sans', sans-serif; }
body[data-route="parents-v2"] h1,
body[data-route="parents-v2"] h2,
body[data-route="parents-v2"] h3 {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-style: normal;
  font-weight: 800;
  text-align: left;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
body[data-route="parents-v2"] h2,
body[data-route="parents-v2"] h3 { font-weight: 700; }
/* Inter for all UI math: big stat numerals + slider output (kill serif italic) */
body[data-route="parents-v2"] .stat-number,
body[data-route="parents-v2"] .calc-input-row output {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── 6. CTA breathing room: let the user digest the verdict before acting ── */
body[data-route="parents-v2"] .calc-result__cta { margin-top: 1.75rem; }

/* ── 7. Ledger math (PARENTS.CALC.RESULT): values right-justified, tabular digits.
 *      calc.js (ensureLine, calc.js:274) nests the insurance/fuel/maintenance
 *      rows INSIDE the monthly line's <p>, so a plain flex would lay them out in
 *      one horizontal strip. flex-wrap + margin-left:auto fixes it: each nested
 *      row claims a full-width line (flex:1 0 100%) and ledgers its own
 *      label/value/tag; OTD + monthly own values ride margin-left:auto to the
 *      same right column. ── */
body[data-route="parents-v2"] .calc-result__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-4);
}
body[data-route="parents-v2"] .calc-result__line > strong {
  margin-left: auto;                 /* OTD + monthly own value → right column */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body[data-route="parents-v2"] .calc-line {
  flex: 1 0 100%;                     /* each injected row gets its own line */
  margin: var(--space-2) 0 0;
}
body[data-route="parents-v2"] .calc-line__label { order: 1; }
body[data-route="parents-v2"] .calc-line__tag   { order: 2; margin-left: var(--space-2); }
body[data-route="parents-v2"] .calc-line__value {
  order: 3; margin-left: auto;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── 8. Ledger digit alignment: pad the suffix-less OTD/monthly values by the
 *      width of "/mo" so every dollar amount shares one digit column. Pure CSS,
 *      no calc.js change. ── */
body[data-route="parents-v2"] #calc-otd,
body[data-route="parents-v2"] #calc-monthly { padding-right: 2.6ch; }

/* ── 9. Inventory carousel: break the 760px .wrap so 3 cards have room to read
 *      (no font shrink); square the corners (hard-ledger fintech); Inter titles
 *      + prices (de-italicise the serif). ── */
body[data-route="parents-v2"] .inventory-section > .wrap { max-width: 1120px; }
body[data-route="parents-v2"] .inv-card { border-radius: 0; }
body[data-route="parents-v2"] .inv-card--a .inv-card__title {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.01em;
}
body[data-route="parents-v2"] .inv-card__price {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}