.ibar{display:flex;justify-content:space-between;gap:1rem;font-size:.95rem;margin-bottom:1rem;opacity:.85}
#timer.warn{color:#b3261e}
.item .stem{font-size:1.06rem;line-height:1.55}
/* Desktop readability: one ~60–75 char column (Baymard/WCAG), 18px stem / 17px options, 1.55 leading; phones unchanged.
   Use rem (not per-element ch) so stem and options share the same width; 42rem ≈ 672px ≈ ~68 avg chars at 18px UI sans. */
@media (min-width:761px){
 /* One centered 42rem column: top bar (ibar), stem, options, nav. Left-aligned inside the column
    (ibar label at column left, timer at column right). Keep horizontal auto margins. */
 .item .ibar,.item .stem,.item .opts,.item .row{max-width:42rem;width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}
 .item .ibar{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
 .item .stem{font-size:18px;line-height:1.55}
 .item .opts{margin-top:1.1rem;margin-bottom:1.1rem;padding-left:0;padding-right:0}
 .item .opts li{margin:0;padding:0;width:100%;max-width:100%;box-sizing:border-box}
 .item .opt{max-width:none;width:100%;box-sizing:border-box;padding:10px 12px;line-height:1.5;font-size:17px;margin:7px 0}
 .item .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-start}
}
/* Phones: question nav as tidy 2x2 — Previous|Next on top, Flag|Review section below. DOM order unchanged. */
@media (max-width:760px){
 .item .row{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px;margin-top:14px}
 .item .row>.btn{width:100%;min-width:0;box-sizing:border-box;text-align:center;white-space:nowrap;line-height:1.25;padding:6px 6px;font-size:12.5px}
 .item .row #prev{order:1}
 .item .row #next{order:2}
 .item .row #flag{order:3}
 .item .row #grid{order:4}
}
@media (max-width:400px){
 .item .row>.btn{font-size:11.5px;padding:6px 4px}
}

.opts{list-style:none;padding:0;margin:1rem 0}.card ul.opts{padding-left:0;padding-right:0}
.opts li{margin:0;padding:0;list-style:none}
/* Match NCMHCE answer boxes: circled letter badge, flex row; radio kept for a11y (clipped, still focusable) */
.opts .opt{position:relative;display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:#fff;border:1px solid var(--rule,#B8C4D6);border-radius:7px;padding:10px 12px;margin:7px 0;cursor:pointer;font-size:17px;line-height:1.5;box-sizing:border-box;transition:border-color .15s,background .15s}
.opts .opt:hover{border-color:var(--blue,#2F5496)}
.opts .opt.on{border-color:var(--blue,#2F5496);background:#e6edf8}
.opts .opt:focus-within{outline:2px solid var(--blue,#2F5496);outline-offset:2px}
.opts .opt .l{flex:0 0 26px;height:26px;border-radius:13px;border:1.5px solid var(--blue,#2F5496);display:flex;align-items:center;justify-content:center;font:700 13px system-ui,sans-serif;color:var(--blue,#2F5496);box-sizing:border-box}
.opts .opt.on .l{background:var(--blue,#2F5496);color:#fff;border-color:var(--blue,#2F5496)}
.opts .opt .opt-txt{flex:1;min-width:0}
.opts .opt .opt-input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;z-index:1}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:6px;margin:1rem 0}
.qg{padding:.5rem 0;border:1px solid #ccd;border-radius:8px;background:#fff;cursor:pointer}
.qg.done{background:#eef6f2;border-color:#3d6b5a}.qg.flag{outline:2px solid #c98a1b}
.areas{border-collapse:collapse;width:100%}.areas td{padding:.35rem .5rem;border-bottom:1px solid #e3e3ea}
.rev .key{font-weight:600;color:#245c45}.rev .mine{color:#b3261e}
.soon{opacity:.6;cursor:default}.big{font-size:1.2rem}.warn{color:#b3261e}
/* Scout review (ported from the NCMHCE review; classes from style.css plus these) */
.review{max-width:940px}
.optwhy{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px}
.card ul.optwhy{padding-left:0}.card ul.optwhy li{margin:0}
.optwhy li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid var(--rule);border-radius:7px;padding:8px 12px;font-size:15.5px}
.optwhy li .l{flex:0 0 24px;height:24px;border-radius:12px;border:1.5px solid var(--rule);display:flex;align-items:center;justify-content:center;font:700 12.5px var(--uisans);color:var(--sub)}
.optwhy li.best{background:#E8F2EA;border-color:#A9CDB2}.optwhy li.best .l{border-color:var(--ok);background:var(--ok);color:#fff}
.optwhy li.you{background:#FFF6E0;border-color:#EBCB86}
.optwhy li .lab{display:block;font:600 11.5px var(--uisans);text-transform:uppercase;letter-spacing:.04em;color:var(--sub)}
.revisit{font:600 12.5px var(--uisans);color:var(--low)}.gotit{font:600 12.5px var(--uisans);color:var(--ok)}
.miss{border-left:4px solid #E3C77A}.miss.ok{border-left-color:#7FB59A}
.basis{font:13px var(--uisans);color:var(--sub);margin:8px 0 0}
.allopt{margin-top:10px}.allopt summary{cursor:pointer}
details.allq{margin-top:18px}details.allq>summary{list-style:none;display:inline-block}details.allq>summary::-webkit-details-marker{display:none}
.rev-t td{padding:7px 9px;border-bottom:1px solid #e3e8f0}
@media (max-width:600px){.picks{grid-template-columns:1fr}.review .card{padding:16px 14px}}
/* ASWB/L&E pre-exam + break "Breathe" button: 16s × 1 using SHARED scoutBreath* keyframes from style.css.
   Same shape as NCMHCE (0–25% inhale, hold to 50%, release by 75%); only duration/iteration differ. */
.boxmode .bstage.vec .halo{animation:scoutBreathHalo 16s var(--bd) 1 both ease-in-out!important}
.boxmode .vface .sv-torso,.boxmode .vface .sv-belly{animation:scoutBreathBody 16s var(--bd) 1 both ease-in-out!important}
.boxmode .vface .sv-chest{animation:scoutBreathChest 16s calc(var(--bd) + 100ms) 1 both ease-in-out!important}
.boxmode .vface .sv-shoulders{animation:scoutBreathShoulders 16s calc(var(--bd) + 200ms) 1 both ease-in-out!important}
.boxmode .vface .sv-cheek{animation:scoutBreathCheekL 16s calc(var(--bd) + 300ms) 1 both ease-in-out!important;transform-origin:50% 35%}
.boxmode .vface .sv-cr{animation-name:scoutBreathCheekR!important}
.boxmode .vface .sv-head{animation:scoutBreathHead 16s calc(var(--bd) + 300ms) 1 both ease-in-out!important;transform-origin:50% 100%;transform-box:fill-box}
.boxmode .bstage.vec::after{animation:none!important}
/* Post-exam pause (breatheVecNC, no .boxmode): already uses shared 8s × 2 from style.css.
   Reduced-motion gentle variants also live in style.css (including .boxmode 16s overrides). */

@keyframes sayScout{from{transform:translateX(-140%) rotate(-8deg);opacity:0}to{transform:none;opacity:1}}
@keyframes sayBub{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.say .scout{animation:sayScout .9s cubic-bezier(.2,.8,.2,1) both}.say .bubble{animation:sayBub .5s .5s both}
@media (prefers-reduced-motion:reduce){.say .scout,.say .bubble{animation:none;opacity:1;transform:none}}
.gsay .gcap{background:none;padding:0;margin:0}
.brow.sub{padding-left:18px;font-size:14px;border-bottom-color:#f3f5f9}.brow.sub .track{height:9px}
/* review reveal: short fade (no long hidden gaps), NCMHCE spacing for pattern blocks */
.review .pat{transform:translateY(6px);transition:opacity .3s ease-out,transform .3s ease-out;margin:8px 0;padding:8px 12px}
.review .pat p{margin:2px 0 4px}.review .pat h4{margin:0 0 2px}
.review #next>p:empty{display:none}.review #next .cap{margin-top:12px}
@media (prefers-reduced-motion:reduce){.review .pat{opacity:1;transform:none;transition:none}}
/* never blank: items start partly visible (.4) and settle to full in .25s, so a fast scroll always shows text */
.review .pat:not(.in){opacity:.4}.review .pat{transition-duration:.25s}
.review mark.clue{transition-duration:.4s}
/* lasting footer line: start screen + results (Not CE credit + product disclaimer) */
.pfoot{font:12px/1.4 var(--uisans);color:var(--sub);opacity:.85;margin:14px 0 0;text-align:center}

/* results chips are links to their question card */
button.chip{color:inherit;border:0;text-align:left;cursor:pointer;min-height:32px;line-height:1.3;padding:6px 10px;box-sizing:border-box;vertical-align:middle;transition:background-color .15s;-webkit-tap-highlight-color:transparent}
button.chip:hover,button.chip:focus-visible{text-decoration:underline;text-underline-offset:2px;background:#f3e3bf}
button.chip:focus-visible{outline:2px solid #d9a441;outline-offset:2px}
.chiphit{outline:3px solid rgba(232,170,60,.85);outline-offset:3px;box-shadow:0 0 0 8px rgba(245,200,110,.28);transition:outline-color .4s,box-shadow .4s}
[id^="rq-"],.chipback{scroll-margin:24px}

/* "Back to where you were" on a card reached from a chip */
.chipback{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:6px 12px;margin:0 0 10px;border:1px solid #e3c27a;border-radius:16px;background:#fdf3dc;color:inherit;font:13px var(--uisans,system-ui,sans-serif);cursor:pointer}
.chipback:hover,.chipback:focus-visible{text-decoration:underline;text-underline-offset:2px;background:#f8e6bd}
.chipback:focus-visible{outline:2px solid #d9a441;outline-offset:2px}
