/*! © 2026 Nuvira Technologies, LLC. All rights reserved. WonderWise, its tutors, artwork, voices, lessons and software may not be copied, scraped or reused. See /terms. */
/* Test Prep Center: the lesson screen in test prep mode. Test Prep Home reuses the Learning Center start-screen styles; these are the few extras. */
.test-prep-start #test-prep-tests-step{margin-top:14px}
.test-prep-start #test-prep-tests-step[hidden]{display:none}
.test-prep-tests .learning-subject[data-status=soon]{border-style:dashed;color:var(--muted)}
.test-prep-tests .learning-subject[data-status=soon][aria-pressed="true"]{background:var(--action-selected);border-color:var(--action-border);color:var(--ink)}
.test-prep-tests .learning-subject small{margin-left:6px;padding:1px 7px;border-radius:999px;background:#FFF1CF;color:#8A5A00;font-size:13px;font-weight:700}
body[data-center=test-prep] #show-homework{display:none}
@media(max-width:760px){.test-prep-start #test-prep-tests-step{margin-top:10px}.test-prep-tests .learning-subject small{display:block;margin:2px 0 0;padding:0;background:none;font-size:12px}}
/* Lesson, tips and practice tiles are peer destinations; their labels explain the difference. */
.learning-topic:is(.learning-topic-tips,.learning-topic-test){background:var(--action-secondary-bg);border:2px solid var(--action-border);color:var(--ink)}
.learning-topic.learning-topic-tips small{color:var(--muted)}
.learning-topic:is(.learning-topic-tips,.learning-topic-test):hover:not(:disabled){background:var(--action-selected);border-color:var(--action-primary-hover)}
/* How ready am I?: one row per skill with its level, its range and the 80% target line. Colors come from brand.css. */
.test-readiness{grid-column:1/-1;margin-top:6px;padding:14px 16px;border:1px solid var(--line);border-radius:18px;background:var(--haze)}
.test-readiness-heading{margin:0 0 8px;font:650 19px/1.25 var(--heading);color:var(--ink)}
.readiness-rows{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.readiness-row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center}
.readiness-skill{font-weight:700;font-size:17px;color:var(--ink)}
.readiness-level{justify-self:end;padding:2px 10px;border-radius:999px;font-size:14px;font-weight:700;background:var(--soft);color:var(--muted)}
.readiness-ready .readiness-level{background:var(--sage);color:var(--lagoon-deep)}
.readiness-close .readiness-level{background:var(--lamp);color:var(--ink)}
.readiness-not-yet .readiness-level{background:var(--peach);color:var(--ink)}
.readiness-bar{grid-column:1/-1;position:relative;height:12px;border-radius:999px;background:var(--soft);overflow:hidden}
.readiness-range{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--lagoon)}
.readiness-close .readiness-range{background:var(--lamp)}.readiness-not-yet .readiness-range{background:var(--peach)}
.readiness-target{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink)}
.readiness-detail{grid-column:1/-1;font-size:15px;color:var(--muted)}
.readiness-review{grid-column:1/-1;justify-self:start;min-height:44px;padding:8px 16px;border:2px solid var(--action-border);border-radius:var(--action-radius);background:var(--action-secondary-bg);color:var(--ink);font-weight:700;font-size:16px;cursor:pointer}
.readiness-note{margin:12px 0 0;font-size:14px;line-height:1.45;color:var(--muted)}
@media(max-width:760px){.test-readiness{padding:12px}.readiness-skill{font-size:16px}}
/* Your State: sits beside the grade, with its own visible label. */
.learning-start .test-prep-state-field>span{display:inline;font:700 clamp(20px,2vw,24px)/1.2 var(--heading);color:var(--ink)}
.learning-start .test-prep-state-field select{width:220px}
/* "Your state test" pill on the SAT, PSAT or ACT chip the learner's state gives. */
.test-prep-tests .learning-subject small.test-prep-yours{background:var(--sage);color:var(--lagoon-deep)}
.test-prep-tests .learning-subject[aria-pressed="true"] small.test-prep-yours{background:var(--surface);color:var(--lagoon-deep)}
/* About this test: the state's own test name, when and how it is given, tips, and score levels. */
.state-about{grid-column:1/-1;display:grid;gap:10px;padding:16px 18px;border:2px solid var(--lagoon);border-radius:20px;background:var(--surface);
  background-image:linear-gradient(90deg,var(--lamp) 0 33%,var(--peach) 33% 66%,var(--lagoon) 66%);background-size:100% 6px;background-repeat:no-repeat}
.state-about-eyebrow{margin:4px 0 0;font-size:15px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--lagoon-deep)}
.state-about-text{margin:0;font-size:18px;line-height:1.45;color:var(--ink)}
.state-choose{justify-self:start;min-height:var(--action-height);padding:8px 18px;border:2px solid var(--ink);border-radius:var(--action-radius);background:var(--lamp);color:var(--ink);font:700 17px/1.2 var(--font);cursor:pointer}
.state-card{display:grid;gap:8px;padding:14px 16px;border-radius:16px;background:var(--haze)}
.state-card-title{margin:0;font:650 22px/1.25 var(--heading);color:var(--ink)}
.state-card-name{margin:-4px 0 0;font-size:15px;color:var(--muted)}
.state-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.state-facts li{display:flex;gap:6px;align-items:baseline;padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:16px;color:var(--ink)}
.state-facts b{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--lagoon-deep)}
.state-card h5,.state-more h5{margin:4px 0 0;font-size:16px;font-weight:800;color:var(--ink)}
.state-tips{margin:0;padding-left:22px;display:grid;gap:4px;font-size:17px;line-height:1.4;color:var(--ink)}
.state-tips li::marker{color:var(--lagoon)}
.state-card-note{margin:0;padding:8px 12px;border-radius:12px;background:color-mix(in srgb,var(--lamp) 20%,var(--surface));font-size:16px;color:var(--ink)}
.state-practice{margin:4px 0 0}
.state-practice-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;border:2px solid var(--action-border);border-radius:var(--action-radius);background:var(--action-secondary-bg);color:var(--ink);font-weight:700;text-decoration:none}
.state-more summary{cursor:pointer;font-weight:700;font-size:16px;color:var(--lagoon-deep);padding:10px 0;min-height:44px}
.state-more[open]{display:grid;gap:6px}
.state-parts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.state-parts li{padding:3px 10px;border-radius:999px;background:var(--soft);font-size:15px;font-weight:600;color:var(--ink)}
.state-levels{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px;counter-reset:level}
.state-levels li{counter-increment:level;padding:3px 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:15px;color:var(--ink)}
.state-levels li::before{content:counter(level) " · ";font-weight:800;color:var(--lagoon-deep)}
.state-about-also{margin:0;font-size:16px;color:var(--muted)}
.state-about-also-title{margin:0 0 4px;font-weight:800;color:var(--ink)}
.state-also-list{margin:0;padding-left:20px;display:grid;gap:6px}
.state-also-link{min-height:44px;padding:6px 12px;font-size:15px}
.state-about-change{margin:0;padding:8px 12px;border-left:4px solid var(--lamp);border-radius:8px;background:color-mix(in srgb,var(--lamp) 20%,var(--surface));font-size:16px;color:var(--ink)}
.state-about-source{margin:0;font-size:14px;color:var(--muted)}
/* High school: the state's course name, with its test beside it. */
.test-prep-state-course small{margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--sage);color:var(--lagoon-deep);font:700 13px/1.4 var(--font);vertical-align:middle}
.test-prep-more{margin-top:14px}
@media(max-width:760px){
  .learning-start .test-prep-state-field>span{font-size:19px}
  .learning-start .test-prep-state-field select{width:auto;max-width:190px}
  .state-about{padding:12px;gap:8px}.state-card{padding:12px}.state-card-title{font-size:19px}
  .state-facts li{font-size:15px;padding:5px 10px}.state-tips{font-size:16px}.state-about-text{font-size:17px}
}
/* Test Prep Home and its two test pages (Study For This Test, Take a Practice Test).
   Every section is one bordered box with one title style: same font, size and gold underline. */
/* Cards and their header bands come from brand.css (.section-card, .section-title); only Test Prep spacing lives here. */
.test-prep-section{margin-top:14px}
.test-prep-section[hidden]{display:none}
.test-prep-start #test-prep-tests-step{margin-top:14px}
/* Your State, then Grade Level, on one row. */
/* Choose State and Grade Level: two sections side by side, each with the same header band. */
.learning-start .test-prep-pickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.learning-start .test-prep-pickers .test-prep-section{margin-top:0}
.learning-start .test-prep-pickers select{width:100%;max-width:none}
#test-prep-home-note:empty{display:none}
#test-prep-home-note{margin-top:10px}
/* Choose a Test: the test cards in one row of equal widths, the info panel for the chosen card under them at the same width. */
.test-prep-choose{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.learning-start .test-prep-tests{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:10px}
.test-prep-tests .learning-subject.test-prep-test{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-height:72px;padding:10px 14px;border-radius:16px;text-align:left;font-size:19px;line-height:1.15}
.test-prep-tests .learning-subject.test-prep-test small{margin:0;white-space:nowrap}
.test-prep-tests .learning-subject.test-prep-test[aria-pressed=true]{background:var(--action-selected);color:var(--ink);border-color:var(--action-border);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:4px}
.test-prep-tests .learning-subject.test-prep-test[aria-pressed=true]:hover:not(:disabled){background:var(--action-selected)}
.test-prep-info-panel{align-self:stretch}
.test-prep-info-panel .state-facts li{flex:0 1 auto}
.test-prep-info-panel .state-card{padding:10px 12px}
.test-prep-info-title{margin:-4px 0 0;font:650 22px/1.2 var(--heading);color:var(--ink)}
.test-prep-info-more{margin:0;font-size:15px;color:var(--muted)}
#test-prep-info:empty{display:none}
/* The two buttons under the test choice. */
.test-prep-go{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.test-prep-go-button{display:inline-flex;align-items:center;justify-content:center;text-align:center;min-height:var(--action-height);padding:10px 18px;border:2px solid var(--ink);border-radius:var(--action-radius);background:var(--lamp);color:var(--ink);font:700 19px/1.2 var(--font);cursor:pointer}
:is(.test-prep-go-button,.state-choose):is(:hover,:active,[aria-pressed=true]):not(:disabled){background:var(--lagoon);border-color:#fff;color:#fff}
:is(.test-prep-back,.readiness-review,.state-practice-link):hover:not(:disabled){background:var(--action-selected);border-color:var(--action-primary-hover)}
:is(.test-prep-back,.readiness-review,.state-practice-link):active:not(:disabled){background:var(--sage);border-color:var(--action-primary-pressed)}
:is(.test-prep-go-button,.state-choose,.test-prep-back,.readiness-review,.state-practice-link):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
:is(.test-prep-go-button,.state-choose,.test-prep-back,.readiness-review):disabled{background:var(--action-disabled-bg);border-color:var(--action-disabled-border);color:var(--action-disabled-ink);opacity:1;box-shadow:none;transform:none;cursor:not-allowed}
/* A test page: back to Home, which test this is, the page title, then its sections. */
.test-prep-crumbs{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px}
.test-prep-back{min-height:var(--action-height);padding:8px 16px;border:2px solid var(--action-border);border-radius:var(--action-radius);background:var(--action-secondary-bg);color:var(--ink);font:700 17px/1.2 var(--font);cursor:pointer}
.test-prep-crumb{margin:0;font-size:17px;font-weight:700;color:var(--ink)}
.learning-start .test-prep-page-heading{margin:12px 0 0}
.test-prep-page-body>.learning-topics-note{margin-top:12px}
.test-prep-section .test-readiness{margin:0;padding:0;border:0;background:none}
.test-prep-section .test-readiness-heading{margin:12px 0 8px;font:650 19px/1.25 var(--heading)}
.test-prep-section .test-readiness-heading:first-child{margin-top:0}
.test-prep-section .state-about.test-prep-about{border:0;padding:0;background-image:none}
.test-prep-switch{display:block;margin:16px 0 0;width:100%}
.test-prep-switch[hidden]{display:none}
@media(max-width:760px){
  .learning-start .test-prep-tests{grid-auto-flow:row;grid-template-columns:repeat(2,minmax(0,1fr))}
  .test-prep-tests .learning-subject.test-prep-test{min-height:60px;font-size:17px}
  .test-prep-tests .learning-subject.test-prep-test small{display:block}
  .learning-start .test-prep-pickers{gap:10px}
  .test-prep-go{gap:8px}.test-prep-go-button{min-height:48px;padding:8px 10px;font-size:16px}
  .test-prep-crumb{font-size:15px}
}
/* Pace clock (modules/pace-clock.js): time so far beside test pace on SAT, PSAT and ACT practice tests. Going over is fine, so over pace only turns the chip gold. */
.pace-clock{align-self:flex-start;margin:8px 0 4px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--pool);color:var(--lagoon);font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.3}
.pace-clock[data-over=true]{background:color-mix(in srgb,var(--lamp) 18%,var(--surface));border-color:var(--lamp);color:var(--ink)}
.pace-clock[data-done=true]{border-radius:12px;font-weight:600}
@media(max-width:760px){.pace-clock{font-size:15px;padding:7px 12px}}