/* Final page only. Loaded after shared.css; scoped so a/b/c are untouched. */
body.final .hero{padding-bottom:32px}
body.final .stripr{display:flex;gap:6px;align-items:baseline}
body.final .stripr b{font-weight:400;color:var(--ink);font-variant-numeric:tabular-nums}

/* CTA: live primary + disabled App Store note */
body.final .btn.solid{background:var(--ink);color:var(--onInk)}
body.final .btn.ghost{background:transparent;color:var(--muted);border:1px solid var(--frame);font:12px/1.2 var(--mono);letter-spacing:.04em;text-transform:uppercase;cursor:default}
body.final .btn.ghost:hover{outline:0}
body.final .btn.ghost:disabled{opacity:1}

/* Specimen: both panels share one grid cell so the height never changes */
body.final .specwrap{display:flex;align-items:stretch}
body.final .specwrap .spec{width:100%;border:1px solid var(--frame);display:flex;flex-direction:column}
body.final .swap{display:grid;flex:1}
body.final .swap>div{grid-area:1/1;display:flex;flex-direction:column}
body.final .swap .off{visibility:hidden}
body.final #play .foot{margin-top:auto}
body.final #done .awake{flex:1}
body.final #done .foot{margin-top:auto}
body.final .bar{visibility:hidden}
body.final .bar.on{visibility:visible}
body.final .answers button .lbl{display:block}
body.final .answers button .wtag{position:absolute;top:8px;right:10px;visibility:hidden;color:var(--accentText)}
body.final .answers button.wrong .wtag{visibility:visible}
body.final .answers button.wrong .lbl{text-decoration:line-through;text-decoration-thickness:1px}

/* [02] screenshots: scroll-snap row on small screens */
body.final .shots{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:28px}
body.final .shots .phone{max-width:none}
@media(max-width:619px){
  body.final .shots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin-left:-16px;margin-right:-16px;padding:0 16px 8px;scroll-padding:0 16px;-webkit-overflow-scrolling:touch}
  body.final .shots .phone{flex:0 0 min(220px,64vw);scroll-snap-align:start}
}

/* [03] timeline: 3 columns on narrow screens */
@media(max-width:539px){
  body.final .tl{grid-template-columns:repeat(3,1fr);row-gap:16px;border-top:0}
  body.final .tl li{border-top:1px solid var(--frame)}
  body.final .tl .t{font-size:24px;margin-left:8px}
  body.final .tl .m{margin-left:8px}
}

/* footer view control */
body.final footer.strip{align-items:center}
body.final .viewctl{display:flex;gap:6px;align-items:center}
body.final .viewctl .chip{padding:6px 8px;font-size:10px}
body.final .spec .head{flex-wrap:wrap}
body.final .spec .stage .ann{min-height:2.9em;align-content:flex-start}
@media(max-width:539px){body.final .spec .head{min-height:68px;align-content:flex-start}}
@media(max-width:539px){body.final .spec .stage .ann{min-height:48px}}
body.final #spec-state{white-space:nowrap}

/* two moods per row on phones instead of one long column */
@media (max-width:540px){.mood-grid{grid-template-columns:repeat(2,1fr)}.mood-grid .rin{font-size:9px}}