/* =========================================================================
   QA STAGE (render/qa-stage.ts; stage pages v2, 2026-10-08). The page is the shared v2 template (stage-v2.css); this
   file styles what QA brings to it: the address field and its 21 checks (Your turn), and the bakery's findings,
   ranking, fixes and four other kinds of check inside Go deeper's accordions.
   House tokens only. The bakery's pages are drawn by bakery-order-page.css (bko-, Build's module) in the bakery's own
   colors. One dominant move: the bakery's order and menu pages, large, each beside its defect schedule, one numbered
   pin per finding and one word for who can find it. No colour coding of those words, no ticks, no scores.
   Prefix qas- (qa- belongs to the private QA runner; checked against the room namespaces in tests/exhibits.test.ts).
   ========================================================================= */

/* ---- shared bits ---- */
.qas-cap { margin: var(--s3) 0 0; max-width: 78ch; font: var(--t-xs)/var(--lh-meta) var(--mono); color: var(--ink-3); }
.qas-cap a { color: var(--ink-2); }

/* ---- one page, inspected: each picture beside its defect schedule ---- */
.qas-sheet { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); padding: var(--s5) 0; border-top: 1px solid var(--rule-firm); }
.qas-sheet__pic { min-width: 0; }
/* room in the drawing's left margin for the pins */
.qas-sheet__pic > .bko { margin-left: var(--s5); }
.qas-sched { list-style: none; margin: 0; padding: var(--s6) 0 0; }
.qas-sched li { display: grid; align-content: start; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s3); padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
.qas-sched li:first-child { padding-top: 0; }
.qas-sched .vis-pin { grid-row: 1 / span 3; }
.qas-sched__where { margin: 0; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.qas-sched__what { margin: var(--s1) 0 0; font: var(--t-base)/1.45 var(--ui); color: var(--ink); }
.qas-sched__by { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin: var(--s2) 0 0; font: var(--t-sm)/1.4 var(--mono); color: var(--ink-2); }
.qas-by b { font-weight: 600; color: var(--ink); }
.qas-sched__ref { color: var(--ink-3); }
.qas-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4); margin-left: var(--s5); }
.qas-pair figure { margin: 0; min-width: 0; }
.qas-pair figcaption { margin-top: var(--s2); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.qas-sheet--phone .qas-sched { padding-top: var(--s6); }
/* the menu page carries seven findings: the page runs the full width, its schedule in two columns under it */
.qas-sheet--wide { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
.qas-sheet--wide .qas-sched { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); padding-top: 0; }
.qas-sheet--wide .qas-sched li, .qas-sheet--wide .qas-sched li:first-child { padding: var(--s3) 0; border-bottom: 0; border-top: 1px solid var(--rule); }

/* the tally, first thing in its accordion */
.qas-tally { margin: 0 0 var(--s4); max-width: 30ch; font: 800 var(--t-lg)/1.15 var(--display); letter-spacing: -.025em; color: var(--ink-2); }
.qas-tally span { color: var(--ink); }


/* sorted by harm */
.qas-rank { width: 100%; border-collapse: collapse; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.qas-rank th, .qas-rank td { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.qas-rank thead th { padding-top: 0; border-bottom-color: var(--rule-firm); font: var(--t-xs)/1.3 var(--mono); font-weight: 400; color: var(--ink-3); }
.qas-rank td:first-child { width: 3rem; font: 700 var(--t-md)/1.2 var(--display); color: var(--ink); }
.qas-rank tbody th { font-weight: 600; color: var(--ink); }
.qas-rank tbody th .vis-pin { margin-right: var(--s2); vertical-align: -.35em; }
.qas-rank tr.is-not td, .qas-rank tr.is-not th { color: var(--ink-3); }
.qas-rank tr.is-not td:first-child { color: var(--ink-3); }

/* fixed, and looked at again */
.qas-fixed { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s6); align-items: start; }
.qas-fixed figure { margin: 0; min-width: 0; }
.qas-fixed__main figcaption, .qas-fixed__p { margin: var(--s2) 0 0; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.qas-fixed figcaption b { display: inline-flex; gap: 2px; margin-right: var(--s2); vertical-align: -.35em; }
.qas-fixed__crops { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s5); margin: 0; padding: 0; }
/* the order form, cropped to its last field and the button */
.qas-clip { display: flex; flex-direction: column; justify-content: flex-end; height: 8.5rem; overflow: hidden; }
.qas-clip > .bko { flex: none; }
.qas-fixed__crops li { min-width: 0; }
.qas-fixed__p .vis-pin { margin-right: var(--s1); vertical-align: -.35em; }
.qas-said { display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--rule-firm); background: var(--paper-deep); }
.qas-said > p { margin: 0; font: var(--t-sm)/1.35 var(--mono); color: var(--ink); }
.qas-token { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: var(--s2) var(--s3); padding: var(--s3); border: 1px solid var(--rule-firm); background: var(--paper-deep); font: var(--t-sm)/1.3 var(--mono); color: var(--ink-2); }
.qas-token s { text-decoration-thickness: 2px; text-decoration-color: var(--brand); }
.qas-token b { font-weight: 600; color: var(--ink); }
.qas-token__sw { width: 1.25rem; height: 1.25rem; border: 1px solid var(--rule-firm); }
/* E4's two token values, shown as color swatches */
.qas-token__sw--was { background: #8C8C8C; }
.qas-token__sw--now { background: #6B6B6B; }

/* ---- four more kinds of check: one per row, its picture beside its point, its files under them ---- */
.qas-t { min-width: 0; padding-top: var(--s4); margin-top: var(--s5); border-top: 1px solid var(--rule-firm); }
.qas-t__row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s5); align-items: start; }
.qas-t__p { margin: 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-2); }
.qas-t__k { margin: var(--s4) 0 var(--s2); font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.qas-cite { margin: 0; font: var(--t-sm)/1.4 var(--ui); }
.qas-cite div { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: var(--s2); padding: var(--s2) 0; border-bottom: 1px solid var(--rule); }
.qas-cite dt { font: var(--t-xs)/1.6 var(--mono); color: var(--ink-3); }
.qas-cite dd { margin: 0; color: var(--ink); }
.qas-cite div:last-child dd { font-weight: 650; }
.qas-img { aspect-ratio: 16 / 10; }
.qas-img__file { position: relative; display: block; height: 100%; border: 1.5px dashed var(--ink-2); background: var(--paper-deep); }
.qas-img__file > span { position: absolute; top: var(--s2); left: var(--s2); font: var(--t-xs)/1.3 var(--mono); color: var(--ink-2); }
.qas-img__shown { position: absolute; right: 8%; bottom: 10%; width: 12%; aspect-ratio: 16 / 10; border: 2px solid var(--ink); background: var(--paper); }
.qas-img__shown span { position: absolute; right: 0; bottom: calc(100% + var(--s1)); white-space: nowrap; font: var(--t-xs)/1.3 var(--mono); font-style: normal; color: var(--ink); }
.qas-ruler { position: relative; height: 6.5rem; margin: 0 var(--s4); }
.qas-ruler__line { position: absolute; left: 0; right: 0; top: 3rem; border-top: 2px solid var(--ink-2); }
.qas-ruler__tick { position: absolute; top: 2.4rem; height: 1.25rem; border-left: 2px solid var(--ink-2); }
.qas-ruler__tick i, .qas-ruler__end { position: absolute; top: -1.1rem; transform: translateX(-50%); font: var(--t-xs)/1 var(--mono); font-style: normal; color: var(--ink-3); }
.qas-ruler__end { left: 0; top: 3.6rem; }
.qas-ruler__break { position: absolute; top: .5rem; height: 3.6rem; border-left: 2px dashed var(--brand); }
.qas-ruler__break b { position: absolute; top: -.25rem; left: var(--s2); font: 600 var(--t-sm)/1 var(--mono); color: var(--brand); }
.qas-ruler__note { margin: 0; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-2); }
.qas-find { display: grid; gap: var(--s2); padding: var(--s3); border: 1px solid var(--rule-firm); background: var(--paper-deep); }
.qas-find p { margin: 0; }
.qas-find__q { font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.qas-find__hit { font: 600 var(--t-md)/1.3 var(--ui); color: var(--ink); }
.qas-find__hit .vis-mark { max-width: 100%; box-sizing: border-box; border-color: var(--brand); color: var(--ink); }
.qas .vis-file__path { max-width: 100%; overflow-wrap: anywhere; line-height: 1.3; }
.qas .vis-line__t .vis-mark { max-width: 100%; box-sizing: border-box; }
.qas-find__v { font: var(--t-sm)/1.4 var(--ui); color: var(--ink-2); }

/* ---- your turn: the address field, then one accordion per kind of check (stage-v2.css draws the accordions) ---- */
.qas-principle { margin: 0 0 var(--s4); max-width: 30ch; font: 700 var(--t-lg)/1.15 var(--display); letter-spacing: -.02em; color: var(--ink); }
.qas-url { max-width: 40rem; margin-bottom: var(--s5); }
.qas-band__note { margin: var(--s2) 0 0; max-width: 60ch; font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
.qas-band__line { margin: 0; max-width: 60ch; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.qas-cks { list-style: none; margin: 0 0 var(--s4); padding: 0; }
.qas-ck { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4fr); gap: var(--s1) var(--s5); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.qas-ck p { margin: 0; }
.qas-ck__need { font: 600 var(--t-sm)/1.4 var(--ui); color: var(--ink); }
.qas-ck__what { margin-top: 2px; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.qas-ck__lim { font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.qas-ck__k { display: block; font: var(--t-xs)/1.4 var(--mono); color: var(--ink-3); }
.qas-ck__go { display: grid; align-content: start; gap: var(--s2); font: var(--t-sm)/1.4 var(--ui); }
.qas-ck__go a { display: inline-block; padding-block: 3px; color: var(--ink); text-decoration-color: var(--rule-firm); text-underline-offset: .2em; }
.qas-ck__go a:hover { text-decoration-color: currentColor; }
.qas-run { font-weight: 600; }
.qas-cks { margin-top: var(--s3); }

/* ---- narrower ---- */
@media (max-width: 64rem) {
  .qas-sheet, .qas-fixed { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .qas-fixed__crops { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qas-sched { padding-top: 0; }
  .qas-sheet--phone .qas-sched { padding-top: 0; }
  .qas-ck { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .qas-ck__t { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .qas-sheet--wide .qas-sched { grid-template-columns: minmax(0, 1fr); }
  .qas-t__row { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .qas-sheet__pic > .bko, .qas-pair { margin-left: var(--s4); }
  .qas-pair { grid-template-columns: minmax(0, 1fr); }
  .qas-fixed__crops { grid-template-columns: minmax(0, 1fr); }
  .qas-ck { grid-template-columns: minmax(0, 1fr); }
  /* the ranking reads as one card per finding */
  .qas-rank thead { display: none; }
  .qas-rank, .qas-rank tbody, .qas-rank tr, .qas-rank th, .qas-rank td { display: block; width: auto; }
  .qas-rank tr { padding: var(--s3) 0; border-bottom: 1px solid var(--rule); }
  .qas-rank th, .qas-rank td { padding: 2px 0; border: 0; }
  .qas-rank td:first-child { width: auto; font-size: var(--t-base); }
  .qas-rank td:first-child::before { content: "Rank "; font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
  .qas-rank td:nth-child(n+3)::before { content: attr(data-k) ": "; font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
}