/* =========================================================================
   SHARED STAGE MODULES (render/stage-modules.ts, 2026-10-08).
   .ba  an annotated before/after website case. The illustrated client
        site is a specimen with its own palette (--ba-*, overridable per
        case); everything around it uses house tokens.
   .afl an artifact ledger: what a stage produces, name left, excerpt right;
        three rows open, the rest under "Show all" (.afl-more).
   .stg-mx common mistakes and judgment checks: a compact text form and a
        drawn form. Owned by the shared-components lane (Phase B).
   ========================================================================= */

/* ---- before / after ---- */
.ba { --ba-ground: #F3F7F9; --ba-ink: #12313F; --ba-ink-2: #4A6470; --ba-accent: #1E6F8C; --ba-photo: #D9E6EC; --ba-rule: #C5D6DE;
  margin: 0; padding: var(--s6) var(--s5) var(--s5); background: var(--paper-deep); border-top: 2px solid var(--brand); }
.ba__k { margin: 0 0 var(--s5); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-2); }
.ba__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1fr); gap: var(--s5); align-items: start; }
.ba__mid { min-width: 0; }
.ba-site { margin: 0; }
.ba-site__frame { padding: var(--s4) var(--s4) var(--s5); background: var(--ba-ground); color: var(--ba-ink); border: 1px solid var(--rule-firm); }
.ba-site__nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; margin: 0 0 var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--ba-rule); font: var(--t-xs)/1.2 var(--ui); color: var(--ba-ink-2); }
.ba-site__nav b { margin-right: auto; font: 800 var(--t-sm)/1 var(--display); color: var(--ba-ink); }
.ba-site__photo { display: grid; place-items: center; aspect-ratio: 16 / 9; padding: var(--s3); background: var(--ba-photo); font: var(--t-xs)/1.4 var(--mono); color: var(--ba-ink-2); text-align: center; }
.ba-site__photo--brief { border: 1.5px dashed var(--ba-accent); color: var(--ba-ink); }
.ba-site__photo span { display: inline-flex; gap: var(--s2); align-items: center; }
.ba-site__photo--img { position: relative; display: block; padding: 0; overflow: hidden; }
.ba-site__photo--img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ba-site__pin { position: absolute; top: var(--s2); left: var(--s2); }
.ba-site__h { margin: var(--s4) 0 var(--s2); font: 800 clamp(1.25rem, 2vw, 1.7rem)/1.05 var(--display); letter-spacing: -.03em; color: var(--ba-ink); }
.ba-site__p { margin: 0 0 var(--s2); font: var(--t-sm)/1.45 var(--ui); color: var(--ba-ink-2); }
.ba-site__p--strong { color: var(--ba-ink); font-weight: 600; }
.ba-site__quote { margin: var(--s3) 0; padding-left: var(--s3); border-left: 2px solid var(--ba-accent); font: italic var(--t-sm)/1.45 var(--ui); color: var(--ba-ink); }
.ba-site__btn { display: inline-block; margin: var(--s3) 0 0; padding: var(--s2) var(--s4); background: var(--ba-accent); color: #FFFFFF; font: 650 var(--t-sm)/1.2 var(--ui); }
.ba-site__note { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px dashed var(--ba-rule); font: var(--t-xs)/1.45 var(--mono); color: var(--ba-ink-2); }
.ba-site .vis-mark { color: var(--ba-ink); border-color: var(--ba-accent); font: var(--t-xs)/1.5 var(--mono); }
.ba-site .vis-pin { flex: none; width: 1.25rem; height: 1.25rem; background: var(--ba-ground); border-color: var(--ba-accent); color: var(--ba-accent); vertical-align: .15em; }
.ba-site__h .vis-pin, .ba-site__p .vis-pin { margin-right: var(--s1); }
.ba-site figcaption { margin-top: var(--s2); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.ba__below { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s7); margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--rule); }
.ba__below h3 { margin: 0 0 var(--s3); font: 700 var(--t-md)/1.2 var(--display); color: var(--ink); }
.ba__below table { width: 100%; border-collapse: collapse; font: var(--t-sm)/1.45 var(--ui); }
.ba__below th, .ba__below td { padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; color: var(--ink-2); }
.ba__below thead th { font: 400 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); border-bottom-color: var(--rule-firm); }
.ba__below tbody th { font-weight: 650; color: var(--ink); }
.ba__below td:last-child { color: var(--ink); }
.ba__below ol { margin: 0; padding-left: var(--s5); display: grid; gap: var(--s3); font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); }
.ba__below ol b { display: block; color: var(--ink); font-weight: 650; }
.ba__below li::marker { font-family: var(--mono); color: var(--brand); }
.ba__fine { margin: var(--s4) 0 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 60ch; }
.ba__cap { margin: var(--s6) 0 0; max-width: 80ch; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.ba__cap a { color: var(--ink-2); }
@media (max-width: 64rem) {
  .ba__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba__mid { grid-column: 1 / -1; grid-row: 1; }
  .ba__below { grid-template-columns: 1fr; gap: var(--s5); }
}
@media (max-width: 44rem) {
  .ba { padding-inline: var(--s4); }
  .ba__grid { grid-template-columns: 1fr; }
  .ba__mid { grid-row: auto; order: 1; }
  .ba-site--before { order: 0; }
  .ba-site--after { order: 2; }
}

/* ---- artifact ledger ---- */
.afl { min-width: 0; max-width: 100%; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-firm); }
.afl__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s4) var(--s7); padding: var(--s5) 0; border-bottom: 1px solid var(--rule); }
.afl__t { position: relative; padding-left: var(--s6); }
.afl__n { position: absolute; left: 0; top: .2em; font: var(--t-xs)/1 var(--mono); color: var(--brand); }
.afl__t h3 { margin: 0 0 var(--s2); font: 700 var(--t-md)/1.2 var(--display); letter-spacing: -.01em; color: var(--ink); }
.afl__t p { margin: 0; font: var(--t-sm)/var(--lh-body) var(--ui); color: var(--ink-2); max-width: 40ch; }
.afl__facts { margin: var(--s4) 0 0; max-width: 46ch; }
.afl__facts > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-top: 1px solid var(--rule); }
.afl__facts dt { font: var(--t-xs)/1.6 var(--mono); color: var(--ink-3); }
.afl__facts dd { margin: 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.afl__f { margin: 0; min-width: 0; }
.afl__x { margin: 0; padding: var(--s3) var(--s4); background: var(--paper-deep); border-left: 2px solid var(--rule-firm); font: var(--t-xs)/1.6 var(--mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.afl__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); padding: var(--s3) var(--s4); background: var(--paper-deep); border-left: 2px solid var(--rule-firm); }
.afl__pair p { margin: 0; font: var(--t-sm)/1.6 var(--ui); color: var(--ink); }
.afl__pair p:first-child { color: var(--ink-3); }
.afl__pair span { display: block; margin-bottom: var(--s1); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.afl__qs { margin: 0; padding: var(--s3) var(--s4) var(--s3) var(--s7); background: var(--paper-deep); border-left: 2px solid var(--brand); font: 600 var(--t-base)/1.6 var(--ui); color: var(--ink); }
.afl__f figcaption { margin-top: var(--s2); font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.afl__f figcaption a { color: var(--ink-2); }
.afl-more { min-width: 0; max-width: 100%; border-bottom: 1px solid var(--rule); }
.afl-more > summary { display: flex; align-items: center; gap: var(--s2); min-height: 2.75rem; padding: var(--s3) 0; cursor: pointer; list-style: none; font: 650 var(--t-sm)/1.2 var(--ui); color: var(--ink); }
.afl-more > summary::-webkit-details-marker { display: none; }
.afl-more > summary::before { content: "+"; content: "+" / ""; display: inline-grid; place-items: center; width: 1.5rem; font: var(--t-md)/1 var(--mono); color: var(--brand); }
.afl-more[open] > summary::before { content: "\2212"; content: "\2212" / ""; }
.afl-more > summary:hover { color: var(--brand); }
.afl-more > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.afl-more__open, .afl-more[open] .afl-more__shut { display: none; }
.afl-more[open] .afl-more__open { display: inline; }
.afl-more .afl { border-top: 0; }
.afl-more[open] > summary { border-bottom: 1px solid var(--rule); }
@media (max-width: 64rem) { .afl__row { grid-template-columns: 1fr; gap: var(--s4); } }
@media (max-width: 44rem) { .afl__pair { grid-template-columns: 1fr; } .afl__facts > div { grid-template-columns: 1fr; gap: 0; } }

/* ---- common mistakes and judgment checks (mistakes() in stage-modules.ts) ---- */
.stg-mx { margin: 0 0 var(--s7); }
.stg-mx__lede { margin: 0 0 var(--s5); max-width: 60ch; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }
.stg-mx__list { margin: 0; padding: 0; list-style: none; }
.stg-mx h3 { margin: 0; font: 650 var(--t-md)/1.3 var(--display); letter-spacing: -.01em; color: var(--ink); }
.stg-mx__src { margin: 0; font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
.stg-mx__src a { color: var(--ink-2); }
/* text form: one ruled row each, what it looks like | the mistake and its fix | the lesson */
.stg-mx--text .stg-mx__list { border-top: 1px solid var(--rule-firm); }
.stg-mx--text li { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr) minmax(0, 3fr); gap: var(--s2) var(--s5); align-items: baseline; padding: var(--s4) 0; border-bottom: 1px solid var(--rule); }
.stg-mx__looks { grid-column: 1; margin: 0; font: var(--t-sm)/1.4 var(--mono); color: var(--ink-3); }
.stg-mx__looks s { text-decoration-color: var(--brand); }
.stg-mx--text .stg-mx__what { grid-column: 2; }
.stg-mx--text .stg-mx__what p { margin: var(--s1) 0 0; max-width: 56ch; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.stg-mx--text .stg-mx__src { grid-column: 3; }
/* drawn form: a drawing above each name and fix (the drawing's parts belong to the caller) */
.stg-mx--drawn .stg-mx__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s7); counter-reset: mx; }
.stg-mx--drawn li { display: flex; flex-direction: column; gap: var(--s2); padding-top: var(--s4); border-top: 1px solid var(--rule-firm); }
.stg-mx__draw { display: grid; gap: var(--s3); align-content: center; min-height: 9.5rem; margin-bottom: var(--s3); padding: var(--s4); background: var(--paper-deep); border: 1px solid var(--rule); }
.stg-mx--drawn li > p:not(.stg-mx__src) { margin: 0; max-width: 60ch; font: var(--t-sm)/1.55 var(--ui); color: var(--ink-2); }
@media (max-width: 56rem) {
  .stg-mx--text li { grid-template-columns: minmax(0, 1fr); }
  .stg-mx__looks, .stg-mx--text .stg-mx__what, .stg-mx--text .stg-mx__src { grid-column: 1; }
  .stg-mx--drawn .stg-mx__list { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}

/* Further reading inside a stage accordion (render/stage-reading.ts): Build's block, shared with Strategy and IA in the
   2026-10-09 release QA. The last line is the tool galleries' non-affiliation line. */
.stg-read { margin: var(--s6) 0 0; padding-top: var(--s4); border-top: 1px solid var(--rule); }
.stg-read__k { margin: 0 0 var(--s2); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.stg-read__l { margin: 0 0 var(--s3); max-width: 64ch; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.stg-read ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s3); }
.stg-read li { max-width: 64ch; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.stg-read a { font-weight: 600; color: var(--ink); }
.stg-read__by { font: var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.stg-read__why { display: block; }
.stg-read__n { margin: var(--s3) 0 0; max-width: 64ch; font: var(--t-xs)/1.45 var(--ui); color: var(--ink-3); }