/* Give tests the full page and keep navigation with the answer choices. */
#practice-dialog[open],#assessment-dialog[open]{position:fixed;inset:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:22px max(24px,calc((100vw - 1180px)/2));border:0;border-radius:0;box-sizing:border-box;overflow-x:hidden;overflow-y:auto;background:#faf9f3}
body:has(#practice-dialog[open],#assessment-dialog[open]){overflow:hidden}
#practice-dialog>.close,#assessment-dialog>.close{position:fixed;top:14px;right:18px;z-index:5;background:#faf9f3}
:is(#practice-dialog,#assessment-dialog):has(.question-text) :is(#practice-title,#assessment-title){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:is(#practice-dialog,#assessment-dialog):has(.question-text) .eyebrow{padding-right:48px;font-size:11px;letter-spacing:1px}
:is(#practice-dialog,#assessment-dialog):has(.question-text) .question-meta{margin-top:14px;font-size:12px}
:is(#practice-dialog,#assessment-dialog):has(.question-text) .bar{margin:10px 0 16px}
:is(#practice-dialog,#assessment-dialog) .question-text{font-size:clamp(18px,2vw,24px);line-height:1.4;margin:0 0 10px}
:is(#practice-dialog,#assessment-dialog) .report-question-link{font-size:12px;margin:8px 0 12px}
:is(#practice-dialog,#assessment-dialog) .diagram{flex-wrap:nowrap;align-items:center;gap:8px;margin:12px 0 18px;min-width:0}
:is(#practice-dialog,#assessment-dialog) .diagram svg{width:clamp(38px,8vw,88px);height:auto;max-height:115px;min-width:0;flex:0 1 88px}
:is(#practice-dialog,#assessment-dialog) .diagram>span{flex-shrink:0;font-size:18px}
:is(#practice-dialog,#assessment-dialog) .matrix-diagram{margin:12px auto;gap:6px}
:is(#practice-dialog,#assessment-dialog) .matrix-diagram svg{width:75px;height:60px}
:is(#practice-dialog,#assessment-dialog) .matrix-diagram>span{min-height:60px;font-size:25px}
:is(#practice-dialog,#assessment-dialog) .matrix-three{grid-template-columns:repeat(3,75px);max-width:237px}
:is(#practice-dialog,#assessment-dialog) .answers{gap:10px}
:is(#practice-dialog,#assessment-dialog) .answer{padding:10px;min-height:52px;font-size:15px;gap:10px}
:is(#practice-dialog,#assessment-dialog) .answer svg{width:75px;height:auto;max-height:110px;max-width:100px;min-width:0;flex:0 1 100px}
:is(#practice-dialog,#assessment-dialog) .hint{margin-top:10px}
:is(#practice-dialog,#assessment-dialog) .feedback{padding:12px;margin:10px 0;font-size:13px}
:is(#practice-dialog,#assessment-dialog) .assessment-tools{margin:12px 0;gap:14px}
:is(#practice-dialog,#assessment-dialog) .modal-actions{position:sticky;bottom:-22px;z-index:3;background:#faf9f3;border-top:1px solid #cbd4bf;padding:12px 0 18px;margin-top:14px;box-shadow:0 -10px 14px #faf9f3}
:is(#practice-dialog,#assessment-dialog) .question-navigator{margin-top:14px;padding-top:12px}
@media(min-width:850px){:is(#practice-dialog,#assessment-dialog):has(.answers svg) .answers{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){#practice-dialog[open],#assessment-dialog[open]{padding:18px 16px}:is(#practice-dialog,#assessment-dialog) .answers{grid-template-columns:repeat(2,minmax(0,1fr))}:is(#practice-dialog,#assessment-dialog) .answer{font-size:14px;overflow-wrap:anywhere}:is(#practice-dialog,#assessment-dialog) .answer svg{max-height:85px}:is(#practice-dialog,#assessment-dialog) .diagram{gap:4px}:is(#practice-dialog,#assessment-dialog) .diagram>span{font-size:12px}:is(#practice-dialog,#assessment-dialog) .modal-actions{bottom:-18px;padding-bottom:calc(14px + env(safe-area-inset-bottom))}:is(#practice-dialog,#assessment-dialog) .passage{font-size:14px;line-height:1.7;padding:14px}:is(#practice-dialog,#assessment-dialog) .modal-actions .button{min-height:44px}}

@media(min-width:1000px){:is(#practice-dialog,#assessment-dialog):has(.answer:nth-child(5)) .answers{grid-template-columns:repeat(5,minmax(0,1fr))}}