/* The runner stylesheet: questionnaire and reasoning test pages only (build.mjs
   documentPage). Kept out of site.css, which every page loads and which sits at
   its size cap (test/redesign.test.js). */
/* Working state, both arms: the region chips and the breadcrumb step aside so the work opens
   at the top of a phone screen (deep churn R3, demand review F2). */
body:has([data-test-root][data-active-state=working]:not([data-engine=task])) :is(.category-strip,.crumb) { display: none; }
/* Runner B, one item per screen (docs/runner/ab-one-item-spec.md). The actions stay on screen
   under the item, above the home indicator; the item above them is the only thing that scrolls. */
[data-runner=b] .test-work .form-actions { position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; gap: .5rem; margin: 1rem -.5rem 0; padding: .6rem .5rem calc(.6rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); }
[data-runner=b] .form-actions [data-next] { margin-inline-start: auto; min-inline-size: 11rem; }
[data-runner=b] .form-actions [data-skip-extra] { flex-basis: 100%; order: 3; }
[data-runner=b] .form-actions [data-held] { visibility: hidden; }
/* The card keeps one height (docs/runner/stable-card.md). app.js lays every screen of the run out
   once in .card-probe and gives the stage the tallest as its min-block-size; flow-root keeps the
   last item's margin inside both boxes so the two measure alike. */
[data-question-stage],.card-probe-screen,.aptitude-stage{display:flow-root}
.card-probe{position:absolute;inset-block-start:0;inset-inline-start:0;visibility:hidden;pointer-events:none}
/* The validation line lies over the space just above the actions instead of pushing them down;
   B's stage keeps that space free under its tallest item. */
.test-work .form-actions{position:relative}
.test-work .form-actions .form-error{position:absolute;inset-inline:0;inset-block-end:100%;min-height:0;margin:0;padding:.35rem .5rem;background:var(--surface);line-height:1.35;pointer-events:none}
.test-work .form-error:empty{display:none}
[data-question-stage]{box-sizing:content-box}
[data-runner=b] [data-question-stage]{padding-block-end:3.2rem}
/* The aptitude trainer (build.mjs loads this sheet on its two pages): Back and Next stay on screen
   under the question, above the home indicator, on every question of a sitting. */
.practice-item .aptitude-nav{position:sticky;bottom:0;z-index:2;margin:0;padding:.6rem 0 calc(.6rem + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:var(--paper)}
[data-runner=b] .test-work .progress { margin-bottom: .75rem; }
[data-runner=b] .section-timeframe { margin: 0 0 .75rem; font-size: .9rem; }
/* On a phone the panel fills the screen and Next keeps one place, under the thumb, on every screen. */
@media (max-width:640px){[data-runner=b] .test-work{display:flex;flex-direction:column;min-block-size:100svh}[data-runner=b] #assessment-form{display:flex;flex:1;flex-direction:column}[data-runner=b] .test-work .form-actions{margin-block-start:auto}}
.one-item { margin: 0; padding: 0; border: 0; }
.one-item legend { margin-bottom: .9rem; font-size: 1.15rem; line-height: 1.35; }
.one-item:has(input:checked) legend { opacity: 1; }
.one-item:focus,.one-screen:focus { outline: none; }
.one-position { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.one-scale { display: grid; grid-template-columns: 1fr; gap: .5rem; max-inline-size: 36rem; }
.one-scale .choice-option { display: flex; align-items: center; gap: .8rem; min-block-size: 56px; padding: .45rem 1rem; font-size: 1rem; line-height: 1.25; text-align: start; cursor: pointer; }
.one-scale .choice-option input { flex: none; inline-size: 1.35rem; block-size: 1.35rem; margin: 0; }
.one-screen h2 { margin: 0 0 .75rem; font-size: clamp(1.35rem,4vw,1.9rem); }
.one-rules { display: grid; gap: .45rem; margin: 0; padding-inline-start: 1.2rem; }
.one-break { padding-block: .5rem 1rem; }
.one-break p:not(.eyebrow) { margin: .25rem 0 0; }
.one-example { margin-block-start: 1rem; padding: .9rem 1rem; border: 1px solid var(--line); border-radius: 16px; background: var(--paper); }
.one-example h3 { margin: 0 0 .6rem; font-size: 1rem; }
.one-example-body { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.one-example-grid { inline-size: min(168px,44vw); color: var(--ink); }
.one-example-grid svg,.one-example-option svg { display: block; inline-size: 100%; block-size: auto; }
.one-example-options { display: grid; grid-template-columns: repeat(2,50px); gap: 6px; color: var(--ink); }
.one-example-option { position: relative; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.one-example-option b { position: absolute; inset-block-start: 0; inset-inline-end: 4px; font-size: .72rem; }
.one-example-option.is-key { border-color: var(--ink); background: var(--lime); box-shadow: inset 0 0 0 1px var(--ink); }
.one-example p { margin: .6rem 0 0; font-size: .95rem; }
@media (max-width:540px){[data-runner=b] .form-actions .button{flex:1 1 0;min-inline-size:0;min-block-size:3.85rem;padding-inline:.55rem;font-size:.95rem;line-height:1.15}[data-runner=b] .form-actions [data-back]{flex:0 0 auto}[data-runner=b] .form-actions [data-next]{flex-grow:1.3}.one-item legend{font-size:1.05rem;margin-bottom:.7rem}}
/* 3D rotation photographs (premium plan 6.2): room for the detail a mirror hides in.
   Five on a phone go three across so the key and all four mirrors fit one screen. */
.item-figure[data-figure-shape=photo]{max-width:260px}
[data-figure-photos] .choice-figure{max-inline-size:8.5rem}
/* A short phone in B (390x664, 360x640): the sticky action bar takes about 80 px, so the photo, its
   tiles and the grid step down a size and a four-photo item still ends above Next (it ended 34 px
   under it until 2026-09-28; docs/runner/stable-card.md). Drawn option tiles step down to 68 px, just
   over the 67 px a layered grid's legibility is proved at (OPTION_PX), and the question, drawing and
   tiles sit closer: at 80 px a five-option layered item on /iq/full-iq-test/ ended 13 px under Next
   at 390x664 and, with the tiles already at 67 px, 13 px under it at 360x640. */
@media (max-width:640px) and (max-height:720px){[data-runner=b] [data-figure-options]:not([data-figure-photos]) .choice-figure{max-inline-size:4.25rem}[data-runner=b] [data-figure-options]:not([data-figure-photos]) .has-figure{padding:2px 2px 2px}[data-runner=b] .one-item legend{margin-bottom:.35rem}[data-runner=b] .item-figure{margin-bottom:6px}[data-runner=b] .item-figure[data-figure-shape=photo]{max-width:160px}[data-runner=b] [data-figure-photos] .has-figure{height:116px}[data-runner=b] [data-figure-photos] .choice-figure{width:100px}[data-runner=b] [data-figure-shape=grid]{max-width:248px}}
/* A short desktop in B (1366x900, 1280x800): a 420 px grid and two rows of option tiles ended up to
   107 px under the sticky actions; the drawing gives up what the screen lacks, never under 240 px. */
@media (min-width:641px) and (max-height:1020px){[data-runner=b] .one-item .item-figure:not([data-figure-shape=photo]){max-width:clamp(240px,calc(100svh - 600px),420px)}}
@media (min-width:641px) and (max-height:840px){[data-runner=b] .one-item .choice-figure{max-inline-size:5.25rem}}
/* Drawn options on a phone: the radio and the letter sit in a row ABOVE the drawing, never on it,
   and the drawing takes the tile's whole width (up to the size of a grid cell). Until 2026-09-28 they
   were laid over a 64 px drawing's top corners, where a line or a corner tick could be the one thing
   telling two options apart (the matrix reviewer's round 1). browser/figure-fit.mjs measures both. */
@media (max-width:640px){[data-figure-options]:not([data-figure-photos]){gap:5px}[data-figure-options]:not([data-figure-photos]) .has-figure{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;align-items:center;height:auto;padding:3px 2px 4px;gap:1px 4px}[data-figure-options]:not([data-figure-photos]) input{position:static;grid-area:1/1;margin:0}[data-figure-options]:not([data-figure-photos]) span:last-child{position:static;grid-area:1/3;line-height:1.1}[data-figure-options]:not([data-figure-photos]) .choice-figure{grid-area:2/1/3/4;justify-self:center;width:100%;max-inline-size:5rem}}
@media (max-width:640px){.item-figure[data-figure-shape=photo]{max-width:200px}[data-figure-options][data-figure-photos]{grid-template-columns:repeat(2,1fr)}[data-figure-photos] .has-figure{height:132px}[data-figure-photos] .choice-figure{width:116px}[data-figure-options="5"][data-figure-photos]{grid-template-columns:repeat(3,1fr)}[data-figure-options="5"][data-figure-photos] .has-figure{height:104px}[data-figure-options="5"][data-figure-photos] .choice-figure{width:90px}}

/* Untimed reasoning practice: an explicit pause retains the same form DOM. */
.reasoning-pause{margin:.5rem 0}.reasoning-pause>[data-pause]{min-height:44px;padding:.4rem .9rem;font-size:.875rem}.pause-panel{padding:1rem;border:1px solid var(--line);border-radius:1rem}.aptitude-jump{font-size:.875rem;margin:.35rem 0 .65rem;min-height:44px}

/* Keep the ASRS safety note visible above Start on the measured small phones. */
@media (max-width:400px){body[data-test-id="asrs-screener"] .test-landing{padding:1rem}body[data-test-id="asrs-screener"] .test-landing .crisis-note{margin-block:.7rem;padding:.65rem .75rem}}