/* =========================================================================
   THE IA STAGE, V2 (render/ia-stage.ts; stage pages v2, 2026-10-08). Loaded
   after the shared v2 sheets. House tokens only. The one exception is the
   plumber's plan, in three accordions: it is printed on the light plan sheet,
   using the house's own light-theme values (as the IA Library's drawings do,
   ia-library.css .wf-browser), so the wireframe sits on the paper it was
   drawn on. Prefix iag-. Motif, from the IA Library: solid = in the plan,
   dashed = depends on an open question, struck = left out. Lilac marks the
   primary action and nothing else.
   ========================================================================= */

.iag-act { display: inline-block; padding: .3em .7em; background: var(--brand); color: var(--paper); font: 650 .75rem/1.2 var(--ui); white-space: nowrap; }
.iag-k { margin: 0 0 var(--s3); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.iag-fine { margin: var(--s3) 0 0; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }

/* ---- six questions, in an accordion: type carries it ---- */
.iag-qs { margin: 0; padding: 0; list-style: none; counter-reset: q; }
.iag-qs > li { padding: var(--s4) 0; border-top: 1px solid var(--rule); counter-increment: q; }
.iag-qs > li:first-child { border-top: 0; padding-top: 0; }
.iag-qs p { margin: 0 0 var(--s2); max-width: 60ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.iag-qs .iag-qs__q { margin-bottom: var(--s1); font: 700 var(--t-md)/1.25 var(--display); letter-spacing: -.01em; color: var(--ink); }
.iag-qs .iag-qs__q::before { content: counter(q) "  "; content: counter(q) "  " / ""; font: 400 var(--t-xs)/1 var(--mono); letter-spacing: 0; color: var(--ink-3); }
.iag-qs .iag-qs__t { font: 650 var(--t-sm)/1.3 var(--ui); color: var(--ink); }
.iag-qs a { display: inline-block; padding-block: var(--s2); font: var(--t-xs)/1 var(--mono); color: var(--ink-2); text-underline-offset: .25em; }

/* ---- the worked example, on the plan sheet ---- */
.iag-sheet {
  /* the house light theme (site.css), so the plan reads as paper in either theme */
  --paper: #FFFFFF; --paper-deep: #F2F5F8; --paper-3: #E6EBF1; --ink: #0B0D12; --ink-2: #454C57; --ink-3: #626977;
  --rule: #DFE4EA; --rule-firm: #B6BEC9; --brand: #5B21D6; --brand-wash: #F4F0FF;
  margin: 0; padding: var(--s6) var(--s5); background: var(--paper); color: var(--ink); border: 1px solid var(--rule-firm);
}
.iag-sheet a { color: var(--ink); }
.iag-sheet .sv2-sub { color: var(--ink); }
.iag-sheet > .sv2-sub:first-child { margin-top: 0; }

/* goal */
.iag-goal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
.iag-goal__brief { margin: 0; }
.iag-goal__brief p { margin: 0 0 var(--s3); font: 500 var(--t-md)/1.4 var(--ui); color: var(--ink); }
.iag-goal__brief cite { font: normal var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.iag-goal__g { margin: 0 0 var(--s5); font: 750 var(--t-lg)/1.1 var(--display); letter-spacing: -.02em; }
.iag-goal dl { margin: 0; }
.iag-goal dl > div { padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.iag-goal dt { font: 650 var(--t-base)/1.3 var(--ui); }
.iag-goal dd { margin: var(--s1) 0 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }

/* the sitemap */
.iag-map { margin: 0; }
.iag-map__frame { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0 0 var(--s5); padding: var(--s3) var(--s4); background: var(--paper-deep); font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }
.iag-map__frame span { font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.iag-map ul { margin: 0; padding: 0; list-style: none; }
.iag-node { display: flex; flex-direction: column; gap: var(--s1); padding: var(--s4); border: 1.5px solid var(--ink); background: var(--paper); }
.iag-node--ask { border-style: dashed; border-color: var(--ink-2); }
.iag-node__n { font: 750 var(--t-md)/1.15 var(--display); letter-spacing: -.015em; }
.iag-node__r { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.iag-node__j { margin-top: var(--s2); font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.iag-node__j::before { content: "“"; } .iag-node__j::after { content: "”"; }
.iag-node__note { margin-top: var(--s2); padding-top: var(--s2); border-top: 1px dashed var(--rule-firm); font: var(--t-xs)/1.45 var(--mono); color: var(--ink-2); }
.iag-map__root { max-width: 26rem; }
.iag-map__root > .iag-node, .iag-map__root .iag-node { list-style: none; }
.iag-map__kids { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--s4); margin-top: var(--s6) !important; padding-top: var(--s5) !important; border-top: 1.5px solid var(--ink); }
.iag-map__kids::before { content: ""; position: absolute; left: var(--s6); top: calc(-1 * var(--s6) - 1.5px); height: var(--s6); border-left: 1.5px solid var(--ink); }
.iag-map__kids > .iag-node { position: relative; }
.iag-map__kids > .iag-node::before { content: ""; position: absolute; left: var(--s5); top: calc(-1 * var(--s5) - 1.5px); height: var(--s5); border-left: 1.5px solid var(--ink); }
.iag-map__kids > .iag-node--ask::before { border-left-style: dashed; }
.iag-map__out { margin-top: var(--s6); }
.iag-map__out li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s4); padding: var(--s2) 0; border-top: 1px solid var(--rule); font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.iag-map__out s { color: var(--ink-3); font-weight: 600; }
.iag-map figcaption { margin-top: var(--s4); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }

/* one page, top to bottom */
.iag-page { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: var(--s6); align-items: start; }
.iag-page__fig { margin: 0; padding-left: var(--s6); }
.iag-page__wire .wf-browser { max-width: none; box-shadow: 0 0 0 1px var(--rule-firm); }
.iag-page__wire .wf-tag, .iag-page__wire .wf-dep, .iag-page__wire .wf-mnote, .iag-page__wire .wf-rule { display: none; }
.iag-page__wire .wf-body { counter-reset: sec; }
.iag-page__wire .wf-mod { overflow: visible; counter-increment: sec; }
.iag-page__wire .wf-mod::before { content: counter(sec); position: absolute; top: 1.4rem; left: calc(-1 * var(--s6)); display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; border: 1.5px solid var(--brand); background: var(--paper); font: 500 var(--t-xs)/1 var(--mono); color: var(--brand); }
.iag-page__wire .wf-mod[data-state="ask"]::before { border-style: dashed; }
.iag-page__fig figcaption { margin-top: var(--s3); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.iag-page__notes { position: sticky; top: var(--s5); }
.iag-order { margin: 0; padding: 0; list-style: none; }
.iag-order li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: 0 var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.iag-order li .vis-pin { grid-row: span 2; }
.iag-order li.is-ask .vis-pin { border-style: dashed; }
.iag-order b { font: 650 var(--t-sm)/1.3 var(--ui); }
.iag-order span:not(.vis-pin) { font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }

/* the journey */
.iag-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); margin: 0; padding: var(--s5) 0 0; list-style: none; border-top: 2px solid var(--ink); }
.iag-path li { position: relative; display: flex; flex-direction: column; gap: var(--s2); font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.iag-path li::before { content: ""; position: absolute; top: calc(-1 * var(--s5) - 7px); left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--ink); }
.iag-path li:last-child::before { background: var(--brand); }
.iag-path__k { font: 750 var(--t-md)/1.1 var(--display); letter-spacing: -.015em; color: var(--ink); }
.iag-path__phone { margin: var(--s6) 0 0; padding: var(--s4); max-width: 60ch; background: var(--paper-deep); font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.iag-path__phone b { color: var(--ink); }

/* what happens next */
.iag-hand { margin: 0; }
.iag-hand > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--s4); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.iag-hand dt { font: 650 var(--t-sm)/1.45 var(--ui); }
.iag-hand dd { margin: 0; max-width: 62ch; font: var(--t-sm)/1.55 var(--ui); color: var(--ink-2); }
.iag-hand code { font: var(--t-xs) var(--mono); color: var(--ink); }
.iag-more { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); margin: var(--s5) 0 0; }
.iag-more a { font: 650 var(--t-sm)/1 var(--ui); padding-block: var(--s2); text-underline-offset: .25em; }

/* ---- what IA leaves in the folder ---- */
.iag-out__lede { margin: 0 0 var(--s4); max-width: 60ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.iag-out__files { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s3); margin: 0 0 var(--s6); font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
.iag-out__files code { padding: var(--s1) var(--s2); border: 1px solid var(--rule-firm); color: var(--ink); font: inherit; }
/* ---- eight mistakes, drawn (stage-modules.css .stg-mx--drawn), headed h4 inside their accordion ---- */
.iag-mx h4 { margin: 0; font: 650 var(--t-md)/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
#iag-out .afl__t h4 { margin: 0 0 var(--s2); font: 700 var(--t-md)/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
/* the drawings: dashed and struck = the mistake, solid = the fix */
.iag-mx__nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; }
.iag-mx__nav span { padding: 3px 6px; border: 1px solid var(--ink-2); font: 600 .75rem/1.2 var(--ui); color: var(--ink); }
.iag-mx__nav--bad span { border: 1px dashed var(--rule-firm); font-weight: 400; color: var(--ink-3); text-decoration: line-through; }
.iag-mx__nav .iag-act { font-size: .75rem; padding: 3px 6px; }
.iag-mx__pg, .iag-mx__ph { display: flex; flex-direction: column; gap: 5px; padding: var(--s3); border: 1px solid var(--ink-2); background: var(--paper); }
.iag-mx__pg i, .iag-mx__ph i, .iag-mx__dup i { display: block; height: 6px; background: var(--rule-firm); }
.iag-mx__pg i:nth-child(2n), .iag-mx__dup i:nth-child(2n) { width: 70%; }
.iag-mx__pg:first-child, .iag-mx__ph:first-child { border-style: dashed; border-color: var(--rule-firm); }
.iag-mx__pg .iag-act, .iag-mx__ph .iag-act { align-self: flex-start; font-size: .75rem; }
.iag-mx__pg:first-child .iag-act { background: var(--ink-3); }
.iag-mx__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.iag-mx__row small, .iag-mx__pg small { font: .75rem/1.3 var(--mono); color: var(--ink); }
.iag-mx__buried { align-self: flex-end; font-size: .5625rem !important; color: var(--ink-3) !important; }
.iag-mx__pg--end small { color: var(--ink-3); }
.iag-mx__ph { width: 7.5rem; display: inline-flex; margin-right: var(--s3); vertical-align: top; min-height: 7.5rem; }
.stg-mx__draw:has(.iag-mx__ph) { grid-template-columns: auto auto; justify-content: start; }
.iag-mx__bar { align-self: flex-end; font: .75rem/1 var(--mono); color: var(--ink-3); }
.iag-mx__fix { margin-top: auto; align-self: stretch !important; text-align: center; }
.iag-mx__dup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); margin: 0; }
.iag-mx__dup span { display: flex; flex-direction: column; gap: 5px; padding: var(--s2); border: 1px dashed var(--rule-firm); font: .75rem/1.2 var(--mono); color: var(--ink-3); overflow-wrap: anywhere; }
.iag-mx__seq { display: flex; align-items: center; gap: 6px; margin: 0; font: .75rem/1 var(--mono); color: var(--ink-2); }
.iag-mx__seq span { width: 5.5rem; }
.iag-mx__seq b { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--ink-2); font-weight: 400; color: var(--ink); }
.iag-mx__seq--bad b { border-style: dashed; border-color: var(--rule-firm); color: var(--ink-3); }

/* ---- your turn: one link into the IA Library's finder ---- */
.iag-turn__lead { margin: 0 0 var(--s4); max-width: 46ch; font: var(--t-md)/1.4 var(--ui); color: var(--ink-2); }
.iag-turn__go { margin: 0; }
/* .ia scope: the shell's `.ia a { color: inherit }` (ia.css) loads after this sheet and would win on order */
.ia .iag-turn__go a { display: inline-flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: var(--s3) var(--s5); background: var(--brand); color: var(--paper); font: 650 var(--t-base)/1.2 var(--ui); text-decoration: none; }
.iag-turn__go a:hover { text-decoration: underline; text-underline-offset: .2em; }
.iag-turn__go a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.iag-turn__also { margin: var(--s4) 0 0; max-width: 60ch; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-3); }
.iag-turn__also a { color: var(--ink); }

/* ---- narrower ---- */
@media (max-width: 64rem) {
  .iag-page { grid-template-columns: minmax(0, 1fr); }
  .iag-page__notes { position: static; }
}
@media (max-width: 48rem) {
  .iag-sheet { padding: var(--s5) var(--s4); }
  .iag-goal { grid-template-columns: minmax(0, 1fr); }
  .iag-path { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 2px solid var(--ink); padding: 0 0 0 var(--s5); gap: var(--s5); }
  .iag-path li::before { top: .35rem; left: calc(-1 * var(--s5) - 7px); }
  .iag-map__kids { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 1.5px solid var(--ink); margin: 0 0 0 var(--s5) !important; padding: var(--s5) 0 0 var(--s4) !important; }
  .iag-map__kids::before { display: none; }
  .iag-map__kids > .iag-node::before { left: calc(-1 * var(--s4) - 1.5px); top: var(--s5); width: var(--s4); height: 0; border-left: 0; border-top: 1.5px solid var(--ink); }
  .iag-map__kids > .iag-node--ask::before { border-top-style: dashed; }
  .iag-map__out li, .iag-hand > div { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}