round 4: app-shell quiz screen at <=700px — #step-body is the only scroller, #btn-next/#panel become the static bottom cluster; revert FR .opt override (keep 972f3a7); + capture/verify/pixdiff/offlan audit tooling and before/after evidence; closes QUIZ-APPSHELL-FIX.md

site/style.css

@@ -87,10 +87,6 @@ button,input{touch-action:manipulation}
 }
 @media(max-width:700px){
   .hdr .pill{display:none} /* privacy pill is repeated on the intro screen and the footer */
-  /* FR round 3: longer French province names wrap and push the option grid under the pinned
-     nav at initial scroll — compact FR option buttons keep the grid above the nav zone at
-     390px. Scoped to html[lang=fr]: English rendering is untouched. */
-  html[lang="fr"] .opt{font-size:13px;padding:12px 4px}
 }
 .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
 .panel-h{font-weight:700;font-size:14px;margin-bottom:8px}
@@ -175,6 +171,23 @@ tr.dep td{color:var(--red)}
   .tbl-wrap::before{content:"";float:right;width:26px;height:340px;background:linear-gradient(90deg,transparent,var(--card));pointer-events:none}
 }
 
+/* Round 4: app-shell the quiz screen — #step-body is the only scroll container;
+   #btn-next + #panel form the fixed bottom cluster. Never overlaps content.
+   Appended at end of file (after ALL base rules) so the equal-specificity id rules
+   (#step-body min-height/padding, #btn-next, #panel) lose the source-order tie here. */
+@media(max-width:700px){
+  #scr-quiz.scr{display:flex;flex-direction:column;height:calc(100vh - 69px);height:calc(100dvh - 69px);overflow:hidden;padding:0}
+  #scr-quiz.scr[hidden]{display:none} /* id+class display beats the UA [hidden] rule — restore it */
+  .quiz-wrap{display:flex;flex-direction:column;flex:1;min-height:0}
+  .quiz-main{display:flex;flex-direction:column;flex:1;min-height:0}
+  #step-body{flex:1;overflow-y:auto;min-height:0;padding:10px 12px 16px}
+  #btn-next{position:static;margin:10px 12px 12px}
+  #panel{position:static;margin:0 8px calc(8px + env(safe-area-inset-bottom,0px))}
+  /* the quiz section is exactly viewport-tall; main's 12px bottom padding would add
+     document scroll. Drop it ONLY while the quiz screen is shown — intro/results untouched. */
+  main:has(#scr-quiz:not([hidden])){padding-bottom:0}
+}
+
 @media print{
   .hdr,.whatif,.btn-row,#scr-quiz{display:none!important}
   body{background:#fff}