/* =========================================================================
   FOUNDATIONS (render/foundations.ts), stage page v2, 2026-10-08. House tokens only. The page itself is the shared
   template (stage-v2.css); this sheet only draws the bakery's files inside the Go deeper accordions. The hero
   drawing, the seven ideas, their index and the stage chain went with v2 (docs/visual/STAGE-PAGES-V2-DEDUPE.md).
   ========================================================================= */

/* a line set off from the files: "Just ask … Plan first", the launch rule */
.fnd-aside { margin: var(--s5) 0 0; max-width: 60ch; padding-left: var(--s4); border-left: 2px solid var(--brand); font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.fnd-aside b { color: var(--ink); font-weight: 650; }

/* the bakery's project folder */
.fnd-tree { margin: 0; max-width: 40rem; }
.fnd-tree dl { margin: 0; padding: var(--s4) var(--s5); background: var(--paper-deep); }
.fnd-tree dl > div { display: grid; grid-template-columns: minmax(7.5rem, 2fr) minmax(0, 3fr); gap: var(--s4); padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.fnd-tree dl > div:last-child { border-bottom: 0; }
.fnd-tree dt { font: var(--t-sm)/1.45 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.fnd-tree dd { margin: 0; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }

/* reading a plan: the plan, with the step nobody asked for struck, beside the checks */
.fnd-check { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: var(--s6); align-items: start; margin-top: var(--s5); }
.fnd-check__list p { margin: 0 0 var(--s3); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.fnd-check__list ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-firm); }
.fnd-check__list li { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); font: 600 var(--t-sm)/1.35 var(--ui); color: var(--ink); }
.fnd-check .vis-line.is-hit .vis-line__t { text-decoration: line-through; text-decoration-color: var(--brand); text-decoration-thickness: 2px; color: var(--ink-2); }

/* a guess, and what goes on the page instead */
.fnd-swap { width: 100%; border-collapse: collapse; }
.fnd-swap th { padding: 0 var(--s5) var(--s3) 0; text-align: left; font: 400 var(--t-xs)/1 var(--mono); color: var(--ink-3); border-bottom: 1px solid var(--rule-firm); width: 50%; }
.fnd-swap td { padding: var(--s4) var(--s5) var(--s4) 0; vertical-align: top; border-bottom: 1px solid var(--rule); font: 700 clamp(1.25rem, 2.6vw, 2rem)/1.15 var(--display); letter-spacing: -.025em; }
.fnd-swap s { color: var(--ink-3); text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.fnd-swap td + td { color: var(--brand); }
.fnd-swap .vis-mark { font: inherit; color: var(--brand); border-color: var(--brand); }

@media (max-width: 56rem) {
  .fnd-check { grid-template-columns: 1fr; gap: var(--s6); }
}
@media (max-width: 48rem) {
  .fnd-swap th { width: auto; }
  .fnd-swap, .fnd-swap tbody, .fnd-swap tr, .fnd-swap td { display: block; }
  .fnd-swap thead { display: none; }
  .fnd-swap tr { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
  .fnd-swap td { border: 0; padding: var(--s1) 0; }
}