/* Mission 1 story styles (scenes-m1.js). Scope every rule with the scene class (.qs-mfa, .qs-call, …). */

/* mfa (Q1): the selection walking across the budget sheet and the figure typed into a cell. */
.qs-mfa .st-cell { position: absolute; z-index: 2; width: 46.8px; height: 22px; border: 2px solid #217346; border-radius: 2px; box-shadow: 0 0 0 3px #2173462b; }
.qs-mfa .st-celltext { position: absolute; z-index: 1; width: 46.8px; height: 22px; display: grid; place-items: center end; padding-right: 5px; color: #1f232e; font-size: .58rem; font-weight: 700; font-variant-numeric: tabular-nums; }
/* mfa (practice): the Sign in button and the waiting line share the last row of the sign-in card. */
.qs-mfa .qs-signin > .qs-wait, .qs-mfa .qs-signin > .st-signbtn { grid-area: 5 / 1; }
.qs-mfa .st-signbtn { justify-self: center; padding: 4px 20px; border-radius: 6px; background: linear-gradient(135deg, #ec3c84, #b4234f); color: #fff; font-weight: 700; box-shadow: 0 6px 14px -8px #b4234f; }

/* Questions 2–5: a scale beat on a layer pivots on the layer's own centre (its transform carries the --x/--y/--z
   offsets, so the default origin would pull it towards the rig centre while it scales). */
.qs-mfa-burst .qs-l, .qs-stage.qs-call .qs-l, .qs-reset-email .qs-l, .qs-lost-device .qs-l { transform-origin: var(--x) var(--y) var(--z); }
/* Ticking values (tick()): an inline grid sits on its first value's baseline; its layout box is only 1em tall (so it
   never grows the line: Chrome rounds the half-leading) while the clip shows one whole 1.25em slot. The last value
   lands where the plain text was, in the same digit style. Keep it inside a line of text, not as a flex/grid item. */
.qs-mfa-burst .m1-reel, .qs-stage.qs-call .m1-reel, .qs-reset-email .m1-reel { display: inline-grid; height: 1em; overflow: visible; clip-path: inset(0 0 -.25em 0); vertical-align: baseline; }
.qs-mfa-burst .m1-reel b, .qs-stage.qs-call .m1-reel b, .qs-reset-email .m1-reel b { font-variant-numeric: inherit; }

/* mfa-burst (Q2): one ring per arriving request, right-aligned ageing labels, the counter chip pivots on its badge. */
.qs-mfa-burst .st-ring { position: absolute; left: 50%; top: 22%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid var(--qa2); pointer-events: none; }
.qs-mfa-burst .qs-app .st-reel-in { justify-items: end; }
/* .qs-push.mini hides its spans (the full card's extra lines); the label reels are spans too. */
.qs-mfa-burst .qs-push.mini .m1-reel { display: inline-grid; }
.qs-mfa-burst .qs-push.mini .st-reel-in { display: grid; }
.qs-mfa-burst .qs-count .st-reel-in { justify-items: center; }
.qs-mfa-burst .qs-l.chip:not(.ghost) { transform-origin: calc(27px - 50% + var(--x)) var(--y) var(--z); }

/* call (Q3; the stage and the call screen are both .qs-call): ripples behind the caller's avatar while it rings,
   per-digit reveal of the code, and the speech bubble springs out of its tail. */
.qs-stage.qs-call .qs-call { position: relative; }
.qs-stage.qs-call .qs-call .qs-avatar { position: relative; }
.qs-stage.qs-call .st-ripple { position: absolute; left: 50%; top: 75px; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%; border: 2px solid #fcb434; pointer-events: none; }
.qs-stage.qs-call .st-digit { display: inline-block; }
/* The tap on the answer button: a ring centred on the button. */
.qs-stage.qs-call .qs-callbtn b.ok { position: relative; }
.qs-stage.qs-call .st-tap { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #ffffffd9; pointer-events: none; }
.qs-stage.qs-call .qs-l.bubble { transform-origin: calc(10px - 50% + var(--x)) calc(50% + var(--y)) var(--z); }

/* reset-email (Q4): the inbox list shown before the message opens (a transient overlay on the window body), its rows
   (the new message on top, skeleton rows below), the click selection, and the countdown digits. */
.qs-reset-email .qs-body { position: relative; }
.qs-reset-email .st-inbox { position: absolute; inset: 0; z-index: 3; display: grid; align-content: start; gap: 6px; padding: 10px 12px; overflow: hidden; background: #fff; }
.qs-reset-email .st-mrow { position: relative; display: grid; grid-template-columns: 8px 32px minmax(0, 1fr) auto; align-items: center; gap: 10px; height: 46px; padding: 0 10px 0 6px; border-radius: 10px; background: #f6f7f9; }
.qs-reset-email .st-mrow > div { display: grid; gap: 6px; min-width: 0; }
.qs-reset-email .st-mrow > div i, .qs-reset-email .st-mrow .st-time { display: block; height: 7px; border-radius: 4px; background: #e2e6eb; }
.qs-reset-email .st-mrow .st-time { width: 28px; }
.qs-reset-email .st-mrow .st-ph { width: 32px; height: 32px; border-radius: 50%; background: #e2e6eb; }
.qs-reset-email .st-mrow.new { background: #fff; box-shadow: 0 10px 22px -14px #1f232e88, inset 0 0 0 1px #e6e9ee; }
.qs-reset-email .st-mrow.new > div { gap: 1px; }
.qs-reset-email .st-mrow.new strong { font-size: .76rem; }
.qs-reset-email .st-mrow.new span:not(.qs-avatar) { overflow: hidden; color: #4c5664; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.qs-reset-email .st-mrow.new small { align-self: start; margin-top: 8px; color: #8b95a1; font-size: .66rem; font-weight: 700; }
.qs-reset-email .st-unread { width: 8px; height: 8px; border-radius: 50%; background: #2b6fd6; box-shadow: 0 0 0 3px #2b6fd626; }
.qs-reset-email .st-sel { position: absolute; inset: 0; border-radius: inherit; background: #2b6fd614; box-shadow: inset 0 0 0 1.5px #2b6fd6; pointer-events: none; }

/* lost-device (Q5): the story's magnifier is a still copy of the idle .qs-lens (same spot and size; the loop takes
   over when the story hands off). */
.qs-lost-device .st-lens { position: absolute; left: 30px; top: 16px; color: #fff; pointer-events: none; }
.qs-lost-device .st-lens .icon { width: 46px; height: 46px; }