/* Navigation is presentation chrome; illustrations, answers and scoring are unchanged. */
.practice-header{box-sizing:border-box;min-height:48px;padding:2px 16px;display:flex;align-items:center;justify-content:center;background:#fff;color:#264d50;font:600 14px/1.3 "Trebuchet MS","Segoe UI",sans-serif}
.practice-header nav{display:flex;align-items:center;gap:8px;max-width:100%;flex-wrap:wrap;justify-content:center}
.practice-header a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 14px;color:inherit;text-decoration:none;border-radius:10px;border:1px solid transparent}
.practice-header a[aria-current]{background:#edf6f2;border-color:#cfdfd8;color:#12675f}
.practice-header a:hover{background:#f3f7f5}.practice-header a:focus-visible{outline:3px solid #1764b3;outline-offset:2px}
body:has(>.practice-header)>main{min-height:calc(100svh - 48px)!important}
@media(max-width:1099px){html body:has(>.practice-header) main[data-screen-fit]{min-height:calc(100svh - 48px)!important}}
@media(max-width:699px){.practice-header{padding:0 8px}.practice-header nav{gap:5px}.practice-header a{padding:7px 12px}html body:has(>.practice-header) main[data-screen-fit]{min-height:0!important;padding-top:4px!important}}
.question-directory{max-width:1050px;margin:0 auto;padding:24px 20px 60px;color:#263f42;font:17px/1.6 system-ui,sans-serif}
.question-directory h1{font-size:30px;line-height:1.2}.question-directory ul{padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.question-directory li a{display:block;padding:14px 16px;min-height:44px;border:1px solid #d4e2dc;border-radius:12px;color:#12675f;text-decoration:none}.question-directory li a:hover{background:#f2f8f5}.question-directory a:focus-visible{outline:3px solid #1764b3;outline-offset:2px}.question-discovery{font:15px/1.5 system-ui,sans-serif;text-align:center;margin:20px auto;padding:0 16px}.question-discovery a{display:inline-flex;align-items:center;min-height:44px;color:#12675f}
@media(max-width:650px){.question-directory ul{grid-template-columns:minmax(0,1fr)}}

@media(max-width:1099px){
 html body main[data-fit-compact] fieldset .choice{position:relative!important}
 html body main[data-fit-compact] fieldset .choice>.number{position:absolute!important;left:4px;top:4px;margin:0!important;z-index:1}
 html body main[data-fit-compact] fieldset .choice>img{max-width:calc(100% - 32px)!important;margin:0 auto!important;display:block}
}
@media(min-width:1100px) and (max-height:850px){
 body:has(>.practice-header) main:is([data-question="120"],[data-question="144"]) .choices .choice>img{max-height:190px!important;object-fit:contain}
}

.practice-header{width:100%;flex-shrink:0}
body.mode-home{display:flex;flex-direction:column;align-items:center}
body.mode-home>.mode-picker{min-height:0!important;margin:auto 0}
body.mode-home>.question-discovery{margin:0 auto 12px}
.test-topbar nav.practice-header{width:auto;min-height:44px;margin-right:auto;padding:0;gap:4px;flex-wrap:nowrap}
.test-topbar #test-heading{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@media(max-width:600px){.test-topbar nav.practice-header a{font-size:12px;padding:5px 7px}}

/* Single-digit piece combinations remain one readable line on short phones. */
@media(max-width:699px) and (max-height:650px){
 html body main[data-fit-triples] .word-answer{font-size:18px!important;white-space:nowrap!important;letter-spacing:0!important;padding-inline:0!important}
}

@media(max-width:1099px){
 html body main[data-fit-compact="words"] fieldset .choice{display:flex!important;flex-direction:row!important;align-items:center!important;gap:4px!important}
 html body main[data-fit-compact="words"] fieldset .choice>.number{position:static!important;flex:0 0 16px!important;align-self:center!important;padding:0 3px!important;min-width:16px!important}
 html body main[data-fit-compact="words"] .word-answer{flex:1 1 auto!important;min-width:0!important;margin:0!important;padding:4px 0!important}
}
@media(min-width:1100px) and (max-height:850px){
 body:has(>.practice-header) main:is([data-question="120"],[data-question="144"]) .choice{position:relative!important}
 body:has(>.practice-header) main:is([data-question="120"],[data-question="144"]) .choice>.number{position:absolute!important;left:4px;top:4px;margin:0!important;z-index:1}
 body:has(>.practice-header) main:is([data-question="120"],[data-question="144"]) .choice>img{max-width:calc(100% - 32px)!important;margin:0 auto!important;display:block}
 body:has(>.practice-header) main[data-question="714"]{padding-top:12px!important;padding-bottom:12px!important}
}