/* Screen refinements. Header and menu styling live in app-header.css. */
body.compact-journey-app .whose-page-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;margin:12px 0}
body.compact-journey-app .whose-page-actions>button{width:100%;min-width:0;height:52px;margin:0;padding:8px;border:0;border-radius:16px;background:var(--brand-tint);color:var(--action-ink);font:600 12px/1.4 var(--font);white-space:normal}
body.compact-journey-app .whose-page-actions>button:last-child{background:var(--brand);color:var(--on-brand)}
body.compact-journey-app main.engine-stack .stack-body{padding-bottom:16px}
body.compact-journey-app main.engine-stack .stack-whose{scroll-margin-bottom:16px}

/* Typography-only refinement: keep the existing title and navigation structure. */
body.compact-journey-app main :is(.welcome,.class-hero,.capture-heading,.paper-heading){padding-block:6px!important}
body.compact-journey-app main :is(.welcome,.class-hero,.capture-heading,.paper-heading) h1{font-size:22px!important;line-height:1.2!important}
body.compact-journey-app .shell-title>div>span:first-child,body.compact-journey-app .eval-review-position{font-size:10px!important;line-height:1.3!important}
/* Feedback reserves its own row; it never covers a title, rail or page text. */
body.compact-journey-app .shell-toast{position:relative!important;inset:auto!important;translate:none!important;transform:none!important;display:block;box-sizing:border-box;width:100%;max-width:100%;margin:8px 0 12px;padding:12px 16px;border-radius:16px;white-space:normal;overflow-wrap:anywhere;flex:none;pointer-events:none}
/* Marks stay visible; remove the redundant Marks checkbox from both sheet panels. */
body.compact-journey-app .review-page .marks-switch,body.compact-journey-app .review-inspection .marks-switch{display:none!important}

body.compact-journey-app .paper-screen-view :is(.paper-thumb-remove,.mp-add-paper-page,.page-change):disabled{opacity:.4;filter:grayscale(1);cursor:default}

/* Live-only required marking style; native radios, no default selection. */
body.compact-journey-app .create-dialog .live-test-styles{display:grid;gap:8px;min-width:0;margin:16px 0 0;padding:0;border:0}
body.compact-journey-app .live-test-styles legend{margin-bottom:8px;color:var(--ink);font-size:13px;font-weight:700}
body.compact-journey-app .create-dialog .live-test-style-option{display:flex;align-items:flex-start;gap:10px;margin:0;padding:10px 12px;border:1px solid rgb(var(--brand-rgb)/.2);border-radius:12px;cursor:pointer}
body.compact-journey-app .create-dialog .live-test-style-option:has(input:checked){background:var(--brand-tint);border-color:var(--brand)}
body.compact-journey-app .create-dialog .live-test-style-option input{flex:none;width:18px;height:18px;min-height:0;margin:2px 0 0;padding:0;accent-color:var(--brand)}
body.compact-journey-app .live-test-style-copy{display:grid;gap:3px;text-align:left}
body.compact-journey-app .live-test-style-copy strong{font-size:13px;color:var(--ink)}
body.compact-journey-app .live-test-style-description{font-size:11px;line-height:1.4;font-weight:400;color:var(--muted)}
body.compact-journey-app .create-dialog:has(.live-test-styles){max-height:calc(100dvh - 32px);overflow-y:auto}

/* Pin only the Answer Sheets roster and Evaluate list titles, below the rail. */
body.compact-journey-app>main:is(.engine-stack.student-roster,.eval-list-view)>.flow-hero-shell{position:sticky!important;top:var(--title-menu-rail-height,0px)!important;z-index:90!important;background:var(--page);overflow:visible}
/* Dock screens scroll within main, whose top already starts below the rail. */
body.compact-journey-app>main.mp-has-dock:is(.engine-stack.student-roster,.eval-list-view)>.flow-hero-shell{top:0!important}
body.compact-journey-app>main:is(.engine-stack.student-roster,.eval-list-view){scroll-padding-top:var(--flow-hero-height,64px)}

/* Keep the outer phone page stationary: only these lists scroll beneath their title. */
body.compact-journey-app:has(>main:is(.engine-stack.student-roster,.eval-list-view)){position:fixed;inset:0;height:100dvh;min-height:0;overflow:hidden}
body.compact-journey-app>main:is(.engine-stack.student-roster,.eval-list-view){position:fixed!important;top:var(--title-menu-rail-height,0px)!important;bottom:var(--app-dock-height,0px);left:0;right:0;width:100%;height:auto!important;min-height:0!important;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain}
body.compact-journey-app>main:is(.engine-stack.student-roster,.eval-list-view)>.flow-hero-shell{top:0!important}

/* One foreground wait layer, above menus and sheet dialogs, without moving content. */
body.compact-journey-app .teacher-wait-overlay[open]{position:fixed;inset:0;display:grid;place-items:center;box-sizing:border-box;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:24px;border:0;border-radius:0;background:transparent;overflow:hidden;touch-action:none;overscroll-behavior:none;outline:0;box-shadow:none}
body.compact-journey-app .teacher-wait-overlay::backdrop{background:rgb(0 0 0/.62)}
body.compact-journey-app .teacher-wait-centre{display:grid;place-items:center;width:100%;pointer-events:none}
body.compact-journey-app .teacher-wait-centre>img{display:block;width:148px;height:142px;object-fit:contain;animation:teacher-wait-dance .7s ease-in-out infinite alternate}
body.compact-journey-app .teacher-wait-warning{max-width:360px;padding:20px;border-radius:20px;background:var(--surface);color:var(--ink);font:500 14px/1.5 var(--font)}
@keyframes teacher-wait-dance{from{transform:translateY(4px) rotate(-3deg)}to{transform:translateY(-8px) rotate(3deg)}}
@media(prefers-reduced-motion:reduce){body.compact-journey-app .teacher-wait-centre>img{animation:none}}

/* A short wait stays visible for at least one second, then reveals the next screen softly. */
body.compact-journey-app .teacher-wait-overlay[open]{opacity:1;animation:teacher-wait-fade-in 140ms ease-out;transition:opacity 280ms cubic-bezier(.33333,0,.66667,1)}
body.compact-journey-app .teacher-wait-overlay::backdrop{opacity:1;animation:teacher-wait-fade-in 140ms ease-out;transition:opacity 280ms cubic-bezier(.33333,0,.66667,1)}
body.compact-journey-app .teacher-wait-overlay.is-leaving,body.compact-journey-app .teacher-wait-overlay.is-leaving::backdrop{opacity:0}
@keyframes teacher-wait-fade-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){body.compact-journey-app .teacher-wait-overlay[open],body.compact-journey-app .teacher-wait-overlay::backdrop{animation:none;transition:none}}

/* Long engine jobs share the same dance, with no backdrop or tap interception. */

/* Fixed roster/list screens contain their own stacking context: keep their rail controls above the rail. */
body.compact-journey-app>main:is(.engine-stack.student-roster,.eval-list-view){z-index:1}

/* Safari chrome uses the matching JS-composited tint; the modal covers its large viewport. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body.compact-journey-app .teacher-wait-overlay[open]{inset:0 auto auto 0;width:100vw;height:100lvh;min-height:100dvh;padding:calc(24px + env(safe-area-inset-top,0px)) calc(24px + env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) calc(24px + env(safe-area-inset-left,0px))}
body.compact-journey-app .teacher-wait-overlay::backdrop{position:fixed;inset:0 auto auto 0;width:100vw;height:100lvh;min-height:100dvh}

/* App-only stepper. The reference Magic Patterns StageRail stays untouched. */
body.compact-journey-app .mp-stage-stepper{height:62px;width:100%;container-type:inline-size}
.mp-stage-stepper ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));height:62px;margin:0;padding:0;list-style:none}
.mp-stage-stepper li{position:relative;min-width:0}
body.compact-journey-app .mp-stage-stepper button{box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;width:100%;min-width:0;height:62px;min-height:44px;margin:0;padding:5px 0 0;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;transform:none;color:var(--muted);font:inherit;cursor:pointer}
body.compact-journey-app .mp-stage-stepper button:disabled{opacity:1;cursor:default}
.mp-stage-stepper .mp-step-circle{box-sizing:border-box;position:relative;display:grid;place-items:center;flex:none;width:22px;height:22px;border:1.5px solid rgb(var(--brand-rgb)/.3);border-radius:50%;background:var(--surface);box-shadow:0 0 0 5px transparent;transition:background-color var(--step-fade),border-color var(--step-fade),box-shadow var(--step-fade)}
.mp-stage-stepper .mp-step-name{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;box-sizing:border-box;width:100%;max-height:2.3em;overflow:hidden;overflow-wrap:normal;word-break:normal;white-space:normal;text-align:center;font-size:min(9.5px,2.6cqw);font-weight:700;line-height:1.15;letter-spacing:0;text-transform:uppercase;color:rgb(var(--muted-rgb)/.85);transition:color var(--step-fade)}
.mp-stage-stepper .mp-step-tick{position:absolute;width:14px;height:14px;fill:none;stroke:var(--on-brand);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transition:opacity var(--step-fade)}
.mp-stage-stepper .mp-step-dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--brand);opacity:0;transition:opacity var(--step-fade)}
.mp-stage-stepper [data-state="finished"] .mp-step-circle{background:var(--brand);border-color:var(--brand)}
.mp-stage-stepper [data-state="finished"] .mp-step-tick{opacity:1}
.mp-stage-stepper [data-state="finished"] .mp-step-name{color:var(--muted)}
.mp-stage-stepper [data-state="current"] .mp-step-circle{border:2px solid var(--brand);box-shadow:0 0 0 5px rgb(var(--brand-rgb)/.12)}
.mp-stage-stepper [data-state="current"] .mp-step-dot{opacity:1}
.mp-stage-stepper [data-state="current"] .mp-step-name{color:var(--action-ink)}
.mp-stage-stepper .mp-step-gap{position:absolute;top:15px;left:calc(50% + 17px);width:calc(100% - 34px);height:2px;border-radius:2px;background:rgb(var(--brand-rgb)/.14);overflow:hidden;pointer-events:none}
.mp-stage-stepper .mp-step-gap>span{display:block;width:100%;height:100%;border-radius:inherit;background:var(--brand);transform:scaleX(0);transform-origin:left;transition:transform var(--step-duration) var(--step-ease)}
.mp-stage-stepper .mp-step-gap[data-filled="true"]>span{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){.mp-stage-stepper *{transition:none!important}}
body.compact-journey-app .teacher-wait-overlay>.teacher-wait-child-back{bottom:calc(max(16px,env(safe-area-inset-bottom,0px)) + 100lvh - 100dvh)}

/* Real upload/matching status belongs directly below the waiting character. */
body.compact-journey-app .teacher-wait-progress{display:block;max-width:340px;margin:16px 0 0;font:600 14px/1.5 var(--font);text-align:center;color:var(--ink)}
body.compact-journey-app .teacher-wait-overlay .teacher-wait-progress{color:#fff}