.test-onboarding { padding-block: 1.5rem 3rem; }
.test-onboarding > header { max-width: 52rem; margin-bottom: 1.5rem; }
.test-onboarding h1 { font-size: var(--type-display); line-height: 1.15; margin: .6rem 0; }
.test-onboarding .test-requirements { font-size: .85rem; color: var(--gold-light); }
.test-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 19rem); gap: 1.5rem; align-items: start; }
.test-dialogue { padding: clamp(1rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 1rem; background: var(--ink-soft, var(--coal)); min-width: 0; }
.test-progress { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; padding: 0 0 1.25rem; margin: 0 0 1.25rem; border-bottom: 1px solid var(--line-soft); list-style: none; }
.test-progress li { display: grid; gap: .5rem; font-size: .75rem; color: var(--ivory-muted); }
.test-progress span { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; }
.test-progress [aria-current] { color: var(--ivory); }.test-progress [aria-current] span { color: var(--ink); background: var(--gold); }
.test-panel[hidden], .test-onboarding [hidden] { display: none; }
.test-panel { animation: test-panel-in 220ms ease-out; }
.test-panel h2 { margin: 0 0 .75rem; font-size: var(--type-section); line-height: 1.25; }
.test-panel p { line-height: 1.7; color: var(--ivory); }
.test-panel .primary-action { display: inline-flex; justify-content: center; gap: .75rem; min-height: 48px; max-width: 100%; padding: .9rem 1.1rem; white-space: normal; }
.test-next { display: block; min-height: 48px; padding: .75rem 0; margin-top: .65rem; border: 0; background: transparent; color: var(--ivory); cursor: pointer; text-align: left; }
.test-back-row { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; border-top: 1px solid var(--line-soft); padding-top: .75rem; margin-top: 1rem; }
.test-back-row button { padding: .6rem .8rem; min-height: 44px; color: var(--ivory); background: transparent; border: 1px solid var(--line); cursor: pointer; }
.test-back-row > span { flex: 1; min-width: 12rem; color: var(--ivory-muted); font-size: .75rem; line-height: 1.6; }
.test-note { padding: 1.25rem; border: 1px solid var(--line-soft); border-radius: 1rem; }
.test-note > span { color: var(--gold); font-size: 2rem; }.test-note h2 { font-size: 1.25rem; line-height: 1.5; }.test-note p { font-size: .9rem; line-height: 1.7; color: var(--ivory-muted); }
.test-note nav { display: flex; gap: 1rem; }.test-note a { display: inline-flex; min-height: 44px; align-items: center; color: var(--gold-light); }
.test-onboarding :is(a, button):focus-visible { outline: 2px solid var(--gold-light); outline-offset: 4px; }
.test-stage-status:empty { display: none; }.test-stage-status { color: var(--ivory-muted); font-size: .8rem; margin-bottom: .75rem; }
@keyframes test-panel-in { from { opacity: .5; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media(max-width: 760px) { .test-layout { grid-template-columns: minmax(0, 1fr); }.test-panel .primary-action { width: 100%; }.test-progress { gap: .5rem; }.test-progress li { font-size: .7rem; } }
@media(prefers-reduced-motion: reduce) { .test-panel { animation: none; } }
body[data-reduced-motion="true"] .test-panel { animation: none; }